Restore parameters from modal

package.json

@@ -20,6 +20,8 @@
   "devDependencies": {
     "@floating-ui/core": "^1.2.6",
     "@floating-ui/dom": "^1.2.8",
+    "@types/cytoscape": "^3.19.9",
+    "@types/dompurify": "^3.0.2",
     "@zerodevx/svelte-toast": "^0.9.3",
     "eslint": "^8.37.0",
     "eslint-config-prettier": "^8.8.0",
@@ -74,13 +76,15 @@
     "@litegraph-ts/tsconfig": "workspace:*",
     "@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.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.0.3",

pnpm-lock.yaml

@@ -97,9 +97,6 @@ importers:
       '@tsconfig/svelte':
         specifier: ^4.0.1
         version: 4.0.1
-      '@types/dompurify':
-        specifier: ^3.0.2
-        version: 3.0.2
       canvas-to-svg:
         specifier: ^1.0.3
         version: 1.0.3
@@ -118,6 +115,15 @@ importers:
       csv-parse:
         specifier: ^5.3.10
         version: 5.3.10
+      cytoscape:
+        specifier: ^3.25.0
+        version: 3.25.0
+      cytoscape-dagre:
+        specifier: ^2.5.0
+        version: 2.5.0(cytoscape@3.25.0)
+      deep-equal:
+        specifier: ^2.2.1
+        version: 2.2.1
       dompurify:
         specifier: ^3.0.3
         version: 3.0.3
@@ -188,6 +194,12 @@ importers:
       '@floating-ui/dom':
         specifier: ^1.2.8
         version: 1.2.8
+      '@types/cytoscape':
+        specifier: ^3.19.9
+        version: 3.19.9
+      '@types/dompurify':
+        specifier: ^3.0.2
+        version: 3.0.2
       '@zerodevx/svelte-toast':
         specifier: ^0.9.3
         version: 0.9.3(svelte@3.59.1)
@@ -1363,7 +1375,6 @@ packages:
       '@codemirror/language': ^6.0.0
       '@codemirror/state': ^6.0.0
       '@codemirror/view': ^6.0.0
-      '@lezer/common': ^1.0.0
     dependencies:
       '@codemirror/language': 6.6.0
       '@codemirror/state': 6.2.0
@@ -2368,6 +2379,10 @@ packages:
     resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==}
     dev: true
 
+  /@types/cytoscape@3.19.9:
+    resolution: {integrity: sha512-oqCx0ZGiBO0UESbjgq052vjDAy2X53lZpMrWqiweMpvVwKw/2IiYDdzPFK6+f4tMfdv9YKEM9raO5bAZc3UYBg==}
+    dev: true
+
   /@types/d3-dsv@3.0.0:
     resolution: {integrity: sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==}
 
@@ -2395,7 +2410,7 @@ packages:
     resolution: {integrity: sha512-YBL4ziFebbbfQfH5mlC+QTJsvh0oJUrWbmxKMyEdL7emlHJqGR2Qb34TEFKj+VCayBvjKy3xczMFNhugThUsfQ==}
     dependencies:
       '@types/trusted-types': 2.0.3
-    dev: false
+    dev: true
 
   /@types/estree@1.0.1:
     resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
@@ -2482,7 +2497,7 @@ packages:
 
   /@types/trusted-types@2.0.3:
     resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
-    dev: false
+    dev: true
 
   /@types/uuid@9.0.1:
     resolution: {integrity: sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==}
@@ -2702,6 +2717,13 @@ packages:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
 
+  /array-buffer-byte-length@1.0.0:
+    resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
+    dependencies:
+      call-bind: 1.0.2
+      is-array-buffer: 3.0.2
+    dev: false
+
   /array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
@@ -2752,6 +2774,11 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /available-typed-arrays@1.0.5:
+    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
+    engines: {node: '>= 0.4'}
+    dev: false
+
   /aws-sign2@0.7.0:
     resolution: {integrity: sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==}
     dev: false
@@ -3118,8 +3145,6 @@ packages:
       '@codemirror/search': 6.4.0
       '@codemirror/state': 6.2.0
       '@codemirror/view': 6.11.0
-    transitivePeerDependencies:
-      - '@lezer/common'
     dev: false
 
   /codemirror@6.0.1(@lezer/common@1.0.2):
@@ -3324,6 +3349,23 @@ packages:
       stream-transform: 3.2.6
     dev: false
 
+  /cytoscape-dagre@2.5.0(cytoscape@3.25.0):
+    resolution: {integrity: sha512-VG2Knemmshop4kh5fpLO27rYcyUaaDkRw+6PiX4bstpB+QFt0p2oauMrsjVbUamGWQ6YNavh7x2em2uZlzV44g==}
+    peerDependencies:
+      cytoscape: ^3.2.22
+    dependencies:
+      cytoscape: 3.25.0
+      dagre: 0.8.5
+    dev: false
+
+  /cytoscape@3.25.0:
+    resolution: {integrity: sha512-7MW3Iz57mCUo6JQCho6CmPBCbTlJr7LzyEtIkutG255HLVd4XuBg2I9BkTZLI/e4HoaOB/BiAzXuQybQ95+r9Q==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      heap: 0.2.7
+      lodash: 4.17.21
+    dev: false
+
   /d3-array@3.2.2:
     resolution: {integrity: sha512-yEEyEAbDrF8C6Ob2myOBLjwBLck1Z89jMGFee0oPsn95GqjerpaOA4ch+vc2l0FNFFwMD5N7OCSEN5eAlsUbgQ==}
     engines: {node: '>=12'}
@@ -3474,6 +3516,13 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /dagre@0.8.5:
+    resolution: {integrity: sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==}
+    dependencies:
+      graphlib: 2.1.8
+      lodash: 4.17.21
+    dev: false
+
   /dashdash@1.14.1:
     resolution: {integrity: sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==}
     engines: {node: '>=0.10'}
@@ -3539,6 +3588,29 @@ packages:
     dependencies:
       type-detect: 4.0.8
 
+  /deep-equal@2.2.1:
+    resolution: {integrity: sha512-lKdkdV6EOGoVn65XaOsPdH4rMxTZOnmFyuIkMjM1i5HHCbfjC97dawgTAy0deYNfuqUqW+Q5VrVaQYtUpSd6yQ==}
+    dependencies:
+      array-buffer-byte-length: 1.0.0
+      call-bind: 1.0.2
+      es-get-iterator: 1.1.3
+      get-intrinsic: 1.2.0
+      is-arguments: 1.1.1
+      is-array-buffer: 3.0.2
+      is-date-object: 1.0.5
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.2
+      isarray: 2.0.5
+      object-is: 1.1.5
+      object-keys: 1.1.1
+      object.assign: 4.1.4
+      regexp.prototype.flags: 1.5.0
+      side-channel: 1.0.4
+      which-boxed-primitive: 1.0.2
+      which-collection: 1.0.1
+      which-typed-array: 1.1.9
+    dev: false
+
   /deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
@@ -3552,6 +3624,14 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /define-properties@1.2.0:
+    resolution: {integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-property-descriptors: 1.0.0
+      object-keys: 1.1.1
+    dev: false
+
   /delaunator@5.0.0:
     resolution: {integrity: sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==}
     dependencies:
@@ -3653,6 +3733,20 @@ packages:
       is-arrayish: 0.2.1
     dev: true
 
+  /es-get-iterator@1.1.3:
+    resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.0
+      has-symbols: 1.0.3
+      is-arguments: 1.1.1
+      is-map: 2.0.2
+      is-set: 2.0.2
+      is-string: 1.0.7
+      isarray: 2.0.5
+      stop-iteration-iterator: 1.0.0
+    dev: false
+
   /es6-promise@3.3.1:
     resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==}
 
@@ -4258,6 +4352,12 @@ packages:
     resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
     dev: true
 
+  /for-each@0.3.3:
+    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
+    dependencies:
+      is-callable: 1.2.7
+    dev: false
+
   /forever-agent@0.6.1:
     resolution: {integrity: sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==}
     dev: false
@@ -4348,6 +4448,10 @@ packages:
   /function-bind@1.1.1:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
 
+  /functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+    dev: false
+
   /gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -4458,6 +4562,12 @@ packages:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
     dev: true
 
+  /gopd@1.0.1:
+    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+    dependencies:
+      get-intrinsic: 1.2.0
+    dev: false
+
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
@@ -4465,6 +4575,12 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
+  /graphlib@2.1.8:
+    resolution: {integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==}
+    dependencies:
+      lodash: 4.17.21
+    dev: false
+
   /happy-dom@9.18.3:
     resolution: {integrity: sha512-b7iMGYeIXvUryNultA0AHEVU0FPpb2djJ/xSVlMDfP7HG4z7FomdqkCEpWtSv1zDL+t1gRUoBbpqFCoUBvjYtg==}
     dependencies:
@@ -4490,6 +4606,10 @@ packages:
       har-schema: 2.0.0
     dev: false
 
+  /has-bigints@1.0.2:
+    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+    dev: false
+
   /has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
@@ -4500,17 +4620,34 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /has-property-descriptors@1.0.0:
+    resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
+    dependencies:
+      get-intrinsic: 1.2.0
+    dev: false
+
   /has-symbols@1.0.3:
     resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
     engines: {node: '>= 0.4'}
     dev: false
 
+  /has-tostringtag@1.0.0:
+    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: false
+
   /has@1.0.3:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
     engines: {node: '>= 0.4.0'}
     dependencies:
       function-bind: 1.1.1
 
+  /heap@0.2.7:
+    resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
+    dev: false
+
   /htm@3.1.1:
     resolution: {integrity: sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==}
     dev: false
@@ -4639,26 +4776,77 @@ packages:
   /inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  /internal-slot@1.0.5:
+    resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.2.0
+      has: 1.0.3
+      side-channel: 1.0.4
+    dev: false
+
   /internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
     dev: false
 
+  /is-arguments@1.1.1:
+    resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      has-tostringtag: 1.0.0
+    dev: false
+
+  /is-array-buffer@3.0.2:
+    resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.0
+      is-typed-array: 1.1.10
+    dev: false
+
   /is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
     dev: true
 
+  /is-bigint@1.0.4:
+    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
+    dependencies:
+      has-bigints: 1.0.2
+    dev: false
+
   /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.2.0
 
+  /is-boolean-object@1.1.2:
+    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      has-tostringtag: 1.0.0
+    dev: false
+
+  /is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+    dev: false
+
   /is-core-module@2.12.0:
     resolution: {integrity: sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==}
     dependencies:
       has: 1.0.3
 
+  /is-date-object@1.0.5:
+    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+    dev: false
+
   /is-docker@2.2.1:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
     engines: {node: '>=8'}
@@ -4685,6 +4873,17 @@ packages:
     dependencies:
       is-extglob: 2.1.1
 
+  /is-map@2.0.2:
+    resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
+    dev: false
+
+  /is-number-object@1.0.7:
+    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+    dev: false
+
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -4698,15 +4897,69 @@ packages:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
     dev: true
 
+  /is-regex@1.1.4:
+    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      has-tostringtag: 1.0.0
+    dev: false
+
+  /is-set@2.0.2:
+    resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
+    dev: false
+
+  /is-shared-array-buffer@1.0.2:
+    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
+    dependencies:
+      call-bind: 1.0.2
+    dev: false
+
   /is-stream@2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
     engines: {node: '>=8'}
     dev: true
 
+  /is-string@1.0.7:
+    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.0
+    dev: false
+
+  /is-symbol@1.0.4:
+    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: false
+
+  /is-typed-array@1.1.10:
+    resolution: {integrity: sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-tostringtag: 1.0.0
+    dev: false
+
   /is-typedarray@1.0.0:
     resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
     dev: false
 
+  /is-weakmap@2.0.1:
+    resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
+    dev: false
+
+  /is-weakset@2.0.2:
+    resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.2.0
+    dev: false
+
   /is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
@@ -4718,6 +4971,10 @@ packages:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
     dev: false
 
+  /isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+    dev: false
+
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
@@ -5716,6 +5973,29 @@ packages:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
     dev: false
 
+  /object-is@1.1.5:
+    resolution: {integrity: sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+    dev: false
+
+  /object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+    dev: false
+
+  /object.assign@4.1.4:
+    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      has-symbols: 1.0.3
+      object-keys: 1.1.1
+    dev: false
+
   /once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
@@ -6135,6 +6415,15 @@ packages:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
     dev: false
 
+  /regexp.prototype.flags@1.5.0:
+    resolution: {integrity: sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.2.0
+      functions-have-names: 1.2.3
+    dev: false
+
   /request@2.88.2:
     resolution: {integrity: sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==}
     engines: {node: '>= 6'}
@@ -6507,6 +6796,13 @@ packages:
   /std-env@3.3.3:
     resolution: {integrity: sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==}
 
+  /stop-iteration-iterator@1.0.0:
+    resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      internal-slot: 1.0.5
+    dev: false
+
   /stream-transform@3.2.6:
     resolution: {integrity: sha512-/pyOvaCQFqYTmrFhmMbnAEVo3SsTx1H39eUVPOtYeAgbEUc+rDo7GoP8LbHJgU83mKtzJe/7Nq/ipaAnUOHgJQ==}
     dev: false
@@ -8361,6 +8657,37 @@ packages:
       webidl-conversions: 3.0.1
     dev: false
 
+  /which-boxed-primitive@1.0.2:
+    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
+    dependencies:
+      is-bigint: 1.0.4
+      is-boolean-object: 1.1.2
+      is-number-object: 1.0.7
+      is-string: 1.0.7
+      is-symbol: 1.0.4
+    dev: false
+
+  /which-collection@1.0.1:
+    resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
+    dependencies:
+      is-map: 2.0.2
+      is-set: 2.0.2
+      is-weakmap: 2.0.1
+      is-weakset: 2.0.2
+    dev: false
+
+  /which-typed-array@1.1.9:
+    resolution: {integrity: sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.5
+      call-bind: 1.0.2
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-tostringtag: 1.0.0
+      is-typed-array: 1.1.10
+    dev: false
+
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}

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,
-function LoraLoader(stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs) {
+    decoder: ComfyPromptDecoder
-    const params = stdPrompt.parameters
-
-    const lora: ComfyBoxStdGroupLoRA = {
-        model_name: inputs["lora_name"],
-        strength_unet: inputs["strength_model"],
-        strength_tenc: inputs["strength_clip"]
-    }
-
-    if (params.lora)
-        params.lora.push(lora)
-    else
-        params.lora = [lora]
 }
 
-const ALL_CONVERTERS: Record<string, ComfyPromptConverter> = {
+//
-    LoraLoader
+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
+
+        for (const lora of loras) {
+            lora.model_hashes = {
+                addnet_shorthash: null // TODO find hashes for model!
+            }
+        }
+    },
+    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;
+            }
+        }
+    }
+}
+
+// input name -> group/key in standard prompt
+type ComfyStdPromptMapping = Record<string, string>
+
+type ComfyStdPromptSpec = {
+    paramMapping: ComfyStdPromptMapping,
+    extraParams?: Record<string, string>,
+    converter?: ComfyPromptConverter,
+}
+
+const ALL_SPECS: Record<string, ComfyStdPromptSpec> = {
+    "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 {
+                                target = target[name]
+                            }
+                            console.warn(index, name, target)
+                        }
+
+                        let name = trail[trail.length - 1]
+                        target[name] = inputValue
+                        console.warn(stdPrompt.parameters)
+                    }
+                }
+
+                // 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 converter for comfy class!", classType)
+                console.warn("No StdPrompt type spec for comfy class!", classType)
             }
         }
 
-        return stdPrompt
+        return [StdPrompt.safeParse(stdPrompt), stdPrompt];
     }
 }

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))
                 }
             }
         });
@@ -1028,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;
 
@@ -1064,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,
@@ -1100,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/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,15 +8,17 @@
   */
  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";
@@ -25,11 +27,11 @@
  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

@@ -32,6 +32,7 @@
  import ComfyQueueGridDisplay from "./ComfyQueueGridDisplay.svelte";
 	import { WORKFLOWS_VIEW } from "./ComfyBoxWorkflowsView.svelte";
 	import uiQueueState from "$lib/stores/uiQueueState";
+	import type { SerializedAppState, SerializedPromptInputsAll } from "./ComfyApp";
 
  export let app: ComfyApp;
 
@@ -124,19 +125,22 @@
 
  let showModal = false;
  let expandAll = false;
- let selectedPrompt = null;
+ let selectedPrompt: SerializedPromptInputsAll | null = null;
+ 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
@@ -145,6 +149,7 @@
 
  function closeModal() {
      selectedPrompt = null
+     selectedWorkflow = null;
      selectedImages = []
      showModal = false;
      expandAll = false;
@@ -165,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/ComfySettingsView.svelte

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

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>
+    <div on:click|stopPropagation
+         on:contextmenu|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 } 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 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 = {
@@ -64,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
@@ -123,66 +160,37 @@
 
      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">
-        <Block>
+        <Tabs bind:selected={selectedTab}>
-            <Accordion label="Prompt" open={expandAll || comfyBoxImages.length === 0}>
+            <TabItem id="restore-parameters" name="Restore Parameters">
-                <div class="scroll-container">
+                <RestoreParamsTable {restoreParams} on:restore={doRestoreParams} />
-                    <Block>
+            </TabItem>
-                        {#each Object.entries(prompt) as [nodeID, inputs], i}
+            {#if comfyBoxImages.length > 0}
-                            {@const classType = inputs.class_type}
+                <TabItem id="send-outputs" name="Send Outputs">
-                            {@const filtered = Object.entries(inputs.inputs).filter((i) => !isInputLink(i[1]))}
-                            {#if filtered.length > 0}
-                                <div class="accordion">
-                                    <Block padding={true}>
-                                        <Accordion label="Node {i+1}: {classType}" open={expandAll}>
-                                            {#each filtered as [inputName, input]}
-                                                <Block>
-                                                    <button class="copy-button" on:click={() => handleCopy(nodeID, inputName, input)}>
-                                                        {#if copiedNodeID === nodeID && copiedInputName === inputName}
-                                                            <span class="copied-icon">
-                                                                <Check />
-                                                            </span>
-                                                        {:else}
-                                                            <span class="copy-text"><Copy /></span>
-                                                        {/if}
-                                                    </button>
-                                                    <div>
-                                                        {#if isInputLink(input)}
-                                                            Link {input[0]} -> {input[1]}
-                                                        {:else if typeof input === "object"}
-                                                            <Block>
-                                                                <BlockLabel
-                                                                    Icon={JSONIcon}
-                                                                    show_label={true}
-                                                                    label={inputName}
-                                                                    float={true}
-                                                                />
-                                                                <JSONComponent value={input} />
-                                                            </Block>
-                                                        {:else if isMultiline(input)}
-                                                            {@const lines = Math.max(countNewLines(input), input.length / splitLength)}
-                                                            <TextBox label={inputName} value={formatInput(input)} {lines} max_lines={lines} />
-                                                        {:else}
-                                                            <TextBox label={inputName} value={formatInput(input)} lines={1} max_lines={1} />
-                                                        {/if}
-                                                    </div>
-                                                </Block>
-                                            {/each}
-                                        </Accordion>
-                                    </Block>
-                                </div>
-                            {/if}
-                        {/each}
-                    </Block>
-                </div>
-            </Accordion>
-        </Block>
-        {#if comfyBoxImages.length > 0}
-            <Block>
-                <Accordion label="Send Outputs To..." open={true}>
                     <Block>
                         <BlockTitle>Output type: {litegraphType}</BlockTitle>
                         {#if receiveTargets.length > 0}
@@ -191,9 +199,94 @@
                                 <div class="outputs-message">No receive output targets found across all workflows.</div>
                         {/if}
                     </Block>
-                </Accordion>
+                </TabItem>
-            </Block>
+            {/if}
-        {/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>
+                    <div class="scroll-container">
+                        <Block>
+                            {#each Object.entries(prompt) as [nodeID, inputs], i}
+                                {@const classType = inputs.class_type}
+                                {@const filtered = Object.entries(inputs.inputs).filter((i) => !isInputLink(i[1]))}
+                                {#if filtered.length > 0}
+                                    <div class="accordion">
+                                        <Block padding={true}>
+                                            <Accordion label="Node {i+1}: {classType}" open={expandAll}>
+                                                {#each filtered as [inputName, input]}
+                                                    <Block>
+                                                        <button class="copy-button" on:click={() => handleCopy(nodeID, inputName, input)}>
+                                                            {#if copiedNodeID === nodeID && copiedInputName === inputName}
+                                                                <span class="copied-icon">
+                                                                    <Check />
+                                                                </span>
+                                                            {:else}
+                                                                <span class="copy-text"><Copy /></span>
+                                                            {/if}
+                                                        </button>
+                                                        <div>
+                                                            {#if isInputLink(input)}
+                                                                Link {input[0]} -> {input[1]}
+                                                            {:else if typeof input === "object"}
+                                                                <Block>
+                                                                    <BlockLabel
+                                                                        Icon={JSONIcon}
+                                                                        show_label={true}
+                                                                        label={inputName}
+                                                                        float={true}
+                                                                    />
+                                                                    <JSONComponent value={input} />
+                                                                </Block>
+                                                            {:else if isMultiline(input)}
+                                                                {@const lines = Math.max(countNewLines(input), input.length / splitLength)}
+                                                                <TextBox label={inputName} value={formatInput(input)} {lines} max_lines={lines} />
+                                                            {:else}
+                                                                <TextBox label={inputName} value={formatInput(input)} lines={1} max_lines={1} />
+                                                            {/if}
+                                                        </div>
+                                                    </Block>
+                                                {/each}
+                                            </Accordion>
+                                        </Block>
+                                    </div>
+                                {/if}
+                            {/each}
+                        </Block>
+                    </div>
+                </Block>
+            </TabItem>
+        </Tabs>
     </div>
     {#if images.length > 0}
         <div class="image-container">
@@ -221,21 +314,34 @@
 
      display: flex;
      flex-wrap: nowrap;
-     overflow-y: auto;
 
      flex-direction: column;
-     @media (min-width: 1600px) {
+     @media (min-width: 1200px) {
          flex-direction: row;
      }
  }
 
+ .scroll-container {
+     position: relative;
+     /* overflow-y: auto; */
+     flex: 1 1 0%;
+ }
+
+ .json {
+     @include json-view;
+ }
+
  .prompt-and-sends {
      width: 50%;
 
-     .scroll-container {
+     overflow-y: auto;
-         position: relative;
+
-         /* overflow-y: auto; */
+     :global(>.tabs) {
-         flex: 1 1 0%;
+         height: 100%;
+
+         :global(>.tabitem) {
+             overflow-y: auto;
+         }
      }
 
      .copy-button {

src/lib/components/WidgetContainer.svelte

@@ -70,39 +70,34 @@
 
 
 {#if container}
-    {#key $attrsChanged}
+    <Container {layoutState} {container} {classes} {zIndex} {showHandles} {isMobile} />
-        <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}
+    <div class="widget {widget.attrs.classes} {getWidgetClass()}"
-        {#key $propsChanged}
+         class:edit={edit}
-            <div class="widget {widget.attrs.classes} {getWidgetClass()}"
+         class:hovered
-                 class:edit={edit}
+         class:selected
-                 class:hovered
+         class:patch-affected={$selectionState.currentPatchHoveredNodes.has(widget.node.id)}
-                 class:selected
+         class:is-executing={$queueState.runningNodeID && $queueState.runningNodeID == widget.node.id}
-                 class:is-executing={$queueState.runningNodeID && $queueState.runningNodeID == widget.node.id}
+         class:hidden={hidden}
-                 class:hidden={hidden}
+    >
-            >
+        <svelte:component this={widget.node.svelteComponentType} {widget} {isMobile} />
-                <svelte:component this={widget.node.svelteComponentType} {widget} {isMobile} />
+    </div>
-            </div>
+    {#if hidden && edit}
-            {#if hidden && edit}
+        <div class="handle handle-hidden" class:hidden={!edit} />
-                <div class="handle handle-hidden" class:hidden={!edit} />
+    {/if}
-            {/if}
+    {#if showHandles || hovered}
-            {#if showHandles || hovered}
+        <div class="handle handle-widget"
-                <div class="handle handle-widget"
+             class:hovered
-                     class:hovered
+             data-drag-item-id={widget.id}
-                     data-drag-item-id={widget.id}
+             on:mousedown={_startDrag}
-                     on:mousedown={_startDrag}
+             on:touchstart={_startDrag}
-                     on:touchstart={_startDrag}
+             on:mouseup={_stopDrag}
-                     on:mouseup={_stopDrag}
+             on:touchend={_stopDrag}/>
-                     on:touchend={_stopDrag}/>
+    {/if}
-            {/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/EditTemplateModal.svelte

@@ -13,7 +13,7 @@
  import Textbox from "@gradio/form/src/Textbox.svelte";
  import type { ModalData } from "$lib/stores/modalState";
  import { writable, type Writable } from "svelte/store";
-	import { negmod } from "$lib/utils";
+ import { negmod } from "$lib/utils";
  const DOMPurify = createDOMPurify(window);
 
  export let templateAndSvg: SerializedComfyBoxTemplate;

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/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 = {

src/lib/nodes/widgets/ComfyGalleryNode.ts

@@ -18,7 +18,8 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
         defaultValue: [],
         index: 0,
         updateMode: "replace",
-        autoSelectOnUpdate: true
+        autoSelectOnUpdate: true,
+        excludeFromJourney: true,
     }
 
     static slotLayout: SlotLayout = {
@@ -130,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 = {

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/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
             {

src/lib/stores/queueState.ts

@@ -36,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,

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

@@ -62,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}`
     }
@@ -89,6 +89,13 @@ 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);
 
@@ -97,10 +104,7 @@ function convertPendingEntry(entry: QueueEntry, status: QueueUIEntryStatus): Que
         result.images = thumbnails.map(convertComfyOutputToComfyURL);
     }
 
-    const outputs = Object.values(entry.outputs)
+    const outputs = getQueueEntryImages(entry);
-        .filter(o => o.images)
-        .flatMap(o => o.images)
-        .map(convertComfyOutputToComfyURL);
     if (outputs) {
         result.images = result.images.concat(outputs)
     }
@@ -111,11 +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)
-        .map(convertComfyOutputToComfyURL);
-    result.images = images
 
     if (entry.message)
         result.submessage = entry.message
@@ -132,6 +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

@@ -15,6 +15,8 @@ export type UIState = {
     forceSaveUserState: boolean | null,
 
     activeError: PromptID | null
+
+    saveHistory: boolean
 }
 
 type UIStateOps = {
@@ -34,7 +36,9 @@ const store: Writable<UIState> = writable(
         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,8 +4,8 @@ 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";
@@ -143,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()
@@ -247,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)
@@ -741,3 +745,7 @@ const MOBILE_USER_AGENTS = ["iPhone", "iPad", "Android", "BlackBerry", "WebOs"].
 export function isMobileBrowser(userAgent: string): boolean {
     return MOBILE_USER_AGENTS.some(a => userAgent.match(a))
 }
+
+export function isMultiline(input: any, splitLength: number = 50): boolean {
+    return typeof input === "string" && (input.length > splitLength || countNewLines(input) > 1);
+}

src/lib/widgets/ImageUploadWidget.svelte

@@ -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/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/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

@@ -12,7 +12,7 @@ import { visualizer } from "rollup-plugin-visualizer";
 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({