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
+        specifier: ^3.59.0
-        version: 3.58.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: 3.59.1
-      svelte-hmr: 0.15.1(svelte@3.58.0)
+      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: 3.59.1
-      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)
      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}/>
+{#if isMobile}
-
+    <div>Redirecting...</div>
-<style>
+{:else}
-</style>
+    <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 WorkflowsPage from './mobile/routes/workflows.svelte';
- import AboutPage from './mobile/routes/about.svelte';
+ import QueuePage from './mobile/routes/queue.svelte';
- import LoginPage from './mobile/routes/login.svelte';
+ import GalleryPage from './mobile/routes/gallery.svelte';
- import GraphPage from './mobile/routes/graph.svelte';
+ import WorkflowPage from './mobile/routes/workflow.svelte';
 import ListSubWorkflowsPage from './mobile/routes/list-subworkflows.svelte';
 import SubWorkflowPage from './mobile/routes/subworkflow.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/',
+             path: '/workflows',
-             component: AboutPage,
+             component: WorkflowsPage,
         },
         {
             path: '/login/',
             component: LoginPage,
         },
         {
             path: '/graph/',
             component: GraphPage,
             options: {
                 props: { app }
             }
         },
         {
-             path: '/subworkflows/',
+             path: '/queue/',
-             component: ListSubWorkflowsPage,
+             component: QueuePage,
             options: {
                 props: { app }
             }
         },
         {
-             path: '/subworkflows/:subworkflowID/',
+             path: '/gallery/',
-             component: SubWorkflowPage,
+             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}
+<svelte:body use:bindBody />
-    <App theme="auto" name="ComfyBox" {...f7params}>
+
 <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="/"
+                url="/workflows/"
                main={true}
                class="safe-areas"
                masterDetailBreakpoint={768},
                browserHistory=true,
                browserHistoryRoot="/mobile/"
            >
                <MainToolbar {app} />
                {#if $interfaceState.selectedWorkflowIndex && $interfaceState.showingWorkflow}
                    <GenToolbar {app} />
                {/if}
            </View>
-    </App>
+    {:catch error}
-    <div class="canvas-wrapper pane-wrapper" style="display: none">
+            <div class="comfy-loading-error">
-        <canvas id="graph-canvas" />
+                <div>
                    Error loading app
                </div>
-{/if}
+                <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;
+export type ComfyPromptConverter = {
-
+    encoder: ComfyPromptEncoder,
-function LoraLoader(stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs) {
+    decoder: ComfyPromptDecoder
    const params = stdPrompt.parameters
    const lora: ComfyBoxStdGroupLoRA = {
        model_name: inputs["lora_name"],
        strength_unet: inputs["strength_model"],
        strength_tenc: inputs["strength_clip"]
    }
    if (params.lora)
        params.lora.push(lora)
    else
        params.lora = [lora]
 }
-const ALL_CONVERTERS: Record<string, ComfyPromptConverter> = {
+//
-    LoraLoader
+export type ComfyDecodeArgument = {
    groupName: string,
    keyName: string,
    value: any,
    widgetNode: ComfyWidgetNode
 };
 export type ComfyPromptEncoder = (stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs, nodeID: ComfyNodeID) => void;
 export type ComfyPromptDecoder = (args: ComfyDecodeArgument[]) => void;
 const LoraLoader: ComfyPromptConverter = {
    encoder: (stdPrompt: ComfyBoxStdPrompt, inputs: SerializedPromptInputs) => {
        const params = stdPrompt.parameters
        const loras: ComfyBoxStdGroupLoRA[] = params.lora
        for (const lora of loras) {
            lora.model_hashes = {
                addnet_shorthash: null // TODO find hashes for model!
            }
        }
    },
    decoder: (args: ComfyDecodeArgument[]) => {
        // Find corresponding model names in the ComfyUI models folder from the model base filename
        for (const arg of args) {
            if (arg.groupName === "lora" && arg.keyName === "model_name" && arg.widgetNode.is(ComfyComboNode)) {
                const modelBasename = basename(arg.value);
                const found = arg.widgetNode.properties.values.find(k => k.indexOf(modelBasename) !== -1)
                if (found)
                    arg.value = found;
            }
        }
    }
 }
 // input name -> group/key in standard prompt
 type ComfyStdPromptMapping = Record<string, string>
 type ComfyStdPromptSpec = {
    paramMapping: ComfyStdPromptMapping,
    extraParams?: Record<string, string>,
    converter?: ComfyPromptConverter,
 }
 const ALL_SPECS: Record<string, ComfyStdPromptSpec> = {
    "KSampler": {
        paramMapping: {
            cfg: "k_sampler.cfg_scale",
            seed: "k_sampler.seed",
            steps: "k_sampler.steps",
            sampler_name: "k_sampler.sampler_name",
            scheduler: "k_sampler.scheduler",
            denoise: "k_sampler.denoise",
        },
    },
    "LoraLoader": {
        paramMapping: {
            lora_name: "lora.model_name",
            strength_model: "lora.strength_unet",
            strength_clip: "lora.strength_tenc",
        },
        extraParams: {
            "lora.module_name": "LoRA",
        },
        converter: LoraLoader,
    }
 }
 const COMMIT_HASH: string = __GIT_COMMIT_HASH__;
 export default class ComfyBoxStdPromptSerializer {
-    serialize(prompt: SerializedPrompt): ComfyBoxStdPrompt {
+    serialize(prompt: SerializedPromptInputsAll, workflow?: SerializedAppState): [SafeParseReturnType<any, ComfyBoxStdPrompt>, any] {
        const stdPrompt: ComfyBoxStdPrompt = {
            version: 1,
            metadata: {
@@ -33,23 +90,57 @@ export default class ComfyBoxStdPromptSerializer {
                commit_hash: COMMIT_HASH,
                extra_data: {
                    comfybox: {
                        workflows: [] // TODO!!!
                    }
                }
            },
            parameters: {}
        }
-        for (const [nodeID, inputs] of Object.entries(prompt.output)) {
+        for (const [nodeID, inputs] of Object.entries(prompt)) {
            const classType = inputs.class_type
-            const converter = ALL_CONVERTERS[classType]
+            const spec = ALL_SPECS[classType]
-            if (converter) {
+            if (spec) {
-                converter(stdPrompt, inputs.inputs, nodeID)
+                console.warn("SPEC", spec, inputs)
                let targets = {}
                for (const [comfyKey, stdPromptKey] of Object.entries(spec.paramMapping)) {
                    const inputValue = inputs.inputs[comfyKey];
                    if (inputValue != null && !isSerializedPromptInputLink(inputValue)) {
                        console.warn("GET", comfyKey, inputValue)
                        const trail = stdPromptKey.split(".");
                        let target = null;
                        console.warn(trail, trail.length - 2);
                        for (let index = 0; index < trail.length - 1; index++) {
                            const name = trail[index];
                            if (index === 0) {
                                targets[name] ||= {}
                                target = targets[name]
                            }
                            else {
-                console.warn("No StdPrompt type converter for comfy class!", classType)
+                                target = target[name]
                            }
                            console.warn(index, name, target)
                        }
                        let name = trail[trail.length - 1]
                        target[name] = inputValue
                        console.warn(stdPrompt.parameters)
                    }
                }
-        return stdPrompt
+                // TODO converter.encode
                for (const [groupName, group] of Object.entries(targets)) {
                    stdPrompt.parameters[groupName] ||= []
                    stdPrompt.parameters[groupName].push(group)
                }
            }
            else {
                console.warn("No StdPrompt type spec for comfy class!", classType)
            }
        }
        return [StdPrompt.safeParse(stdPrompt), stdPrompt];
    }
 }
--- 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,12 +181,14 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
            }
            if (draw) {
                const [node, inputSlot] = this.highlightNodeAndInput;
                if (inputSlot != null) {
                    ctx.lineWidth = 2;
                    ctx.strokeStyle = color;
                    this.highlightNodeInput(node, inputSlot, ctx);
                }
            }
        }
    }
    private drawFailedValidationInputs(node: LGraphNode, errors: ComfyGraphErrorLocation[], color: string, ctx: CanvasRenderingContext2D) {
        ctx.lineWidth = 2;
@@ -334,6 +345,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
     * Handle keypress
     *
     * 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,9 +382,11 @@ export default class ComfyApp {
            for (const workflow of workflows)
                workflow.isModified = false;
            workflowState.set(get(workflowState));
            if (doNotify)
                notify("Saved to local storage.")
        }
        catch (err) {
            if (doNotify)
                notify(`Failed saving to local storage:\n${err}`, { type: "error" })
        }
        finally {
@@ -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,11 +749,13 @@ export default class ComfyApp {
    }
    private requestPermissions() {
-        if (Notification.permission === "default") {
+        if (window.Notification != null) {
-            Notification.requestPermission()
+            if (window.Notification.permission === "default") {
                window.Notification.requestPermission()
                    .then((result) => console.log("Notification status:", result));
            }
        }
    }
    private setupColorScheme() {
        const setColor = (type: any, color: string) => {
@@ -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(graphToGraphVis(workflow.graph))
-                    console.debug(promptToGraphVis(p))
+                    // console.debug(promptToGraphVis(p))
                    const stdPrompt = this.stdPromptSerializer.serialize(p);
                    console.warn("STD", stdPrompt);
                    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)
+                            queueState.afterQueued(workflow.id, response.promptID, response.number, p.output, extraData)
-                            workflowState.afterQueued(workflow.id, response.promptID, p, 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 type { INodeInputSlot, LGraphNode, LLink, Subgraph } from "@litegraph-ts/core";
- import { UpstreamNodeLocator } from "./ComfyPromptSerializer";
+ 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 {
+ function jumpToFoundNode() {
-     return error.errorType === ComfyNodeErrorType.RequiredInputMissing && error.input != null;
+     if (nodeToJumpTo == null) {
         return
     }
- function jumpToDisconnectedInput(error: ComfyGraphErrorLocation) {
+     app.lCanvas.jumpToNodeAndInput(nodeToJumpTo, inputSlotToHighlight);
 }
 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">
                                        {#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 ComfyJourneyView from "./ComfyJourneyView.svelte";
 	import { capitalize } from "$lib/utils";
 export let app: ComfyApp
 export let mode: ComfyPaneMode = "none";
@@ -25,11 +27,11 @@
 const MODES: [ComfyPaneMode, typeof SvelteComponent][] = [
     ["properties", Sliders2],
     ["templates", BoxSeam],
     ["journey", Signpost2],
     ["queue", LayoutTextSidebarReverse]
 ]
 function switchMode(newMode: ComfyPaneMode) {
     console.warn("switch", mode, newMode)
     mode = newMode;
 }
 </script>
@@ -46,8 +48,10 @@
            <ComfyTemplates {app} />
        {:else if mode === "queue"}
            <ComfyQueue {app} />
        {:else if mode === "journey"}
            <ComfyJourneyView {app} />
        {:else}
-            <div class="blank-panel">(Blank)</div>
+            <div class="blank-panel">(Blank: {mode})</div>
        {/if}
    </div>
    {#if showSwitcher}
--- a/src/lib/components/ComfyPromptSerializer.ts
+++ b/src/lib/components/ComfyPromptSerializer.ts
@@ -71,13 +71,9 @@ 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];
-export class UpstreamNodeLocator {
+function followSubgraph(subgraph: Subgraph, link: LLink): UpstreamResult {
    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!")
@@ -87,9 +83,9 @@ export class UpstreamNodeLocator {
    const nextLink = innerGraphOutput.getInputLink(0)
    return [innerGraphOutput.graph, nextLink, 0, innerGraphOutput];
-    }
+}
-    private followGraphInput(graphInput: GraphInput, link: LLink): UpstreamResult {
+function followGraphInput(graphInput: GraphInput, link: LLink): UpstreamResult {
    if (link.origin_id != graphInput.id)
        throw new Error("Invalid link and graph input!")
@@ -98,21 +94,21 @@ export class UpstreamNodeLocator {
        throw new Error("No outer subgraph!")
    const outerInputIndex = outerSubgraph.inputs.findIndex(i => i.name === graphInput.nameInGraph)
-        if (outerInputIndex == null)
+    if (outerInputIndex === -1)
        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 {
+export function getUpstreamLink(parent: LGraphNode, currentLink: LLink): UpstreamResult {
    if (parent.is(Subgraph)) {
        console.debug("FollowSubgraph")
-            return this.followSubgraph(parent, currentLink);
+        return followSubgraph(parent, currentLink);
    }
    else if (parent.is(GraphInput)) {
        console.debug("FollowGraphInput")
-            return this.followGraphInput(parent, currentLink);
+        return followGraphInput(parent, currentLink);
    }
    else if ("getUpstreamLink" in parent) {
        const link = (parent as ComfyGraphNode).getUpstreamLink();
@@ -127,6 +123,10 @@ export class UpstreamNodeLocator {
    }
    console.warn("[graphToPrompt] Frontend node does not support getUpstreamLink", parent.type)
    return [null, null, null, null];
 }
 export class UpstreamNodeLocator {
    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) => {
+        const shouldFollowParent = (parent: LGraphNode, currentLink: LLink) => {
-            return isActiveNode(parent, tag) && !this.isTheTargetNode(parent);
+            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)) {
+        while (shouldFollowParent(parent, currentLink)) {
-            const [nextGraph, nextLink, nextInputSlot, nextNode] = this.getUpstreamLink(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 = []
+         uiQueueState.updateEntries();
         _runningEntries = []
         _entries = []
     }
 }
 function switchDisplayMode(newDisplayMode: DisplayModeType) {
     // changed = displayMode !== newDisplayMode
     displayMode = newDisplayMode
     // if (changed) {
     //     _queuedEntries = []
     //     _runningEntries = []
     //     _entries = []
     // }
 }
- let _queuedEntries: QueueUIEntry[] = []
+ let _entries: ReadonlyArray<QueueUIEntry> = []
- let _runningEntries: QueueUIEntry[] = []
+ $: if(mode === "queue") {
- let _entries: QueueUIEntry[] = []
+     _entries = $uiQueueState.queueUIEntries
 $: if (mode === "queue" && (changed || $queuePending.length != _queuedEntries.length || $queueRunning.length != _runningEntries.length)) {
     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 = []
+     uiQueueState.clearQueue();
-     _runningEntries = []
+ }
-     _entries = [];
+ else if (mode === "history" && !$queueCompleted) {
-     changed = true
+     uiQueueState.clearHistory();
 }
 async function deleteEntry(entry: QueueUIEntry, event: MouseEvent) {
@@ -106,125 +97,26 @@
         await app.deleteQueueItem(mode, entry.entry.promptID);
     }
-     if (mode === "queue") {
+     uiQueueState.updateEntries(true)
         _queuedEntries = []
         _runningEntries = []
     }
     _entries = [];
     changed = true;
 }
 async function clearQueue() {
     await app.clearQueue(mode);
-
+     uiQueueState.updateEntries(true)
     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;
 }
 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,12 +160,81 @@
     closeModal();
 }
 function doRestoreParams(e: CustomEvent) {
     const activeWorkflow = workflowState.getActiveWorkflow();
     if (activeWorkflow == null) {
         notify("No active workflow!", { type: "error" })
     }
     // TODO other param sources
     const patch: RestoreParamWorkflowNodeTargets = {};
     for (const [nodeID, sources] of Object.entries(restoreParams)) {
         for (const source of sources) {
             if (source.type === "workflow") {
                 patch[nodeID] = source;
             }
         }
     }
     activeWorkflow.applyParamsPatch(patch);
     closeModal();
 }
 </script>
 <div class="prompt-display">
    <div class="prompt-and-sends">
        <Tabs bind:selected={selectedTab}>
            <TabItem id="restore-parameters" name="Restore Parameters">
                <RestoreParamsTable {restoreParams} on:restore={doRestoreParams} />
            </TabItem>
            {#if comfyBoxImages.length > 0}
                <TabItem id="send-outputs" name="Send Outputs">
                    <Block>
                        <BlockTitle>Output type: {litegraphType}</BlockTitle>
                        {#if receiveTargets.length > 0}
                            <ReceiveOutputTargets {receiveTargets} on:select={(e) => sendOutput(e.detail.workflow, e.detail.targetNode)} />
                        {:else}
                                <div class="outputs-message">No receive output targets found across all workflows.</div>
                        {/if}
                    </Block>
                </TabItem>
            {/if}
            <TabItem id="standard-prompt" name="Standard Prompt">
                {#if stdPromptError}
                    <Block>
                        <BlockTitle><div style:color="#F88">Parsing Error</div></BlockTitle>
                        <div class="scroll-container">
                            <div class="json">
                                <JsonView json={stdPromptError} />
                            </div>
                        </div>
                    </Block>
                    <Block>
                        <BlockTitle><div>Original Data</div></BlockTitle>
                        <div class="scroll-container">
                            <div class="json">
                                <JsonView json={stdPrompt} />
                            </div>
                        </div>
                    </Block>
                {:else if stdPrompt}
                    <Block>
                        <div class="scroll-container">
                            <div class="json">
                                <JsonView json={stdPrompt} />
                            </div>
                        </div>
                    </Block>
                {:else}
                    <Block>
                        (No standard prompt)
                    </Block>
                {/if}
            </TabItem>
            <TabItem id="prompt" name="Prompt">
                <Block>
            <Accordion label="Prompt" open={expandAll || comfyBoxImages.length === 0}>
                    <div class="scroll-container">
                        <Block>
                            {#each Object.entries(prompt) as [nodeID, inputs], i}
@@ -178,22 +284,9 @@
                            {/each}
                        </Block>
                    </div>
            </Accordion>
                </Block>
-        {#if comfyBoxImages.length > 0}
+            </TabItem>
-            <Block>
+        </Tabs>
                <Accordion label="Send Outputs To..." open={true}>
                    <Block>
                        <BlockTitle>Output type: {litegraphType}</BlockTitle>
                        {#if receiveTargets.length > 0}
                            <ReceiveOutputTargets {receiveTargets} on:select={(e) => sendOutput(e.detail.workflow, e.detail.targetNode)} />
                        {:else}
                                <div class="outputs-message">No receive output targets found across all workflows.</div>
                        {/if}
                    </Block>
                </Accordion>
            </Block>
        {/if}
    </div>
    {#if images.length > 0}
        <div class="image-container">
@@ -221,23 +314,36 @@
     display: flex;
     flex-wrap: nowrap;
     overflow-y: auto;
     flex-direction: column;
-     @media (min-width: 1600px) {
+     @media (min-width: 1200px) {
         flex-direction: row;
     }
 }
 .prompt-and-sends {
     width: 50%;
 .scroll-container {
     position: relative;
     /* overflow-y: auto; */
     flex: 1 1 0%;
 }
 .json {
     @include json-view;
 }
 .prompt-and-sends {
     width: 50%;
     overflow-y: auto;
     :global(>.tabs) {
         height: 100%;
         :global(>.tabitem) {
             overflow-y: auto;
         }
     }
     .copy-button {
         display: flex;
         position: absolute;
--- 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,20 +70,17 @@
 {#if container}
    {#key $attrsChanged}
    <Container {layoutState} {container} {classes} {zIndex} {showHandles} {isMobile} />
    {/key}
 {:else if widget && widget.node}
    {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets"}
    {@const hidden = isHidden(widget)}
    {@const hovered = $uiState.uiUnlocked && $selectionState.currentHovered.has(widget.id)}
    {@const selected = $uiState.uiUnlocked && $selectionState.currentSelection.includes(widget.id)}
    {#key $attrsChanged}
        {#key $propsChanged}
    <div class="widget {widget.attrs.classes} {getWidgetClass()}"
         class:edit={edit}
         class:hovered
         class:selected
         class:patch-affected={$selectionState.currentPatchHoveredNodes.has(widget.node.id)}
         class:is-executing={$queueState.runningNodeID && $queueState.runningNodeID == widget.node.id}
         class:hidden={hidden}
    >
@@ -101,8 +98,6 @@
             on:mouseup={_stopDrag}
             on:touchend={_stopDrag}/>
    {/if}
        {/key}
    {/key}
 {/if}
 <style lang="scss">
@@ -112,6 +107,10 @@
     &.selected {
         background: var(--comfy-widget-selected-background-fill);
     }
     &.patch-affected {
         background: var(--secondary-500);
     }
 }
 .is-executing {
--- 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,10 +121,10 @@
 	let container: HTMLDivElement;
 	async function scroll_to_img(index: number | null) {
        if (!scrollOnUpdate) return;
 		if (typeof index !== "number") return;
 		await tick();
 		if (focusOnScroll)
 			el[index].focus();
 		const { left: container_left, width: container_width } =
--- 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/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 = {};
    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
+        false // this is an output slot index
-        widgetNodeType,
+    );
        value);
    // 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,
+                    true
-                    widgetNodeType,
+                );
                    value);
                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;
        }
        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";
-        var y = (this.selected) * LiteGraph.NODE_SLOT_HEIGHT + 6;
+            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
+        widget.disabled = true; // prevent editing
-        this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
+        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
+    graphTransitioning: boolean,
-    isJumpingToNode: 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, { type WorkflowReceiveOutputTargets } from "./stores/workflowState";
-import workflowState 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" }, "");
+     showMobileLightbox(images, selectedImage, { thumbs: images });
     mobileLightbox = f7.photoBrowser.create({
         photos: images,
         thumbs: images.map(i => i.url),
         type: 'popup',
     });
     mobileLightbox.open($selected_image)
 }
 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="primary" disabled={!_value} on:click={toggleEditMask}>
                                    <Button variant="secondary" on:click={() => { clearMask(); notify("Mask cleared."); }}>
                                        Clear Mask
                                    </Button>
                                {/if}
                                <Button disabled={!_value} on:click={toggleEditMask}>
                                    {#if editMask}
                                        Show Image
                                    {:else}
                                        Edit Mask
                                    {/if}
                                </Button>
                                {#if editMask}
                                    <Button variant="secondary" on:click={() => { clearMask(); notify("Mask cleared."); }}>
                                        Clear Mask
                                    </Button>
                                {/if}
                            </div>
                        {/if}
                        <div>
--- 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">
+<Toolbar bottom color="red" style="bottom: calc(var(--f7-toolbar-height))">
    {#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>
    {#if workflow != null && workflow.attrs.queuePromptButtonName != ""}
        <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 {
+ :global(.toolbar) {
-     display: flex;
+     --f7-toolbar-font-size: 13pt;
     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;
     .node-name {
         flex-grow: 1;
         background-color: var(--color-red-300);
         padding: 0.2em;
         display: flex;
         justify-content: center;
         align-items: center;
 }
-     .progress-bar {
+ :global(.dark .toolbar.color-red) {
-         flex-grow: 10;
+     background: var(--neutral-700) !important;
         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/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 {
+    --f7-navbar-color: var(--body-text-color);
-    --comfy-progress-bar-background: lightgrey;
+    --f7-navbar-bg-color: var(--neutral-800);
    --comfy-progress-bar-foreground: #B3D8A9
 }
@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