Restore parameters from modal

Center on node button
History fixes
2023-06-05 13:05:46 -05:00 · 2023-06-03 21:56:28 -05:00 · 2023-06-03 20:11:24 -05:00 · 2023-06-03 17:25:24 -05:00 · 2023-06-03 16:14:30 -05:00 · 2023-06-03 00:38:09 -05:00
83 changed files with 4681 additions and 819 deletions
--- a/index.html
+++ b/index.html
@@ -7,17 +7,6 @@
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="theme-color" content="#2196f3">
    </head>
-    <script>
-     if(!window.location.search.substring(1) == "desktop=true") {
-         if (navigator.userAgent.match(/iPhone/i)
-             || navigator.userAgent.match(/iPad/i)
-             || navigator.userAgent.match(/Android/i)
-             || navigator.userAgent.match(/Blackberry/i)
-             || navigator.userAgent.match(/WebOs/i)) {
-             window.location.href = "/mobile/"
-         }
-     }
-    </script>
    <body>
        <div id="app-root"/>
        <script type="module" src='/src/main-desktop.ts'></script>
--- a/2
+++ b/2
--- a/package.json
+++ b/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",
@@ -30,7 +32,7 @@
    "prettier-plugin-svelte": "^2.10.0",
    "rollup-plugin-visualizer": "^5.9.0",
    "sass": "^1.61.0",
-    "svelte": "^3.58.0",
+    "svelte": "^3.59.0",
    "svelte-check": "^3.2.0",
    "svelte-dnd-action": "^0.9.22",
    "typescript": "^5.0.3",
@@ -50,6 +52,7 @@
    "@codemirror/search": "^6.2.2",
    "@codemirror/state": "^6.1.2",
    "@codemirror/view": "^6.4.1",
+    "@dogagenc/svelte-markdown": "^0.2.4",
    "@gradio/accordion": "workspace:*",
    "@gradio/atoms": "workspace:*",
    "@gradio/button": "workspace:*",
@@ -73,18 +76,21 @@
    "@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",
    "framework7-svelte": "^8.0.3",
    "img-comparison-slider": "^8.0.0",
+    "marked": "^5.0.3",
    "pollen-css": "^4.6.2",
    "radix-icons-svelte": "^1.2.1",
    "style-mod": "^4.0.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,9 @@ importers:
      '@codemirror/view':
        specifier: ^6.4.1
        version: 6.11.0
+      '@dogagenc/svelte-markdown':
+        specifier: ^0.2.4
+        version: 0.2.4(svelte@3.59.1)
      '@gradio/accordion':
        specifier: workspace:*
        version: link:gradio/js/accordion
@@ -90,13 +93,10 @@ importers:
        version: link:litegraph/packages/tsconfig
      '@sveltejs/vite-plugin-svelte':
        specifier: ^2.1.1
-        version: 2.1.1(svelte@3.58.0)(vite@4.3.8)
+        version: 2.1.1(svelte@3.59.1)(vite@4.3.8)
      '@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
@@ -115,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
@@ -130,6 +139,9 @@ importers:
      img-comparison-slider:
        specifier: ^8.0.0
        version: 8.0.0
+      marked:
+        specifier: ^5.0.3
+        version: 5.0.3
      pollen-css:
        specifier: ^4.6.2
        version: 4.6.2
@@ -150,13 +162,13 @@ importers:
        version: 1.5.2
      svelte-preprocess:
        specifier: ^5.0.3
-        version: 5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3)
+        version: 5.0.3(sass@1.61.0)(svelte@3.59.1)(typescript@5.0.3)
      svelte-select:
        specifier: ^5.5.3
        version: 5.5.3
      svelte-splitpanes:
        specifier: ^0.7.13
-        version: 0.7.13(svelte@3.58.0)
+        version: 0.7.13(svelte@3.59.1)
      svelte-tiny-virtual-list:
        specifier: ^2.0.5
        version: 2.0.5
@@ -182,9 +194,15 @@ 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.58.0)
+        version: 0.9.3(svelte@3.59.1)
      eslint:
        specifier: ^8.37.0
        version: 8.37.0
@@ -193,7 +211,7 @@ importers:
        version: 8.8.0(eslint@8.37.0)
      eslint-plugin-svelte3:
        specifier: ^4.0.0
-        version: 4.0.0(eslint@8.37.0)(svelte@3.58.0)
+        version: 4.0.0(eslint@8.37.0)(svelte@3.59.1)
      happy-dom:
        specifier: ^9.18.3
        version: 9.18.3
@@ -205,7 +223,7 @@ importers:
        version: 2.8.7
      prettier-plugin-svelte:
        specifier: ^2.10.0
-        version: 2.10.0(prettier@2.8.7)(svelte@3.58.0)
+        version: 2.10.0(prettier@2.8.7)(svelte@3.59.1)
      rollup-plugin-visualizer:
        specifier: ^5.9.0
        version: 5.9.0
@@ -213,14 +231,14 @@ importers:
        specifier: ^1.61.0
        version: 1.61.0
      svelte:
-        specifier: ^3.58.0
-        version: 3.58.0
+        specifier: ^3.59.0
+        version: 3.59.1
      svelte-check:
        specifier: ^3.2.0
-        version: 3.2.0(sass@1.61.0)(svelte@3.58.0)
+        version: 3.2.0(sass@1.61.0)(svelte@3.59.1)
      svelte-dnd-action:
        specifier: ^0.9.22
-        version: 0.9.22(svelte@3.58.0)
+        version: 0.9.22(svelte@3.59.1)
      typescript:
        specifier: ^5.0.3
        version: 5.0.3
@@ -1357,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
@@ -1501,6 +1518,16 @@ packages:
      w3c-keyname: 2.2.6
    dev: false

+  /@dogagenc/svelte-markdown@0.2.4(svelte@3.59.1):
+    resolution: {integrity: sha512-UmmHHZ7rilAbBYiNsxuL5d8Ac79EhFXrhjsUNr30BPzn+T7ohJR8kHMFjDYDQc0tOQOfKbICvkPAQ6cprqS3Eg==}
+    peerDependencies:
+      svelte: ^3.0.0
+    dependencies:
+      '@types/marked': 4.3.1
+      marked: 4.3.0
+      svelte: 3.59.1
+    dev: false
+
  /@esbuild/android-arm64@0.17.18:
    resolution: {integrity: sha512-/iq0aK0eeHgSC3z55ucMAHO05OIqmQehiGay8eP5l/5l+iEr4EIbh4/MI8xD9qRFjqzgkc0JkX0LculNC9mXBw==}
    engines: {node: '>=12'}
@@ -2260,7 +2287,7 @@ packages:
      - supports-color
    dev: true

-  /@sveltejs/vite-plugin-svelte@2.1.1(svelte@3.58.0)(vite@4.3.8):
+  /@sveltejs/vite-plugin-svelte@2.1.1(svelte@3.59.1)(vite@4.3.8):
    resolution: {integrity: sha512-7YeBDt4us0FiIMNsVXxyaP4Hwyn2/v9x3oqStkHU3ZdIc5O22pGwUwH33wUqYo+7Itdmo8zxJ45Qvfm3H7UUjQ==}
    engines: {node: ^14.18.0 || >= 16}
    peerDependencies:
@@ -2271,8 +2298,8 @@ packages:
      deepmerge: 4.3.1
      kleur: 4.1.5
      magic-string: 0.30.0
-      svelte: 3.58.0
-      svelte-hmr: 0.15.1(svelte@3.58.0)
+      svelte: 3.59.1
+      svelte-hmr: 0.15.1(svelte@3.59.1)
      vite: 4.3.8(sass@1.61.0)
      vitefu: 0.2.4(vite@4.3.8)
    transitivePeerDependencies:
@@ -2352,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==}

@@ -2379,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==}
@@ -2423,6 +2454,10 @@ packages:
    resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
    dev: true

+  /@types/marked@4.3.1:
+    resolution: {integrity: sha512-vSSbKZFbNktrQ15v7o1EaH78EbWV+sPQbPjHG+Cp8CaNcPFUEfjZ0Iml/V0bFDwsTlYe8o6XC5Hfdp91cqPV2g==}
+    dev: false
+
  /@types/node@10.17.60:
    resolution: {integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==}
    dev: false
@@ -2462,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==}
@@ -2585,12 +2620,12 @@ packages:
      pretty-format: 27.5.1
    dev: false

-  /@zerodevx/svelte-toast@0.9.3(svelte@3.58.0):
+  /@zerodevx/svelte-toast@0.9.3(svelte@3.59.1):
    resolution: {integrity: sha512-VPKWR4A9y01fyXRscu9HiTj7tV2hFrpRKZvGwMmaPXfHIXR1D9+NNsz0HXcQ7qZ0C5UaHS3n9uNtPtIcAXT7RQ==}
    peerDependencies:
      svelte: ^3.57.0
    dependencies:
-      svelte: 3.58.0
+      svelte: 3.59.1
    dev: true

  /abab@2.0.6:
@@ -2682,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'}
@@ -2732,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
@@ -3098,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):
@@ -3304,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'}
@@ -3454,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'}
@@ -3519,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
@@ -3532,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:
@@ -3633,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==}

@@ -3924,14 +4038,14 @@ packages:
      - typescript
    dev: true

-  /eslint-plugin-svelte3@4.0.0(eslint@8.37.0)(svelte@3.58.0):
+  /eslint-plugin-svelte3@4.0.0(eslint@8.37.0)(svelte@3.59.1):
    resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==}
    peerDependencies:
      eslint: '>=8.0.0'
      svelte: ^3.2.0
    dependencies:
      eslint: 8.37.0
-      svelte: 3.58.0
+      svelte: 3.59.1
    dev: true

  /eslint-scope@5.1.1:
@@ -4238,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
@@ -4328,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'}
@@ -4438,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==}

@@ -4445,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:
@@ -4470,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'}
@@ -4480,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
@@ -4619,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'}
@@ -4665,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'}
@@ -4678,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'}
@@ -4698,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
@@ -5481,6 +5758,18 @@ packages:
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
    dev: false

+  /marked@4.3.0:
+    resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
+    engines: {node: '>= 12'}
+    hasBin: true
+    dev: false
+
+  /marked@5.0.3:
+    resolution: {integrity: sha512-KUONa43Uk74uUNWMxh6lfaNYmSAsRMiDAaX8QBCCRVXzEufR0zX6T33vrGbvTnQLL02ungDM3KSzZtO+chJaHg==}
+    engines: {node: '>= 18'}
+    hasBin: true
+    dev: false
+
  /md5-hex@3.0.1:
    resolution: {integrity: sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==}
    engines: {node: '>=8'}
@@ -5684,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:
@@ -5959,14 +6271,14 @@ packages:
    engines: {node: '>= 0.8.0'}
    dev: true

-  /prettier-plugin-svelte@2.10.0(prettier@2.8.7)(svelte@3.58.0):
+  /prettier-plugin-svelte@2.10.0(prettier@2.8.7)(svelte@3.59.1):
    resolution: {integrity: sha512-GXMY6t86thctyCvQq+jqElO+MKdB09BkL3hexyGP3Oi8XLKRFaJP1ud/xlWCZ9ZIa2BxHka32zhHfcuU+XsRQg==}
    peerDependencies:
      prettier: ^1.16.4 || ^2.0.0
      svelte: ^3.2.0
    dependencies:
      prettier: 2.8.7
-      svelte: 3.58.0
+      svelte: 3.59.1
    dev: true

  /prettier@2.8.7:
@@ -6103,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'}
@@ -6475,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
@@ -6627,7 +6955,7 @@ packages:
      - sugarss
    dev: true

-  /svelte-check@3.2.0(sass@1.61.0)(svelte@3.58.0):
+  /svelte-check@3.2.0(sass@1.61.0)(svelte@3.59.1):
    resolution: {integrity: sha512-6ZnscN8dHEN5Eq5LgIzjj07W9nc9myyBH+diXsUAuiY/3rt0l65/LCIQYlIuoFEjp2F1NhXqZiJwV9omPj9tMw==}
    hasBin: true
    peerDependencies:
@@ -6639,8 +6967,8 @@ packages:
      import-fresh: 3.3.0
      picocolors: 1.0.0
      sade: 1.8.1
-      svelte: 3.58.0
-      svelte-preprocess: 5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3)
+      svelte: 3.59.1
+      svelte-preprocess: 5.0.3(sass@1.61.0)(svelte@3.59.1)(typescript@5.0.3)
      typescript: 5.0.3
    transitivePeerDependencies:
      - '@babel/core'
@@ -6654,18 +6982,18 @@ packages:
      - sugarss
    dev: true

-  /svelte-dnd-action@0.9.22(svelte@3.58.0):
+  /svelte-dnd-action@0.9.22(svelte@3.59.1):
    resolution: {integrity: sha512-lOQJsNLM1QWv5mdxIkCVtk6k4lHCtLgfE59y8rs7iOM6erchbLC9hMEFYSveZz7biJV0mpg7yDSs4bj/RT/YkA==}
    peerDependencies:
      svelte: '>=3.23.0'
    dependencies:
-      svelte: 3.58.0
+      svelte: 3.59.1
    dev: true

  /svelte-feather-icons@4.0.0:
    resolution: {integrity: sha512-4ieUsjp+VYa1r6y80jDt9zRiRUZyJNbESpRdHdJJhiBubyuXX96A7f1UZSK4olxzP6Qsg5ZAuyZlnmvD+/swAA==}
    dependencies:
-      svelte: 3.58.0
+      svelte: 3.59.1
    dev: false

  /svelte-floating-ui@1.2.8:
@@ -6689,6 +7017,16 @@ packages:
      svelte: '>=3.19.0'
    dependencies:
      svelte: 3.58.0
+    dev: true
+
+  /svelte-hmr@0.15.1(svelte@3.59.1):
+    resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==}
+    engines: {node: ^12.20 || ^14.13.1 || >= 16}
+    peerDependencies:
+      svelte: '>=3.19.0'
+    dependencies:
+      svelte: 3.59.1
+    dev: false

  /svelte-preprocess@4.10.1(postcss-load-config@3.1.4)(postcss@8.4.21)(svelte@3.58.0)(typescript@4.5.4):
    resolution: {integrity: sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==}
@@ -6796,7 +7134,7 @@ packages:
      typescript: 5.0.3
    dev: true

-  /svelte-preprocess@5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3):
+  /svelte-preprocess@5.0.3(sass@1.61.0)(svelte@3.59.1)(typescript@5.0.3):
    resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==}
    engines: {node: '>= 14.10.0'}
    requiresBuild: true
@@ -6840,7 +7178,7 @@ packages:
      sass: 1.61.0
      sorcery: 0.11.0
      strip-indent: 3.0.0
-      svelte: 3.58.0
+      svelte: 3.59.1
      typescript: 5.0.3

  /svelte-range-slider-pips@2.0.1:
@@ -6854,13 +7192,13 @@ packages:
      svelte-floating-ui: 1.2.8
    dev: false

-  /svelte-splitpanes@0.7.13(svelte@3.58.0):
+  /svelte-splitpanes@0.7.13(svelte@3.59.1):
    resolution: {integrity: sha512-LiAf4OEZqRJanoax9mextXtQ0JzrdCqX2tOgVO+yJu2XNyGz5j5fGbw8+5AXgOasPi/m1nv8n2Lt+XYFRfvIGg==}
    peerDependencies:
      svelte: ^3.54.0
    dependencies:
      esm-env-robust: 0.0.3
-      svelte: 3.58.0
+      svelte: 3.59.1
    dev: false

  /svelte-tiny-virtual-list@2.0.5:
@@ -6883,6 +7221,10 @@ packages:
    resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
    engines: {node: '>= 8'}

+  /svelte@3.59.1:
+    resolution: {integrity: sha512-pKj8fEBmqf6mq3/NfrB9SLtcJcUvjYSWyePlfCqN9gujLB25RitWK8PvFzlwim6hD/We35KbPlRteuA6rnPGcQ==}
+    engines: {node: '>= 8'}
+
  /swiper@9.2.4:
    resolution: {integrity: sha512-L7y3K/iiMXNYQ94FbfcJn7jex4QPnS4+voXGupTdC+UHW4XrR40QDdm4c9hXJ+Br0Il7PP0vP1W3goM9/Ly6Sg==}
    engines: {node: '>= 4.7.0'}
@@ -8315,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'}
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4,12 +4,12 @@
 import "@litegraph-ts/core/css/litegraph.css";
 import "./scss/global.scss";

- import { onMount } from 'svelte';
-
 export let app: ComfyAppState;
+ export let isMobile: boolean
 </script>

-<ComfyApp {app}/>
-
-<style>
-</style>
+{#if isMobile}
+    <div>Redirecting...</div>
+{:else}
+    <ComfyApp {app}/>
+{/if}
--- a/src/AppMobile.svelte
+++ b/src/AppMobile.svelte
@@ -2,22 +2,22 @@
 import { onMount } from "svelte";
 import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";

- import { App, View } from "framework7-svelte"
+ import { App, View, Preloader } from "framework7-svelte"

 import { f7, f7ready } from 'framework7-svelte';

 import "framework7/css/bundle"
 import "./scss/global.scss";

+ import MainToolbar from './mobile/MainToolbar.svelte'
 import GenToolbar from './mobile/GenToolbar.svelte'

- import HomePage from './mobile/routes/home.svelte';
- import AboutPage from './mobile/routes/about.svelte';
- import LoginPage from './mobile/routes/login.svelte';
- import GraphPage from './mobile/routes/graph.svelte';
- import ListSubWorkflowsPage from './mobile/routes/list-subworkflows.svelte';
- import SubWorkflowPage from './mobile/routes/subworkflow.svelte';
+ import WorkflowsPage from './mobile/routes/workflows.svelte';
+ import QueuePage from './mobile/routes/queue.svelte';
+ import GalleryPage from './mobile/routes/gallery.svelte';
+ import WorkflowPage from './mobile/routes/workflow.svelte';
 import type { Framework7Parameters, Modal } from "framework7/types";
+ import interfaceState from "$lib/stores/interfaceState";

 export let app: ComfyApp;

@@ -51,11 +51,40 @@
     }
 }

+ let appSetupPromise: Promise<void> = null;
+ let loading = true;
+ let lastSize = Number.POSITIVE_INFINITY;
+
+ $: f7 && f7.setDarkMode($interfaceState.isDarkMode)
+
 onMount(async () => {
-     await app.setup();
+     // let isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+     $interfaceState.isDarkMode = true;
+
+     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+         $interfaceState.isDarkMode = event.matches;
+     });
+
+     appSetupPromise = app.setup().then(() => {
+         // Autosave every minute
+         setInterval(() => app.saveStateToLocalStorage(false), 60 * 1000)
+         loading = false
+     });
+
     window.addEventListener("backbutton", onBackKeyDown, false);
     window.addEventListener("popstate", onBackKeyDown, false);
- });
+
+     // Blur any input elements when the virtual keyboard closes
+     // Otherwise tapping on other input events can refocus the input from way
+     // off the screen
+     window.visualViewport.addEventListener("resize", function(e) {
+         if (e.target.height > lastSize) {
+             // Assume keyboard was hidden
+             (document.activeElement as HTMLElement)?.blur();
+         }
+         lastSize = e.target.height
+     })
+ })

 /*
    Now we need to map components to routes.
@@ -66,36 +95,42 @@
     routes: [
         {
             path: '/',
-             component: HomePage,
+             component: WorkflowsPage,
             options: {
                 props: { app }
             }
         },
         {
-             path: '/about/',
-             component: AboutPage,
-         },
-         {
-             path: '/login/',
-             component: LoginPage,
-         },
-         {
-             path: '/graph/',
-             component: GraphPage,
+             path: '/workflows',
+             component: WorkflowsPage,
             options: {
                 props: { app }
             }
         },
         {
-             path: '/subworkflows/',
-             component: ListSubWorkflowsPage,
+             path: '/queue/',
+             component: QueuePage,
             options: {
                 props: { app }
             }
         },
         {
-             path: '/subworkflows/:subworkflowID/',
-             component: SubWorkflowPage,
+             path: '/gallery/',
+             component: GalleryPage,
+             options: {
+                 props: { app }
+             }
+         },
+         // {
+         //     path: '/graph/',
+         //     component: GraphPage,
+         //     options: {
+         //         props: { app }
+         //     }
+         // },
+         {
+             path: '/workflows/:workflowIndex/',
+             component: WorkflowPage,
             options: {
                 props: { app }
             }
@@ -113,23 +148,90 @@
     actions: {
         closeOnEscape: true,
     },
+     touch: {
+         tapHold: true
+     }
 }
+
+ let body;
+ const bindBody = (node) => (body = node);
+ function setDarkClass(isDark: boolean) {
+     if (!body)
+         return;
+     if (isDark) {
+         body.classList.add("dark");
+     } else {
+         body.classList.remove("dark");
+     }
+ };
+ $: setDarkClass($interfaceState.isDarkMode);
 </script>

-{#if app}
-    <App theme="auto" name="ComfyBox" {...f7params}>
-        <View
-            url="/"
-            main={true}
-            class="safe-areas"
-            masterDetailBreakpoint={768},
-            browserHistory=true,
-            browserHistoryRoot="/mobile/"
-        >
-            <GenToolbar {app} />
-        </View>
-    </App>
-    <div class="canvas-wrapper pane-wrapper" style="display: none">
-        <canvas id="graph-canvas" />
-    </div>
-{/if}
+<svelte:body use:bindBody />
+
+<App theme="auto" name="ComfyBox" {...f7params}>
+    {#if appSetupPromise}
+        {#await appSetupPromise}
+            <div class="comfy-app-loading">
+                <div>
+                    <Preloader color="blue" size={100} />
+                </div>
+            </div>
+        {:then}
+            <View
+                url="/workflows/"
+                main={true}
+                class="safe-areas"
+                masterDetailBreakpoint={768},
+                browserHistory=true,
+                browserHistoryRoot="/mobile/"
+            >
+                <MainToolbar {app} />
+                {#if $interfaceState.selectedWorkflowIndex && $interfaceState.showingWorkflow}
+                    <GenToolbar {app} />
+                {/if}
+            </View>
+    {:catch error}
+            <div class="comfy-loading-error">
+                <div>
+                    Error loading app
+                </div>
+                <div>{error}</div>
+                {#if error != null && error.stack}
+                    {@const lines = error.stack.split("\n")}
+                    {#each lines as line}
+                        <div style:font-size="16px">{line}</div>
+                    {/each}
+                {/if}
+            </div>
+        {/await}
+    {/if}
+</App>
+<div class="canvas-wrapper pane-wrapper" style="display: none">
+    <canvas id="graph-canvas" />
+</div>
+
+<style lang="scss">
+ .comfy-app-loading, .comfy-loading-error {
+     font-size: 40px;
+     color: var(--body-text-color);
+     justify-content: center;
+     margin: auto;
+     width: 100%;
+     height: 100%;
+     text-align: center;
+     flex-direction: column;
+     display: flex;
+     position: absolute;
+     z-index: 100000000;
+     pointer-events: none;
+     user-select: none;
+     top: 0px;
+ }
+
+ .comfy-app-loading > span {
+     display: flex;
+     flex-direction: row;
+     justify-content: center;
+ }
+</style>
--- a/src/lib/ComfyBoxStdPrompt.ts
+++ b/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>
--- a/src/lib/ComfyBoxStdPromptSerializer.ts
+++ b/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;
-
-function LoraLoader(stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs) {
-    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]
+export type ComfyPromptConverter = {
+    encoder: ComfyPromptEncoder,
+    decoder: ComfyPromptDecoder
 }

-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]
-            if (converter) {
-                converter(stdPrompt, inputs.inputs, nodeID)
+            const spec = ALL_SPECS[classType]
+            if (spec) {
+                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];
    }
 }
--- a/src/lib/ComfyGraphCanvas.ts
+++ b/src/lib/ComfyGraphCanvas.ts
@@ -25,7 +25,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
    activeErrors?: ComfyGraphErrors = null;
    blinkError: ComfyGraphErrorLocation | null = null;
    blinkErrorTime: number = 0;
-    highlightNodeAndInput: [LGraphNode, number] | null = null;
+    highlightNodeAndInput: [LGraphNode, number | null] | null = null;

    get comfyGraph(): ComfyGraph | null {
        return this.graph as ComfyGraph;
@@ -104,7 +104,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
        let state = get(queueState);
        let ss = get(selectionState);

-        const isRunningNode = node.id == state.runningNodeID
+        const isExecuting = state.executingNodes.has(node.id);
        const nodeErrors = this.activeErrors?.errorsByID[node.id];
        const isHighlightedNode = this.highlightNodeAndInput && this.highlightNodeAndInput[0].id === node.id;

@@ -133,11 +133,20 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
        else if (isHighlightedNode) {
            color = "cyan";
            thickness = 2
+
+            // Blink node if no input highlighted
+            if (this.highlightNodeAndInput[1] == null) {
+                if (this.blinkErrorTime > 0) {
+                    if ((Math.floor(this.blinkErrorTime / 2)) % 2 === 0) {
+                        color = null;
+                    }
+                }
+            }
        }
        else if (ss.currentHoveredNodes.has(node.id)) {
            color = "lightblue";
        }
-        else if (isRunningNode) {
+        else if (isExecuting) {
            color = "#0f0";
        }

@@ -153,7 +162,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
            this.drawNodeOutline(node, ctx, size, mouseOver, fgColor, bgColor, color, thickness)
        }

-        if (isRunningNode && state.progress) {
+        if (isExecuting && state.progress) {
            ctx.fillStyle = "green";
            ctx.fillRect(0, 0, size[0] * (state.progress.value / state.progress.max), 6);
            ctx.fillStyle = bgColor;
@@ -172,9 +181,11 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
            }
            if (draw) {
                const [node, inputSlot] = this.highlightNodeAndInput;
-                ctx.lineWidth = 2;
-                ctx.strokeStyle = color;
-                this.highlightNodeInput(node, inputSlot, ctx);
+                if (inputSlot != null) {
+                    ctx.lineWidth = 2;
+                    ctx.strokeStyle = color;
+                    this.highlightNodeInput(node, inputSlot, ctx);
+                }
            }
        }
    }
@@ -333,7 +344,8 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
    /**
     * Handle keypress
     *
-     * Ctrl + M mute/unmute selected nodes
+     * Ctrl + M      mute/unmute selected nodes
+     * Ctrl + Space  open node searchbox
     */
    override processKey(e: KeyboardEvent): boolean | undefined {
        const res = super.processKey(e);
@@ -353,7 +365,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
        }

        if (e.type == "keydown") {
-            // Ctrl + M mute/unmute
+            // Ctrl + M - mute/unmute
            if (e.keyCode == 77 && e.ctrlKey) {
                if (this.selected_nodes) {
                    for (var i in this.selected_nodes) {
@@ -366,6 +378,21 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
                }
                block_default = true;
            }
+            // Ctrl + Space - open node searchbox
+            else if (e.keyCode == 32 && e.ctrlKey) {
+                const event = new MouseEvent("click");
+                const searchBox = this.showSearchBox(event);
+                const rect = this.canvas.getBoundingClientRect();
+                const sbRect = searchBox.getBoundingClientRect();
+                const clientX = rect.left + rect.width / 2 - sbRect.width / 2;
+                const clientY = rect.top + rect.height / 2 - sbRect.height / 2
+                searchBox.style.left = `${clientX}px`;
+                searchBox.style.top = `${clientY}px`;
+                // TODO better API
+                event.initMouseEvent("click", true, true, window, 1, clientX, clientY, clientX, clientY, false, false, false, false, 0, null);
+                this.adjustMouseEvent(event);
+                block_default = true;
+            }
        }

        this.graph.change();
@@ -717,7 +744,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
        this.selectNode(node);
    }

-    jumpToNodeAndInput(node: LGraphNode, slotIndex: number) {
+    jumpToNodeAndInput(node: LGraphNode, slotIndex: number | null) {
        this.jumpToNode(node);
        this.highlightNodeAndInput = [node, slotIndex];
        this.blinkErrorTime = 20;
--- a/src/lib/ImageViewer.ts
+++ b/src/lib/ImageViewer.ts
@@ -165,7 +165,6 @@ export class ImageViewer {

        let urls = ImageViewer.get_gallery_urls(galleryElem)
        const [_currentButton, index] = ImageViewer.selected_gallery_button(galleryElem)
-        console.warn("Gallery!", index, urls, galleryElem)

        this.showModal(urls, index, galleryElem)
    }
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -6,7 +6,7 @@ import type { SerializedLGraph, UUID } from "@litegraph-ts/core";
 import type { SerializedLayoutState } from "./stores/layoutStates";
 import type { ComfyNodeDef, ComfyNodeDefInput } from "./ComfyNodeDef";
 import type { WorkflowInstID } from "./stores/workflowState";
-import type { ComfyAPIPromptErrorResponse } from "./apiErrors";
+import type { ComfyAPIPromptErrorResponse, ComfyExecutionError, ComfyInterruptedError } from "./apiErrors";

 export type ComfyPromptRequest = {
    client_id?: string,
@@ -45,7 +45,8 @@ export type ComfyAPIHistoryItem = [
 ]

 export type ComfyAPIPromptSuccessResponse = {
-    promptID: PromptID
+    promptID: PromptID,
+    number: number
 }

 export type ComfyAPIPromptResponse = ComfyAPIPromptSuccessResponse | ComfyAPIPromptErrorResponse
@@ -60,6 +61,20 @@ export type ComfyAPIHistoryResponse = {
    error?: string
 }

+export type ComfyDevice = {
+    name: string,
+    type: string,
+    index: number,
+    vram_total: number
+    vram_free: number
+    torch_vram_total: number
+    torch_vram_free: number
+}
+
+export type ComfyAPISystemStatsResponse = {
+    devices: ComfyDevice[]
+}
+
 export type SerializedComfyBoxPromptData = {
    subgraphs: string[]
 }
@@ -125,8 +140,17 @@ export default class ComfyAPI {
        }, 1000);
    }

+    private getHostname(): string {
+        let hostname = this.hostname || location.hostname;
+        if (hostname === "localhost") {
+            // For dev use, assume same hostname as connected server
+            hostname = location.hostname;
+        }
+        return hostname;
+    }
+
    private getBackendUrl(): string {
-        const hostname = this.hostname || location.hostname;
+        const hostname = this.getHostname()
        const port = this.port || location.port;
        return `${window.location.protocol}//${hostname}:${port}`
    }
@@ -146,7 +170,7 @@ export default class ComfyAPI {
            existingSession = "?clientId=" + existingSession;
        }

-        const hostname = this.hostname || location.hostname;
+        const hostname = this.getHostname()
        const port = this.port || location.port;

        this.socket = new WebSocket(
@@ -286,7 +310,7 @@ export default class ComfyAPI {
                }
                return res.json()
            })
-            .then(raw => { return { promptID: raw.prompt_id } })
+            .then(raw => { return { promptID: raw.prompt_id, number: raw.number } })
            .catch(error => { return error })
    }

@@ -362,4 +386,9 @@ export default class ComfyAPI {
    async interrupt(): Promise<Response> {
        return fetch(this.getBackendUrl() + "/interrupt", { method: "POST" });
    }
+
+    async getSystemStats(): Promise<ComfyAPISystemStatsResponse> {
+        return fetch(this.getBackendUrl() + "/system_stats")
+            .then(async (resp) => (await resp.json()) as ComfyAPISystemStatsResponse);
+    }
 }
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -39,6 +39,8 @@ import DanbooruTags from "$lib/DanbooruTags";
 import { deserializeTemplateFromSVG, type SerializedComfyBoxTemplate } from "$lib/ComfyBoxTemplate";
 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;

@@ -211,7 +213,13 @@ export default class ComfyApp {
        this.lCanvas.allow_interaction = uiUnlocked;

        // await this.#invokeExtensionsAsync("init");
-        const defs = await this.api.getNodeDefs();
+        let defs;
+        try {
+            defs = await this.api.getNodeDefs();
+        }
+        catch (error) {
+            throw new Error(`Could not reach ComfyUI at ${this.api.getBackendUrl()}`);
+        }
        await this.registerNodes(defs);

        // Load previous workflow
@@ -362,7 +370,7 @@ export default class ComfyApp {
        }
    }

-    saveStateToLocalStorage() {
+    saveStateToLocalStorage(doNotify: boolean = true) {
        try {
            uiState.update(s => { s.forceSaveUserState = true; return s; })
            const state = get(workflowState)
@@ -374,10 +382,12 @@ export default class ComfyApp {
            for (const workflow of workflows)
                workflow.isModified = false;
            workflowState.set(get(workflowState));
-            notify("Saved to local storage.")
+            if (doNotify)
+                notify("Saved to local storage.")
        }
        catch (err) {
-            notify(`Failed saving to local storage:\n${err}`, { type: "error" })
+            if (doNotify)
+                notify(`Failed saving to local storage:\n${err}`, { type: "error" })
        }
        finally {
            uiState.update(s => { s.forceSaveUserState = null; return s; })
@@ -395,6 +405,9 @@ export default class ComfyApp {
            return false;

        const workflows = state.workflows as SerializedAppState[];
+        if (workflows.length === 0)
+            return false;
+
        await Promise.all(workflows.map(w => {
            return this.openWorkflow(w, { refreshCombos: defs, warnMissingNodeTypes: false, setActive: false }).catch(error => {
                console.error("Failed restoring previous workflow", error)
@@ -598,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))
                }
            }
        });
@@ -639,6 +654,23 @@ export default class ComfyApp {
            }
        });

+        const config = get(configState);
+
+        if (config.pollSystemStatsInterval > 0) {
+            const interval = Math.max(config.pollSystemStatsInterval, 250);
+            const refresh = async () => {
+                try {
+                    const resp = await this.api.getSystemStats();
+                    systemState.updateState(resp)
+                } catch (error) {
+                    // console.debug("Error retrieving stats", error)
+                    systemState.updateState({ devices: [] })
+                }
+                setTimeout(refresh, interval);
+            }
+            setTimeout(refresh, interval);
+        }
+
        this.api.init();
    }

@@ -717,9 +749,11 @@ export default class ComfyApp {
    }

    private requestPermissions() {
-        if (Notification.permission === "default") {
-            Notification.requestPermission()
-                .then((result) => console.log("Notification status:", result));
+        if (window.Notification != null) {
+            if (window.Notification.permission === "default") {
+                window.Notification.requestPermission()
+                    .then((result) => console.log("Notification status:", result));
+            }
        }
    }

@@ -928,7 +962,11 @@ export default class ComfyApp {
        if (workflow.attrs.queuePromptButtonRunWorkflow) {
            // Hold control to queue at the front
            const num = this.ctrlDown ? -1 : 0;
-            this.queuePrompt(workflow, num, 1);
+            let tag = null;
+            if (workflow.attrs.queuePromptButtonDefaultWorkflow) {
+                tag = workflow.attrs.queuePromptButtonDefaultWorkflow
+            }
+            this.queuePrompt(workflow, num, 1, tag);
        }
    }

@@ -993,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;

@@ -1026,11 +1076,8 @@ export default class ComfyApp {

                    const p = this.graphToPrompt(workflow, tag);
                    const wf = this.serialize(workflow)
-                    console.debug(graphToGraphVis(workflow.graph))
-                    console.debug(promptToGraphVis(p))
-
-                    const stdPrompt = this.stdPromptSerializer.serialize(p);
-                    console.warn("STD", stdPrompt);
+                    // console.debug(graphToGraphVis(workflow.graph))
+                    // console.debug(promptToGraphVis(p))

                    const extraData: ComfyBoxPromptExtraData = {
                        extra_pnginfo: {
@@ -1063,8 +1110,11 @@ export default class ComfyApp {
                            workflowState.promptError(workflow.id, errorPromptID)
                        }
                        else {
-                            queueState.afterQueued(workflow.id, response.promptID, num, p.output, extraData)
-                            workflowState.afterQueued(workflow.id, response.promptID, p, extraData)
+                            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();
--- a/src/lib/components/ComfyBoxWorkflowsView.svelte
+++ b/src/lib/components/ComfyBoxWorkflowsView.svelte
@@ -1,5 +1,11 @@
 <script context="module" lang="ts">
- export const WORKFLOWS_VIEW: any = {}
+ // workaround a vite HMR bug
+ // shouts out to @rixo
+ // https://github.com/sveltejs/svelte/issues/8655
+ export const WORKFLOWS_VIEW = import.meta.hot?.data?.WORKFLOWS_VIEW || {}
+ if (import.meta.hot?.data) {
+     import.meta.hot.data.WORKFLOWS_VIEW = WORKFLOWS_VIEW
+ }
 </script>

 <script lang="ts">
--- a/src/lib/components/ComfyGraphErrorList.svelte
+++ b/src/lib/components/ComfyGraphErrorList.svelte
@@ -4,16 +4,36 @@
 import Accordion from "./gradio/app/Accordion.svelte";
 import uiState from '$lib/stores/uiState';
 import type { ComfyNodeDefInputType } from "$lib/ComfyNodeDef";
- import type { INodeInputSlot, LGraphNode, Subgraph } from "@litegraph-ts/core";
- import { UpstreamNodeLocator } from "./ComfyPromptSerializer";
+ import type { INodeInputSlot, LGraphNode, LLink, Subgraph } from "@litegraph-ts/core";
+ import { UpstreamNodeLocator, getUpstreamLink, nodeHasTag } from "./ComfyPromptSerializer";
 import JsonView from "./JsonView.svelte";

 export let app: ComfyApp;
 export let errors: ComfyGraphErrors;

+ let missingTag = null;
+ let nodeToJumpTo = null;
+ let inputSlotToHighlight = null;
+ let _errors = null
+
+ $: if (_errors != errors) {
+     _errors = errors;
+     if (errors.errors[0]) {
+         jumpToError(errors.errors[0])
+     }
+ }
+
 function closeList() {
     app.lCanvas.clearErrors();
     $uiState.activeError = null;
+     clearState()
+ }
+
+ function clearState() {
+     _errors = null;
+     missingTag = null;
+     nodeToJumpTo = null;
+     inputSlotToHighlight = null;
 }

 function getParentNode(error: ComfyGraphErrorLocation): Subgraph | null {
@@ -24,18 +44,26 @@
     return node.graph._subgraph_node
 }

- function canJumpToDisconnectedInput(error: ComfyGraphErrorLocation): boolean {
-     return error.errorType === ComfyNodeErrorType.RequiredInputMissing && error.input != null;
+ function jumpToFoundNode() {
+     if (nodeToJumpTo == null) {
+         return
+     }
+
+     app.lCanvas.jumpToNodeAndInput(nodeToJumpTo, inputSlotToHighlight);
 }

- function jumpToDisconnectedInput(error: ComfyGraphErrorLocation) {
+ function detectDisconnected(error: ComfyGraphErrorLocation) {
+     missingTag = null;
+     nodeToJumpTo = null;
+     inputSlotToHighlight = null;
+
     if (error.errorType !== ComfyNodeErrorType.RequiredInputMissing || error.input == null) {
         return
     }

     const node = app.lCanvas.graph.getNodeByIdRecursive(error.nodeID);

-     const inputIndex =node.findInputSlotIndexByName(error.input.name);
+     const inputIndex = node.findInputSlotIndexByName(error.input.name);
     if (inputIndex === -1) {
         return
     }
@@ -43,17 +71,33 @@
     // TODO multiple tags?
     const tag: string | null = error.queueEntry.extraData.extra_pnginfo.comfyBoxPrompt.subgraphs[0];

-     const test = (node: LGraphNode) => (node as any).isBackendNode
+     const test = (node: LGraphNode, currentLink: LLink) => {
+         if (!nodeHasTag(node, tag, true))
+             return true;
+
+         const [nextGraph, nextLink, nextInputSlot, nextNode] = getUpstreamLink(node, currentLink)
+         return nextLink == null;
+     };
     const nodeLocator = new UpstreamNodeLocator(test)
-     const [_, foundLink, foundInputSlot, foundPrevNode] = nodeLocator.locateUpstream(node, inputIndex, tag);
+     const [foundNode, foundLink, foundInputSlot, foundPrevNode] = nodeLocator.locateUpstream(node, inputIndex, null);

     if (foundInputSlot != null && foundPrevNode != null) {
-         app.lCanvas.jumpToNodeAndInput(foundPrevNode, foundInputSlot);
+         if (!nodeHasTag(foundNode, tag, true)) {
+             nodeToJumpTo = foundNode
+             missingTag = tag;
+             inputSlotToHighlight = null;
+         }
+         else {
+             nodeToJumpTo = foundPrevNode;
+             inputSlotToHighlight = foundInputSlot;
+         }
     }
 }

 function jumpToError(error: ComfyGraphErrorLocation) {
     app.lCanvas.jumpToError(error);
+
+     detectDisconnected(error);
 }

 function getInputTypeName(type: ComfyNodeDefInputType) {
@@ -88,26 +132,37 @@
                                <div class="error-details">
                                    <button class="jump-to-error" class:execution-error={isExecutionError} on:click={() => jumpToError(error)}><span>⮎</span></button>
                                    <div class="error-details-wrapper">
-                                        <span class="error-message" class:execution-error={isExecutionError}>{error.message}</span>
+                                        {#if missingTag && nodeToJumpTo}
+                                            <div class="error-input">
+                                                <div><span class="error-message">Node "{nodeToJumpTo.title}" was missing tag used in workflow:</span><span style:padding-left="0.2rem"><b>{missingTag}</b></span></div>
+                                                <div>Tags on node: <b>{(nodeToJumpTo?.properties?.tags || []).join(", ")}</b></div>
+                                            </div>
+                                        {:else}
+                                            <span class="error-message" class:execution-error={isExecutionError}>{error.message}</span>
+                                        {/if}
                                        {#if error.exceptionType}
                                            <span>({error.exceptionType})</span>
                                        {/if}
                                        {#if error.exceptionMessage && !isExecutionError}
                                            <div style:text-decoration="underline">{error.exceptionMessage}</div>
                                        {/if}
-                                        {#if error.input}
+                                        {#if nodeToJumpTo != null}
+                                            <div style:display="flex" style:flex-direction="row">
+                                                <button class="jump-to-error locate" on:click={jumpToFoundNode}><span>⮎</span></button>
+                                                {#if missingTag}
+                                                    <span>Jump to node: {nodeToJumpTo.title}</span>
+                                                {:else}
+                                                    <span>Find disconnected input</span>
+                                                {/if}
+                                            </div>
+                                        {/if}
+                                        {#if error.input && !missingTag}
                                            <div class="error-input">
                                                <span>Input: <b>{error.input.name}</b></span>
                                                {#if error.input.config}
                                                    <span>({getInputTypeName(error.input.config[0])})</span>
                                                {/if}
                                            </div>
-                                            {#if canJumpToDisconnectedInput(error)}
-                                                <div style:display="flex" style:flex-direction="row">
-                                                    <button class="jump-to-error locate" on:click={() => jumpToDisconnectedInput(error)}><span>⮎</span></button>
-                                                    <span>Find disconnected input</span>
-                                                </div>
-                                            {/if}

                                            {#if error.input.receivedValue}
                                                <div>
--- a/src/lib/components/ComfyJourneyView.svelte
+++ b/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>
--- a/src/lib/components/ComfyPaneView.svelte
+++ b/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 { capitalize } from "$lib/utils";
+ import ComfyJourneyView from "./ComfyJourneyView.svelte";

 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}
--- a/src/lib/components/ComfyPromptSerializer.ts
+++ b/src/lib/components/ComfyPromptSerializer.ts
@@ -71,62 +71,62 @@ export function isActiveBackendNode(node: LGraphNode, tag: string | null = null)
    return true;
 }

-type UpstreamResult = [LGraph | null, LLink | null, number | null, LGraphNode | null];
+export type UpstreamResult = [LGraph | null, LLink | null, number | null, LGraphNode | null];
+
+function followSubgraph(subgraph: Subgraph, link: LLink): UpstreamResult {
+    if (link.origin_id != subgraph.id)
+        throw new Error("Invalid link and graph output!")
+
+    const innerGraphOutput = subgraph.getInnerGraphOutputByIndex(link.origin_slot)
+    if (innerGraphOutput == null)
+        throw new Error("No inner graph input!")
+
+    const nextLink = innerGraphOutput.getInputLink(0)
+    return [innerGraphOutput.graph, nextLink, 0, innerGraphOutput];
+}
+
+function followGraphInput(graphInput: GraphInput, link: LLink): UpstreamResult {
+    if (link.origin_id != graphInput.id)
+        throw new Error("Invalid link and graph input!")
+
+    const outerSubgraph = graphInput.getParentSubgraph();
+    if (outerSubgraph == null)
+        throw new Error("No outer subgraph!")
+
+    const outerInputIndex = outerSubgraph.inputs.findIndex(i => i.name === graphInput.nameInGraph)
+    if (outerInputIndex === -1)
+        throw new Error("No outer input slot!")
+
+    const nextLink = outerSubgraph.getInputLink(outerInputIndex)
+    return [outerSubgraph.graph, nextLink, outerInputIndex, outerSubgraph];
+}
+
+export function getUpstreamLink(parent: LGraphNode, currentLink: LLink): UpstreamResult {
+    if (parent.is(Subgraph)) {
+        console.debug("FollowSubgraph")
+        return followSubgraph(parent, currentLink);
+    }
+    else if (parent.is(GraphInput)) {
+        console.debug("FollowGraphInput")
+        return followGraphInput(parent, currentLink);
+    }
+    else if ("getUpstreamLink" in parent) {
+        const link = (parent as ComfyGraphNode).getUpstreamLink();
+        return [parent.graph, link, link?.target_slot, parent];
+    }
+    else if (parent.inputs.length === 1) {
+        // Only one input, so assume we can follow it backwards.
+        const link = parent.getInputLink(0);
+        if (link) {
+            return [parent.graph, link, 0, parent]
+        }
+    }
+    console.warn("[graphToPrompt] Frontend node does not support getUpstreamLink", parent.type)
+    return [null, null, null, null];
+}

 export class UpstreamNodeLocator {
-    constructor(private isTheTargetNode: (node: LGraphNode) => boolean) {
-    }
-
-    private followSubgraph(subgraph: Subgraph, link: LLink): UpstreamResult {
-        if (link.origin_id != subgraph.id)
-            throw new Error("Invalid link and graph output!")
-
-        const innerGraphOutput = subgraph.getInnerGraphOutputByIndex(link.origin_slot)
-        if (innerGraphOutput == null)
-            throw new Error("No inner graph input!")
-
-        const nextLink = innerGraphOutput.getInputLink(0)
-        return [innerGraphOutput.graph, nextLink, 0, innerGraphOutput];
-    }
-
-    private followGraphInput(graphInput: GraphInput, link: LLink): UpstreamResult {
-        if (link.origin_id != graphInput.id)
-            throw new Error("Invalid link and graph input!")
-
-        const outerSubgraph = graphInput.getParentSubgraph();
-        if (outerSubgraph == null)
-            throw new Error("No outer subgraph!")
-
-        const outerInputIndex = outerSubgraph.inputs.findIndex(i => i.name === graphInput.nameInGraph)
-        if (outerInputIndex == null)
-            throw new Error("No outer input slot!")
-
-        const nextLink = outerSubgraph.getInputLink(outerInputIndex)
-        return [outerSubgraph.graph, nextLink, outerInputIndex, outerSubgraph];
-    }
-
-    private getUpstreamLink(parent: LGraphNode, currentLink: LLink): UpstreamResult {
-        if (parent.is(Subgraph)) {
-            console.debug("FollowSubgraph")
-            return this.followSubgraph(parent, currentLink);
-        }
-        else if (parent.is(GraphInput)) {
-            console.debug("FollowGraphInput")
-            return this.followGraphInput(parent, currentLink);
-        }
-        else if ("getUpstreamLink" in parent) {
-            const link = (parent as ComfyGraphNode).getUpstreamLink();
-            return [parent.graph, link, link?.target_slot, parent];
-        }
-        else if (parent.inputs.length === 1) {
-            // Only one input, so assume we can follow it backwards.
-            const link = parent.getInputLink(0);
-            if (link) {
-                return [parent.graph, link, 0, parent]
-            }
-        }
-        console.warn("[graphToPrompt] Frontend node does not support getUpstreamLink", parent.type)
-        return [null, null, null, null];
+    constructor(private isTheTargetNode: (node: LGraphNode, currentLink: LLink) => boolean) {
    }

    /*
@@ -146,8 +146,8 @@ export class UpstreamNodeLocator {
        let currentInputSlot = inputIndex;
        let currentNode = fromNode;

-        const shouldFollowParent = (parent: LGraphNode) => {
-            return isActiveNode(parent, tag) && !this.isTheTargetNode(parent);
+        const shouldFollowParent = (parent: LGraphNode, currentLink: LLink) => {
+            return isActiveNode(parent, tag) && !this.isTheTargetNode(parent, currentLink);
        }

        // If there are non-target nodes between us and another
@@ -156,8 +156,8 @@ export class UpstreamNodeLocator {
        // will simply follow their single input, while branching
        // nodes have conditional logic that determines which link
        // to follow backwards.
-        while (shouldFollowParent(parent)) {
-            const [nextGraph, nextLink, nextInputSlot, nextNode] = this.getUpstreamLink(parent, currentLink);
+        while (shouldFollowParent(parent, currentLink)) {
+            const [nextGraph, nextLink, nextInputSlot, nextNode] = getUpstreamLink(parent, currentLink);

            currentInputSlot = nextInputSlot;
            currentNode = nextNode;
@@ -183,7 +183,7 @@ export class UpstreamNodeLocator {
            }
        }

-        if (!isActiveNode(parent, tag) || !this.isTheTargetNode(parent) || currentLink == null)
+        if (!isActiveNode(parent, tag) || !this.isTheTargetNode(parent, currentLink) || currentLink == null)
            return [null, currentLink, currentInputSlot, currentNode];

        return [parent, currentLink, currentInputSlot, currentNode]
--- a/src/lib/components/ComfyQueue.svelte
+++ b/src/lib/components/ComfyQueue.svelte
@@ -16,6 +16,7 @@
 <script lang="ts">
 import queueState, { type CompletedQueueEntry, type QueueEntry, type QueueEntryStatus } from "$lib/stores/queueState";
 import ProgressBar from "./ProgressBar.svelte";
+ import SystemStatsBar from "./SystemStatsBar.svelte";
 import Spinner from "./Spinner.svelte";
 import PromptDisplay from "./PromptDisplay.svelte";
 import { List, ListUl, Grid } from "svelte-bootstrap-icons";
@@ -30,6 +31,8 @@
 import ComfyQueueListDisplay from "./ComfyQueueListDisplay.svelte";
 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;

@@ -52,46 +55,34 @@
 let displayMode: DisplayModeType = "list";
 let imageSize: number = 40;
 let gridColumns: number = 3;
- let changed = true;

 function switchMode(newMode: QueueItemType) {
-     changed = mode !== newMode
+     const changed = mode !== newMode
     mode = newMode
     if (changed) {
-         _queuedEntries = []
-         _runningEntries = []
-         _entries = []
+         uiQueueState.updateEntries();
     }
 }

 function switchDisplayMode(newDisplayMode: DisplayModeType) {
-     // changed = displayMode !== newDisplayMode
     displayMode = newDisplayMode
-     // if (changed) {
-     //     _queuedEntries = []
-     //     _runningEntries = []
-     //     _entries = []
-     // }
 }

- let _queuedEntries: QueueUIEntry[] = []
- let _runningEntries: QueueUIEntry[] = []
- let _entries: QueueUIEntry[] = []
-
- $: if (mode === "queue" && (changed || $queuePending.length != _queuedEntries.length || $queueRunning.length != _runningEntries.length)) {
+ let _entries: ReadonlyArray<QueueUIEntry> = []
+ $: if(mode === "queue") {
+     _entries = $uiQueueState.queueUIEntries
     updateFromQueue();
-     changed = false;
 }
- else if (mode === "history" && (changed || $queueCompleted.length != _entries.length)) {
+ else {
+     _entries = $uiQueueState.historyUIEntries;
     updateFromHistory();
-     changed = false;
 }

 $: if (mode === "queue" && !$queuePending && !$queueRunning) {
-     _queuedEntries = []
-     _runningEntries = []
-     _entries = [];
-     changed = true
+     uiQueueState.clearQueue();
+ }
+ else if (mode === "history" && !$queueCompleted) {
+     uiQueueState.clearHistory();
 }

 async function deleteEntry(entry: QueueUIEntry, event: MouseEvent) {
@@ -106,125 +97,26 @@
         await app.deleteQueueItem(mode, entry.entry.promptID);
     }

-     if (mode === "queue") {
-         _queuedEntries = []
-         _runningEntries = []
-     }
-
-     _entries = [];
-     changed = true;
+     uiQueueState.updateEntries(true)
 }

 async function clearQueue() {
     await app.clearQueue(mode);
-
-     if (mode === "queue") {
-         _queuedEntries = []
-         _runningEntries = []
-     }
-
-     _entries = [];
-     changed = true;
- }
-
- function formatDate(date: Date): string {
-     const time = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
-     const day = date.toLocaleString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }).replace(',', '');
-     return [time, day].join(", ")
- }
-
- function convertEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEntry {
-     let date = entry.finishedAt || entry.queuedAt;
-     let dateStr = null;
-     if (date) {
-         dateStr = formatDate(date);
-     }
-
-     const subgraphs: string[] | null = entry.extraData?.extra_pnginfo?.comfyBoxPrompt?.subgraphs;
-
-     let message = "Prompt";
-     if (entry.extraData?.workflowTitle != null) {
-         message = `${entry.extraData.workflowTitle}`
-     }
-
-     if (subgraphs && subgraphs.length > 0) {
-         const subgraphsString = subgraphs.join(', ')
-         message += ` (${subgraphsString})`
-     }
-
-     let submessage = `Nodes: ${Object.keys(entry.prompt).length}`
-
-     if (Object.keys(entry.outputs).length > 0) {
-         const imageCount = Object.values(entry.outputs).filter(o => o.images).flatMap(o => o.images).length
-         submessage = `Images: ${imageCount}`
-     }
-
-     return {
-         entry,
-         message,
-         submessage,
-         date: dateStr,
-         status,
-         images: []
-     }
- }
-
- function convertPendingEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEntry {
-     const result = convertEntry(entry, status);
-
-     const thumbnails = entry.extraData?.thumbnails
-     if (thumbnails) {
-         result.images = thumbnails.map(convertComfyOutputToComfyURL);
-     }
-
-     const outputs = Object.values(entry.outputs)
-                           .filter(o => o.images)
-                           .flatMap(o => o.images)
-                           .map(convertComfyOutputToComfyURL);
-     if (outputs) {
-         result.images = result.images.concat(outputs)
-     }
-
-     return result;
- }
-
- function convertCompletedEntry(entry: CompletedQueueEntry): QueueUIEntry {
-     const result = convertEntry(entry.entry, entry.status);
-
-     const images = Object.values(entry.entry.outputs)
-                          .filter(o => o.images)
-                          .flatMap(o => o.images)
-                          .map(convertComfyOutputToComfyURL);
-     result.images = images
-
-     if (entry.message)
-         result.submessage = entry.message
-     else if (entry.status === "interrupted" || entry.status === "all_cached")
-         result.submessage = "Prompt was interrupted."
-     if (entry.error)
-         result.error = entry.error
-
-     return result;
+     uiQueueState.updateEntries(true)
 }

 async function updateFromQueue() {
-     // newest entries appear at the top
-     _queuedEntries = $queuePending.map((e) => convertPendingEntry(e, "pending")).reverse();
-     _runningEntries = $queueRunning.map((e) => convertPendingEntry(e, "running")).reverse();
-     _entries = [..._queuedEntries, ..._runningEntries]
     if (queueList) {
         await tick(); // Wait for list size to be recalculated
         queueList.scroll({ top: queueList.scrollHeight })
     }
-     console.warn("[ComfyQueue] BUILDQUEUE", _entries.length, $queuePending.length, $queueRunning.length)
 }

 async function updateFromHistory() {
-     _entries = $queueCompleted.map(convertCompletedEntry).reverse();
     if (queueList) {
+         await tick(); // Wait for list size to be recalculated
         queueList.scrollTo(0, 0);
     }
-     console.warn("[ComfyQueue] BUILDHISTORY", _entries.length, $queueCompleted.length)
 }

 async function interrupt() {
@@ -233,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
@@ -254,6 +149,7 @@

 function closeModal() {
     selectedPrompt = null
+     selectedWorkflow = null;
     selectedImages = []
     showModal = false;
     expandAll = false;
@@ -274,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>
@@ -351,6 +247,9 @@
            <div class="node-name">
                <span>Node: {getNodeInfo($queueState.runningNodeID)}</span>
            </div>
+            <div>
+                <SystemStatsBar />
+            </div>
            <div>
                <ProgressBar value={$queueState.progress?.value} max={$queueState.progress?.max} />
            </div>
@@ -373,7 +272,8 @@
 $bottom-bar-height: 70px;
 $workflow-tabs-height: 2.5rem;
 $mode-buttons-height: 30px;
- $queue-height: calc(100vh - #{$pending-height} - #{$pane-mode-buttons-height} - #{$mode-buttons-height} - #{$bottom-bar-height} - #{$workflow-tabs-height} - 0.9rem);
+ $system-stats-bar-height: 24px;
+ $queue-height: calc(100vh - #{$pending-height} - #{$pane-mode-buttons-height} - #{$mode-buttons-height} - #{$bottom-bar-height} - #{$workflow-tabs-height} - 0.9rem - #{$system-stats-bar-height});
 $queue-height-history: calc(#{$queue-height} - #{$display-mode-buttons-height});

 .prompt-modal-header {
--- a/src/lib/components/ComfySettingsView.svelte
+++ b/src/lib/components/ComfySettingsView.svelte
@@ -173,7 +173,7 @@
 }

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

--- a/src/lib/components/ImageUpload.svelte
+++ b/src/lib/components/ImageUpload.svelte
@@ -18,6 +18,7 @@
 export let elem_classes: string[] = []
 export let style: string = ""
 export let label: string = ""
+ export let mask: ComfyImageLocation | null;
 // let propsChanged: Writable<number> | null = null;
 let dragging = false;
 let pending_upload = false;
@@ -172,6 +173,15 @@
                     bind:naturalWidth={imgWidth}
                     bind:naturalHeight={imgHeight}
                />
+                {#key mask}
+                    {#if mask}
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <img src={convertComfyOutputToComfyURL(mask)}
+                            alt={firstImage.filename}
+                            on:click={onImgClicked}
+                        />
+                    {/if}
+                {/key}
            {:else}
                <Upload
                    file_count={fileCount}
@@ -201,6 +211,9 @@
     }

     img {
+         position: absolute;
+         top: 0;
+         left: 0;
         width: 100%;
         height: 100%;
         max-width: 100%;
--- a/src/lib/components/JourneyRenderer.svelte
+++ b/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}
--- a/src/lib/components/Modal.svelte
+++ b/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">
--- a/src/lib/components/PromptDisplay.svelte
+++ b/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>
-            <Accordion label="Prompt" open={expandAll || comfyBoxImages.length === 0}>
-                <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>
-            </Accordion>
-        </Block>
-        {#if comfyBoxImages.length > 0}
-            <Block>
-                <Accordion label="Send Outputs To..." open={true}>
+        <Tabs bind:selected={selectedTab}>
+            <TabItem id="restore-parameters" name="Restore Parameters">
+                <RestoreParamsTable {restoreParams} on:restore={doRestoreParams} />
+            </TabItem>
+            {#if comfyBoxImages.length > 0}
+                <TabItem id="send-outputs" name="Send Outputs">
                    <Block>
                        <BlockTitle>Output type: {litegraphType}</BlockTitle>
                        {#if receiveTargets.length > 0}
@@ -191,9 +199,94 @@
                                <div class="outputs-message">No receive output targets found across all workflows.</div>
                        {/if}
                    </Block>
-                </Accordion>
-            </Block>
-        {/if}
+                </TabItem>
+            {/if}
+            <TabItem id="standard-prompt" name="Standard Prompt">
+                {#if stdPromptError}
+                    <Block>
+                        <BlockTitle><div style:color="#F88">Parsing Error</div></BlockTitle>
+                        <div class="scroll-container">
+                            <div class="json">
+                                <JsonView json={stdPromptError} />
+                            </div>
+                        </div>
+                    </Block>
+                    <Block>
+                        <BlockTitle><div>Original Data</div></BlockTitle>
+                        <div class="scroll-container">
+                            <div class="json">
+                                <JsonView json={stdPrompt} />
+                            </div>
+                        </div>
+                    </Block>
+                {:else if stdPrompt}
+                    <Block>
+                        <div class="scroll-container">
+                            <div class="json">
+                                <JsonView json={stdPrompt} />
+                            </div>
+                        </div>
+                    </Block>
+                {:else}
+                    <Block>
+                        (No standard prompt)
+                    </Block>
+                {/if}
+            </TabItem>
+            <TabItem id="prompt" name="Prompt">
+                <Block>
+                    <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 {
-         position: relative;
-         /* overflow-y: auto; */
-         flex: 1 1 0%;
+     overflow-y: auto;
+
+     :global(>.tabs) {
+         height: 100%;
+
+         :global(>.tabitem) {
+             overflow-y: auto;
+         }
     }

     .copy-button {
--- a/src/lib/components/SystemStatsBar.svelte
+++ b/src/lib/components/SystemStatsBar.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { ComfyDevice } from "$lib/api";
+	import systemState from "$lib/stores/systemState";
+
+ export let value: number | null = null;
+ export let max: number | null = null;
+ export let classes: string = "";
+ export let styles: string = "";
+ let percent: number = 0;
+ let totalGB: string = "";
+ let usedGB: string = "";
+ let text: string = ""
+
+ let device: ComfyDevice | null = null;
+ $: device = $systemState.devices[0]
+
+ function toGB(bytes: number): string {
+     return (bytes / 1024 / 1024 / 1024).toFixed(1)
+ }
+
+ $: if (device) {
+     percent = (1 - (device.vram_free / device.vram_total)) * 100;
+     totalGB = toGB(device.vram_total);
+     usedGB = toGB(device.vram_total - device.vram_free);
+     text = `${usedGB} / ${totalGB}GB (${percent.toFixed(1)}%)`
+ } else {
+     percent = 0
+     totalGB = ""
+     usedGB = ""
+     text = "??.?%"
+ }
+</script>
+
+<div class="progress {classes}" style={styles}>
+    <div class="bar" style="width: {percent}%;">
+        <span class="label">VRAM: {text}</span>
+    </div>
+</div>
+
+<style>
+ .progress {
+     height: 18px;
+     margin: 5px;
+     text-align: center;
+     color: var(--neutral-400);
+     border: 1px solid var(--neutral-500);
+     padding: 0px;
+     position: relative;
+ }
+
+ .bar {
+     height: 100%;
+     background: var(--secondary-800);
+ }
+
+ .label {
+     font-size: 8pt;
+     position: absolute;
+     margin: 0;
+     left: 0;
+     right: 0;
+     top: 50%;
+     transform: translateY(-50%);
+ }
+</style>
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -70,39 +70,34 @@


 {#if container}
-    {#key $attrsChanged}
-        <Container {layoutState} {container} {classes} {zIndex} {showHandles} {isMobile} />
-    {/key}
+    <Container {layoutState} {container} {classes} {zIndex} {showHandles} {isMobile} />
 {:else if widget && widget.node}
    {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets"}
    {@const hidden = isHidden(widget)}
    {@const hovered = $uiState.uiUnlocked && $selectionState.currentHovered.has(widget.id)}
    {@const selected = $uiState.uiUnlocked && $selectionState.currentSelection.includes(widget.id)}
-    {#key $attrsChanged}
-        {#key $propsChanged}
-            <div class="widget {widget.attrs.classes} {getWidgetClass()}"
-                 class:edit={edit}
-                 class:hovered
-                 class:selected
-                 class:is-executing={$queueState.runningNodeID && $queueState.runningNodeID == widget.node.id}
-                 class:hidden={hidden}
-            >
-                <svelte:component this={widget.node.svelteComponentType} {widget} {isMobile} />
-            </div>
-            {#if hidden && edit}
-                <div class="handle handle-hidden" class:hidden={!edit} />
-            {/if}
-            {#if showHandles || hovered}
-                <div class="handle handle-widget"
-                     class:hovered
-                     data-drag-item-id={widget.id}
-                     on:mousedown={_startDrag}
-                     on:touchstart={_startDrag}
-                     on:mouseup={_stopDrag}
-                     on:touchend={_stopDrag}/>
-            {/if}
-        {/key}
-    {/key}
+    <div class="widget {widget.attrs.classes} {getWidgetClass()}"
+         class:edit={edit}
+         class:hovered
+         class:selected
+         class:patch-affected={$selectionState.currentPatchHoveredNodes.has(widget.node.id)}
+         class:is-executing={$queueState.runningNodeID && $queueState.runningNodeID == widget.node.id}
+         class:hidden={hidden}
+    >
+        <svelte:component this={widget.node.svelteComponentType} {widget} {isMobile} />
+    </div>
+    {#if hidden && edit}
+        <div class="handle handle-hidden" class:hidden={!edit} />
+    {/if}
+    {#if showHandles || hovered}
+        <div class="handle handle-widget"
+             class:hovered
+             data-drag-item-id={widget.id}
+             on:mousedown={_startDrag}
+             on:touchstart={_startDrag}
+             on:mouseup={_stopDrag}
+             on:touchend={_stopDrag}/>
+    {/if}
 {/if}

 <style lang="scss">
@@ -112,6 +107,10 @@
     &.selected {
         background: var(--comfy-widget-selected-background-fill);
     }
+
+     &.patch-affected {
+         background: var(--secondary-500);
+     }
 }

 .is-executing {
--- a/src/lib/components/f7/progressbar.svelte
+++ b/src/lib/components/f7/progressbar.svelte
@@ -0,0 +1,58 @@
+<!--
+Fix a framework7 issue
+https://github.com/framework7io/framework7/issues/4183
+-->
+<script>
+ let className = undefined;
+ export { className as class };
+
+ export let progress = 0;
+ export let infinite = false;
+
+ function colorClasses(props) {
+     const { color, textColor, bgColor, borderColor, rippleColor, dark } = props;
+
+     return {
+         dark,
+         [`color-${color}`]: color,
+         [`text-color-${textColor}`]: textColor,
+         [`bg-color-${bgColor}`]: bgColor,
+         [`border-color-${borderColor}`]: borderColor,
+         [`ripple-color-${rippleColor}`]: rippleColor,
+     };
+ }
+
+ function classNames(...args) {
+     const classes = [];
+     args.forEach((arg) => {
+         if (typeof arg === 'object' && arg.constructor === Object) {
+             Object.keys(arg).forEach((key) => {
+                 if (arg[key]) classes.push(key);
+             });
+         } else if (arg) classes.push(arg);
+     });
+     const uniqueClasses = [];
+     classes.forEach((c) => {
+         if (uniqueClasses.indexOf(c) < 0) uniqueClasses.push(c);
+     });
+     return uniqueClasses.join(' ');
+ }
+
+ let classes
+ $: classes = classNames(
+     className,
+     'progressbar',
+     {
+         'progressbar-infinite': infinite,
+     },
+     colorClasses($$props),
+ );
+
+ let transformStyle = ""
+ $: transformStyle = progress ? `translate3d(${-100 + progress}%, 0, 0)` : '';
+</script>
+
+<span class={classes}
+      data-progress={progress} >
+    <span style:transform={transformStyle} />
+</span>
--- a/src/lib/components/gradio/gallery/Gallery.svelte
+++ b/src/lib/components/gradio/gallery/Gallery.svelte
@@ -15,7 +15,7 @@
 	export let label: string;
 	export let root: string = "";
 	export let root_url: null | string = null;
-    export let scrollOnUpdate = false;
+    export let focusOnScroll = false;
 	export let value: Array<string> | Array<FileData> | null = null;
 	export let style: Styles = {
 		grid_cols: [2],
@@ -121,11 +121,11 @@
 	let container: HTMLDivElement;

 	async function scroll_to_img(index: number | null) {
-        if (!scrollOnUpdate) return;
 		if (typeof index !== "number") return;
 		await tick();

-		el[index].focus();
+		if (focusOnScroll)
+			el[index].focus();

 		const { left: container_left, width: container_width } =
 			container.getBoundingClientRect();
--- a/src/lib/components/graph/Graph.svelte
+++ b/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>
--- a/src/lib/components/graph/GraphEdge.svelte
+++ b/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>
--- a/src/lib/components/graph/GraphNode.svelte
+++ b/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>
--- a/src/lib/components/graph/GraphStyles.ts
+++ b/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;
--- a/src/lib/components/modal/EditTemplateModal.svelte
+++ b/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;
--- a/src/lib/components/modal/RestoreParamsTable.svelte
+++ b/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>
--- a/src/lib/components/utils.ts
+++ b/src/lib/components/utils.ts
@@ -2,6 +2,9 @@ import type ComfyGraphCanvas from "$lib/ComfyGraphCanvas";
 import { type ContainerLayout, type IDragItem, type TemplateLayout, type WritableLayoutStateStore } from "$lib/stores/layoutStates"
 import type { LGraphCanvas, Vector2 } from "@litegraph-ts/core";
 import { get } from "svelte/store";
+import { PhotoBrowser, f7 } from "framework7-svelte";
+import { ImageViewer } from "$lib/ImageViewer";
+import interfaceState from "$lib/stores/interfaceState";

 export function handleContainerConsider(layoutState: WritableLayoutStateStore, container: ContainerLayout, evt: CustomEvent<DndEvent<IDragItem>>): IDragItem[] {
    return layoutState.updateChildren(container, evt.detail.items)
@@ -45,3 +48,25 @@ function doInsertTemplate(layoutState: WritableLayoutStateStore, droppedTemplate

    return get(layoutState).allItems[container.id].children;
 }
+
+let mobileLightbox = null;
+
+export function showMobileLightbox(images: any[], selectedImage: number, options: Partial<PhotoBrowser["params"]> = {}) {
+    if (!f7)
+        return
+
+    if (mobileLightbox) {
+        mobileLightbox.destroy();
+        mobileLightbox = null;
+    }
+
+    history.pushState({ type: "gallery" }, "");
+
+    mobileLightbox = f7.photoBrowser.create({
+        photos: images,
+        theme: get(interfaceState).isDarkMode ? "dark" : "light",
+        type: 'popup',
+        ...options
+    });
+    mobileLightbox.open(selectedImage)
+}
--- a/src/lib/convertVanillaWorkflow.ts
+++ b/src/lib/convertVanillaWorkflow.ts
@@ -68,7 +68,7 @@ function getConnectionPos(node: SerializedLGraphNode, is_input: boolean, slotNum
    return out;
 }

-function createSerializedWidgetNode(vanillaWorkflow: ComfyVanillaWorkflow, node: SerializedLGraphNode, slotIndex: number, isInput: boolean, widgetNodeType: string, value: any): [ComfyWidgetNode, SerializedComfyWidgetNode] {
+function createSerializedWidgetNode(vanillaWorkflow: ComfyVanillaWorkflow, widgetNodeType: string, value: any, node?: SerializedLGraphNode, slotIndex?: number, isInput?: boolean): [ComfyWidgetNode, SerializedComfyWidgetNode] {
    const comfyWidgetNode = LiteGraph.createNode<ComfyWidgetNode>(widgetNodeType);
    comfyWidgetNode.flags.collapsed = true;
    const size: Vector2 = [0, 0];
@@ -85,12 +85,15 @@ function createSerializedWidgetNode(vanillaWorkflow: ComfyVanillaWorkflow, node:
    const serWidgetNode = comfyWidgetNode.serialize() as SerializedComfyWidgetNode;
    serWidgetNode.comfyValue = value;
    serWidgetNode.shownOutputProperties = {};
-    getConnectionPos(node, isInput, slotIndex, serWidgetNode.pos);
-    if (isInput)
-        serWidgetNode.pos[0] -= size[0] - 20;
-    else
-        serWidgetNode.pos[0] += 20;
-    serWidgetNode.pos[1] += LiteGraph.NODE_TITLE_HEIGHT / 2;
+
+    if (node != null) {
+        getConnectionPos(node, isInput, slotIndex, serWidgetNode.pos);
+        if (isInput)
+            serWidgetNode.pos[0] -= size[0] - 20;
+        else
+            serWidgetNode.pos[0] += 20;
+        serWidgetNode.pos[1] += LiteGraph.NODE_TITLE_HEIGHT / 2;
+    }

    if (widgetNodeType === "ui/text" && typeof value === "string" && value.indexOf("\n") != -1) {
        const lineCount = countNewLines(value);
@@ -260,11 +263,12 @@ function convertPrimitiveNode(vanillaWorkflow: ComfyVanillaWorkflow, node: Seria

    const [comfyWidgetNode, serWidgetNode] = createSerializedWidgetNode(
        vanillaWorkflow,
+        widgetNodeType,
+        value,
        node,
        0, // first output on the PrimitiveNode
-        false, // this is an output slot index
-        widgetNodeType,
-        value);
+        false // this is an output slot index
+    );

    // Set the UI node's min/max/step from the node def
    configureWidgetNodeProperties(serWidgetNode, widgetOpts)
@@ -381,6 +385,20 @@ export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWork
            removeSerializedNode(vanillaWorkflow, node);
            continue
        }
+        else if (node.type === "Note") {
+            const [comfyWidgetNode, serWidgetNode] = createSerializedWidgetNode(
+                vanillaWorkflow,
+                "ui/markdown",
+                node.widgets_values[0]
+            );
+            serWidgetNode.pos = [node.pos[0], node.pos[1]]
+
+            const group = layoutState.addContainer(left, { title: "" })
+            layoutState.addWidget(group, comfyWidgetNode)
+
+            removeSerializedNode(vanillaWorkflow, node);
+            continue
+        }

        const def = ComfyApp.knownBackendNodes[node.type];
        if (def == null) {
@@ -449,11 +467,12 @@ export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWork

                const [comfyWidgetNode, serWidgetNode] = createSerializedWidgetNode(
                    vanillaWorkflow,
+                    widgetNodeType,
+                    value,
                    node,
                    connInputIndex,
-                    true,
-                    widgetNodeType,
-                    value);
+                    true
+                );

                configureWidgetNodeProperties(serWidgetNode, inputOpts)

@@ -492,11 +511,12 @@ export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWork
            // Let's create a gallery for this output node and hook it up
            const [comfyGalleryNode, serGalleryNode] = createSerializedWidgetNode(
                vanillaWorkflow,
+                "ui/gallery",
+                [],
                node,
                connOutputIndex,
                false,
-                "ui/gallery",
-                []);
+            );

            if (group == null)
                group = layoutState.addContainer(isOutputNode ? right : left, { title: node.title || node.type })
--- a/src/lib/nodes/ComfyGraphNode.ts
+++ b/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 {
--- a/src/lib/nodes/ComfyPickFirstNode.ts
+++ b/src/lib/nodes/ComfyPickFirstNode.ts
@@ -3,7 +3,7 @@ import ComfyGraphNode, { type ComfyGraphNodeProperties } from "./ComfyGraphNode"
 import { Watch } from "@litegraph-ts/nodes-basic";
 import { nextLetter } from "$lib/utils";

-export type PickFirstMode = "anyActiveLink" | "truthy" | "dataNonNull"
+export type PickFirstMode = "anyActiveLink" | "dataTruthy" | "dataNonNull"

 export interface ComfyPickFirstNodeProperties extends ComfyGraphNodeProperties {
    mode: PickFirstMode
@@ -12,7 +12,7 @@ export interface ComfyPickFirstNodeProperties extends ComfyGraphNodeProperties {
 export default class ComfyPickFirstNode extends ComfyGraphNode {
    override properties: ComfyPickFirstNodeProperties = {
        tags: [],
-        mode: "dataNonNull"
+        mode: "anyActiveLink"
    }

    static slotLayout: SlotLayout = {
@@ -36,21 +36,39 @@ export default class ComfyPickFirstNode extends ComfyGraphNode {
        super(title);
        this.displayWidget = this.addWidget("text", "Value", "")
        this.displayWidget.disabled = true;
-        this.modeWidget = this.addWidget("combo", "Mode", this.properties.mode, null, { property: "mode", values: ["anyActiveLink", "truthy", "dataNonNull"] })
+        this.modeWidget = this.addWidget("combo", "Mode", this.properties.mode, null, { property: "mode", values: ["anyActiveLink", "dataTruthy", "dataNonNull"] })
    }

    override onDrawBackground(ctx: CanvasRenderingContext2D) {
-        if (this.flags.collapsed || this.selected === -1) {
+        if (this.flags.collapsed) {
            return;
        }

-        ctx.fillStyle = "#AFB";
-        var y = (this.selected) * LiteGraph.NODE_SLOT_HEIGHT + 6;
-        ctx.beginPath();
-        ctx.moveTo(50, y);
-        ctx.lineTo(50, y + LiteGraph.NODE_SLOT_HEIGHT);
-        ctx.lineTo(34, y + LiteGraph.NODE_SLOT_HEIGHT * 0.5);
-        ctx.fill();
+        if (this.selected === -1) {
+            // Draw an X indicating nothing matched the selection criteria
+            const y = LiteGraph.NODE_SLOT_HEIGHT + 6;
+            ctx.lineWidth = 5;
+            ctx.strokeStyle = "red";
+            ctx.beginPath();
+
+            ctx.moveTo(50 - 15, y - 15);
+            ctx.lineTo(50 + 15, y + 15);
+            ctx.stroke();
+
+            ctx.moveTo(50 + 15, y - 15);
+            ctx.lineTo(50 - 15, y + 15);
+            ctx.stroke();
+        }
+        else {
+            // Draw an arrow pointing to the selected input
+            ctx.fillStyle = "#AFB";
+            const y = (this.selected) * LiteGraph.NODE_SLOT_HEIGHT + 6;
+            ctx.beginPath();
+            ctx.moveTo(50, y);
+            ctx.lineTo(50, y + LiteGraph.NODE_SLOT_HEIGHT);
+            ctx.lineTo(34, y + LiteGraph.NODE_SLOT_HEIGHT * 0.5);
+            ctx.fill();
+        }
    };

    override onConnectionsChange(
@@ -113,7 +131,7 @@ export default class ComfyPickFirstNode extends ComfyGraphNode {
        else {
            if (this.properties.mode === "dataNonNull")
                return link.data != null;
-            else if (this.properties.mode === "truthy")
+            else if (this.properties.mode === "dataTruthy")
                return Boolean(link.data)
            else // anyActiveLink
                return true;
--- a/src/lib/nodes/actions/ComfySendOutputAction.ts
+++ b/src/lib/nodes/actions/ComfySendOutputAction.ts
@@ -8,6 +8,7 @@ import notify from "$lib/notify";
 import workflowState from "$lib/stores/workflowState";
 import { get } from "svelte/store";
 import type ComfyApp from "$lib/components/ComfyApp";
+import interfaceState from "$lib/stores/interfaceState";

 export interface ComfySendOutputActionProperties extends ComfyGraphNodeProperties {
 }
@@ -41,36 +42,8 @@ export default class ComfySendOutputAction extends ComfyGraphNode {

        this.isActive = true;

-        const doSend = (modal: ModalData) => {
+        interfaceState.querySendOutput(value, type, receiveTargets, () => {
            this.isActive = false;
-
-            const { workflow, targetNode } = get(modal.state) as SendOutputModalResult;
-            console.warn("send", workflow, targetNode);
-
-            if (workflow == null || targetNode == null)
-                return
-
-            const app = (window as any).app as ComfyApp;
-            if (app == null) {
-                console.error("Couldn't get app!")
-                return
-            }
-
-            targetNode.receiveOutput(value);
-            workflowState.setActiveWorkflow(app.lCanvas, workflow.id)
-        }
-
-        modalState.pushModal({
-            title: "Send Output",
-            closeOnClick: true,
-            showCloseButton: true,
-            svelteComponent: SendOutputModal,
-            svelteProps: {
-                value,
-                type,
-                receiveTargets
-            },
-            onClose: doSend
        })
    };
 }
--- a/src/lib/nodes/widgets/ComfyButtonNode.ts
+++ b/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"
    }

--- a/src/lib/nodes/widgets/ComfyCheckboxNode.ts
+++ b/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 = {
--- a/src/lib/nodes/widgets/ComfyComboNode.ts
+++ b/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 = {
--- a/src/lib/nodes/widgets/ComfyGalleryNode.ts
+++ b/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)) {
--- a/src/lib/nodes/widgets/ComfyImageUploadNode.ts
+++ b/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 = {
--- a/src/lib/nodes/widgets/ComfyMarkdownNode.ts
+++ b/src/lib/nodes/widgets/ComfyMarkdownNode.ts
@@ -0,0 +1,59 @@
+import { BuiltInSlotType, LiteGraph, type ITextWidget, type SlotLayout } from "@litegraph-ts/core";
+
+import MarkdownWidget from "$lib/widgets/MarkdownWidget.svelte";
+import ComfyWidgetNode, { type ComfyWidgetProperties } from "./ComfyWidgetNode";
+
+export interface ComfyMarkdownProperties extends ComfyWidgetProperties {
+}
+
+export default class ComfyMarkdownNode extends ComfyWidgetNode<string> {
+    override properties: ComfyMarkdownProperties = {
+        tags: [],
+        defaultValue: false,
+        excludeFromJourney: true,
+    }
+
+    static slotLayout: SlotLayout = {
+        inputs: [
+            { name: "store", type: BuiltInSlotType.ACTION }
+        ],
+        outputs: [
+            { name: "value", type: "string" },
+            { name: "changed", type: BuiltInSlotType.EVENT },
+        ]
+    }
+
+    override svelteComponentType = MarkdownWidget;
+    override defaultValue = "";
+
+    constructor(name?: string) {
+        super(name, "")
+    }
+
+    override createDisplayWidget(): ITextWidget {
+        const widget = this.addWidget<ITextWidget>(
+            "text",
+            "Value",
+            "",
+            (v: string) => {
+                if (v == null || v === this.getValue()) {
+                    return;
+                }
+                this.setValue(v);
+            },
+            {
+                multiline: true,
+
+                inputStyle: { fontFamily: "monospace" }
+            }
+        )
+        return widget;
+    }
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyMarkdownNode,
+    title: "UI.Markdown",
+    desc: "Displays Markdown in the UI",
+    type: "ui/markdown"
+})
--- a/src/lib/nodes/widgets/ComfyMultiRegionNode.ts
+++ b/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 = {
--- a/src/lib/nodes/widgets/ComfyNumberNode.ts
+++ b/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
--- a/src/lib/nodes/widgets/ComfyRadioNode.ts
+++ b/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 = {
--- a/src/lib/nodes/widgets/ComfyTextNode.ts
+++ b/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 = {
--- a/src/lib/nodes/widgets/ComfyWidgetNode.ts
+++ b/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 = {
@@ -106,13 +107,18 @@ export default abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
        this.value = writable(value)
        this.color ||= color.color
        this.bgColor ||= color.bgColor
-        this.displayWidget = this.addWidget<ITextWidget>(
+        this.displayWidget = this.createDisplayWidget();
+        this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
+    }
+
+    protected createDisplayWidget(): ITextWidget {
+        const widget = this.addWidget<ITextWidget>(
            "text",
            "Value",
            ""
-        );
-        this.displayWidget.disabled = true; // prevent editing
-        this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
+        )
+        widget.disabled = true; // prevent editing
+        return widget;
    }

    addPropertyAsOutput(propertyName: string, type: string) {
--- a/src/lib/nodes/widgets/index.ts
+++ b/src/lib/nodes/widgets/index.ts
@@ -9,3 +9,4 @@ export { default as ComfyRadioNode } from "./ComfyRadioNode"
 export { default as ComfyNumberNode } from "./ComfyNumberNode"
 export { default as ComfyTextNode } from "./ComfyTextNode"
 export { default as ComfyMultiRegionNode } from "./ComfyMultiRegionNode"
+export { default as ComfyMarkdownNode } from "./ComfyMarkdownNode"
--- a/src/lib/notify.ts
+++ b/src/lib/notify.ts
@@ -27,6 +27,11 @@ function notifyf7(text: string, options: NotifyOptions) {
        on.click = () => options.onClick();
    }

+    let icon = null;
+    if (options.imageUrl) {
+        icon = `<img src="${options.imageUrl}"/>`
+    }
+
    const notification = f7.notification.create({
        title: options.title,
        titleRightText: 'now',
@@ -34,7 +39,8 @@ function notifyf7(text: string, options: NotifyOptions) {
        text: text,
        closeOnClick: true,
        closeTimeout,
-        on
+        on,
+        icon
    });
    notification.open();
 }
@@ -86,6 +92,11 @@ function notifyToast(text: string, options: NotifyOptions) {
 }

 function notifyNative(text: string, options: NotifyOptions) {
+    if (window.Notification == null) {
+        console.warn("[notify] No Notification available on window")
+        return
+    }
+
    if (document.hasFocus())
        return;

--- a/src/lib/restoreParameters.ts
+++ b/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;
+}
--- a/src/lib/stores/configDefs.ts
+++ b/src/lib/stores/configDefs.ts
@@ -155,6 +155,19 @@ const defCacheBuiltInResources: ConfigDefBoolean<"cacheBuiltInResources"> = {
    options: {}
 };

+const defPollSystemStatsInterval: ConfigDefNumber<"pollSystemStatsInterval"> = {
+    name: "pollSystemStatsInterval",
+    type: "number",
+    defaultValue: 1000,
+    category: "behavior",
+    description: "Interval in milliseconds to refresh system stats (total/free VRAM). Set to 0 to disable",
+    options: {
+        min: 0,
+        max: 60000,
+        step: 100
+    }
+};
+
 const defBuiltInTemplates: ConfigDefStringArray<"builtInTemplates"> = {
    name: "builtInTemplates",
    type: "string[]",
@@ -198,6 +211,7 @@ export const CONFIG_DEFS = [
    defPromptForWorkflowName,
    defConfirmWhenUnloadingUnsavedChanges,
    defCacheBuiltInResources,
+    defPollSystemStatsInterval,
    defBuiltInTemplates,
    // defLinkDisplayType
 ] as const;
--- a/src/lib/stores/configState.ts
+++ b/src/lib/stores/configState.ts
@@ -24,7 +24,12 @@ let changedOptions: Partial<Record<keyof ConfigState, [any, any]>> = {}

 function getBackendURL(): string {
    const state = get(store);
-    return `${window.location.protocol}//${state.comfyUIHostname}:${state.comfyUIPort}`
+    let hostname = state.comfyUIHostname
+    if (hostname === "localhost") {
+        // For dev use, assume same hostname as connected server
+        hostname = location.hostname;
+    }
+    return `${window.location.protocol}//${hostname}:${state.comfyUIPort}`
 }

 function canShowNotificationText(): boolean {
--- a/src/lib/stores/interfaceState.ts
+++ b/src/lib/stores/interfaceState.ts
@@ -1,6 +1,12 @@
-import { debounce } from '$lib/utils';
+import { debounce, isMobileBrowser } from '$lib/utils';
 import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
+import type { WorkflowInstID, WorkflowReceiveOutputTargets } from './workflowState';
+import modalState, { type ModalData } from './modalState';
+import type { SlotType } from '@litegraph-ts/core';
+import type ComfyApp from '$lib/components/ComfyApp';
+import SendOutputModal, { type SendOutputModalResult } from "$lib/components/modal/SendOutputModal.svelte";
+import workflowState from './workflowState';

 export type InterfaceState = {
    // Show a large indicator of the currently editing number value for mobile
@@ -10,12 +16,20 @@ export type InterfaceState = {
    showIndicator: boolean,
    indicatorValue: any,

-    graphTransitioning: boolean
-    isJumpingToNode: boolean
+    graphTransitioning: boolean,
+    isJumpingToNode: boolean,
+
+    selectedWorkflowIndex: number | null
+    showingWorkflow: boolean,
+    selectedTab: number,
+    showSheet: boolean,
+
+    isDarkMode: boolean
 }

 type InterfaceStateOps = {
    showIndicator: (pointerX: number, pointerY: number, value: any) => void,
+    querySendOutput: (value: any, type: SlotType, receiveTargets: WorkflowReceiveOutputTargets[], cb: (modal: ModalData) => void) => void,
 }

 export type WritableInterfaceStateStore = Writable<InterfaceState> & InterfaceStateOps;
@@ -28,6 +42,13 @@ const store: Writable<InterfaceState> = writable(

        graphTransitioning: false,
        isJumpingToNode: false,
+        selectedTab: 1,
+        showSheet: false,
+
+        selectedWorkflowIndex: null,
+        showingWorkflow: false,
+
+        isDarkMode: false,
    })

 const debounceDrag = debounce(() => { store.update(s => { s.showIndicator = false; return s }) }, 1000)
@@ -46,9 +67,49 @@ function showIndicator(pointerX: number, pointerY: number, value: any) {
    debounceDrag();
 }

+function querySendOutput(value: any, type: SlotType, receiveTargets: WorkflowReceiveOutputTargets[], cb: (modal: ModalData) => void) {
+    if (isMobileBrowser(navigator.userAgent)) {
+        store.update(s => { s.showSheet = true; return s; })
+    }
+    else {
+        const doSend = (modal: ModalData) => {
+            cb(modal)
+
+            const { workflow, targetNode } = get(modal.state) as SendOutputModalResult;
+            console.warn("send", workflow, targetNode);
+
+            if (workflow == null || targetNode == null)
+                return
+
+            const app = (window as any).app as ComfyApp;
+            if (app == null) {
+                console.error("Couldn't get app!")
+                return
+            }
+
+            targetNode.receiveOutput(value);
+            workflowState.setActiveWorkflow(app.lCanvas, workflow.id)
+        }
+
+        modalState.pushModal({
+            title: "Send Output",
+            closeOnClick: true,
+            showCloseButton: true,
+            svelteComponent: SendOutputModal,
+            svelteProps: {
+                value,
+                type,
+                receiveTargets
+            },
+            onClose: doSend
+        })
+    }
+}
+
 const interfaceStateStore: WritableInterfaceStateStore =
 {
    ...store,
-    showIndicator
+    showIndicator,
+    querySendOutput
 }
 export default interfaceStateStore;
--- a/src/lib/stores/journeyStates.ts
+++ b/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
--- a/src/lib/stores/layoutStates.ts
+++ b/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
            {
@@ -681,6 +689,13 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                editable: true,
                defaultValue: true
            },
+            {
+                name: "queuePromptButtonDefaultWorkflow",
+                type: "string",
+                location: "workflow",
+                editable: true,
+                defaultValue: ""
+            },
            {
                name: "showDefaultNotifications",
                type: "boolean",
--- a/src/lib/stores/queueState.ts
+++ b/src/lib/stores/queueState.ts
@@ -8,6 +8,8 @@ import { get, writable, type Writable } from "svelte/store";
 import { v4 as uuidv4 } from "uuid";
 import workflowState, { type WorkflowError, type WorkflowExecutionError, type WorkflowInstID, type WorkflowValidationError } from "./workflowState";
 import configState from "./configState";
+import uiQueueState from "./uiQueueState";
+import type { NodeID } from "@litegraph-ts/core";

 export type QueueEntryStatus = "success" | "validation_failed" | "error" | "interrupted" | "all_cached" | "unknown";

@@ -34,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,
@@ -80,7 +82,21 @@ export type QueueState = {
    queuePending: Writable<QueueEntry[]>,
    queueCompleted: Writable<CompletedQueueEntry[]>,
    queueRemaining: number | "X" | null;
+
+    /*
+     * Currently executing node if any
+     */
    runningNodeID: ComfyNodeID | null;
+
+    /*
+     * Nodes which should be rendered as "executing" in the frontend (green border).
+     * This includes the running node and all its parent subgraphs
+     */
+    executingNodes: Set<NodeID>;
+
+    /*
+     * Progress for the current node reported by the frontend
+     */
    progress: Progress | null,
    /**
     * If true, user pressed the "Interrupt" button in the frontend. Disable the
@@ -97,6 +113,7 @@ const store: Writable<QueueState> = writable({
    queueCompleted: writable([]),
    queueRemaining: null,
    runningNodeID: null,
+    executingNodes: new Set(),
    progress: null,
    isInterrupting: false
 })
@@ -271,6 +288,7 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)

    store.update((s) => {
        s.progress = null;
+        s.executingNodes.clear();

        const [index, entry, queue] = findEntryInPending(promptID);
        if (runningNodeID != null) {
@@ -278,6 +296,17 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
                entry.nodesRan.add(runningNodeID)
            }
            s.runningNodeID = runningNodeID;
+
+            if (entry?.extraData?.workflowID) {
+                const workflow = workflowState.getWorkflow(entry.extraData.workflowID);
+                if (workflow != null) {
+                    let node = workflow.graph.getNodeByIdRecursive(s.runningNodeID);
+                    while (node != null) {
+                        s.executingNodes.add(node.id);
+                        node = node.graph?._subgraph_node;
+                    }
+                }
+            }
        }
        else {
            // Prompt finished executing.
@@ -309,6 +338,7 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
            }
            s.progress = null;
            s.runningNodeID = null;
+            s.executingNodes.clear();
        }
        entry_ = entry;
        return s
@@ -333,6 +363,7 @@ function executionCached(promptID: PromptID, nodes: ComfyNodeID[]) {
        s.isInterrupting = false; // TODO move to start
        s.progress = null;
        s.runningNodeID = null;
+        s.executingNodes.clear();
        return s
    })
 }
@@ -350,6 +381,7 @@ function executionError(error: ComfyExecutionError): CompletedQueueEntry | null
        }
        s.progress = null;
        s.runningNodeID = null;
+        s.executingNodes.clear();
        return s
    })
    return entry_;
@@ -383,6 +415,8 @@ function executionStart(promptID: PromptID) {
            moveToRunning(index, queue)
        }
        s.isInterrupting = false;
+        s.runningNodeID = null;
+        s.executingNodes.clear();
        return s
    })
 }
@@ -444,10 +478,10 @@ function queueCleared(type: QueueItemType) {
    store.update(s => {
        if (type === "queue") {
            s.queuePending.set([]);
-            s.queueRunning.set([]);
            s.queueRemaining = 0;
            s.runningNodeID = null;
            s.progress = null;
+            s.executingNodes.clear();
        }
        else {
            s.queueCompleted.set([])
--- a/src/lib/stores/selectionState.ts
+++ b/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;
--- a/src/lib/stores/systemState.ts
+++ b/src/lib/stores/systemState.ts
@@ -0,0 +1,39 @@
+import { debounce, isMobileBrowser } from '$lib/utils';
+import { get, writable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
+import type { WorkflowInstID, WorkflowReceiveOutputTargets } from './workflowState';
+import modalState, { type ModalData } from './modalState';
+import type { SlotType } from '@litegraph-ts/core';
+import type ComfyApp from '$lib/components/ComfyApp';
+import SendOutputModal, { type SendOutputModalResult } from "$lib/components/modal/SendOutputModal.svelte";
+import workflowState from './workflowState';
+import type { ComfyAPISystemStatsResponse, ComfyDevice } from '$lib/api';
+
+
+
+export type SystemState = {
+    devices: ComfyDevice[]
+}
+
+type SystemStateOps = {
+    updateState: (resp: ComfyAPISystemStatsResponse) => void
+}
+
+export type WritableSystemStateStore = Writable<SystemState> & SystemStateOps;
+const store: Writable<SystemState> = writable(
+    {
+        devices: []
+    })
+
+function updateState(resp: ComfyAPISystemStatsResponse) {
+    store.set({
+        devices: resp.devices
+    })
+}
+
+const interfaceStateStore: WritableSystemStateStore =
+{
+    ...store,
+    updateState
+}
+export default interfaceStateStore;
--- a/src/lib/stores/uiQueueState.ts
+++ b/src/lib/stores/uiQueueState.ts
@@ -0,0 +1,211 @@
+import type { PromptID, QueueItemType } from '$lib/api';
+import { get, writable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
+import queueState, { type CompletedQueueEntry, type QueueEntry } from './queueState';
+import type { WorkflowError } from './workflowState';
+import { convertComfyOutputToComfyURL } from '$lib/utils';
+
+export type QueueUIEntryStatus = QueueEntryStatus | "pending" | "running";
+
+export type QueueUIEntry = {
+    entry: QueueEntry,
+    message: string,
+    submessage: string,
+    date?: string,
+    status: QueueUIEntryStatus,
+    images?: string[], // URLs
+    details?: string, // shown in a tooltip on hover
+    error?: WorkflowError
+}
+
+export type UIQueueState = {
+    mode: QueueItemType,
+
+    queuedEntries: QueueUIEntry[],
+    runningEntries: QueueUIEntry[],
+
+    queueUIEntries: QueueUIEntry[],
+    historyUIEntries: QueueUIEntry[],
+}
+
+type UIQueueStateOps = {
+    updateEntries: (force?: boolean) => void
+    clearAll: () => void
+    clearQueue: () => void
+    clearHistory: () => void
+}
+
+export type WritableUIQueueStateStore = Writable<UIQueueState> & UIQueueStateOps;
+const store: Writable<UIQueueState> = writable(
+    {
+        mode: "queue",
+        queuedEntries: [],
+        runningEntries: [],
+        completedEntries: [],
+
+        queueUIEntries: [],
+        historyUIEntries: [],
+    })
+
+function formatDate(date: Date): string {
+    const time = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
+    const day = date.toLocaleString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }).replace(',', '');
+    return [time, day].join(", ")
+}
+
+function convertEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEntry {
+    let date = entry.finishedAt || entry.queuedAt;
+    let dateStr = null;
+    if (date) {
+        dateStr = formatDate(date);
+    }
+
+    const subgraphs: string[] | null = entry.extraData?.extra_pnginfo?.comfyBoxPrompt?.subgraphs;
+
+    let message = `#${entry.number}: Prompt`;
+    if (entry.extraData?.workflowTitle != null) {
+        message = `${entry.extraData.workflowTitle}`
+    }
+
+    if (subgraphs && subgraphs.length > 0) {
+        const subgraphsString = subgraphs.join(', ')
+        message += ` (${subgraphsString})`
+    }
+
+    let submessage = `Nodes: ${Object.keys(entry.prompt).length}`
+
+    if (Object.keys(entry.outputs).length > 0) {
+        const imageCount = Object.values(entry.outputs).filter(o => o.images).flatMap(o => o.images).length
+        submessage = `Images: ${imageCount}`
+    }
+
+    return {
+        entry,
+        message,
+        submessage,
+        date: dateStr,
+        status,
+        images: []
+    }
+}
+
+export function getQueueEntryImages(queueEntry: QueueEntry): string[] {
+    return Object.values(queueEntry.outputs)
+        .filter(o => o.images)
+        .flatMap(o => o.images)
+        .map(convertComfyOutputToComfyURL);
+}
+
+function convertPendingEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEntry {
+    const result = convertEntry(entry, status);
+
+    const thumbnails = entry.extraData?.thumbnails
+    if (thumbnails) {
+        result.images = thumbnails.map(convertComfyOutputToComfyURL);
+    }
+
+    const outputs = getQueueEntryImages(entry);
+    if (outputs) {
+        result.images = result.images.concat(outputs)
+    }
+
+    return result;
+}
+
+function convertCompletedEntry(entry: CompletedQueueEntry): QueueUIEntry {
+    const result = convertEntry(entry.entry, entry.status);
+
+    result.images = getQueueEntryImages(entry.entry)
+
+    if (entry.message)
+        result.submessage = entry.message
+    else if (entry.status === "interrupted" || entry.status === "all_cached")
+        result.submessage = "Prompt was interrupted."
+    if (entry.error)
+        result.error = entry.error
+
+    return result;
+}
+
+function updateFromQueue(queuePending: QueueEntry[], queueRunning: QueueEntry[]) {
+    store.update(s => {
+        // 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;
+    })
+}
+
+function updateFromHistory(queueCompleted: CompletedQueueEntry[]) {
+    store.update(s => {
+        s.historyUIEntries = queueCompleted.map(convertCompletedEntry).reverse();
+        console.warn("[ComfyQueue] BUILDHISTORY", s.historyUIEntries.length)
+        return s
+    })
+}
+
+function updateEntries(force: boolean = false) {
+    const state = get(store)
+    const qs = get(queueState)
+    const queuePending = qs.queuePending
+    const queueRunning = qs.queueRunning
+    const queueCompleted = qs.queueCompleted
+
+    const queueChanged = get(queuePending).length != state.queuedEntries.length
+        || get(queueRunning).length != state.runningEntries.length;
+    const historyChanged = get(queueCompleted).length != state.historyUIEntries.length;
+
+    if (queueChanged || force) {
+        updateFromQueue(get(queuePending), get(queueRunning));
+    }
+    if (historyChanged || force) {
+        updateFromHistory(get(queueCompleted));
+    }
+}
+
+function clearAll() {
+    store.update(s => {
+        s.queuedEntries = []
+        s.runningEntries = []
+        s.historyUIEntries = []
+        return s
+    })
+    updateEntries(true);
+}
+
+function clearQueue() {
+    store.update(s => {
+        s.queuedEntries = []
+        s.runningEntries = []
+        return s
+    })
+    updateEntries(true);
+}
+
+function clearHistory() {
+    store.update(s => {
+        s.historyUIEntries = []
+        return s
+    })
+    updateEntries(true);
+}
+
+queueState.subscribe(s => {
+    updateEntries();
+})
+
+const uiStateStore: WritableUIQueueStateStore =
+{
+    ...store,
+    updateEntries,
+    clearAll,
+    clearQueue,
+    clearHistory,
+}
+export default uiStateStore;
--- a/src/lib/stores/uiState.ts
+++ b/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() {
--- a/src/lib/stores/workflowState.ts
+++ b/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;
@@ -57,6 +60,12 @@ export type WorkflowAttributes = {
     */
    queuePromptButtonRunWorkflow: boolean,

+    /*
+     * Default subgraph to run if `queuePromptButtonRunWorkflow` is `true`. Set
+     * to blank to run the default subgraph (tagless).
+     */
+    queuePromptButtonDefaultWorkflow: string,
+
    /*
     * If true, notifications will be shown when a prompt is queued and
     * completed. Set to false if you need more detailed control over the
@@ -109,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)
@@ -127,6 +141,7 @@ export class ComfyBoxWorkflow {
            title,
        }
        this.graph = new ComfyGraph(this.id);
+        this.journey = journeyStates.create();
    }

    notifyModified() {
@@ -198,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.
     *
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,10 +4,11 @@ import type { FileData as GradioFileData } from "@gradio/upload";
 import { Subgraph, type LGraph, type LGraphNode, type LLink, type SerializedLGraph, type UUID, type NodeID, type SlotType, type Vector4, type SerializedLGraphNode } from "@litegraph-ts/core";
 import { get } from "svelte/store";
 import type { ComfyNodeID } from "./api";
-import { type SerializedPrompt } from "./components/ComfyApp";
-import workflowState from "./stores/workflowState";
+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";

 export function clamp(n: number, min: number, max: number): number {
    if (max <= min)
@@ -142,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()
@@ -246,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)
@@ -618,6 +623,9 @@ export async function readFileToText(file: File): Promise<string> {
        reader.onload = async () => {
            resolve(reader.result as string);
        };
+        reader.onerror = async () => {
+            reject(reader.error);
+        }
        reader.readAsText(file);
    })
 }
@@ -709,3 +717,35 @@ export function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
        canvas.toBlob(resolve);
    });
 }
+
+export type SafetensorsMetadata = Record<string, string>
+
+export async function getSafetensorsMetadata(folder: string, filename: string): Promise<SafetensorsMetadata> {
+    const url = configState.getBackendURL();
+    const params = new URLSearchParams({ filename })
+
+    return fetch(new Request(url + `/view_metadata/${folder}?` + params)).then(r => r.json())
+}
+
+export function partition<T>(myArray: T[], chunkSize: number): T[] {
+    let index = 0;
+    const arrayLength = myArray.length;
+    const tempArray = [];
+
+    for (index = 0; index < arrayLength; index += chunkSize) {
+        const myChunk = myArray.slice(index, index + chunkSize);
+        tempArray.push(myChunk);
+    }
+
+    return tempArray;
+}
+
+const MOBILE_USER_AGENTS = ["iPhone", "iPad", "Android", "BlackBerry", "WebOs"].map(a => new RegExp(a, "i"))
+
+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);
+}
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -8,6 +8,7 @@
 import { type WidgetLayout } from "$lib/stores/layoutStates";
 import { get, writable, type Writable } from "svelte/store";
 import { isDisabled } from "./utils"
+ import { clamp, getSafetensorsMetadata } from '$lib/utils';
 export let widget: WidgetLayout | null = null;
 export let isMobile: boolean = false;
 let node: ComfyComboNode | null = null;
@@ -73,26 +74,10 @@
     }
 }

- function onSelect(e: CustomEvent<any>) {
-     if (input)
-         input.blur();
-     navigator.vibrate(20)
-
-     const item = e.detail
-
-     console.debug("[ComboWidget] SELECT", item, item.index)
-     $nodeValue = item.value;
-     activeIndex = item.index;
-     listOpen = false;
- }
-
 let activeIndex = null;
 let hoverItemIndex = null;
 let filterText = "";
 let listOpen = null;
- let scrollToIndex = null;
- let start = 0;
- let end = 0;

 function handleHover(index: number) {
     // console.warn("HOV", index)
@@ -107,7 +92,9 @@
     $nodeValue = item.value
     listOpen = false;
     filterText = ""
-     input?.blur()
+     setTimeout(() => {
+         input?.blur();
+     }, 100)
 }

 function onFilter() {
@@ -173,7 +160,10 @@
            on:select={(e) => handleSelect(e.detail.index)}
            on:blur
            on:filter={onFilter}>
-            <div class="comfy-select-list" slot="list" let:filteredItems style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
+            <div class="comfy-select-list" slot="list"
+                 class:mobile={isMobile}
+                 let:filteredItems
+                 style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
                {#if filteredItems.length > 0}
                    {@const itemSize = isMobile ? 50 : 25}
                    {@const itemsToShow = isMobile ? 10 : 30}
@@ -184,7 +174,7 @@
                        itemCount={filteredItems.length}
                        {itemSize}
                        overscanCount={5}
-                        scrollToIndex={hoverItemIndex}>
+                        scrollToIndex={activeIndex != null ? clamp(activeIndex + itemsToShow - 1, 0, filteredItems.length-1) : hoverItemIndex}>
                        <div slot="item"
                                class="comfy-select-item"
                                class:mobile={isMobile}
@@ -291,9 +281,14 @@

 .comfy-select-list {
     --maxLabelWidth: 100;
+     --maxListWidth: 50vw;
+     &.mobile {
+         --maxListWidth: 80vw;
+     }
+
     font-size: 14px;
-     width: min(calc((var(--maxLabelWidth) + 10) * 1ch), 50vw);
     color: var(--item-color);
+     width: min(calc((var(--maxLabelWidth) + 10) * 1ch), var(--maxListWidth));

     > :global(.virtual-list-wrapper) {
         box-shadow: var(--block-shadow);
--- a/src/lib/widgets/GalleryWidget.svelte
+++ b/src/lib/widgets/GalleryWidget.svelte
@@ -11,6 +11,7 @@
 import { clamp, comfyBoxImageToComfyURL, type ComfyBoxImageMetadata } from "$lib/utils";
 import { f7 } from "framework7-svelte";
 import type { ComfyGalleryNode } from "$lib/nodes/widgets";
+	import { showMobileLightbox } from "$lib/components/utils";

 export let widget: WidgetLayout | null = null;
 export let isMobile: boolean = false;
@@ -47,19 +48,8 @@
     object_fit: "cover",
     // preview: true
 }
- let element: HTMLDivElement;
-
- let mobileLightbox = null;
-
- function showMobileLightbox(source: HTMLImageElement) {
-     if (!f7)
-         return
-
-     if (mobileLightbox) {
-         mobileLightbox.destroy();
-         mobileLightbox = null;
-     }

+ function showMobileLightbox_(source: HTMLImageElement, selectedImage: number) {
     const galleryElem = source.closest<HTMLDivElement>("div.block")
     console.debug("[ImageViewer] showModal", source, galleryElem);
     if (!galleryElem || ImageViewer.all_gallery_buttons(galleryElem).length === 0) {
@@ -72,23 +62,16 @@
     const images = allGalleryButtons.map(button => {
         return {
             url: (button.children[0] as HTMLImageElement).src,
-             caption: "Image"
+             // caption: "Image"
         }
     })

-     history.pushState({ type: "gallery" }, "");
-
-     mobileLightbox = f7.photoBrowser.create({
-         photos: images,
-         thumbs: images.map(i => i.url),
-         type: 'popup',
-     });
-     mobileLightbox.open($selected_image)
+     showMobileLightbox(images, selectedImage, { thumbs: images });
 }

 function onClicked(e: CustomEvent<HTMLImageElement>) {
     if (isMobile) {
-         showMobileLightbox(e.detail)
+         showMobileLightbox_(e.detail, $selected_image)
     }
     else {
         ImageViewer.instance.showLightbox(e.detail)
@@ -103,7 +86,7 @@

 {#if widget && node && nodeValue && $nodeValue}
    {#if widget.attrs.variant === "image"}
-        <div class="wrapper comfy-image-widget" style={widget.attrs.style || ""} bind:this={element}>
+        <div class="wrapper comfy-image-widget" style={widget.attrs.style || ""}>
            <Block variant="solid" padding={false}>
                {#if $nodeValue && $nodeValue.length > 0}
                    {@const value = $nodeValue[$nodeValue.length-1]}
@@ -122,7 +105,7 @@
        </div>
    {:else}
        {@const images = $nodeValue.map(comfyBoxImageToComfyURL)}
-        <div class="wrapper comfy-gallery-widget gradio-gallery" style={widget.attrs.style || ""} bind:this={element}>
+        <div class="wrapper comfy-gallery-widget gradio-gallery" style={widget.attrs.style || ""}>
            <Block variant="solid" padding={false}>
                <div class="padding">
                    <Gallery
--- a/src/lib/widgets/ImageUploadWidget.svelte
+++ b/src/lib/widgets/ImageUploadWidget.svelte
@@ -52,12 +52,19 @@
 };

 let hasImage = false;
-
 $: hasImage = $nodeValue && $nodeValue.length > 0;
 $: if (!hasImage) {
     editMask = false;
 }

+ let mask: ComfyImageLocation | null;
+ $: if (hasImage && canMask) {
+     mask = $nodeValue[0].children?.find(i => i.tags.includes("mask"))?.comfyUIFile;
+ }
+ else {
+     mask = null;
+ }
+
 const MASK_FILENAME: string = "ComfyBoxMask.png"

 async function onMaskReleased(e: CustomEvent<MaskCanvasData>) {
@@ -122,6 +129,7 @@
         // TODO other child image types preserved here?
         image.children = [];
     }
+     mask = null;
     if (maskCanvasComp) {
         maskCanvasComp.clearStrokes();
     }
@@ -232,6 +240,7 @@
                <ImageUpload value={_value}
                             bind:imgWidth={$imgWidth}
                             bind:imgHeight={$imgHeight}
+                             {mask}
                             fileCount={"single"}
                             elem_classes={[]}
                             style={""}
@@ -250,18 +259,18 @@
                    <Row>
                        {#if canMask}
                            <div>
-                                {#if editMask}
-                                    <Button variant="secondary" on:click={() => { clearMask(); notify("Mask cleared."); }}>
-                                        Clear Mask
-                                    </Button>
-                                {/if}
-                                <Button disabled={!_value} on:click={toggleEditMask}>
+                                <Button variant="primary" 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>
--- a/src/lib/widgets/MarkdownWidget.svelte
+++ b/src/lib/widgets/MarkdownWidget.svelte
@@ -0,0 +1,233 @@
+<script lang="ts">
+ import { type WidgetLayout } from "$lib/stores/layoutStates";
+ import { get, type Writable, writable } from "svelte/store";
+ import { Block } from "@gradio/atoms";
+ import type { ComfyMarkdownNode } from "$lib/nodes/widgets";
+ import SvelteMarkdown from "@dogagenc/svelte-markdown"
+ import NullMarkdownRenderer from "./markdown/NullMarkdownRenderer.svelte"
+ import { SvelteComponentDev } from "svelte/internal";
+
+ export let widget: WidgetLayout | null = null;
+ export let isMobile: boolean = false;
+
+ let node: ComfyMarkdownNode | null = null;
+ let nodeValue: Writable<string> = writable("");
+ let attrsChanged: Writable<number> = writable(0);
+
+ let renderers: Record<string, typeof SvelteComponentDev> = {
+     "html": NullMarkdownRenderer
+ }
+
+ $: widget && setNodeValue(widget);
+
+ function setNodeValue(widget: WidgetLayout) {
+     if (widget) {
+         node = widget.node as ComfyMarkdownNode
+         nodeValue = node.value;
+         attrsChanged = widget.attrsChanged;
+     }
+ };
+</script>
+
+<div class="wrapper prose">
+    {#key $attrsChanged}
+        {#if widget !== null && node !== null}
+            <Block>
+                <SvelteMarkdown source={$nodeValue} {renderers} />
+            </Block>
+        {/if}
+    {/key}
+</div>
+
+<style lang="scss">
+ .wrapper {
+     padding: 2px;
+     width: 100%;
+     height: 100%;
+
+     :global(> button) {
+         height: 100%;
+     }
+
+     :global(> .block) {
+         border-radius: 0 !important;
+     }
+ }
+
+ .prose {
+     font-weight: var(--prose-text-weight);
+     font-size: var(--text-md);
+ }
+
+ .prose * {
+     color: var(--body-text-color);
+ }
+
+ .prose p {
+     margin-bottom: var(--spacing-sm);
+     line-height: var(--line-lg);
+ }
+
+ /* headings
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+ .prose h1,
+ .prose h2,
+ .prose h3,
+ .prose h4,
+ .prose h5 {
+     margin: var(--spacing-xxl) 0 var(--spacing-lg);
+     font-weight: var(--prose-header-text-weight);
+     line-height: 1.3;
+ }
+
+ .prose > *:first-child {
+     margin-top: 0;
+ }
+
+ .prose h1 {
+     margin-top: 0;
+     font-size: var(--text-xxl);
+ }
+
+ .prose h2 {
+     font-size: var(--text-xl);
+ }
+
+ .prose h3 {
+     font-size: var(--text-lg);
+ }
+
+ .prose h4 {
+     font-size: 1.1em;
+ }
+
+ .prose h5 {
+     font-size: 1.05em;
+ }
+
+ /* lists
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
+ .prose ul {
+     list-style: circle inside;
+ }
+ .prose ol {
+     list-style: decimal inside;
+ }
+
+ .prose ul > p,
+ .prose li > p {
+     display: inline-block;
+ }
+ .prose ol,
+ .prose ul {
+     margin-top: 0;
+     padding-left: 0;
+ }
+ .prose ul ul,
+ .prose ul ol,
+ .prose ol ol,
+ .prose ol ul {
+     margin: 0.5em 0 0.5em 3em;
+     font-size: 90%;
+ }
+ .prose li {
+     margin-bottom: 0.5em;
+ }
+
+ /* code
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
+ .prose code {
+     border: 1px solid var(--border-color-primary);
+     border-radius: var(--radius-sm);
+     background: var(--background-fill-secondary);
+     padding: 1px 3px;
+     font-size: 85%;
+     white-space: nowrap;
+ }
+ .prose pre > code {
+     display: block;
+     padding: 0.5em 0.7em;
+     /* font-size: 100%; */
+     white-space: pre;
+ }
+
+ /* tables
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
+ .prose th,
+ .prose td {
+     border-bottom: 1px solid #e1e1e1;
+     padding: 12px 15px;
+     text-align: left;
+ }
+ .prose th:first-child,
+ .prose td:first-child {
+     padding-left: 0;
+ }
+ .prose th:last-child,
+ .prose td:last-child {
+     padding-right: 0;
+ }
+
+ /* spacing
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
+ .prose button,
+ .prose .button {
+     margin-bottom: var(--spacing-sm);
+ }
+ .prose input,
+ .prose textarea,
+ .prose select,
+ .prose fieldset {
+     margin-bottom: var(--spacing-sm);
+ }
+ .prose pre,
+ .prose blockquote,
+ .prose dl,
+ .prose figure,
+ .prose table,
+ .prose p,
+ .prose ul,
+ .prose ol,
+ .prose form {
+     margin-bottom: var(--spacing-md);
+ }
+
+ /* links
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
+ .prose a {
+     color: var(--link-text-color);
+     text-decoration: underline;
+ }
+
+ .prose a:visited {
+     color: var(--link-text-color-visited);
+ }
+
+ .prose a:hover {
+     color: var(--link-text-color-hover);
+ }
+ .prose a:active {
+     color: var(--link-text-color-active);
+ }
+
+ /* misc
+    –––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+ .prose hr {
+     margin-top: 3em;
+     margin-bottom: 3.5em;
+     border-width: 0;
+     border-top: 1px solid #e1e1e1;
+ }
+
+ .prose blockquote {
+     margin: var(--size-6) 0 !important;
+     border-left: 5px solid var(--border-color-primary);
+     padding-left: var(--size-2);
+ }
+
+ .prose :last-child {
+     margin-bottom: 0 !important;
+ }
+</style>
--- a/src/lib/widgets/markdown/NullMarkdownRenderer.svelte
+++ b/src/lib/widgets/markdown/NullMarkdownRenderer.svelte
@@ -0,0 +1,7 @@
+<script>
+  export let href = "";
+  export let title = undefined;
+  export let text = "";
+</script>
+
+<div/>
--- a/src/main-desktop.ts
+++ b/src/main-desktop.ts
@@ -1,3 +1,15 @@
+import { isMobileBrowser } from "$lib/utils"
+
+const isMobile = isMobileBrowser(navigator.userAgent);
+
+const params = new URLSearchParams(window.location.search)
+if (params.get("desktop") !== "true") {
+    if (isMobile) {
+        window.location.href = "/mobile/"
+    }
+}
+
+
 // Run node registration before anthing else, in the proper order
 import "$lib/nodeImports";

@@ -12,7 +24,7 @@ const comfyApp = new ComfyApp();

 const app = new App({
    target: document.getElementById("app-root"),
-    props: { app: comfyApp }
+    props: { app: comfyApp, isMobile }
 })

 export default app;
--- a/src/mobile/GenToolbar.svelte
+++ b/src/mobile/GenToolbar.svelte
@@ -1,19 +1,11 @@
 <script lang="ts">
 import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
- import queueState from "$lib/stores/queueState";
 import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
- import { getNodeInfo } from "$lib/utils"

 import { Link, Toolbar } from "framework7-svelte"
- import ProgressBar from "$lib/components/ProgressBar.svelte";
-	import Indicator from "./Indicator.svelte";
-	import interfaceState from "$lib/stores/interfaceState";
-	import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";

 export let subworkflowID: number = -1;
 export let app: ComfyApp = undefined;
- let layoutState: WritableLayoutStateStore = null;
- let fileInput: HTMLInputElement = undefined;
 let workflow: ComfyBoxWorkflow | null = null;

 $: workflow = $workflowState.activeWorkflow;
@@ -22,111 +14,28 @@
     navigator.vibrate(20)
     app.runDefaultQueueAction()
 }
-
- async function refreshCombos() {
-     navigator.vibrate(20)
-     await app.refreshComboInNodes()
- }
-
- function doSave(): void {
-     if (!fileInput)
-         return;
-
-     navigator.vibrate(20)
-     app.querySave()
- }
-
- function doLoad(): void {
-     if (!fileInput)
-         return;
-
-     navigator.vibrate(20)
-     fileInput.value = null;
-     fileInput.click();
- }
-
- function loadWorkflow(): void {
-     app.handleFile(fileInput.files[0]);
-}
-
- function doSaveLocal(): void {
-     navigator.vibrate(20)
-     app.saveStateToLocalStorage();
- }
 </script>

-<div class="bottom">
-    {#if $queueState.runningNodeID || $queueState.progress}
-        <div class="node-name">
-            <span>Node: {getNodeInfo($queueState.runningNodeID)}</span>
-        </div>
-        <div class="progress-bar">
-            <ProgressBar value={$queueState.progress?.value} max={$queueState.progress?.max} />
-        </div>
-    {/if}
-    {#if typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0}
-        <div class="queue-remaining in-progress">
-            <div>
-                Queued prompts: {$queueState.queueRemaining}.
-            </div>
-        </div>
-    {/if}
-</div>
-<Toolbar bottom>
+<Toolbar bottom color="red" style="bottom: calc(var(--f7-toolbar-height))">
    {#if workflow != null && workflow.attrs.queuePromptButtonName != ""}
-        <Link on:click={queuePrompt}>
-            {workflow.attrs.queuePromptButtonName}
-        </Link>
+        <div style:width="100%">
+            <Link on:click={queuePrompt}>
+                {workflow.attrs.queuePromptButtonName}
+            </Link>
+        </div>
    {/if}
-    <Link on:click={refreshCombos}>🔄</Link>
-    <Link on:click={doSave}>Save</Link>
-    <Link on:click={doSaveLocal}>Save Local</Link>
-    <Link on:click={doLoad}>Load</Link>
-    <input bind:this={fileInput} id="comfy-file-input" type="file" accept=".json" on:change={loadWorkflow} />
 </Toolbar>
-{#if $interfaceState.showIndicator}
-    <Indicator value={$interfaceState.indicatorValue} />
-{/if}

 <style lang="scss">
 #comfy-file-input {
     display: none;
 }

- .bottom {
-     display: flex;
-     flex-direction: row;
-     position: absolute;
-     text-align: center;
-     width: 100%;
-     height: 2rem;
-     bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
-     z-index: var(--layer-top);
-     background-color: grey;
+ :global(.toolbar) {
+     --f7-toolbar-font-size: 13pt;
+ }

-     .node-name {
-         flex-grow: 1;
-         background-color: var(--color-red-300);
-         padding: 0.2em;
-         display: flex;
-         justify-content: center;
-         align-items: center;
-     }
-
-     .progress-bar {
-         flex-grow: 10;
-         background-color: var(--color-red-300);
-         display: flex;
-         justify-content: center;
-         align-items: center;
-     }
-
-     .queue-remaining {
-         flex-grow: 1;
-         padding: 0.2em;
-         &.in-progress {
-             background-color: var(--secondary-300);
-         }
-     }
+ :global(.dark .toolbar.color-red) {
+     background: var(--neutral-700) !important;
 }
 </style>
--- a/src/mobile/MainToolbar.svelte
+++ b/src/mobile/MainToolbar.svelte
@@ -0,0 +1,198 @@
+<script lang="ts">
+ import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
+ import queueState from "$lib/stores/queueState";
+ import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
+ import { getNodeInfo } from "$lib/utils"
+ import { LayoutTextSidebarReverse, Image, Grid } from "svelte-bootstrap-icons";
+
+ import { Link, Toolbar } from "framework7-svelte"
+ import ProgressBar from "$lib/components/ProgressBar.svelte";
+ import Progressbar from "$lib/components/f7/progressbar.svelte";
+ import Indicator from "./Indicator.svelte";
+ import interfaceState from "$lib/stores/interfaceState";
+ import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
+
+ export let subworkflowID: number = -1;
+ export let app: ComfyApp = undefined;
+ let layoutState: WritableLayoutStateStore = null;
+ let fileInput: HTMLInputElement = undefined;
+ let workflow: ComfyBoxWorkflow | null = null;
+
+ $: workflow = $workflowState.activeWorkflow;
+
+ function queuePrompt() {
+     navigator.vibrate(20)
+     app.runDefaultQueueAction()
+ }
+
+ async function refreshCombos() {
+     navigator.vibrate(20)
+     await app.refreshComboInNodes()
+ }
+
+ function doSave(): void {
+     if (!fileInput)
+         return;
+
+     navigator.vibrate(20)
+     app.querySave()
+ }
+
+ function doLoad(): void {
+     if (!fileInput)
+         return;
+
+     navigator.vibrate(20)
+     fileInput.value = null;
+     fileInput.click();
+ }
+
+ function loadWorkflow(): void {
+     app.handleFile(fileInput.files[0]);
+}
+
+ function doSaveLocal(): void {
+     navigator.vibrate(20)
+     app.saveStateToLocalStorage();
+ }
+
+ let queued: false;
+ $: queued = Boolean($queueState.runningNodeID || $queueState.progress)
+
+ let running = false;
+ $: running = typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0;
+
+ let progress;
+ $: progress = $queueState.progress
+
+ let progressPercent = 0
+ let progressText = ""
+ $: if (progress) {
+     progressPercent = (progress.value / progress.max) * 100;
+     progressText = progressPercent.toFixed(1) + "%";
+ } else {
+     progressPercent = 0
+     progressText = "??.?%"
+ }
+
+ let centerHref = "/workflows/"
+ $: if ($interfaceState.selectedWorkflowIndex && !$interfaceState.showingWorkflow) {
+     centerHref = `/workflows/${$interfaceState.selectedWorkflowIndex}/`
+ }
+ else {
+     centerHref = "/workflows/";
+ }
+
+ let toolbarCount = 0;
+ $: toolbarCount = $interfaceState.showingWorkflow ? 2 : 1;
+
+ const ICON_SIZE = "1.5rem";
+
+ let selectedTab = 1;
+</script>
+
+<div class="bottom" style:--toolbarCount={toolbarCount}>
+    <div class="bars">
+        {#if queued}
+            <div class="node-name">
+                <span>Node: {getNodeInfo($queueState.runningNodeID)} ({progressText})</span>
+            </div>
+        {/if}
+    </div>
+    <div class="wrapper">
+        {#if queued}
+            {#if progress}
+                <Progressbar color="blue" progress={progressPercent} />
+            {:else if running}
+                <Progressbar color="blue" infinite />
+            {/if}
+        {/if}
+    </div>
+</div>
+<Toolbar bottom tabbar color="blue" class={toolbarCount > 1 ? "hasGenToolbar" : ""}>
+    <Link transition="f7-dive" href="/queue/" tabLinkActive={$interfaceState.selectedTab === 0}>
+        <LayoutTextSidebarReverse width={ICON_SIZE} height={ICON_SIZE} />
+    </Link>
+    <Link transition="f7-dive" href={centerHref} tabLinkActive={$interfaceState.selectedTab === 1}>
+        <Image width={ICON_SIZE} height={ICON_SIZE} />
+    </Link>
+    <Link transition="f7-dive" href="/gallery/" tabLinkActive={$interfaceState.selectedTab === 2}>
+        <Grid width={ICON_SIZE} height={ICON_SIZE} />
+    </Link>
+</Toolbar>
+{#if $interfaceState.showIndicator}
+    <Indicator value={$interfaceState.indicatorValue} />
+{/if}
+
+<style lang="scss">
+ #comfy-file-input {
+     display: none;
+ }
+
+ :global(.progressbar.color-blue) {
+     background: var(--neutral-400) !important;
+ }
+
+ :global(.dark .progressbar.color-blue) {
+     background: var(--neutral-500) !important;
+ }
+
+ :global(.dark .toolbar.color-blue) {
+     background: var(--neutral-800) !important;
+ }
+
+ :global(.dark .toolbar.color-blue.hasGenToolbar) {
+     border-top: 2px solid var(--neutral-600);
+ }
+
+ :global(.dark .tab-link-active) {
+     --f7-tabbar-link-active-color: var(--secondary-500);
+     --f7-tabbar-link-active-bg-color: #283547;
+ }
+
+ .bottom {
+     --toolbarCount: 1;
+     position: absolute;
+     text-align: center;
+     width: 100%;
+     font-size: 13pt;
+     bottom: calc(var(--f7-toolbar-height) * var(--toolbarCount));
+     z-index: var(--layer-top);
+ }
+
+ .bars {
+     display: flex;
+     flex-direction: row;
+
+     .bars {
+         display: flex;
+         flex-direction: row;
+     }
+
+     .node-name {
+         flex-grow: 1;
+         background-color: var(--comfy-node-name-background);
+         color: var(--comfy-node-name-foreground);
+         padding: 0.2em;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+     }
+
+     .progress-bar {
+         flex-grow: 10;
+         background-color: var(--color-red-300);
+         display: flex;
+         justify-content: center;
+         align-items: center;
+     }
+
+     .queue-remaining {
+         flex-grow: 1;
+         padding: 0.2em;
+         &.in-progress {
+             background-color: var(--secondary-300);
+         }
+     }
+ }
+</style>
--- a/src/mobile/routes/gallery.svelte
+++ b/src/mobile/routes/gallery.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+ import { Page, Navbar, Block, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, f7 } from "framework7-svelte"
+ import WidgetContainer from "$lib/components/WidgetContainer.svelte";
+ import type ComfyApp from "$lib/components/ComfyApp";
+ import { writable, type Writable } from "svelte/store";
+ import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
+ import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
+ import interfaceState from "$lib/stores/interfaceState";
+ import { onMount } from "svelte";
+ import GenToolbar from '../GenToolbar.svelte'
+ import { partition, showLightbox } from "$lib/utils";
+	import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
+	import { showMobileLightbox } from "$lib/components/utils";
+	import notify from "$lib/notify";
+
+ export let app: ComfyApp
+
+ let _entries: ReadonlyArray<QueueUIEntry> = []
+ $: _entries = $uiQueueState.historyUIEntries;
+
+ let allEntries: [QueueUIEntry, string][][] = []
+ let allImages: string[] = []
+
+ let gridCols = 3;
+
+ function onPageBeforeIn() {
+     $interfaceState.selectedTab = 2;
+ }
+
+ $: buildImageList(_entries);
+
+ function buildImageList(entries: ReadonlyArray<QueueUIEntry>) {
+     const _allEntries = []
+     for (const entry of entries) {
+         for (const image of entry.images) {
+             _allEntries.push([entry, image]);
+         }
+     }
+     allEntries = partition(_allEntries, gridCols);
+     allImages = _allEntries.map(p => p[1]);
+ }
+
+ function handleClick(e: MouseEvent, entry: QueueUIEntry, index: number) {
+     showMobileLightbox(allImages, index)
+ }
+
+ async function clearHistory() {
+     f7.dialog.confirm("Are you sure you want to clear the current history?", async () => {
+         await app.clearQueue("history");
+         uiQueueState.updateEntries(true)
+         notify("History cleared!")
+     })
+ }
+</script>
+
+<Page name="gallery" on:pageBeforeIn={onPageBeforeIn}>
+    <Navbar>
+        <NavLeft></NavLeft>
+        <NavTitle>Gallery</NavTitle>
+        <NavRight>
+            <Link on:click={clearHistory}>🗑️</Link>
+        </NavRight>
+    </Navbar>
+
+    <Block>
+        {#each allEntries as group, i}
+            <div class="grid grid-cols-{gridCols} grid-gap">
+                {#each group as [entry, image], j}
+                    {@const index = i * gridCols + j}
+                    <div class="grid-entry">
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <img class="grid-entry-image"
+                             on:click={(e) => handleClick(e, entry, index)}
+                        src={image}
+                        loading="lazy"
+                        alt="thumbnail" />
+                    </div>
+                {/each}
+            </div>
+        {/each}
+    </Block>
+</Page>
+
+<style lang="scss">
+ .container {
+     overflow-x: hidden;
+
+     // Disable pull to refresh
+     overscroll-behavior-y: contain;
+
+     // framework7's css conflicts with gradio's
+     :global(.block) {
+         z-index: unset; // f7 sets it to 1
+     }
+ }
+
+ // TODO generalize this to all properties!
+ :global(.root-container.mobile > .block > .v-pane) {
+     flex-direction: column !important;
+ }
+
+ .grid-entry {
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     aspect-ratio: 1 / 1;
+     object-fit: cover;
+ }
+
+ .grid-entry-image {
+     aspect-ratio: 1 / 1;
+     object-fit: cover;
+     margin-bottom: var(--f7-grid-gap);
+
+     &:hover {
+         cursor: pointer;
+         filter: brightness(120%) contrast(120%);
+     }
+ }
+</style>
--- a/src/mobile/routes/home.svelte
+++ b/src/mobile/routes/home.svelte
@@ -1,35 +0,0 @@
-<script lang="ts">
- import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
-
- import { Page, Navbar, Button, BlockTitle, Block, List, ListItem } from "framework7-svelte"
-
- export let app: ComfyApp | null = null;
-
- async function doLoadDefault() {
-     var confirmed = confirm("Would you like to load the default workflow in a new tab?");
-     if (confirmed) {
-         await app.initDefaultWorkflow();
-     }
- }
-</script>
-
-<Page name="home">
-    <Navbar title="Home Page" />
-
-    <BlockTitle>Yo</BlockTitle>
-    <Block>
-        <div>{app} Nodes</div>
-    </Block>
-
-    <List strong inset dividersIos class="components-list searchbar-found">
-        <ListItem link="/subworkflows/" title="Workflows">
-            <i class="icon icon-f7" slot="media" />
-        </ListItem>
-        <ListItem link="/graph/" title="Show Node Graph">
-            <i class="icon icon-f7" slot="media" />
-        </ListItem>
-    </List>
-    <Block strong outlineIos>
-        <Button fill={true} onClick={doLoadDefault}>Load Default Graph</Button>
-    </Block>
-</Page>
--- a/src/mobile/routes/list-subworkflows.svelte
+++ b/src/mobile/routes/list-subworkflows.svelte
@@ -1,16 +0,0 @@
-<script lang="ts">
- import ComfyApp from "$lib/components/ComfyApp";
- import { Page, Navbar, Link, BlockTitle, Block, List, ListItem } from "framework7-svelte"
-
- export let app: ComfyApp;
-</script>
-
-<Page name="subworkflows">
-  <Navbar title="Workflows" backLink="Back" />
-
-    <List strong inset dividersIos class="components-list searchbar-found">
-        <ListItem link="/subworkflows/{1}/" title="Workflow 1">
-            <i class="icon icon-f7" slot="media" />
-        </ListItem>
-    </List>
-</Page>
--- a/src/mobile/routes/queue.svelte
+++ b/src/mobile/routes/queue.svelte
@@ -0,0 +1,155 @@
+<script lang="ts">
+ import { Page, Navbar, Block, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, List, ListItem, Card, CardHeader, CardContent, CardFooter, f7 } from "framework7-svelte"
+ import WidgetContainer from "$lib/components/WidgetContainer.svelte";
+ import type ComfyApp from "$lib/components/ComfyApp";
+ import { writable, type Writable } from "svelte/store";
+ import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
+ import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
+ import interfaceState from "$lib/stores/interfaceState";
+ import { onMount } from "svelte";
+ import GenToolbar from '../GenToolbar.svelte'
+ import { partition, showLightbox, truncateString } from "$lib/utils";
+	import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
+	import { showMobileLightbox } from "$lib/components/utils";
+	import queueState from "$lib/stores/queueState";
+	import notify from "$lib/notify";
+
+ export let app: ComfyApp
+
+ let _entries: ReadonlyArray<QueueUIEntry> = []
+ $: _entries = $uiQueueState.queueUIEntries;
+
+ function onPageBeforeIn() {
+     $interfaceState.selectedTab = 0;
+ }
+
+ async function interrupt() {
+     await app.interrupt();
+ }
+
+ async function clearQueue() {
+     f7.dialog.confirm("Are you sure you want to clear the current queue?", async () => {
+         await app.clearQueue("queue");
+         uiQueueState.updateEntries(true)
+         notify("Queue cleared!")
+     })
+ }
+
+ function findPrompt(entry: QueueUIEntry): string {
+     let s = ""
+     for (const inputs of Object.values(entry.entry.prompt)) {
+         if (inputs.class_type === "CLIPTextEncode") {
+             for (const [key, value] of Object.entries(inputs.inputs)) {
+                 if (key === "text") {
+                     s += value + "\n"
+                 }
+             }
+         }
+     }
+     return truncateString(s, 240);
+ }
+
+ async function doCancel(entry: QueueUIEntry) {
+     if ($queueState.isInterrupting) {
+         return;
+     }
+
+     // TODO support interrupting from multiple running items!
+     if (entry.status === "running") {
+         await app.interrupt();
+     }
+     else {
+         await app.deleteQueueItem("queue", entry.entry.promptID);
+     }
+
+     notify("Queue item canceled.")
+     uiQueueState.updateEntries(true)
+ }
+
+ function getCardImage(entry: QueueUIEntry): string {
+     if (entry.images.length > 0)
+         return entry.images[0]
+     return "https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg"
+ }
+</script>
+
+<Page name="queue" on:pageBeforeIn={onPageBeforeIn}>
+    <Navbar>
+        <NavLeft></NavLeft>
+        <NavTitle>Queue</NavTitle>
+        <NavRight>
+            <Link on:click={interrupt}>🛑️</Link>
+            <Link on:click={clearQueue}>🗑️</Link>
+        </NavRight>
+    </Navbar>
+
+    <Block>
+        <List>
+            {#each _entries as entry, i}
+                {@const prompt = findPrompt(entry)}
+                <ListItem>
+                    <Card outlineMd class="demo-card-header-pic">
+                        <CardHeader valign="bottom"
+                                    style="background-image: url({getCardImage(entry)})">
+                            {entry.message}
+                        </CardHeader>
+                        <CardContent>
+                            <p class="list-entry-message">{entry.submessage}</p>
+                            <p>
+                                {prompt}
+                            </p>
+                        </CardContent>
+                        <CardFooter>
+                            <Link on:click={() => doCancel(entry)}>Cancel</Link>
+                            {#if entry.date}
+                                <p>{entry.date}</p>
+                            {/if}
+                        </CardFooter>
+                    </Card>
+                </ListItem>
+            {/each}
+        </List>
+    </Block>
+</Page>
+
+<style lang="scss">
+ .container {
+     overflow-x: hidden;
+
+     // Disable pull to refresh
+     overscroll-behavior-y: contain;
+
+     // framework7's css conflicts with gradio's
+     :global(.block) {
+         z-index: unset; // f7 sets it to 1
+     }
+ }
+
+ // TODO generalize this to all properties!
+ :global(.root-container.mobile > .block > .v-pane) {
+     flex-direction: column !important;
+ }
+
+ .grid-entry {
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     aspect-ratio: 1 / 1;
+     object-fit: cover;
+ }
+
+ .grid-entry-image {
+     aspect-ratio: 1 / 1;
+     object-fit: cover;
+     margin-bottom: var(--f7-grid-gap);
+
+     &:hover {
+         cursor: pointer;
+         filter: brightness(120%) contrast(120%);
+     }
+ }
+
+ .list-entry-message {
+     font-size: 15pt;
+ }
+</style>
--- a/src/mobile/routes/subworkflow.svelte
+++ b/src/mobile/routes/subworkflow.svelte
@@ -1,47 +0,0 @@
-<script lang="ts">
- import { Page, Navbar, Link, BlockTitle, Block, List, ListItem, Toolbar } from "framework7-svelte"
- import WidgetContainer from "$lib/components/WidgetContainer.svelte";
- import type ComfyApp from "$lib/components/ComfyApp";
- import { writable, type Writable } from "svelte/store";
- import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
- import workflowState, { type ComfyBoxWorkflow } from "$lib/stores/workflowState";
-
- export let subworkflowID: number = -1;
- export let app: ComfyApp
-
- // TODO move
- let workflow: ComfyBoxWorkflow | null = null
- let layoutState: WritableLayoutStateStore | null = null;
-
- $: workflow = $workflowState.activeWorkflow;
- $: layoutState = workflow ? workflow.layout : null;
-</script>
-
-<Page name="subworkflow">
-    <Navbar title="Workflow {subworkflowID}" backLink="Back" />
-
-    {#if layoutState}
-        <div class="container">
-            <WidgetContainer bind:dragItem={$layoutState.root} {layoutState} isMobile={true} classes={["root-container", "mobile"]} />
-        </div>
-    {/if}
-</Page>
-
-<style lang="scss">
- .container {
-     overflow-x: hidden;
-
-     // Disable pull to refresh
-     overscroll-behavior-y: contain;
-
-     // framework7's css conflicts with gradio's
-     :global(.block) {
-         z-index: unset; // f7 sets it to 1
-     }
- }
-
- // TODO generalize this to all properties!
- :global(.root-container.mobile > .block > .v-pane) {
-     flex-direction: column !important;
- }
-</style>
--- a/src/mobile/routes/workflow.svelte
+++ b/src/mobile/routes/workflow.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+ import { Page, Navbar, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, Actions, ActionsGroup, ActionsButton, ActionsLabel, Sheet, Toolbar, PageContent, Block } from "framework7-svelte"
+ import WidgetContainer from "$lib/components/WidgetContainer.svelte";
+ import type ComfyApp from "$lib/components/ComfyApp";
+ import { writable, type Writable } from "svelte/store";
+ import { MenuUp } from 'svelte-bootstrap-icons';
+ import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
+ import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
+ import interfaceState from "$lib/stores/interfaceState";
+ import { onMount } from "svelte";
+ import GenToolbar from '../GenToolbar.svelte'
+	import { onDestroy } from "svelte";
+
+ export let workflowIndex: number;
+ export let app: ComfyApp
+
+ let workflow: ComfyBoxWorkflow;
+ let root: IDragItem | null;
+ let title = ""
+ let actionsOpened = false;
+
+ function onPageBeforeIn() {
+     workflow = $workflowState.openedWorkflows[workflowIndex-1]
+     if (workflow) {
+         workflowState.setActiveWorkflow(app.lCanvas, workflow.id)
+     }
+     $interfaceState.selectedWorkflowIndex = workflowIndex
+     $interfaceState.showingWorkflow = true;
+     $interfaceState.selectedTab = 1;
+ }
+
+ function onPageBeforeOut() {
+     $interfaceState.showingWorkflow = false;
+ }
+
+ async function refreshCombos() {
+     navigator.vibrate(20)
+     await app.refreshComboInNodes()
+ }
+
+ function doSaveLocal(): void {
+     navigator.vibrate(20)
+     app.saveStateToLocalStorage();
+ }
+
+ $: layoutState = workflow?.layout;
+ $: title = workflow?.attrs?.title || `Workflow: ${workflow?.id || workflowIndex}`;
+
+ $: if (layoutState && $layoutState.root) {
+     root = $layoutState.root
+ } else {
+     root = null;
+ }
+</script>
+
+<Page name="workflow" style="--f7-page-toolbar-bottom-offset: calc(var(--f7-toolbar-height) * 2)"
+      on:pageBeforeIn={onPageBeforeIn}
+      on:pageBeforeOut={onPageBeforeOut}
+>
+    <Navbar>
+        <NavLeft backLink="Back" backLinkUrl="/workflows/" backLinkForce={true}></NavLeft>
+        <NavTitle>{title}</NavTitle>
+        <NavRight>
+            <Link icon="icon-bars" on:click={() => {actionsOpened = true;}}>
+            <MenuUp />
+            </Link>
+        </NavRight>
+    </Navbar>
+
+    {#if workflow}
+        {#if root}
+            <div class="container">
+                <WidgetContainer bind:dragItem={root} isMobile={true} classes={["root-container"]} {layoutState} />
+            </div>
+        {/if}
+    {:else}
+        <div>
+            Workflow not found.
+        </div>
+    {/if}
+
+  <Actions bind:opened={actionsOpened}>
+    <ActionsGroup>
+      <ActionsLabel>Actions</ActionsLabel>
+      <ActionsButton strong on:click={refreshCombos}>Refresh Dropdowns</ActionsButton>
+      <ActionsButton strong on:click={doSaveLocal}>Save to Local Storage</ActionsButton>
+      <!-- <ActionsButton>Button 2</ActionsButton> -->
+      <ActionsButton color="red">Cancel</ActionsButton>
+    </ActionsGroup>
+  </Actions>
+</Page>
+
+<style lang="scss">
+ .container {
+     overflow-x: hidden;
+
+     // Disable pull to refresh
+     overscroll-behavior-y: contain;
+
+     // framework7's css conflicts with gradio's
+     :global(.block) {
+         z-index: unset; // f7 sets it to 1
+     }
+ }
+
+ // TODO generalize this to all properties!
+ :global(.root-container.mobile > .block > .v-pane) {
+     flex-direction: column !important;
+ }
+
+ .demo-sheet-push {
+     bottom: calc(var(--f7-toolbar-height) * 3);
+ }
+</style>
--- a/src/mobile/routes/workflows.svelte
+++ b/src/mobile/routes/workflows.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+ import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
+ import workflowState, { ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
+ import { onMount } from "svelte";
+ import interfaceState from "$lib/stores/interfaceState";
+ import { f7 } from 'framework7-svelte';
+ import { XCircle } from 'svelte-bootstrap-icons';
+
+ import { Page, Navbar, Button, BlockTitle, Block, List, ListItem } from "framework7-svelte"
+
+ export let app: ComfyApp | null = null;
+ let fileInput: HTMLInputElement = undefined;
+
+ async function doLoadDefault() {
+     f7.dialog.confirm("Would you like to load the default workflow in a new tab?", async () => {
+         await app.initDefaultWorkflow();
+         app.saveStateToLocalStorage(false);
+     })
+ }
+
+ function onClickDelete(workflow: ComfyBoxWorkflow, e: Event) {
+     e.preventDefault();
+     e.stopImmediatePropagation();
+     f7.dialog.confirm("Are you sure you want to delete this workflow?", workflow.attrs.title || `Workflow: ${workflow.id}`,
+                       () => {
+                           app.closeWorkflow(workflow.id);
+                           app.saveStateToLocalStorage(false);
+                       })}
+
+ function doLoad(): void {
+     if (!fileInput)
+         return;
+
+     navigator.vibrate(20)
+     fileInput.value = null;
+     fileInput.click();
+ }
+
+ function loadWorkflow(): void {
+     app.handleFile(fileInput.files[0]);
+}
+
+ function onPageBeforeIn() {
+     $interfaceState.selectedWorkflowIndex = null;
+     $interfaceState.selectedTab = 1;
+ }
+</script>
+
+<Page name="home" on:pageBeforeIn={onPageBeforeIn}>
+    <Navbar title="Home Page" />
+
+    {#if $workflowState.openedWorkflows}
+        <List strong inset dividersIos class="components-list searchbar-found">
+            {#each $workflowState.openedWorkflows as workflow, i}
+                <ListItem link="/workflows/{i+1}/" transition="f7-cover" title={workflow.attrs.title || `Workflow: ${workflow.id}`}>
+                    <svelte:fragment slot="media">
+                        <div on:pointerdown={(e) => onClickDelete(workflow, e)}>
+                            <XCircle width="1.5em" height="1.5em" />
+                        </div>
+                    </svelte:fragment>
+                </ListItem>
+            {/each}
+        </List>
+    {:else}
+        (No workflows opened.)
+    {/if}
+    <Block strong outlineIos>
+        <p class="grid grid-cols-2 grid-gap">
+            <Button outline onClick={doLoadDefault}>Load default graph</Button>
+            <Button outline onClick={doLoad}>Load from file...</Button>
+        </p>
+    </Block>
+    <input bind:this={fileInput} id="comfy-file-input" style:display="none" type="file" accept=".json" on:change={loadWorkflow} />
+</Page>
--- a/src/scss/global.scss
+++ b/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 {
@@ -41,7 +45,7 @@ body {
    --comfy-dropdown-item-background-active: var(--secondary-600);
    --comfy-progress-bar-background: var(--neutral-300);
    --comfy-progress-bar-foreground: var(--secondary-300);
-    --comfy-node-name-background: var(--color-red-300);
+    --comfy-node-name-background: var(--color-blue-200);
    --comfy-node-name-foreground: var(--body-text-color);
    --comfy-spinner-main-color: var(--neutral-400);
    --comfy-spinner-accent-color: var(--secondary-500);
@@ -77,11 +81,9 @@ body {
    --comfy-node-name-foreground: var(--body-text-color);
    --comfy-spinner-main-color: var(--neutral-600);
    --comfy-spinner-accent-color: var(--secondary-600);
-}

-.mobile {
-    --comfy-progress-bar-background: lightgrey;
-    --comfy-progress-bar-foreground: #B3D8A9
+    --f7-navbar-color: var(--body-text-color);
+    --f7-navbar-bg-color: var(--neutral-800);
 }

@mixin square-button {
@@ -252,3 +254,15 @@ button {
 :global([data-is-dnd-shadow-item]) {
    min-height: 5rem;
 }
+
+:global(.dark .photo-browser-popup) {
+    background: var(--neutral-700);
+}
+
+:global(.dark .photo-browser-popup-) {
+    background: var(--neutral-700);
+}
+
+:global(.photo-browser-exposed .toolbar ~ .toolbar.photo-browser-thumbs) {
+    transform: translate3d(0, calc(var(--f7-toolbar-height) * 2), 0);
+}
--- a/src/tests/stores/journeyStatesTests.ts
+++ b/src/tests/stores/journeyStatesTests.ts
@@ -0,0 +1,99 @@
+import { get } from "svelte/store";
+import journeyState, { type JourneyState } from "$lib/stores/journeyState"
+import { expect } from 'vitest';
+import UnitTest from "../UnitTest";
+import { Watch } from "@litegraph-ts/nodes-basic";
+import { ComfyBoxWorkflow } from "$lib/stores/workflowState";
+import { ComfyNumberNode } from "$lib/nodes/widgets";
+import { LiteGraph } from "@litegraph-ts/core";
+import { getWorkflowRestoreParamsFromWorkflow } from "$lib/restoreParameters";
+import { calculateWorkflowParamsPatch } from "$lib/stores/journeyStates";
+
+export default class journeyStateTests extends UnitTest {
+    test__patches() {
+        const [workflow, layoutState] = ComfyBoxWorkflow.create()
+        const { graph, journey } = workflow;
+        layoutState.initDefaultLayout() // adds 3 containers
+
+        const widget1 = LiteGraph.createNode(ComfyNumberNode);
+        const widget2 = LiteGraph.createNode(ComfyNumberNode);
+        const watch1 = LiteGraph.createNode(Watch);
+        const watch2 = LiteGraph.createNode(Watch);
+
+        graph.add(widget1)
+        graph.add(watch1)
+        graph.add(widget2)
+        graph.add(watch2)
+
+        widget1.connect(0, watch1, 0);
+        widget2.connect(0, watch2, 0);
+        widget1.setValue(0)
+        widget2.setValue(0)
+
+        let workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow)
+        const root = journey.addNode(workflowParams, null);
+
+        expect(root).toEqual({
+            id: root.id,
+            type: "root",
+            children: [],
+            base: {
+                [widget1.id]: {
+                    type: "workflow",
+                    finalValue: 0,
+                },
+                [widget2.id]: {
+                    type: "workflow",
+                    finalValue: 0,
+                }
+            }
+        });
+
+        widget1.setValue(5)
+
+        workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow)
+        const patchParams = calculateWorkflowParamsPatch(root, workflowParams)
+        const patch = journey.addNode(patchParams, root.id);
+
+        expect(patch).toEqual({
+            id: patch.id,
+            type: "patch",
+            parent: root,
+            children: [],
+            patch: {
+                [widget1.id]: {
+                    type: "workflow",
+                    finalValue: 5
+                },
+            }
+        })
+    }
+
+    test__patches_exclusions() {
+        const [workflow, layoutState] = ComfyBoxWorkflow.create()
+        const { graph, journey } = workflow;
+        layoutState.initDefaultLayout() // adds 3 containers
+
+        const widget1 = LiteGraph.createNode(ComfyNumberNode);
+        const widget2 = LiteGraph.createNode(ComfyNumberNode);
+        const watch1 = LiteGraph.createNode(Watch);
+        const watch2 = LiteGraph.createNode(Watch);
+
+        graph.add(widget1)
+        graph.add(watch1)
+
+        widget1.properties.excludeFromJourney = true;
+        widget1.connect(0, watch1, 0);
+        widget1.setValue(0)
+
+        let workflowParams = getWorkflowRestoreParamsFromWorkflow(workflow)
+        const root = journey.addNode(workflowParams, null);
+
+        expect(root).toEqual({
+            id: root.id,
+            type: "root",
+            children: [],
+            base: {}
+        });
+    }
+}
--- a/src/tests/testSuite.ts
+++ b/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"
--- a/vite.config.ts
+++ b/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({
@@ -55,6 +55,7 @@ export default defineConfig({
        },
    },
    build: {
+        minify: isProduction,
        sourcemap: true,
        rollupOptions: {
            input: {
Author	SHA1	Message	Date
space-nuko	2dcf5de074	Restore parameters from modal	2023-06-05 13:05:46 -05:00
space-nuko	7e4af6e22f	Center on node button	2023-06-03 21:56:28 -05:00
space-nuko	94d96375cb	History fixes	2023-06-03 20:11:24 -05:00
space-nuko	9054d257af	Linear history mode	2023-06-03 17:25:24 -05:00
space-nuko	5a98561fe9	temp linear history mode	2023-06-03 16:14:30 -05:00
space-nuko	b3f2f9093f	Prompt travel	2023-06-03 00:38:09 -05:00
space-nuko	ab6266704c	Journey functionality	2023-06-02 22:28:18 -05:00
space-nuko	4f237d01a5	Very basic graph parameters	2023-06-02 21:01:30 -05:00
space-nuko	59aad9183d	temp	2023-06-02 19:52:24 -05:00
space-nuko	c8a3276336	journeystuff	2023-06-02 19:52:24 -05:00
space-nuko	2197994317	Add graph bits	2023-06-02 19:52:24 -05:00
space-nuko	e3f98374f0	temp journey view	2023-06-02 19:52:24 -05:00
space-nuko	26ab7989c8	Start restore parameters	2023-06-02 19:52:24 -05:00
space-nuko	fde480cb43	Merge pull request #113 from space-nuko/free-vram Show used/total VRAM	2023-06-02 19:52:09 -05:00
space-nuko	552fc104e3	Merge pull request #112 from space-nuko/bughunt Some issues fixing	2023-06-02 11:03:58 -05:00
space-nuko	f08f50951f	Show free VRAM	2023-06-02 10:42:25 -05:00
space-nuko	d9dbe89403	Add number to prompt response	2023-06-02 10:39:24 -05:00
space-nuko	f5aa691f7a	Remove prints	2023-06-02 10:39:00 -05:00
space-nuko	895e2e4361	Fix Vite HMR bug	2023-06-02 10:33:44 -05:00
space-nuko	32e39c20d6	Open combo box at last selected item	2023-06-01 21:32:48 -05:00
space-nuko	03a70c60cf	Show executing status/progress on subgraphs	2023-06-01 19:52:19 -05:00
space-nuko	d07d1e7478	Fix gallery thumbnails bar not scrolling on click Closes #104	2023-06-01 19:41:18 -05:00
space-nuko	4923a78d7c	Improvement for finding nodes with missing tags	2023-06-01 18:44:02 -05:00
space-nuko	b1dd8a6242	Default workflow subgraph attribute	2023-06-01 18:43:45 -05:00
space-nuko	e8539add51	Fix missing index check	2023-06-01 16:29:04 -05:00
space-nuko	afd3c05d0b	Count disconnected frontend nodes in upstream check Closes #103	2023-06-01 12:54:27 -05:00
space-nuko	634d16a182	Show an X if PickFirst fails to find a good input	2023-06-01 12:38:35 -05:00
space-nuko	5f51ed4bd7	Check for existence of Notification safely	2023-06-01 08:51:32 -05:00
space-nuko	173e9aa61a	Merge pull request #102 from space-nuko/mobile-improvements Mobile improvements	2023-05-31 22:38:50 -05:00
space-nuko	f0c01a66ce	Mobile queue	2023-05-31 22:25:53 -05:00
space-nuko	4547cc1a27	Mobile gallery	2023-05-31 19:19:23 -05:00
space-nuko	3cd623fd20	Refactor UI queue state	2023-05-31 17:34:14 -05:00
space-nuko	263d62cb34	By index instead of workflow ID	2023-05-31 17:04:00 -05:00
space-nuko	d8ac97cb87	More mobile overhauling	2023-05-31 16:58:34 -05:00
space-nuko	6f3275da00	Mobile overhaul	2023-05-31 15:49:45 -05:00
space-nuko	5474687041	Progressbar on mobile improvement	2023-05-31 14:28:56 -05:00
space-nuko	c537cb71bf	Proper mobile redirection	2023-05-31 11:41:48 -05:00
space-nuko	dbef7d0d70	Merge pull request #95 from space-nuko/frontend-note Frontend Markdown note	2023-05-31 10:51:44 -05:00
space-nuko	5270c6750e	Fix	2023-05-29 18:59:11 -05:00
space-nuko	ac53ba226b	Fix	2023-05-29 18:52:48 -05:00
space-nuko	01514421f3	Fix	2023-05-29 18:49:44 -05:00
space-nuko	8890e45b66	Display mask on image upload	2023-05-29 18:45:08 -05:00
space-nuko	97bc7ce6ba	Update litegraph	2023-05-29 18:29:04 -05:00
space-nuko	cba6e6e47c	Don't render markdown embedded HTML	2023-05-29 18:23:29 -05:00
space-nuko	8b1c8ba9ee	Render markdown in frontend	2023-05-29 18:19:09 -05:00
space-nuko	1a23039b60	Merge pull request #94 from space-nuko/disable-notifications Option to control how notifications are shown	2023-05-29 10:31:40 -05:00