Merge pull request #148 from haze/hb/vibrateIfPossible

`vibrateIfPossible`: fixes iOS safari uncaught exceptions & etc
Update CheckboxWidget.svelte
2023-08-25 23:43:22 -05:00 · 2023-08-25 15:26:15 -04:00 · 2023-08-24 12:02:22 -04:00 · 2023-07-07 09:49:39 -05:00 · 2023-07-07 09:49:27 -05:00 · 2023-07-07 09:12:28 -05:00
71 changed files with 3557 additions and 1063 deletions
--- a/README.md
+++ b/README.md
@@ -37,11 +37,14 @@ Also note that the saved workflow format is subject to change until it's been fi
 ### Requirements
 - `git`
 - `pnpm`
 - An installation of vanilla [ComfyUI](https://github.com/comfyanonymous/ComfyUI) for the backend
 ### Installation
 **NOTE:** If you're using Windows, the following commands must be run with [Git Bash](https://git-scm.com/downloads).
 1. Clone the repo with submodules:
 ```
--- a/bin/serve.py
+++ b/bin/serve.py
@@ -2,15 +2,19 @@
 import http.server
 import socketserver
 import argparse
-PORT = 8000
+parser = argparse.ArgumentParser()
 parser.add_argument("-l", "--listen", type=str, default="localhost", help="Listen address for ComfyBox server")
 parser.add_argument("-p", "--port", type=int, default=8000, help="Port for ComfyBox server")
 args = parser.parse_args()
 message = f"""Starting ComfyBox.
 Be sure you've started ComfyUI already using this command:
     python main.py --enable-cors-header
-Serving at http://localhost:{PORT}...
+Serving at http://{args.listen}:{args.port}...
 """
 # python -m http.server will sometimes send incorrect MIME types.
@@ -19,33 +23,34 @@ Serving at http://localhost:{PORT}...
 # Hopefully this will cover everything.
 class HttpRequestHandler(http.server.SimpleHTTPRequestHandler):
    extensions_map = {
-        '': 'application/octet-stream',
+        "": "application/octet-stream",
-        '.manifest': 'text/cache-manifest',
+        ".manifest": "text/cache-manifest",
-        '.html': 'text/html',
+        ".html": "text/html",
-        '.png': 'image/png',
+        ".png": "image/png",
-        '.jpg': 'image/jpg',
+        ".jpg": "image/jpg",
-        '.jpeg': 'image/jpeg',
+        ".jpeg": "image/jpeg",
-        '.gif': 'image/gif',
+        ".gif": "image/gif",
-        '.svg': 'image/svg+xml',
+        ".svg": "image/svg+xml",
-        '.css': 'text/css',
+        ".css": "text/css",
-        '.js': 'application/x-javascript',
+        ".js": "application/x-javascript",
-        '.mjs': 'application/x-javascript',
+        ".mjs": "application/x-javascript",
-        '.cjs': 'application/x-javascript',
+        ".cjs": "application/x-javascript",
-        '.wasm': 'application/wasm',
+        ".wasm": "application/wasm",
-        '.json': 'application/json',
+        ".json": "application/json",
-        '.xml': 'application/xml',
+        ".xml": "application/xml",
-        '.xml': 'application/xml',
+        ".xml": "application/xml",
-        '.pdf': 'application/pdf',
+        ".pdf": "application/pdf",
-        '.webp': 'image/webp',
+        ".webp": "image/webp",
-        '.avif': 'image/avif',
+        ".avif": "image/avif",
-        '.heic': 'image/heic',
+        ".heic": "image/heic",
-        '.heif': 'image/heif',
+        ".heif": "image/heif",
-        '.mp3': 'audio/mpeg',
+        ".mp3": "audio/mpeg",
-        '.mp4': 'video/mp4',
+        ".mp4": "video/mp4",
-        '.m4v': 'video/mp4'
+        ".m4v": "video/mp4",
    }
-httpd = socketserver.TCPServer(("localhost", PORT), HttpRequestHandler)
+
 httpd = socketserver.TCPServer((args.listen, args.port), HttpRequestHandler)
 try:
    print(message)
--- 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
@@ -18,38 +18,38 @@
    "build:css": "pollen -c gradio/js/theme/src/pollen.config.cjs && mv src/pollen.css node_modules/@gradio/theme/src"
  },
  "devDependencies": {
-    "@floating-ui/core": "^1.2.6",
+    "@floating-ui/core": "^1.3.1",
-    "@floating-ui/dom": "^1.2.8",
+    "@floating-ui/dom": "^1.4.2",
    "@zerodevx/svelte-toast": "^0.9.3",
-    "eslint": "^8.37.0",
+    "eslint": "^8.43.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-svelte3": "^4.0.0",
-    "happy-dom": "^9.18.3",
+    "happy-dom": "^9.20.3",
-    "jsdom": "^22.0.0",
+    "jsdom": "^22.1.0",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.0",
+    "prettier-plugin-svelte": "^2.10.1",
-    "rollup-plugin-visualizer": "^5.9.0",
+    "rollup-plugin-visualizer": "^5.9.2",
-    "sass": "^1.61.0",
+    "sass": "^1.63.6",
-    "svelte": "^3.58.0",
+    "svelte": "^4.0.0",
-    "svelte-check": "^3.2.0",
+    "svelte-check": "^3.4.4",
    "svelte-dnd-action": "^0.9.22",
-    "typescript": "^5.0.3",
+    "typescript": "^5.1.3",
-    "vite": "^4.3.8",
+    "vite": "^4.3.9",
    "vite-plugin-glsl": "^1.1.2",
    "vite-plugin-static-copy": "^0.14.0",
    "vite-plugin-svelte-console-remover": "^1.0.10",
-    "vite-tsconfig-paths": "^4.0.8",
+    "vite-tsconfig-paths": "^4.2.0",
    "vitest": "^0.27.3"
  },
  "type": "module",
  "dependencies": {
-    "@codemirror/autocomplete": "^6.3.0",
+    "@codemirror/autocomplete": "^6.8.0",
-    "@codemirror/commands": "^6.1.2",
+    "@codemirror/commands": "^6.2.4",
-    "@codemirror/language": "^6.6.0",
+    "@codemirror/language": "^6.8.0",
-    "@codemirror/lint": "^6.0.0",
+    "@codemirror/lint": "^6.2.2",
-    "@codemirror/search": "^6.2.2",
+    "@codemirror/search": "^6.5.0",
-    "@codemirror/state": "^6.1.2",
+    "@codemirror/state": "^6.2.1",
-    "@codemirror/view": "^6.4.1",
+    "@codemirror/view": "^6.13.2",
    "@dogagenc/svelte-markdown": "^0.2.4",
    "@gradio/accordion": "workspace:*",
    "@gradio/atoms": "workspace:*",
@@ -65,6 +65,9 @@
    "@gradio/theme": "workspace:*",
    "@gradio/upload": "workspace:*",
    "@gradio/utils": "workspace:*",
    "@lezer/generator": "^1.3.0",
    "@lezer/highlight": "^1.1.6",
    "@lezer/lr": "^1.3.7",
    "@litegraph-ts/core": "workspace:*",
    "@litegraph-ts/nodes-basic": "workspace:*",
    "@litegraph-ts/nodes-events": "workspace:*",
@@ -72,32 +75,32 @@
    "@litegraph-ts/nodes-math": "workspace:*",
    "@litegraph-ts/nodes-strings": "workspace:*",
    "@litegraph-ts/tsconfig": "workspace:*",
-    "@sveltejs/vite-plugin-svelte": "^2.1.1",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
    "@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": "^6.3.1",
-    "csv-parse": "^5.3.10",
+    "csv-parse": "^5.4.0",
    "dompurify": "^3.0.3",
    "events": "^3.3.0",
-    "framework7": "^8.0.3",
+    "framework7": "^8.1.0",
-    "framework7-svelte": "^8.0.3",
+    "framework7-svelte": "^8.1.0",
    "img-comparison-slider": "^8.0.0",
-    "marked": "^5.0.3",
+    "marked": "^5.1.0",
    "pollen-css": "^4.6.2",
    "radix-icons-svelte": "^1.2.1",
    "style-mod": "^4.0.3",
    "svelte-bootstrap-icons": "^2.3.1",
-    "svelte-feather-icons": "^4.0.0",
+    "svelte-feather-icons": "^4.0.1",
-    "svelte-floating-ui": "^1.5.2",
+    "svelte-floating-ui": "^1.5.3",
-    "svelte-preprocess": "^5.0.3",
+    "svelte-preprocess": "^5.0.4",
-    "svelte-select": "^5.5.3",
+    "svelte-select": "^5.6.1",
-    "svelte-splitpanes": "^0.7.13",
+    "svelte-splitpanes": "^0.7.15",
    "svelte-tiny-virtual-list": "^2.0.5",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.2",
    "typed-emitter": "github:andywer/typed-emitter",
    "uuid": "^9.0.0",
    "vite-plugin-full-reload": "^1.0.5",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/workflows/defaultWorkflow.json
+++ b/public/workflows/defaultWorkflow.json
@@ -61,7 +61,7 @@
        ],
        "title": "UI.Gallery",
        "properties": {
-          "tags": [],
+          "tags": ["gen"],
          "defaultValue": [],
          "index": 3,
          "updateMode": "append",
@@ -1694,7 +1694,7 @@
        ],
        "title": "UI.Gallery",
        "properties": {
-          "tags": [],
+          "tags": ["hr"],
          "defaultValue": [],
          "index": 1,
          "updateMode": "append",
--- 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>
 {#if isMobile}
    <div>Redirecting...</div>
 {:else}
    <ComfyApp {app}/>
-
+{/if}
 <style>
 </style>
--- 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}>
    {#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>
    {:catch error}
            <div class="comfy-loading-error">
                <div>
                    Error loading app
                </div>
                <div>{error}</div>
                {#if error != null && error.stack}
                    {@const lines = error.stack.split("\n")}
                    {#each lines as line}
                        <div style:font-size="16px">{line}</div>
                    {/each}
                {/if}
            </div>
        {/await}
    {/if}
 </App>
 <div class="canvas-wrapper pane-wrapper" style="display: none">
    <canvas id="graph-canvas" />
 </div>
-{/if}
+
 <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/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[]
 }
@@ -86,6 +101,7 @@ export type ComfyUIPromptExtraData = {
 }
 type ComfyAPIEvents = {
    // JSON
    status: (status: ComfyAPIStatusResponse | null, error?: Error | null) => void,
    progress: (progress: Progress) => void,
    reconnecting: () => void,
@@ -96,6 +112,9 @@ type ComfyAPIEvents = {
    execution_cached: (promptID: PromptID, nodes: ComfyNodeID[]) => void,
    execution_interrupted: (error: ComfyInterruptedError) => void,
    execution_error: (error: ComfyExecutionError) => void,
    // Binary
    b_preview: (imageBlob: Blob) => void
 }
 export default class ComfyAPI {
@@ -125,8 +144,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,12 +174,13 @@ 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(
            `ws${window.location.protocol === "https:" ? "s" : ""}://${hostname}:${port}/ws${existingSession}`
        );
        this.socket.binaryType = "arraybuffer";
        this.socket.addEventListener("open", () => {
            opened = true;
@@ -180,6 +209,31 @@ export default class ComfyAPI {
        this.socket.addEventListener("message", (event) => {
            try {
                if (event.data instanceof ArrayBuffer) {
                    const view = new DataView(event.data);
                    const eventType = view.getUint32(0);
                    const buffer = event.data.slice(4);
                    switch (eventType) {
                        case 1:
                            const view2 = new DataView(event.data);
                            const imageType = view2.getUint32(0)
                            let imageMime: string
                            switch (imageType) {
                                case 1:
                                default:
                                    imageMime = "image/jpeg";
                                    break;
                                case 2:
                                    imageMime = "image/png"
                            }
                            const imageBlob = new Blob([buffer.slice(4)], { type: imageMime });
                            this.eventBus.emit("b_preview", imageBlob);
                            break;
                        default:
                            throw new Error(`Unknown binary websocket message of type ${eventType}`);
                    }
                }
                else {
                    const msg = JSON.parse(event.data);
                    switch (msg.type) {
                        case "status":
@@ -213,6 +267,7 @@ export default class ComfyAPI {
                        default:
                            console.warn("Unhandled message:", event.data);
                    }
                }
            } catch (error) {
                console.error("Error handling message", event.data, error);
            }
@@ -286,7 +341,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 +417,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/AccordionContainer.svelte
+++ b/src/lib/components/AccordionContainer.svelte
@@ -12,7 +12,7 @@
 import {cubicIn} from 'svelte/easing';
 import { flip } from 'svelte/animate';
 import { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutStates";
- import { startDrag, stopDrag } from "$lib/utils"
+ import { startDrag, stopDrag, vibrateIfPossible } from "$lib/utils"
 import { writable, type Writable } from "svelte/store";
 import { isHidden } from "$lib/widgets/utils";
 	import { handleContainerConsider, handleContainerFinalize } from "./utils";
@@ -56,7 +56,7 @@
 };
 function handleClick(e: CustomEvent<boolean>) {
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
     $isOpen = e.detail
 }
@@ -104,7 +104,7 @@
                            >
                                <WidgetContainer {layoutState} dragItem={item} zIndex={zIndex+1} {isMobile} />
                                {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                    <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                                    <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                                {/if}
                            </div>
                        {/each}
--- a/src/lib/components/BlockContainer.svelte
+++ b/src/lib/components/BlockContainer.svelte
@@ -102,7 +102,7 @@
                    >
                        <WidgetContainer {layoutState} dragItem={item} zIndex={zIndex+1} {isMobile} />
                        {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                            <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                            <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                        {/if}
                    </div>
                {/each}
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -39,6 +39,7 @@ 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";
 export const COMFYBOX_SERIAL_VERSION = 1;
@@ -211,7 +212,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 +369,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 +381,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 +404,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)
@@ -639,6 +651,27 @@ export default class ComfyApp {
            }
        });
        this.api.addEventListener("b_preview", (imageBlob: Blob) => {
            queueState.previewUpdated(imageBlob);
        });
        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 +750,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 +963,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);
        }
    }
@@ -1026,11 +1065,11 @@ 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);
+                    // console.warn("STD", stdPrompt);
                    const extraData: ComfyBoxPromptExtraData = {
                        extra_pnginfo: {
@@ -1063,8 +1102,8 @@ 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)
                        }
                    } 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">
@@ -330,7 +336,7 @@
                        ✕
                    </button>
                    {#if workflow[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                        <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                    {/if}
                </button>
            {/each}
@@ -380,6 +386,9 @@
                <span style="display: inline-flex !important; padding: 0 0.75rem;">
                    <Checkbox label="Auto-Add UI" bind:value={$uiState.autoAddUI}/>
                </span>
                <span style="display: inline-flex !important; padding: 0 0.75rem;">
                    <Checkbox label="Hide Previews" bind:value={$uiState.hidePreviews}/>
                </span>
                <!-- <span class="label" for="ui-edit-mode">
                     <BlockTitle>UI Edit mode</BlockTitle>
                     <select id="ui-edit-mode" name="ui-edit-mode" bind:value={$uiState.uiEditMode}>
--- 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,11 +44,19 @@
     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
     }
@@ -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/ComfyPaneView.svelte
+++ b/src/lib/components/ComfyPaneView.svelte
@@ -22,7 +22,7 @@
 export let mode: ComfyPaneMode = "none";
 export let showSwitcher: boolean = false;
- const MODES: [ComfyPaneMode, typeof SvelteComponent][] = [
+ const MODES: [ComfyPaneMode, typeof SvelteComponent<any>][] = [
     ["properties", Sliders2],
     ["templates", BoxSeam],
     ["queue", LayoutTextSidebarReverse]
--- 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!")
@@ -89,7 +85,7 @@ export class UpstreamNodeLocator {
    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();
@@ -129,6 +125,10 @@ export class UpstreamNodeLocator {
    return [null, null, null, null];
 }
 export class UpstreamNodeLocator {
    constructor(private isTheTargetNode: (node: LGraphNode, currentLink: LLink) => boolean) {
    }
    /*
     * Traverses the graph upstream from outputs towards inputs across
     * a sequence of nodes dependent on a condition.
@@ -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
@@ -1,25 +1,11 @@
 <script lang="ts" context="module">
 export type QueueUIEntryStatus = QueueEntryStatus | "pending" | "running";
 export type QueueUIEntry = {
     entry: QueueEntry,
     message: string,
     submessage: string,
     date?: string,
     status: QueueUIEntryStatus,
     images?: string[], // URLs
     details?: string, // shown in a tooltip on hover
     error?: WorkflowError
 }
 </script>
 <script lang="ts">
 import queueState, { type CompletedQueueEntry, type QueueEntry, type QueueEntryStatus } from "$lib/stores/queueState";
 import ProgressBar from "./ProgressBar.svelte";
 import SystemStatsBar from "./SystemStatsBar.svelte";
 import Spinner from "./Spinner.svelte";
 import PromptDisplay from "./PromptDisplay.svelte";
 import { List, ListUl, Grid } from "svelte-bootstrap-icons";
- import { convertComfyOutputToComfyURL, convertFilenameToComfyURL, getNodeInfo, truncateString } from "$lib/utils"
+ import { getNodeInfo, type ComfyImageLocation } from "$lib/utils"
 import type { Writable } from "svelte/store";
 import type { QueueItemType } from "$lib/api";
 import { Button } from "@gradio/button";
@@ -30,6 +16,7 @@
 import ComfyQueueListDisplay from "./ComfyQueueListDisplay.svelte";
 import ComfyQueueGridDisplay from "./ComfyQueueGridDisplay.svelte";
 import { WORKFLOWS_VIEW } from "./ComfyBoxWorkflowsView.svelte";
 import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
 export let app: ComfyApp;
@@ -52,46 +39,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 +81,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() {
@@ -234,7 +110,7 @@
 let showModal = false;
 let expandAll = false;
 let selectedPrompt = null;
- let selectedImages = [];
+ let selectedImages: ComfyImageLocation[] = [];
 function showPrompt(entry: QueueUIEntry) {
     if (entry.error != null) {
         showModal = false;
@@ -351,6 +227,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 +252,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/ComfyQueueGridDisplay.svelte
+++ b/src/lib/components/ComfyQueueGridDisplay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { QueueItemType } from "$lib/api";
- import { showLightbox } from "$lib/utils";
+ import { convertComfyOutputToComfyURL, showLightbox } from "$lib/utils";
 import type { QueueUIEntry } from "./ComfyQueue.svelte";
 import queueState from "$lib/stores/queueState";
@@ -19,7 +19,7 @@
     allEntries = []
     for (const entry of entries) {
         for (const image of entry.images) {
-             allEntries.push([entry, image]);
+             allEntries.push([entry, convertComfyOutputToComfyURL(image, true)]);
         }
     }
     allImages = allEntries.map(p => p[1]);
@@ -56,6 +56,7 @@
                    <img class="grid-entry-image"
                         on:click={(e) => handleClick(e, entry, i)}
                    src={image}
                    loading="lazy"
                    alt="thumbnail" />
                </div>
            {/each}
@@ -130,6 +131,8 @@
 .grid-entry-image {
     aspect-ratio: 1 / 1;
     object-fit: cover;
     width: 100%;
     max-width: unset;
     &:hover {
         cursor: pointer;
--- a/src/lib/components/ComfyQueueListDisplay.svelte
+++ b/src/lib/components/ComfyQueueListDisplay.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 import type { QueueItemType } from "$lib/api";
- import { showLightbox, truncateString } from "$lib/utils";
+ import { convertComfyOutputToComfyURL, showLightbox, truncateString } from "$lib/utils";
 import type { QueueUIEntry } from "./ComfyQueue.svelte";
 import queueState from "$lib/stores/queueState";
 import type { QueueUIEntry } from "$lib/stores/uiQueueState";
 export let entries: QueueUIEntry[] = [];
 export let showPrompt: (entry: QueueUIEntry) => void;
@@ -39,11 +39,13 @@
                    <div class="list-entry-images"
                         style="--cols: {Math.ceil(Math.sqrt(Math.min(entry.images.length, 4)))}" >
                        {#each entry.images.slice(0, 4) as image, i}
                            {@const imageURL = convertComfyOutputToComfyURL(image, true)}
                            <div>
                                <!-- svelte-ignore a11y-click-events-have-key-events -->
                                <img class="list-entry-image"
                                     on:click={(e) => showLightbox(entry.images, i, e)}
-                                src={image}
+                                src={imageURL}
                                loading="lazy"
                                alt="thumbnail" />
                            </div>
                        {/each}
--- a/src/lib/components/ComfyTemplates.svelte
+++ b/src/lib/components/ComfyTemplates.svelte
@@ -197,7 +197,7 @@
                                <div class="template-desc">{item.template.metadata.description}</div>
                            </div>
                            {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                <div in:fade={{duration:200, easing: cubicIn}} class='template-drag-item-shadow'/>
+                                <div in:fade|global={{duration:200, easing: cubicIn}} class='template-drag-item-shadow'/>
                            {/if}
                        {/each}
                    </div>
--- a/src/lib/components/PromptDisplay.svelte
+++ b/src/lib/components/PromptDisplay.svelte
@@ -8,7 +8,7 @@
 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, type ComfyImageLocation, convertComfyOutputToComfyURL } from "$lib/utils";
 import ReceiveOutputTargets from "./modal/ReceiveOutputTargets.svelte";
 import workflowState, { type ComfyBoxWorkflow, type WorkflowReceiveOutputTargets } from "$lib/stores/workflowState";
 import type { ComfyReceiveOutputNode } from "$lib/nodes/actions";
@@ -17,7 +17,7 @@
 const splitLength = 50;
 export let prompt: SerializedPromptInputsAll;
- export let images: string[] = []; // list of image URLs to ComfyUI's /view? endpoint
+ export let images: ComfyImageLocation[] = [];
 export let isMobile: boolean = false;
 export let expandAll: boolean = false;
 export let closeModal: () => void;
@@ -36,10 +36,7 @@
 let litegraphType = "(none)"
 $: if (images.length > 0) {
-     // since the image links come from gradio, have to parse the URL for the
+     comfyBoxImages = images.map(comfyFileToComfyBoxMetadata);
     // ComfyImageLocation params
     comfyBoxImages = images.map(comfyURLToComfyFile)
                            .map(comfyFileToComfyBoxMetadata);
 }
 else {
     comfyBoxImages = []
@@ -199,7 +196,7 @@
        <div class="image-container">
            <Block>
                <Gallery
-                    value={images}
+                    value={images.map(convertComfyOutputToComfyURL)}
                    label=""
                    show_label={false}
                    style={galleryStyle}
--- 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/TabsContainer.svelte
+++ b/src/lib/components/TabsContainer.svelte
@@ -12,7 +12,7 @@
 import {cubicIn} from 'svelte/easing';
 import { flip } from 'svelte/animate';
 import { type ContainerLayout, type WidgetLayout, type IDragItem, type WritableLayoutStateStore } from "$lib/stores/layoutStates";
- import { startDrag, stopDrag } from "$lib/utils"
+ import { startDrag, stopDrag, vibrateIfPossible } from "$lib/utils"
 import type { Writable } from "svelte/store";
 import { isHidden } from "$lib/widgets/utils";
 	import { handleContainerConsider, handleContainerFinalize } from "./utils";
@@ -62,7 +62,7 @@
 }
 function handleSelect() {
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
 }
 function _startDrag(e: MouseEvent | TouchEvent) {
@@ -112,7 +112,7 @@
                                </label>
                                <WidgetContainer {layoutState} dragItem={item} zIndex={zIndex+1} {isMobile} />
                                {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                                    <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                                    <div in:fade|global={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                                {/if}
                            </Block>
                        </div>
--- 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/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/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/actions/ComfySetNodeModeAdvancedAction.ts
+++ b/src/lib/nodes/actions/ComfySetNodeModeAdvancedAction.ts
@@ -73,10 +73,10 @@ export default class ComfySetNodeModeAdvancedAction extends ComfyGraphNode {
                if (hasTag) {
                    let newMode: NodeMode;
-                    if (enable && action.enable) {
+                    if (action.enable) {
-                        newMode = NodeMode.ALWAYS;
+                        newMode = enable ? NodeMode.ALWAYS : NodeMode.NEVER;
                    } else {
-                        newMode = NodeMode.NEVER;
+                        newMode = enable ? NodeMode.NEVER : NodeMode.ALWAYS;
                    }
                    nodeChanges[node.id] = newMode
                }
@@ -88,7 +88,12 @@ export default class ComfySetNodeModeAdvancedAction extends ComfyGraphNode {
                const container = entry.dragItem;
                const hasTag = container.attrs.tags.indexOf(action.tag) != -1;
                if (hasTag) {
-                    const hidden = !(enable && action.enable)
+                    let hidden: boolean;
                    if (action.enable) {
                        hidden = !enable
                    } else {
                        hidden = enable;
                    }
                    widgetChanges[container.id] = hidden
                }
            }
--- a/src/lib/nodes/widgets/ComfyComboNode.ts
+++ b/src/lib/nodes/widgets/ComfyComboNode.ts
@@ -170,7 +170,6 @@ export default class ComfyComboNode extends ComfyWidgetNode<string> {
        super.stripUserState(o);
        o.properties.values = []
        o.properties.defaultValue = null;
        (o as any).comfyValue = null
    }
 }
--- a/src/lib/nodes/widgets/ComfyGalleryNode.ts
+++ b/src/lib/nodes/widgets/ComfyGalleryNode.ts
@@ -9,7 +9,8 @@ import ComfyWidgetNode from "./ComfyWidgetNode";
 export interface ComfyGalleryProperties extends ComfyWidgetProperties {
    index: number | null,
    updateMode: "replace" | "append",
-    autoSelectOnUpdate: boolean
+    autoSelectOnUpdate: boolean,
    showPreviews: boolean
 }
 export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetadata[]> {
@@ -18,7 +19,8 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
        defaultValue: [],
        index: 0,
        updateMode: "replace",
-        autoSelectOnUpdate: true
+        autoSelectOnUpdate: true,
        showPreviews: true
    }
    static slotLayout: SlotLayout = {
--- a/src/lib/nodes/widgets/ComfyMarkdownNode.ts
+++ b/src/lib/nodes/widgets/ComfyMarkdownNode.ts
@@ -42,6 +42,7 @@ export default class ComfyMarkdownNode extends ComfyWidgetNode<string> {
            },
            {
                multiline: true,
                inputStyle: { fontFamily: "monospace" }
            }
        )
--- a/src/lib/nodes/widgets/ComfyWidgetNode.ts
+++ b/src/lib/nodes/widgets/ComfyWidgetNode.ts
@@ -357,9 +357,4 @@ export default abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
        this.value.set(value);
        this.shownOutputProperties = (o as any).shownOutputProperties;
    }
    override stripUserState(o: SerializedLGraphNode) {
        super.stripUserState(o);
        (o as any).comfyValue = LiteGraph.cloneObject(this.properties.defaultValue);
    }
 }
--- 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/stores/configDefs.ts
+++ b/src/lib/stores/configDefs.ts
@@ -119,6 +119,36 @@ const defNotifications: ConfigDefEnum<"notifications", NotificationState> = {
    }
 };
 export enum OutputThumbnailsMode {
    Auto,
    AlwaysThumbnail,
    AlwaysFullSize
 }
 const defOutputThumbnails: ConfigDefEnum<"outputThumbnails", OutputThumbnailsMode> = {
    name: "outputThumbnails",
    type: "enum",
    defaultValue: OutputThumbnailsMode.Auto,
    category: "ui",
    description: "If enabled, send back smaller sized output image thumbnails for gallery/queue/history. Enable if you have slow network or are using Colab.",
    options: {
        values: [
            {
                value: OutputThumbnailsMode.Auto,
                label: "Autodetect"
            },
            {
                value: OutputThumbnailsMode.AlwaysThumbnail,
                label: "Always use thumbnails"
            },
            {
                value: OutputThumbnailsMode.AlwaysFullSize,
                label: "Always use full size"
            },
        ]
    }
 };
 const defAlwaysStripUserState: ConfigDefBoolean<"alwaysStripUserState"> = {
    name: "alwaysStripUserState",
    type: "boolean",
@@ -155,6 +185,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[]",
@@ -194,10 +237,12 @@ export const CONFIG_DEFS = [
    defComfyUIHostname,
    defComfyUIPort,
    defNotifications,
    defOutputThumbnails,
    defAlwaysStripUserState,
    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/layoutStates.ts
+++ b/src/lib/stores/layoutStates.ts
@@ -615,6 +615,14 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                validNodeTypes: ["ui/gallery"],
                defaultValue: true
            },
            {
                name: "showPreviews",
                type: "boolean",
                location: "nodeProps",
                editable: true,
                validNodeTypes: ["ui/gallery"],
                defaultValue: true
            },
            // ImageUpload
            {
@@ -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";
@@ -20,6 +22,7 @@ type QueueStateOps = {
    executionCached: (promptID: PromptID, nodes: ComfyNodeID[]) => void,
    executionError: (error: ComfyExecutionError) => CompletedQueueEntry | null,
    progressUpdated: (progress: Progress) => void
    previewUpdated: (imageBlob: Blob) => void
    getQueueEntry: (promptID: PromptID) => QueueEntry | null;
    afterQueued: (workflowID: WorkflowInstID, promptID: PromptID, number: number, prompt: SerializedPromptInputsAll, extraData: any) => void
    queueItemDeleted: (type: QueueItemType, id: PromptID) => void;
@@ -80,8 +83,33 @@ export type QueueState = {
    queuePending: Writable<QueueEntry[]>,
    queueCompleted: Writable<CompletedQueueEntry[]>,
    queueRemaining: number | "X" | null;
    /*
     * Currently executing node if any
     */
    runningNodeID: ComfyNodeID | null;
    /*
     * Currently executing prompt if any
     */
    runningPromptID: PromptID | null;
    /*
     * Nodes which should be rendered as "executing" in the frontend (green border).
     * This includes the running node and all its parent subgraphs
     */
    executingNodes: Set<NodeID>;
    /*
     * Progress for the current node reported by the frontend
     */
    progress: Progress | null,
    /*
     * Image preview URL
     */
    previewURL: string | null,
    /**
     * If true, user pressed the "Interrupt" button in the frontend. Disable the
     * button and wait until the next prompt starts running to re-enable it
@@ -97,7 +125,9 @@ const store: Writable<QueueState> = writable({
    queueCompleted: writable([]),
    queueRemaining: null,
    runningNodeID: null,
    executingNodes: new Set(),
    progress: null,
    preview: null,
    isInterrupting: false
 })
@@ -154,6 +184,19 @@ function progressUpdated(progress: Progress) {
    })
 }
 function previewUpdated(imageBlob: Blob) {
    console.debug("[queueState] previewUpdated", imageBlob?.type)
    store.update(s => {
        if (s.runningNodeID == null) {
            s.previewURL = null;
            return s;
        }
        s.previewURL = URL.createObjectURL(imageBlob);
        return s;
    })
 }
 function statusUpdated(status: ComfyAPIStatusResponse | null) {
    console.debug("[queueState] statusUpdated", status)
    store.update((s) => {
@@ -271,6 +314,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 +322,18 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
                entry.nodesRan.add(runningNodeID)
            }
            s.runningNodeID = runningNodeID;
            s.runningPromptID = promptID;
            if (entry?.extraData?.workflowID) {
                const workflow = workflowState.getWorkflow(entry.extraData.workflowID);
                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.
@@ -308,7 +364,10 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
                console.debug("[queueState] Could not find in pending! (executingUpdated)", promptID)
            }
            s.progress = null;
            s.previewURL = null;
            s.runningNodeID = null;
            s.runningPromptID = null;
            s.executingNodes.clear();
        }
        entry_ = entry;
        return s
@@ -332,7 +391,10 @@ function executionCached(promptID: PromptID, nodes: ComfyNodeID[]) {
        }
        s.isInterrupting = false; // TODO move to start
        s.progress = null;
        s.previewURL = null;
        s.runningNodeID = null;
        s.runningPromptID = null;
        s.executingNodes.clear();
        return s
    })
 }
@@ -349,7 +411,10 @@ function executionError(error: ComfyExecutionError): CompletedQueueEntry | null
            console.error("[queueState] Could not find in pending! (executionError)", error.prompt_id)
        }
        s.progress = null;
        s.previewURL = null;
        s.runningNodeID = null;
        s.runningPromptID = null;
        s.executingNodes.clear();
        return s
    })
    return entry_;
@@ -383,6 +448,9 @@ function executionStart(promptID: PromptID) {
            moveToRunning(index, queue)
        }
        s.isInterrupting = false;
        s.runningNodeID = null;
        s.runningPromptID = promptID;
        s.executingNodes.clear();
        return s
    })
 }
@@ -444,10 +512,12 @@ function queueCleared(type: QueueItemType) {
    store.update(s => {
        if (type === "queue") {
            s.queuePending.set([]);
            s.queueRunning.set([]);
            s.queueRemaining = 0;
            s.runningNodeID = null;
            s.runningPromptID = null;
            s.progress = null;
            s.previewURL = null;
            s.executingNodes.clear();
        }
        else {
            s.queueCompleted.set([])
@@ -501,6 +571,7 @@ const queueStateStore: WritableQueueStateStore =
    historyUpdated,
    statusUpdated,
    progressUpdated,
    previewUpdated,
    executionStart,
    executingUpdated,
    executionCached,
--- 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,208 @@
 import type { PromptID, QueueItemType } from '$lib/api';
 import type { ComfyImageLocation } from "$lib/utils";
 import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
 import queueState, { QueueEntryStatus, type CompletedQueueEntry, type QueueEntry } from './queueState';
 import 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?: ComfyImageLocation[], // 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 = "Prompt";
    if (entry.extraData?.workflowTitle != null) {
        message = `${entry.extraData.workflowTitle}`
    }
    if (subgraphs && subgraphs.length > 0) {
        const subgraphsString = subgraphs.join(', ')
        message += ` (${subgraphsString})`
    }
    let submessage = `#: ${entry.number}, 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]
    }
    const outputs = Object.values(entry.outputs)
        .filter(o => o.images)
        .flatMap(o => o.images)
    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)
    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;
 }
 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
@@ -10,6 +10,7 @@ export type UIState = {
    autoAddUI: boolean,
    uiUnlocked: boolean,
    uiEditMode: UIEditMode,
    hidePreviews: boolean,
    reconnecting: boolean,
    forceSaveUserState: boolean | null,
@@ -30,6 +31,7 @@ const store: Writable<UIState> = writable(
        autoAddUI: true,
        uiUnlocked: false,
        uiEditMode: "widgets",
        hidePreviews: false,
        reconnecting: false,
        forceSaveUserState: null,
--- a/src/lib/stores/workflowState.ts
+++ b/src/lib/stores/workflowState.ts
@@ -57,6 +57,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
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,10 +4,12 @@ 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 ComfyApp, { type SerializedPrompt } from "./components/ComfyApp";
-import workflowState from "./stores/workflowState";
+import workflowState, { type WorkflowReceiveOutputTargets } from "./stores/workflowState";
 import { ImageViewer } from "./ImageViewer";
 import configState from "$lib/stores/configState";
 import SendOutputModal, { type SendOutputModalResult } from "$lib/components/modal/SendOutputModal.svelte";
 import { OutputThumbnailsMode } from "./stores/configDefs";
 export function clamp(n: number, min: number, max: number): number {
    if (max <= min)
@@ -299,29 +301,78 @@ export function convertComfyOutputToGradio(output: SerializedPromptOutput): Grad
 export function convertComfyOutputEntryToGradio(r: ComfyImageLocation): GradioFileData {
    const url = configState.getBackendURL();
    const params = new URLSearchParams(r)
    const fileData: GradioFileData = {
        name: r.filename,
        orig_name: r.filename,
        is_file: false,
-        data: url + "/view?" + params
+        data: convertComfyOutputToComfyURL(r)
    }
    return fileData
 }
-export function convertComfyOutputToComfyURL(output: string | ComfyImageLocation): string {
+function convertComfyPreviewTypeToString(preview: ComfyImagePreviewType): string {
    const arr = []
    switch (preview.format) {
        case ComfyImagePreviewFormat.JPEG:
            arr.push("jpeg")
            break;
        case ComfyImagePreviewFormat.WebP:
        default:
            arr.push("webp")
            break;
    }
    arr.push(String(preview.quality))
    return arr.join(";")
 }
 export function convertComfyOutputToComfyURL(output: string | ComfyImageLocation, thumbnail: boolean = false): string {
    if (typeof output === "string")
        return output;
-    const params = new URLSearchParams(output)
+    const paramsObj = {
-    const url = configState.getBackendURL();
+        filename: output.filename,
-    return url + "/view?" + params
+        subfolder: output.subfolder,
        type: output.type
    }
-export function convertGradioFileDataToComfyURL(image: GradioFileData, type: ComfyUploadImageType = "input"): string {
+    if (thumbnail) {
-    const baseUrl = configState.getBackendURL();
+        let doThumbnail: boolean;
-    const params = new URLSearchParams({ filename: image.name, subfolder: "", type })
+
-    return `${baseUrl}/view?${params}`
+        switch (get(configState).outputThumbnails) {
            case OutputThumbnailsMode.AlwaysFullSize:
                doThumbnail = false;
                break;
            case OutputThumbnailsMode.AlwaysThumbnail:
                doThumbnail = true;
                break;
            case OutputThumbnailsMode.Auto:
            default:
                // TODO detect colab, etc.
                if (isMobileBrowser(navigator.userAgent)) {
                    doThumbnail = true;
                }
                else {
                    doThumbnail = false;
                }
                break;
        }
        if (doThumbnail) {
            output.preview = {
                format: ComfyImagePreviewFormat.WebP,
                quality: 80
            }
        }
    }
    if (output.preview != null)
        paramsObj["preview"] = convertComfyPreviewTypeToString(output.preview)
    const params = new URLSearchParams(paramsObj)
    const url = configState.getBackendURL();
    return url + "/view?" + params
 }
 export function convertGradioFileDataToComfyOutput(fileData: GradioFileData, type: ComfyUploadImageType = "input"): ComfyImageLocation {
@@ -335,18 +386,6 @@ export function convertGradioFileDataToComfyOutput(fileData: GradioFileData, typ
    }
 }
 export function convertFilenameToComfyURL(filename: string,
    subfolder: string = "",
    type: "input" | "output" | "temp" = "output"): string {
    const params = new URLSearchParams({
        filename,
        subfolder,
        type
    })
    const url = configState.getBackendURL();
    return url + "/view?" + params
 }
 export function jsonToJsObject(json: string): string {
    // Try to parse, to see if it's real JSON
    JSON.parse(json);
@@ -412,6 +451,16 @@ export interface SerializedPromptOutput {
    [key: string]: any
 }
 export enum ComfyImagePreviewFormat {
    WebP = "webp",
    JPEG = "jpeg",
 }
 export type ComfyImagePreviewType = {
    format: ComfyImagePreviewFormat,
    quality: number
 }
 /** Raw output entry as received from ComfyUI's backend */
 export type ComfyImageLocation = {
    /* Filename with extension in the subfolder. */
@@ -419,7 +468,19 @@ export type ComfyImageLocation = {
    /* Subfolder in the containing folder. */
    subfolder: string,
    /* Base ComfyUI folder where the image is located. */
-    type: ComfyUploadImageType
+    type: ComfyUploadImageType,
    /*
     * Preview information
     *
     * "format;quality"
     *
     * ex)
     * webp;50 -> webp, quality 50
     * webp;50 -> webp, quality 50
     * jpeg;80 -> rgb, jpeg, quality 80
     *
     */
    preview?: ComfyImagePreviewType
 }
 /*
@@ -543,27 +604,54 @@ export function comfyBoxImageToComfyURL(image: ComfyBoxImageMetadata): string {
    return convertComfyOutputToComfyURL(image.comfyUIFile)
 }
 function parseComfyUIPreviewType(previewStr: string): ComfyImagePreviewType {
    let split = previewStr.split(";")
    let format = ComfyImagePreviewFormat.WebP;
    if (split[0] === "webp")
        format = ComfyImagePreviewFormat.WebP;
    else if (split[0] === "jpeg")
        format = ComfyImagePreviewFormat.JPEG;
    let quality = parseInt(split[0])
    if (isNaN(quality))
        quality = 80
    return { format, quality }
 }
 export function comfyURLToComfyFile(urlString: string): ComfyImageLocation | null {
    const url = new URL(urlString);
    const params = new URLSearchParams(url.search);
    const filename = params.get("filename")
    const type = params.get("type") as ComfyUploadImageType;
    const subfolder = params.get("subfolder") || ""
    const previewStr = params.get("preview") || null;
    let preview = null
    if (previewStr != null) {
        preview = parseComfyUIPreviewType(preview);
    }
    // If at least filename and type exist then we're good
    if (filename != null && type != null) {
-        return { filename, type, subfolder }
+        return { filename, type, subfolder, preview }
    }
    return null;
 }
-export function showLightbox(images: string[], index: number, e: Event) {
+export function showLightbox(images: ComfyImageLocation[] | string[], index: number, e: Event) {
    e.preventDefault()
    if (!images)
        return
-    ImageViewer.instance.showModal(images, index);
+    let images_: string[]
    if (typeof images[0] === "object")
        images_ = (images as ComfyImageLocation[]).map(v => convertComfyOutputToComfyURL(v))
    else
        images_ = (images as string[])
    ImageViewer.instance.showModal(images_, index);
    e.stopPropagation()
 }
@@ -618,6 +706,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 +800,37 @@ 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 vibrateIfPossible(strength: number | Array<number>) {
  if (window.navigator.vibrate) {
    window.navigator.vibrate(strength);
  }
 }
--- a/src/lib/widgets/ButtonWidget.svelte
+++ b/src/lib/widgets/ButtonWidget.svelte
@@ -3,6 +3,7 @@
 import { Button } from "@gradio/button";
 import { get, type Writable, writable } from "svelte/store";
 import { isDisabled } from "./utils"
 import { vibrateIfPossible } from "$lib/utils";
 import type { ComfyButtonNode } from "$lib/nodes/widgets";
 export let widget: WidgetLayout | null = null;
@@ -24,7 +25,7 @@
 function onClick(e: MouseEvent) {
     node.onClick();
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
 }
 const style = {
--- a/src/lib/widgets/CheckboxWidget.svelte
+++ b/src/lib/widgets/CheckboxWidget.svelte
@@ -4,6 +4,7 @@
 import { Checkbox } from "@gradio/form";
 import { get, type Writable, writable } from "svelte/store";
 import { isDisabled } from "./utils"
 import { vibrateIfPossible } from "$lib/utils";
 import type { SelectData } from "@gradio/utils";
 import type { ComfyCheckboxNode } from "$lib/nodes/widgets";
@@ -25,7 +26,7 @@
 function onSelect(e: CustomEvent<SelectData>) {
     $nodeValue = e.detail.selected
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
 }
 </script>
--- 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, vibrateIfPossible } from '$lib/utils';
 export let widget: WidgetLayout | null = null;
 export let isMobile: boolean = false;
 let node: ComfyComboNode | null = null;
@@ -69,30 +70,14 @@
 function onFocus() {
     // console.warn("FOCUS")
     if (listOpen) {
-         navigator.vibrate(20)
+         vibrateIfPossible(20)
     }
 }
 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)
@@ -101,13 +86,15 @@
 function handleSelect(index: number) {
     // console.warn("SEL", index)
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
     const item = $valuesForCombo[index]
     activeIndex = index;
     $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/ComfyUI.grammar
+++ b/src/lib/widgets/ComfyUI.grammar
@@ -0,0 +1,36 @@
@top Program { expression* }
@skip {} {
  BlockComment { "/*" (blockCommentContent | blockCommentNewline)* blockCommentEnd }
 }
@skip { space | LineComment | BlockComment }
@local tokens {
  blockCommentEnd { "*/" }
  blockCommentNewline { "\n" }
  @else blockCommentContent
 }
 expression {
  Identifier |
  String |
  Boolean |
  Application { "(" expression* ")" }
 }
@tokens {
  Identifier { $[a-zA-Z_\-0-9]+ }
  String { '"' (!["\\] | "\\" _)* '"' }
  Boolean { "#t" | "#f" }
  LineComment { "//" ![\n]* }
  space { $[ \t\n\r]+ }
  "(" ")"
 }
@detectDelim
--- a/src/lib/widgets/ComfyUI.grammar.d.ts
+++ b/src/lib/widgets/ComfyUI.grammar.d.ts
@@ -0,0 +1,3 @@
 import { LRParser } from "@lezer/lr"
 export declare const parser: LRParser
--- a/src/lib/widgets/GalleryWidget.svelte
+++ b/src/lib/widgets/GalleryWidget.svelte
@@ -11,6 +11,11 @@
 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";
 import queueState from "$lib/stores/queueState";
 import uiState from "$lib/stores/uiState";
 import { loadImage } from "./utils";
 import Spinner from "$lib/components/Spinner.svelte";
 export let widget: WidgetLayout | null = null;
 export let isMobile: boolean = false;
@@ -24,6 +29,41 @@
 $: widget && setNodeValue(widget);
 function tagsMatch(tags: string[] | null): boolean {
     if(tags != null && tags.length > 0)
         return node.properties.tags.length > 0 && node.properties.tags.every(t => tags.includes(t));
     else
         return node.properties.tags.length === 0;
 }
 let previewURL: string | null;
 let previewImage: HTMLImageElement | null = null;
 let previewElem: HTMLImageElement | null = null
 $: {
     previewURL = $queueState.previewURL;
     if (previewURL && $queueState.runningPromptID && !$uiState.hidePreviews && node.properties.showPreviews) {
         const queueEntry = queueState.getQueueEntry($queueState.runningPromptID)
         if (queueEntry != null) {
             const tags = queueEntry.extraData?.extra_pnginfo?.comfyBoxPrompt?.subgraphs;
             if (tagsMatch(tags)) {
                 loadImage(previewURL).then((img) => {
                     previewImage = img;
                 })
             }
         }
     }
     else {
         previewImage = null;
     }
 }
 function showPreview() {
 }
 function hidePreview() {
 }
 function setNodeValue(widget: WidgetLayout) {
     if (widget) {
         node = widget.node as ComfyGalleryNode
@@ -33,6 +73,8 @@
         imageHeight = node.imageHeight
         selected_image = node.selectedImage;
         forceSelectImage = node.forceSelectImage;
         previewURL = null;
         previewImage = null;
         if ($nodeValue != null) {
             if (node.properties.index < 0 || node.properties.index >= $nodeValue.length) {
@@ -47,19 +89,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 +103,26 @@
     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({
+ function onClickedSingle(e: CustomEvent<GradioSelectData>) {
-         photos: images,
+     const images = $nodeValue.map(comfyBoxImageToComfyURL)
-         thumbs: images.map(i => i.url),
+     if (isMobile) {
-         type: 'popup',
+         showMobileLightbox(images, 0, { thumbs: images });
-     });
+     }
-     mobileLightbox.open($selected_image)
+     else {
         ImageViewer.instance.showModal(images, 0)
     }
 }
 function onClicked(e: CustomEvent<HTMLImageElement>) {
     if (isMobile) {
-         showMobileLightbox(e.detail)
+         showMobileLightbox_(e.detail, $selected_image)
     }
     else {
         ImageViewer.instance.showLightbox(e.detail)
@@ -103,7 +137,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]}
@@ -112,6 +146,7 @@
                        value={url}
                        show_label={widget.attrs.title != ""}
                        label={widget.attrs.title}
                        on:select={onClickedSingle}
                        bind:imageWidth={$imageWidth}
                        bind:imageHeight={$imageHeight}
                    />
@@ -122,9 +157,14 @@
        </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">
                    {#if previewImage && $queueState.runningPromptID != null}
                        <div class="comfy-gallery-preview" on:mouseover={hidePreview} on:mouseout={showPreview} >
                            <img src={previewImage.src} bind:this={previewElem} on:mouseout={showPreview} />
                        </div>
                    {/if}
                    <Gallery
                        value={images}
                        label={widget.attrs.title}
@@ -170,6 +210,29 @@
             }
         }
     }
     &:hover .comfy-gallery-preview {
         opacity: 0%;
     }
 }
 .comfy-gallery-preview {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: var(--layer-top);
     pointer-events: none;
     transition: opacity 0.1s linear;
     opacity: 100%;
     > img {
         width: var(--size-full);
         height: var(--size-full);
         object-fit: contain;
         border: 5px dashed var(--secondary-400);
     }
 }
 .padding {
--- a/src/lib/widgets/ImageUploadWidget.svelte
+++ b/src/lib/widgets/ImageUploadWidget.svelte
@@ -230,7 +230,7 @@
        />
    {:else}
        <div class="comfy-image-editor-panel">
-            {#if _value && canMask}
+            {#if _value && _value.length > 0 && canMask}
                {@const comfyURL = convertComfyOutputToComfyURL(_value[0])}
                <div class="mask-canvas-wrapper" style:display={editMask ? "block" : "none"}>
                    <MaskCanvas bind:this={maskCanvasComp} fileURL={comfyURL} on:release={onMaskReleased} on:loaded={onMaskReleased} />
--- a/src/lib/widgets/NumberWidget.svelte
+++ b/src/lib/widgets/NumberWidget.svelte
@@ -3,7 +3,7 @@
 import { type WidgetLayout } from "$lib/stores/layoutStates";
 import { Range } from "$lib/components/gradio/form";
 import { get, type Writable } from "svelte/store";
- import { debounce } from "$lib/utils";
+ import { debounce, vibrateIfPossible } from "$lib/utils";
 import interfaceState from "$lib/stores/interfaceState";
 import { isDisabled } from "./utils"
 export let widget: WidgetLayout | null = null;
@@ -96,7 +96,7 @@
         lastDisplayValue = option;
         canVibrate = false;
         setTimeout(() => { canVibrate = true }, 30)
-         navigator.vibrate(10)
+         vibrateIfPossible(10)
     }
 }
 </script>
--- a/src/lib/widgets/RadioWidget.svelte
+++ b/src/lib/widgets/RadioWidget.svelte
@@ -5,7 +5,7 @@
 import { get, type Writable, writable } from "svelte/store";
 import { isDisabled } from "./utils"
 import type { SelectData } from "@gradio/utils";
-	import { clamp } from "$lib/utils";
+ import { clamp, vibrateIfPossible } from "$lib/utils";
 import type { ComfyRadioNode } from "$lib/nodes/widgets";
 export let widget: WidgetLayout | null = null;
@@ -34,7 +34,7 @@
 function onSelect(e: CustomEvent<SelectData>) {
     node.setValue(e.detail.value)
     node.index = e.detail.index as number
-     navigator.vibrate(20)
+     vibrateIfPossible(20)
 }
 </script>
--- a/src/lib/widgets/TextWidgetCodeVariant.ts
+++ b/src/lib/widgets/TextWidgetCodeVariant.ts
@@ -14,7 +14,8 @@ import {
    indentOnInput,
    syntaxHighlighting,
    defaultHighlightStyle,
-    foldKeymap
+    foldKeymap,
    LRLanguage, LanguageSupport, indentNodeProp, foldNodeProp, foldInside, delimitedIndent
 } from "@codemirror/language";
 import { history, defaultKeymap, historyKeymap } from "@codemirror/commands";
 import {
@@ -27,8 +28,26 @@ import {
    type CompletionSource, autocompletion, CompletionContext, startCompletion,
    currentCompletions, completionStatus, completeFromList, acceptCompletion
 } from "@codemirror/autocomplete"
 import { styleTags, tags as t } from "@lezer/highlight"
 import DanbooruTags from "$lib/DanbooruTags";
 import { parser } from "./ComfyUI.grammar"
 export const comfyUILanguage = LRLanguage.define({
    name: "ComfyUI",
    parser: parser.configure({
        props: [
            styleTags({
                LineComment: t.lineComment,
                BlockComment: t.blockComment,
            })
        ]
    }),
    languageData: {
        commentTokens: { line: "//", block: { open: "/*", close: "*/" } },
    }
 })
 export const basicSetup: Extension = /*@__PURE__*/ (() => [
    lineNumbers(),
    highlightSpecialChars(),
@@ -43,6 +62,7 @@ export const basicSetup: Extension = /*@__PURE__*/ (() => [
    crosshairCursor(),
    EditorView.lineWrapping,
    DanbooruTags.getCompletionExt(),
    new LanguageSupport(comfyUILanguage),
    keymap.of([
        ...closeBracketsKeymap,
--- 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,132 +1,42 @@
 <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 { vibrateIfPossible } 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;
 function queuePrompt() {
-     navigator.vibrate(20)
+     vibrateIfPossible(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, vibrateIfPossible } 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() {
     vibrateIfPossible(20)
     app.runDefaultQueueAction()
 }
 async function refreshCombos() {
     vibrateIfPossible(20)
     await app.refreshComboInNodes()
 }
 function doSave(): void {
     if (!fileInput)
         return;
     vibrateIfPossible(20)
     app.querySave()
 }
 function doLoad(): void {
     if (!fileInput)
         return;
     vibrateIfPossible(20)
     fileInput.value = null;
     fileInput.click();
 }
 function loadWorkflow(): void {
     app.handleFile(fileInput.files[0]);
 }
 function doSaveLocal(): void {
     vibrateIfPossible(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,114 @@
 <script lang="ts">
 import { Page, Navbar, Block, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, f7 } from "framework7-svelte"
 import type ComfyApp from "$lib/components/ComfyApp";
 import interfaceState from "$lib/stores/interfaceState";
 import { convertComfyOutputToComfyURL, 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, convertComfyOutputToComfyURL(image, true)]);
         }
     }
     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 { convertComfyOutputToComfyURL, 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 convertComfyOutputToComfyURL(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() {
     vibrateIfPossible(20)
     await app.refreshComboInNodes()
 }
 function doSaveLocal(): void {
     vibrateIfPossible(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,75 @@
 <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 { vibrateIfPossible } from "$lib/utils";
 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;
     vibrateIfPossible(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
@@ -41,7 +41,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 +77,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 +250,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/ComfyGraphTests.ts
+++ b/src/tests/ComfyGraphTests.ts
@@ -1,11 +1,12 @@
 import ComfyGraph from "$lib/ComfyGraph";
-import { ComfyNumberNode } from "$lib/nodes/widgets";
+import { ComfyNumberNode, ComfyComboNode } from "$lib/nodes/widgets";
 import { ComfyBoxWorkflow } from "$lib/stores/workflowState";
 import { LiteGraph, Subgraph } from "@litegraph-ts/core";
 import { get } from "svelte/store";
 import { expect } from 'vitest';
 import UnitTest from "./UnitTest";
 import { Watch } from "@litegraph-ts/nodes-basic";
 import type { SerializedComfyWidgetNode } from "$lib/nodes/widgets/ComfyWidgetNode";
 export default class ComfyGraphTests extends UnitTest {
    test__onNodeAdded__updatesLayoutState() {
@@ -107,4 +108,24 @@ export default class ComfyGraphTests extends UnitTest {
        expect(serNode.outputs[0]._data).toBeUndefined()
    }
    test__serialize__savesComboData() {
        const [{ graph }, layoutState] = ComfyBoxWorkflow.create()
        layoutState.initDefaultLayout()
        const widget = LiteGraph.createNode(ComfyComboNode);
        const watch = LiteGraph.createNode(Watch);
        graph.add(widget)
        graph.add(watch)
        widget.connect(0, watch, 0)
        widget.properties.values = ["A", "B", "C"]
        widget.setValue("B");
        const result = graph.serialize();
        const serNode = result.nodes.find(n => n.id === widget.id) as SerializedComfyWidgetNode;
        expect(serNode.comfyValue).toBe("B")
    }
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,6 +8,7 @@ import removeConsole from 'vite-plugin-svelte-console-remover';
 import glsl from 'vite-plugin-glsl';
 import { execSync } from "child_process"
 import { visualizer } from "rollup-plugin-visualizer";
 import { lezer } from "@lezer/generator/rollup"
 const isProduction = process.env.NODE_ENV === "production";
 console.log("Production build: " + isProduction)
@@ -31,6 +32,7 @@ export default defineConfig({
        isProduction && removeConsole(),
        glsl(),
        svelte(),
        lezer(),
        visualizer(),
        viteStaticCopy({
            targets: [
@@ -55,6 +57,7 @@ export default defineConfig({
        },
    },
    build: {
        minify: isProduction,
        sourcemap: true,
        rollupOptions: {
            input: {
Author	SHA1	Message	Date
space-nuko	abd31401f0	Merge pull request #148 from haze/hb/vibrateIfPossible `vibrateIfPossible`: fixes iOS safari uncaught exceptions & etc	2023-08-25 23:43:22 -05:00
haze	2f48f96830	Update CheckboxWidget.svelte	2023-08-25 15:26:15 -04:00
Haze Booth	63d51e9119	Introduce `vibrateIfPossible` into the utils package. This will check if the browser has support for vibrating. This fixes a number of bugs for iOS safari & friends.	2023-08-24 12:02:22 -04:00
space-nuko	6f02912d2e	Merge pull request #125 from space-nuko/restore-params2 Upgrade Svelte and dependency versions	2023-07-07 09:49:39 -05:00
space-nuko	3b49bac47b	Merge pull request #126 from space-nuko/server-args Add arguments to serve.py	2023-07-07 09:49:27 -05:00
space-nuko	33ed379a98	Add arguments to serve.py	2023-07-07 09:12:28 -05:00
space-nuko	c817231241	Upgrade dependencies	2023-07-07 09:11:30 -05:00
space-nuko	2c7566e8e6	migration to Svelte 4	2023-06-22 13:30:20 -05:00
space-nuko	c875f9c4f6	Code editor language support	2023-06-20 02:09:10 -05:00
space-nuko	43ed176502	Show lightbox when clicking StaticImage	2023-06-20 02:08:08 -05:00
space-nuko	228ea20dcb	Merge pull request #120 from space-nuko/previews Minor fixes	2023-06-20 00:16:06 -05:00
space-nuko	334692eb1a	Workflow serialization fix ensure user data for values in workflow isn't stripped	2023-06-19 19:21:11 -05:00
space-nuko	3275777d2f	Don't strip combo value from workflow	2023-06-08 22:20:45 -05:00
space-nuko	4a92bb68ee	fixes	2023-06-08 19:33:26 -05:00
space-nuko	f24eb23991	Merge pull request #115 from space-nuko/previews Latent previews	2023-06-07 10:58:29 -05:00
space-nuko	b126327ec2	Tag default workflow for previews use Galleries should be tagged correctly to receive previews	2023-06-05 21:24:24 -05:00
space-nuko	27d0a4bd30	Thumbnail option for gallery/queue images	2023-06-05 21:15:49 -05:00
space-nuko	eb02561906	Basic preview support (as of latest PR commit)	2023-06-05 15:45:08 -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
		`@@ -0,0 +1,3 @@`
							`import { LRParser } from "@lezer/lr"`

							`export declare const parser: LRParser`