Mobile queue

Mobile gallery
Refactor UI queue state
2023-05-31 22:25:53 -05:00 · 2023-05-31 19:19:23 -05:00 · 2023-05-31 17:34:14 -05:00 · 2023-05-31 17:04:00 -05:00 · 2023-05-31 16:58:34 -05:00 · 2023-05-31 15:49:45 -05:00
84 changed files with 29025 additions and 10250 deletions
--- a/index.html
+++ b/index.html
@@ -7,17 +7,6 @@
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="theme-color" content="#2196f3">
    </head>
    <script>
     if(!window.location.search.substring(1) == "desktop=true") {
         if (navigator.userAgent.match(/iPhone/i)
             || navigator.userAgent.match(/iPad/i)
             || navigator.userAgent.match(/Android/i)
             || navigator.userAgent.match(/Blackberry/i)
             || navigator.userAgent.match(/WebOs/i)) {
             window.location.href = "/mobile/"
         }
     }
    </script>
    <body>
        <div id="app-root"/>
        <script type="module" src='/src/main-desktop.ts'></script>
--- a/2
+++ b/2
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
    "lint": "prettier --plugin-search-dir . --check . && eslint .",
    "format": "prettier --plugin-search-dir . --write .",
    "svelte-check": "svelte-check",
-    "prebuild": "pnpm run build:css && pnpm --filter=klecks lang:build",
+    "prebuild": "pnpm run build:css",
    "build:css": "pollen -c gradio/js/theme/src/pollen.config.cjs && mv src/pollen.css node_modules/@gradio/theme/src"
  },
  "devDependencies": {
@@ -30,7 +30,7 @@
    "prettier-plugin-svelte": "^2.10.0",
    "rollup-plugin-visualizer": "^5.9.0",
    "sass": "^1.61.0",
-    "svelte": "^3.58.0",
+    "svelte": "^3.59.0",
    "svelte-check": "^3.2.0",
    "svelte-dnd-action": "^0.9.22",
    "typescript": "^5.0.3",
@@ -50,6 +50,7 @@
    "@codemirror/search": "^6.2.2",
    "@codemirror/state": "^6.1.2",
    "@codemirror/view": "^6.4.1",
    "@dogagenc/svelte-markdown": "^0.2.4",
    "@gradio/accordion": "workspace:*",
    "@gradio/atoms": "workspace:*",
    "@gradio/button": "workspace:*",
@@ -85,7 +86,7 @@
    "framework7": "^8.0.3",
    "framework7-svelte": "^8.0.3",
    "img-comparison-slider": "^8.0.0",
-    "klecks": "workspace:*",
+    "marked": "^5.0.3",
    "pollen-css": "^4.6.2",
    "radix-icons-svelte": "^1.2.1",
    "style-mod": "^4.0.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,4 +2,3 @@ packages:
  - 'gradio/js/*'
  - 'gradio/client/js'
  - 'litegraph/packages/*'
  - 'klecks'
--- a/public/config.json
+++ b/public/config.json
@@ -1,9 +0,0 @@
 {
 	"comfyUIHostname": "localhost",
 	"comfyUIPort": 8188,
 	"alwaysStripUserState": false,
 	"promptForWorkflowName": false,
 	"confirmWhenUnloadingUnsavedChanges": true,
 	"builtInTemplates": ["ControlNet", "LoRA x5", "Model Loader", "Positive_Negative", "Seed Randomizer"],
 	"cacheBuiltInResources": true
 }
--- a/public/workflows/conditioningRegions.json
+++ b/public/workflows/conditioningRegions.json
@@ -3331,17 +3331,17 @@
                    "title": "UI.Text",
                    "properties": {
                      "tags": [],
-                      "defaultValue": "masterpiece, 1girl, (yuri:1.2), city street, cityscape, open shirt, breasts, large breasts, nipples, shiny skin, full body, happy, red hair, red eyes, looking at another, eye contact, red skirt",
+                      "defaultValue": "masterpiece, 1girl, city street, cityscape, large shiny skin, full body, happy, red hair, red eyes, looking at another, eye contact, red skirt",
                      "multiline": true,
                      "lines": 5,
                      "maxLines": 5
                    },
                    "widgets_values": [
-                      "masterpiece, 1girl, (yuri:1.2), city street, cityscape, open shirt, breasts, large breasts, nipples, shiny skin, full body, happy, red hair, red eyes, looking at another, eye contact, red skirt"
+                      "masterpiece, 1girl, city street, cityscape, large shiny skin, full body, happy, red hair, red eyes, looking at another, eye contact, red skirt"
                    ],
                    "color": "#223",
                    "bgColor": "#335",
-                    "comfyValue": "masterpiece, 1girl, (yuri:1.2), city street, cityscape, open shirt, breasts, large breasts, nipples, shiny skin, full body, happy, red hair, red eyes, looking at another, eye contact, red skirt",
+                    "comfyValue": "masterpiece, 1girl, city street, cityscape, large shiny skin, full body, happy, red hair, red eyes, looking at another, eye contact, red skirt",
                    "shownOutputProperties": {},
                    "saveUserState": true
                  },
@@ -3396,17 +3396,17 @@
                    "title": "UI.Text",
                    "properties": {
                      "tags": [],
-                      "defaultValue": "masterpiece, 1girl, (yuri:1.2), open shirt, breasts, medium breasts, nipples, city street, cityscape, full body, happy, blue hair, blue eyes, looking at another, eye contact, blue skirt",
+                      "defaultValue": "masterpiece, 1girl, city street, cityscape, full body, happy, blue hair, blue eyes, looking at another, eye contact, blue skirt",
                      "multiline": true,
                      "lines": 5,
                      "maxLines": 5
                    },
                    "widgets_values": [
-                      "masterpiece, 1girl, (yuri:1.2), open shirt, breasts, medium breasts, nipples, city street, cityscape, full body, happy, blue hair, blue eyes, looking at another, eye contact, blue skirt"
+                      "masterpiece, 1girl, city street, cityscape, full body, happy, blue hair, blue eyes, looking at another, eye contact, blue skirt"
                    ],
                    "color": "#223",
                    "bgColor": "#335",
-                    "comfyValue": "masterpiece, 1girl, (yuri:1.2), open shirt, breasts, medium breasts, nipples, city street, cityscape, full body, happy, blue hair, blue eyes, looking at another, eye contact, blue skirt",
+                    "comfyValue": "masterpiece, 1girl, city street, cityscape, full body, happy, blue hair, blue eyes, looking at another, eye contact, blue skirt",
                    "shownOutputProperties": {},
                    "saveUserState": true
                  },
@@ -3461,17 +3461,17 @@
                    "title": "UI.Text",
                    "properties": {
                      "tags": [],
-                      "defaultValue": "masterpiece, 2girls, (yuri:1.2), open shirt, small breasts, nipples, city street, cityscape, full body, happy, yellow hair, yellow eyes, looking at another, eye contact, yellow skirt",
+                      "defaultValue": "masterpiece, 2girls, small city street, cityscape, full body, happy, yellow hair, yellow eyes, looking at another, eye contact, yellow skirt",
                      "multiline": true,
                      "lines": 5,
                      "maxLines": 5
                    },
                    "widgets_values": [
-                      "masterpiece, 2girls, (yuri:1.2), open shirt, small breasts, nipples, city street, cityscape, full body, happy, yellow hair, yellow eyes, looking at another, eye contact, yellow skirt"
+                      "masterpiece, 2girls, small city street, cityscape, full body, happy, yellow hair, yellow eyes, looking at another, eye contact, yellow skirt"
                    ],
                    "color": "#223",
                    "bgColor": "#335",
-                    "comfyValue": "masterpiece, 2girls, (yuri:1.2), open shirt, small breasts, nipples, city street, cityscape, full body, happy, yellow hair, yellow eyes, looking at another, eye contact, yellow skirt",
+                    "comfyValue": "masterpiece, 2girls, small city street, cityscape, full body, happy, yellow hair, yellow eyes, looking at another, eye contact, yellow skirt",
                    "shownOutputProperties": {},
                    "saveUserState": true
                  },
@@ -3526,17 +3526,17 @@
                    "title": "UI.Text",
                    "properties": {
                      "tags": [],
-                      "defaultValue": "masterpiece, 2girls, (yuri:1.2), open shirt, flat chest, nipples, city street, cityscape, full body, happy, green hair, green eyes, looking at another, eye contact, green skirt",
+                      "defaultValue": "masterpiece, 2girls, city street, cityscape, full body, happy, green hair, green eyes, looking at another, eye contact, green skirt",
                      "multiline": true,
                      "lines": 5,
                      "maxLines": 5
                    },
                    "widgets_values": [
-                      "masterpiece, 2girls, (yuri:1.2), open shirt, flat chest, nipples, city street, cityscape, full body, happy, green hair, green eyes, looking at another, eye contact, green skirt"
+                      "masterpiece, 2girls, city street, cityscape, full body, happy, green hair, green eyes, looking at another, eye contact, green skirt"
                    ],
                    "color": "#223",
                    "bgColor": "#335",
-                    "comfyValue": "masterpiece, 2girls, (yuri:1.2), open shirt, flat chest, nipples, city street, cityscape, full body, happy, green hair, green eyes, looking at another, eye contact, green skirt",
+                    "comfyValue": "masterpiece, 2girls, city street, cityscape, full body, happy, green hair, green eyes, looking at another, eye contact, green skirt",
                    "shownOutputProperties": {},
                    "saveUserState": true
                  },
@@ -4706,17 +4706,17 @@
              "title": "UI.Text",
              "properties": {
                "tags": [],
-                "defaultValue": "nsfw, masterpiece, 4girls, multiple girls, city street, cityscape, landscape, jeans, shoes, shirt, kanpai, happy, red hair, yellow hair, blue hair, green hair, looking at another, eye contact",
+                "defaultValue": "masterpiece, 4girls, multiple girls, city street, cityscape, landscape, jeans, shoes, shirt, kanpai, happy, red hair, yellow hair, blue hair, green hair, looking at another, eye contact",
                "multiline": true,
                "lines": 5,
                "maxLines": 5
              },
              "widgets_values": [
-                "nsfw, masterpiece, 4girls, multiple girls, city street, cityscape, landscape, jeans, shoes, shirt, kanpai, happy, red hair, yellow hair, blue hair, green hair, looking at another, eye contact"
+                "masterpiece, 4girls, multiple girls, city street, cityscape, landscape, jeans, shoes, shirt, kanpai, happy, red hair, yellow hair, blue hair, green hair, looking at another, eye contact"
              ],
              "color": "#223",
              "bgColor": "#335",
-              "comfyValue": "nsfw, masterpiece, 4girls, multiple girls, city street, cityscape, landscape, jeans, shoes, shirt, kanpai, happy, red hair, yellow hair, blue hair, green hair, looking at another, eye contact",
+              "comfyValue": "masterpiece, 4girls, multiple girls, city street, cityscape, landscape, jeans, shoes, shirt, kanpai, happy, red hair, yellow hair, blue hair, green hair, looking at another, eye contact",
              "shownOutputProperties": {},
              "saveUserState": true
            },
--- a/public/workflows/defaultWorkflow.json
+++ b/public/workflows/defaultWorkflow.json
--- a/public/workflows/img2imgMasked.json
+++ b/public/workflows/img2imgMasked.json
--- a/public/workflows/upscaleByModel.json
+++ b/public/workflows/upscaleByModel.json
@@ -2,7 +2,7 @@
  "comfyBoxWorkflow": true,
  "createdBy": "ComfyBox",
  "version": 1,
-  "commitHash": "574d3170a4e829df366dc12c3aaa049121052d8f\n",
+  "commitHash": "60bd9899150678dbc46df543ac16e1099d58a07f\n",
  "workflow": {
    "last_node_id": 0,
    "last_link_id": 0,
@@ -391,20 +391,7 @@
        "title": "UI.Gallery",
        "properties": {
          "tags": [],
-          "defaultValue": [
+          "defaultValue": [],
            {
              "isComfyBoxImageMetadata": true,
              "comfyUIFile": {
                "filename": "ComfyUI_04712_.png",
                "subfolder": "",
                "type": "output"
              },
              "name": "File",
              "tags": [],
              "width": 6656,
              "height": 4096
            }
          ],
          "index": 0,
          "updateMode": "replace",
          "autoSelectOnUpdate": true
@@ -412,20 +399,7 @@
        "widgets_values": [],
        "color": "#223",
        "bgColor": "#335",
-        "comfyValue": [
+        "comfyValue": [],
          {
            "isComfyBoxImageMetadata": true,
            "comfyUIFile": {
              "filename": "ComfyUI_04712_.png",
              "subfolder": "",
              "type": "output"
            },
            "name": "File",
            "tags": [],
            "width": 6656,
            "height": 4096
          }
        ],
        "shownOutputProperties": {},
        "saveUserState": false
      },
@@ -528,39 +502,13 @@
        ],
        "title": "UI.ImageUpload",
        "properties": {
-          "defaultValue": [
+          "defaultValue": [],
            {
              "isComfyBoxImageMetadata": true,
              "comfyUIFile": {
                "filename": "ComfyUI_05835_.png",
                "type": "output",
                "subfolder": ""
              },
              "name": "File",
              "tags": [],
              "width": 640,
              "height": 768
            }
          ],
          "tags": []
        },
        "widgets_values": [],
        "color": "#223",
        "bgColor": "#335",
-        "comfyValue": [
+        "comfyValue": [],
          {
            "isComfyBoxImageMetadata": true,
            "comfyUIFile": {
              "filename": "ComfyUI_05835_.png",
              "type": "output",
              "subfolder": ""
            },
            "name": "File",
            "tags": [],
            "width": 640,
            "height": 768
          }
        ],
        "shownOutputProperties": {},
        "saveUserState": false
      },
@@ -684,7 +632,8 @@
  "attrs": {
    "title": "Upscale by Model",
    "queuePromptButtonName": "Queue Prompt",
-    "queuePromptButtonRunWorkflow": true
+    "queuePromptButtonRunWorkflow": true,
    "showDefaultNotifications": true
  },
  "layout": {
    "root": "46a08906-61a9-4a23-881b-9615cf165e33",
--- 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/ComfyBoxTemplate.ts
+++ b/src/lib/ComfyBoxTemplate.ts
@@ -285,6 +285,19 @@ function relocateNodes(nodes: SerializedLGraphNode[]): SerializedLGraphNode[] {
    return nodes;
 }
 /*
 * Strips tags from top-level nodes
 */
 function stripTags(nodes: SerializedLGraphNode[]): SerializedLGraphNode[] {
    for (const node of nodes) {
        if (Array.isArray(node.properties.tags)) {
            node.properties.tags = []
        }
    }
    return nodes;
 }
 function pruneDetachedLinks(nodes: SerializedLGraphNode[], links: SerializedTemplateLink[]): [SerializedLGraphNode[], SerializedTemplateLink[]] {
    const nodeIds = new Set(nodes.map(n => n.id));
@@ -338,6 +351,7 @@ export function serializeTemplate(canvas: ComfyGraphCanvas, template: ComfyBoxTe
    uiState.update(s => { s.forceSaveUserState = null; return s; });
    nodes = relocateNodes(nodes);
    nodes = stripTags(nodes);
    [nodes, links] = pruneDetachedLinks(nodes, links);
    const svg = renderSvg(canvas, graph, TEMPLATE_SVG_PADDING);
--- a/src/lib/ComfyGraph.ts
+++ b/src/lib/ComfyGraph.ts
@@ -249,6 +249,11 @@ export default class ComfyGraph extends LGraph {
                node_data.id = uuidv4();
                templateNodeIDToNewNode[prevNodeId] = node
                // Strip tags from top-level nodes
                if (Array.isArray(node_data.properties.tags)) {
                    node_data.properties.tags = []
                }
                node.configure(node_data);
                if (mapping) {
--- a/src/lib/ComfyGraphCanvas.ts
+++ b/src/lib/ComfyGraphCanvas.ts
@@ -1,15 +1,17 @@
-import { BuiltInSlotShape, LGraphCanvas, LGraphNode, LLink, LiteGraph, NodeMode, Subgraph, TitleMode, type ContextMenuItem, type IContextMenuItem, type NodeID, type Vector2, type Vector4, type MouseEventExt, ContextMenu, type SerializedLGraphNode } from "@litegraph-ts/core";
+import { BuiltInSlotShape, ContextMenu, LGraphCanvas, LGraphNode, LLink, LiteGraph, NodeMode, Subgraph, TitleMode, type ContextMenuItem, type IContextMenuItem, type MouseEventExt, type NodeID, type Vector2, type Vector4, LGraph, type SlotIndex, type SlotNameOrIndex } from "@litegraph-ts/core";
 import { get, type Unsubscriber } from "svelte/store";
 import { createTemplate, serializeTemplate, type ComfyBoxTemplate, type SerializedComfyBoxTemplate } from "./ComfyBoxTemplate";
 import type ComfyGraph from "./ComfyGraph";
 import type { ComfyGraphErrorLocation, ComfyGraphErrors, ComfyNodeErrors } from "./apiErrors";
 import type ComfyApp from "./components/ComfyApp";
 import { ComfyReroute } from "./nodes";
 import notify from "./notify";
 import layoutStates, { type ContainerLayout } from "./stores/layoutStates";
 import queueState from "./stores/queueState";
 import selectionState from "./stores/selectionState";
 import templateState from "./stores/templateState";
 import { createTemplate, type ComfyBoxTemplate, serializeTemplate, type SerializedComfyBoxTemplate } from "./ComfyBoxTemplate";
 import notify from "./notify";
 import { calcNodesBoundingBox } from "./utils";
 import interfaceState from "./stores/interfaceState";
 export type SerializedGraphCanvasState = {
    offset: Vector2,
@@ -20,11 +22,22 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
    app: ComfyApp | null;
    private _unsubscribe: Unsubscriber;
    isExportingSVG: boolean = false;
    activeErrors?: ComfyGraphErrors = null;
    blinkError: ComfyGraphErrorLocation | null = null;
    blinkErrorTime: number = 0;
    highlightNodeAndInput: [LGraphNode, number] | null = null;
    get comfyGraph(): ComfyGraph | null {
        return this.graph as ComfyGraph;
    }
    clearErrors() {
        this.activeErrors = null;
        this.blinkError = null;
        this.blinkErrorTime = 0;
        this.highlightNodeAndInput = null;
    }
    constructor(
        app: ComfyApp,
        canvas: HTMLCanvasElement | string,
@@ -90,21 +103,52 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
        let state = get(queueState);
        let ss = get(selectionState);
-        const isRunningNode = node.id === state.runningNodeID
+
        const isRunningNode = node.id == state.runningNodeID
        const nodeErrors = this.activeErrors?.errorsByID[node.id];
        const isHighlightedNode = this.highlightNodeAndInput && this.highlightNodeAndInput[0].id === node.id;
        if (this.blinkErrorTime > 0) {
            this.blinkErrorTime -= this.graph.elapsed_time;
        }
        let color = null;
        let thickness = 1;
        let blink = false;
        // if (this._selectedNodes.has(node.id)) {
        //     color = "yellow";
        //     thickness = 5;
        // }
-        if (ss.currentHoveredNodes.has(node.id)) {
+        if (nodeErrors) {
            const hasExecutionError = nodeErrors.find(e => e.errorType === "execution");
            if (hasExecutionError) {
                blink = true;
                color = "#f0f";
            }
            else {
                color = "red";
            }
            thickness = 2
        }
        else if (isHighlightedNode) {
            color = "cyan";
            thickness = 2
        }
        else if (ss.currentHoveredNodes.has(node.id)) {
            color = "lightblue";
        }
        else if (isRunningNode) {
            color = "#0f0";
        }
        if (blink) {
            if (nodeErrors && nodeErrors.includes(this.blinkError) && this.blinkErrorTime > 0) {
                if ((Math.floor(this.blinkErrorTime / 2)) % 2 === 0) {
                    color = null;
                }
            }
        }
        if (color) {
            this.drawNodeOutline(node, ctx, size, mouseOver, fgColor, bgColor, color, thickness)
        }
@@ -114,6 +158,56 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
            ctx.fillRect(0, 0, size[0] * (state.progress.value / state.progress.max), 6);
            ctx.fillStyle = bgColor;
        }
        if (nodeErrors) {
            this.drawFailedValidationInputs(node, nodeErrors, color, ctx);
        }
        if (isHighlightedNode) {
            let draw = true;
            if (this.blinkErrorTime > 0) {
                if ((Math.floor(this.blinkErrorTime / 2)) % 2 === 0) {
                    draw = false;
                }
            }
            if (draw) {
                const [node, inputSlot] = this.highlightNodeAndInput;
                ctx.lineWidth = 2;
                ctx.strokeStyle = color;
                this.highlightNodeInput(node, inputSlot, ctx);
            }
        }
    }
    private drawFailedValidationInputs(node: LGraphNode, errors: ComfyGraphErrorLocation[], color: string, ctx: CanvasRenderingContext2D) {
        ctx.lineWidth = 2;
        ctx.strokeStyle = color || "red";
        for (const errorLocation of errors) {
            if (errorLocation.input != null) {
                if (errorLocation === this.blinkError && this.blinkErrorTime > 0) {
                    if ((Math.floor(this.blinkErrorTime / 2)) % 2 === 0) {
                        continue;
                    }
                }
                this.highlightNodeInput(node, errorLocation.input.name, ctx);
            }
        }
    }
    private static CONNECTION_POS: Vector2 = [0, 0];
    private highlightNodeInput(node: LGraphNode, inputSlot: SlotNameOrIndex, ctx: CanvasRenderingContext2D) {
        let inputIndex: number;
        if (typeof inputSlot === "number")
            inputIndex = inputSlot
        else
            inputIndex = node.findInputSlotIndexByName(inputSlot)
        if (inputIndex !== -1) {
            let pos = node.getConnectionPos(true, inputIndex, ComfyGraphCanvas.CONNECTION_POS);
            ctx.beginPath();
            ctx.arc(pos[0] - node.pos[0], pos[1] - node.pos[1], 12, 0, 2 * Math.PI, false)
            ctx.stroke();
        }
    }
    private drawNodeOutline(node: LGraphNode, ctx: CanvasRenderingContext2D, size: Vector2, mouseOver: boolean, fgColor: string, bgColor: string, outlineColor: string, outlineThickness: number) {
@@ -240,6 +334,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);
@@ -259,7 +354,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) {
@@ -272,6 +367,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();
@@ -568,4 +678,64 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
        }
        return false;
    }
    jumpToFirstError() {
        this.jumpToError(0);
    }
    jumpToError(index: number | ComfyGraphErrorLocation) {
        if (this.activeErrors == null) {
            return;
        }
        let error;
        if (typeof index === "number") {
            error = this.activeErrors.errors[index]
        }
        else {
            error = index;
        }
        if (error == null) {
            return;
        }
        const rootGraph = this.graph.getRootGraph()
        if (rootGraph == null) {
            return
        }
        const node = rootGraph.getNodeByIdRecursive(error.nodeID);
        if (node == null) {
            notify(`Couldn't find node '${error.comfyNodeType}' (${error.nodeID})`, { type: "warning" })
            return
        }
        this.jumpToNode(node)
        this.highlightNodeAndInput = null;
        this.blinkError = error;
        this.blinkErrorTime = 20;
    }
    jumpToNode(node: LGraphNode) {
        interfaceState.update(s => { s.isJumpingToNode = true; return s; })
        this.closeAllSubgraphs();
        const subgraphs = Array.from(node.iterateParentSubgraphNodes()).reverse();
        for (const subgraph of subgraphs) {
            this.openSubgraph(subgraph.subgraph)
        }
        this.centerOnNode(node);
        this.selectNode(node);
    }
    jumpToNodeAndInput(node: LGraphNode, slotIndex: number) {
        this.jumpToNode(node);
        this.highlightNodeAndInput = [node, slotIndex];
        this.blinkErrorTime = 20;
    }
 }
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,11 +1,12 @@
-import type { Progress, SerializedPrompt, SerializedPromptInputsForNode, SerializedPromptInputsAll, SerializedPromptOutputs, SerializedAppState } from "./components/ComfyApp";
+import type { Progress, SerializedPrompt, SerializedPromptInputsForNode, SerializedPromptInputsAll, SerializedPromptOutputs, SerializedAppState, SerializedPromptInput, SerializedPromptInputLink } from "./components/ComfyApp";
 import type TypedEmitter from "typed-emitter";
 import EventEmitter from "events";
 import type { ComfyImageLocation } from "$lib/utils";
 import type { SerializedLGraph, UUID } from "@litegraph-ts/core";
 import type { SerializedLayoutState } from "./stores/layoutStates";
-import type { ComfyNodeDef } from "./ComfyNodeDef";
+import type { ComfyNodeDef, ComfyNodeDefInput } from "./ComfyNodeDef";
 import type { WorkflowInstID } from "./stores/workflowState";
 import type { ComfyAPIPromptErrorResponse } from "./apiErrors";
 export type ComfyPromptRequest = {
    client_id?: string,
@@ -43,11 +44,12 @@ export type ComfyAPIHistoryItem = [
    ComfyNodeID[]  // good outputs
 ]
-export type ComfyAPIPromptResponse = {
+export type ComfyAPIPromptSuccessResponse = {
-    promptID?: PromptID,
+    promptID: PromptID
    error?: string
 }
 export type ComfyAPIPromptResponse = ComfyAPIPromptSuccessResponse | ComfyAPIPromptErrorResponse
 export type ComfyAPIHistoryEntry = {
    prompt: ComfyAPIHistoryItem,
    outputs: SerializedPromptOutputs
@@ -92,7 +94,8 @@ type ComfyAPIEvents = {
    executed: (promptID: PromptID, nodeID: ComfyNodeID, output: SerializedPromptOutputs) => void,
    execution_start: (promptID: PromptID) => void,
    execution_cached: (promptID: PromptID, nodes: ComfyNodeID[]) => void,
-    execution_error: (promptID: PromptID, message: string) => void,
+    execution_interrupted: (error: ComfyInterruptedError) => void,
    execution_error: (error: ComfyExecutionError) => void,
 }
 export default class ComfyAPI {
@@ -122,8 +125,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}`
    }
@@ -143,7 +155,7 @@ export default class ComfyAPI {
            existingSession = "?clientId=" + existingSession;
        }
-        const hostname = this.hostname || location.hostname;
+        const hostname = this.getHostname()
        const port = this.port || location.port;
        this.socket = new WebSocket(
@@ -201,8 +213,11 @@ export default class ComfyAPI {
                    case "execution_cached":
                        this.eventBus.emit("execution_cached", msg.data.prompt_id, msg.data.nodes);
                        break;
                    case "execution_interrupted":
                        this.eventBus.emit("execution_interrupted", msg.data);
                        break;
                    case "execution_error":
-                        this.eventBus.emit("execution_error", msg.data.prompt_id, msg.data.message);
+                        this.eventBus.emit("execution_error", msg.data);
                        break;
                    default:
                        console.warn("Unhandled message:", event.data);
--- a/src/lib/apiErrors.ts
+++ b/src/lib/apiErrors.ts
@@ -0,0 +1,270 @@
 import type { NodeID } from "@litegraph-ts/core"
 import type { ComfyNodeDefInput } from "./ComfyNodeDef"
 import type { ComfyNodeID, PromptID } from "./api"
 import type { SerializedPromptInputLink } from "./components/ComfyApp"
 import type { WorkflowError, WorkflowInstID } from "./stores/workflowState"
 import { exclude_internal_props } from "svelte/internal"
 import type ComfyGraphCanvas from "./ComfyGraphCanvas"
 import type { QueueEntry } from "./stores/queueState"
 enum ComfyPromptErrorType {
    NoOutputs = "prompt_no_outputs",
    OutputsFailedValidation = "prompt_outputs_failed_validation",
 }
 export interface ComfyPromptError<T = any> {
    type: ComfyPromptErrorType,
    message: string,
    details: string,
    extra_info: T
 }
 export interface CPENoOutputs extends ComfyPromptError {
    type: ComfyPromptErrorType.NoOutputs
 }
 export interface CPEOutputsFailedValidation extends ComfyPromptError {
    type: ComfyPromptErrorType.OutputsFailedValidation
 }
 export enum ComfyNodeErrorType {
    RequiredInputMissing = "required_input_missing",
    BadLinkedInput = "bad_linked_input",
    ReturnTypeMismatch = "return_type_mismatch",
    InvalidInputType = "invalid_input_type",
    ValueSmallerThanMin = "value_smaller_than_min",
    ValueBiggerThanMax = "value_bigger_than_max",
    CustomValidationFailed = "custom_validation_failed",
    ValueNotInList = "value_not_in_list",
    ExceptionDuringValidation = "exception_during_validation",
    ExceptionDuringInnerValidation = "exception_during_inner_validation",
 }
 export interface ComfyNodeError<T = any> {
    type: ComfyNodeErrorType,
    message: string,
    details: string,
    extra_info: T
 }
 export type ComfyNodeErrors = {
    errors: ComfyNodeError[],
    dependent_outputs: ComfyNodeID[],
    class_type: string
 }
 export type InputWithValue = {
    input_name: string,
    input_config: ComfyNodeDefInput,
    received_value: any
 }
 function isInputWithValue(param: any): param is InputWithValue {
    return param && "input_name" in param;
 }
 export type InputWithValueAndException = InputWithValue & {
    exception_message: string
 }
 export type InputWithLinkedNode = {
    input_name: string,
    input_config: ComfyNodeDefInput,
    linked_node: SerializedPromptInputLink
 }
 export type ValidationException = {
    exception_type: string,
    traceback: string[]
 }
 function isValidationException(param: any): param is ValidationException {
    return param && "exception_type" in param && "traceback" in param;
 }
 export interface CNERequiredInputMissing extends ComfyNodeError<{ input_name: string }> {
    type: ComfyNodeErrorType.RequiredInputMissing
 }
 export interface CNEBadLinkedInput extends ComfyNodeError<InputWithValue> {
    type: ComfyNodeErrorType.BadLinkedInput
 }
 export interface CNEReturnTypeMismatch extends ComfyNodeError<InputWithLinkedNode & { received_type: string }> {
    type: ComfyNodeErrorType.ReturnTypeMismatch
 }
 export interface CNEInvalidInputType extends ComfyNodeError<InputWithValue & { exception_message: string }> {
    type: ComfyNodeErrorType.InvalidInputType
 }
 export interface CNEValueSmallerThanMin extends ComfyNodeError<InputWithValue> {
    type: ComfyNodeErrorType.ValueSmallerThanMin
 }
 export interface CNEValueBiggerThanMax extends ComfyNodeError<InputWithValue> {
    type: ComfyNodeErrorType.ValueBiggerThanMax
 }
 export interface CNECustomValidationFailed extends ComfyNodeError<InputWithValue> {
    type: ComfyNodeErrorType.CustomValidationFailed
 }
 export interface CNEValueNotInList extends ComfyNodeError<InputWithValue> {
    type: ComfyNodeErrorType.ValueNotInList
 }
 export interface CNEExceptionDuringValidation extends ComfyNodeError<ValidationException> {
    type: ComfyNodeErrorType.ExceptionDuringValidation
 }
 export interface CNEExceptionDuringInnerValidation extends ComfyNodeError<InputWithLinkedNode & ValidationException> {
    type: ComfyNodeErrorType.ExceptionDuringInnerValidation
 }
 export type ComfyAPIPromptErrorResponse = {
    error: ComfyPromptError,
    node_errors: Record<ComfyNodeID, ComfyNodeErrors>,
 }
 export type ComfyInterruptedError = {
    prompt_id: PromptID,
    node_id: ComfyNodeID,
    node_type: string,
    executed: ComfyNodeID[]
 }
 export type ComfyExecutionError = ComfyInterruptedError & {
    exception_message: string,
    exception_type: string,
    traceback: string[],
    current_inputs: any[],
    current_outputs: any[][],
 }
 export function formatValidationError(error: ComfyAPIPromptErrorResponse) {
    return `${error.error.message}: ${error.error.details}`
 }
 export function formatExecutionError(error: ComfyExecutionError) {
    return error.exception_message
 }
 export type ComfyGraphErrorInput = {
    name: string,
    config?: ComfyNodeDefInput,
    receivedValue?: any,
    receivedType?: string,
    linkedNode?: SerializedPromptInputLink
 }
 export type ComfyGraphErrorLocation = {
    workflowID: WorkflowInstID,
    nodeID: NodeID,
    comfyNodeType: string,
    errorType: ComfyNodeErrorType | "execution",
    message: string,
    dependentOutputs: NodeID[],
    queueEntry: QueueEntry,
    input?: ComfyGraphErrorInput,
    exceptionMessage?: string,
    exceptionType?: string,
    traceback?: string[],
    inputValues?: any[],
    outputValues?: any[][],
 }
 export type ComfyGraphErrors = {
    message: string,
    errors: ComfyGraphErrorLocation[],
    errorsByID: Record<NodeID, ComfyGraphErrorLocation[]>
 }
 export function validationErrorToGraphErrors(workflowID: WorkflowInstID, validationError: ComfyAPIPromptErrorResponse, queueEntry: QueueEntry): ComfyGraphErrors {
    const errorsByID: Record<NodeID, ComfyGraphErrorLocation[]> = {}
    for (const [nodeID, nodeErrors] of Object.entries(validationError.node_errors)) {
        errorsByID[nodeID] = nodeErrors.errors.map(e => {
            const loc: ComfyGraphErrorLocation = {
                workflowID,
                nodeID,
                comfyNodeType: nodeErrors.class_type,
                errorType: e.type,
                message: e.message,
                dependentOutputs: nodeErrors.dependent_outputs,
                queueEntry
            }
            if (isInputWithValue(e.extra_info)) {
                loc.input = {
                    name: e.extra_info.input_name,
                    config: e.extra_info.input_config,
                    receivedValue: e.extra_info.received_value
                }
                if ("received_type" in e.extra_info) {
                    loc.input.receivedType = e.extra_info.received_type as string;
                }
                if ("linked_node" in e.extra_info) {
                    loc.input.linkedNode = e.extra_info.linked_node as SerializedPromptInputLink;
                }
            }
            if ("exception_message" in e.extra_info) {
                loc.exceptionMessage = e.extra_info.exception_message as "string"
            }
            if (isValidationException(e.extra_info)) {
                loc.exceptionType = e.extra_info.exception_type;
                loc.traceback = e.extra_info.traceback;
            }
            return loc;
        })
    }
    return {
        message: validationError.error.message,
        errors: Object.values(errorsByID).flatMap(e => e),
        errorsByID
    }
 }
 export function executionErrorToGraphErrors(workflowID: WorkflowInstID, executionError: ComfyExecutionError, queueEntry: QueueEntry): ComfyGraphErrors {
    const errorsByID: Record<NodeID, ComfyGraphErrorLocation[]> = {}
    errorsByID[executionError.node_id] = [{
        workflowID,
        nodeID: executionError.node_id,
        comfyNodeType: executionError.node_type,
        errorType: "execution",
        message: executionError.exception_message,
        dependentOutputs: [], // TODO
        queueEntry,
        exceptionMessage: executionError.exception_message,
        exceptionType: executionError.exception_type,
        traceback: executionError.traceback,
        inputValues: executionError.current_inputs,
        outputValues: executionError.current_outputs,
    }]
    return {
        message: executionError.exception_message,
        errors: Object.values(errorsByID).flatMap(e => e),
        errorsByID
    }
 }
 export function workflowErrorToGraphErrors(workflowID: WorkflowInstID, workflowError: WorkflowError, queueEntry: QueueEntry): ComfyGraphErrors {
    if (workflowError.type === "validation") {
        return validationErrorToGraphErrors(workflowID, workflowError.error, queueEntry)
    }
    else {
        return executionErrorToGraphErrors(workflowID, workflowError.error, queueEntry)
    }
 }
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -12,6 +12,7 @@
 import notify from "$lib/notify";
 import ComfyBoxWorkflowsView from "./ComfyBoxWorkflowsView.svelte";
 import GlobalModal from "./GlobalModal.svelte";
 	import ComfySettingsView from "./ComfySettingsView.svelte";
 export let app: ComfyApp = undefined;
 let hasShownUIHelpToast: boolean = false;
@@ -63,6 +64,7 @@
                <ComfyBoxWorkflowsView {app} {uiTheme} />
            </SidebarItem>
            <SidebarItem id="settings" name="Settings" icon={Gear}>
                <ComfySettingsView {app} />
            </SidebarItem>
        </Sidebar>
    </div>
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -1,4 +1,4 @@
-import ComfyAPI, { type ComfyAPIStatusResponse, type ComfyBoxPromptExtraData, type ComfyNodeID, type ComfyPromptRequest, type PromptID, type QueueItemType } from "$lib/api";
+import ComfyAPI, { type iomfyAPIPromptResponse, type ComfyAPIStatusResponse, type ComfyBoxPromptExtraData, type ComfyNodeID, type ComfyPromptRequest, type PromptID, type QueueItemType } from "$lib/api";
 import { parsePNGMetadata } from "$lib/pnginfo";
 import { BuiltInSlotType, LGraphCanvas, LGraphNode, LiteGraph, NodeMode, type INodeInputSlot, type LGraphNodeConstructor, type NodeID, type NodeTypeOpts, type SerializedLGraph, type SlotIndex } from "@litegraph-ts/core";
 import A1111PromptModal from "./modal/A1111PromptModal.svelte";
@@ -29,7 +29,7 @@ import queueState from "$lib/stores/queueState";
 import selectionState from "$lib/stores/selectionState";
 import uiState from "$lib/stores/uiState";
 import workflowState, { ComfyBoxWorkflow, type WorkflowAttributes, type WorkflowInstID } from "$lib/stores/workflowState";
-import { readFileToText, type SerializedPromptOutput } from "$lib/utils";
+import { playSound, readFileToText, type SerializedPromptOutput } from "$lib/utils";
 import { basename, capitalize, download, graphToGraphVis, jsonToJsObject, promptToGraphVis, range } from "$lib/utils";
 import { tick } from "svelte";
 import { type SvelteComponentDev } from "svelte/internal";
@@ -38,6 +38,7 @@ import ComfyPromptSerializer, { isActiveBackendNode, nodeHasTag, UpstreamNodeLoc
 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";
 export const COMFYBOX_SERIAL_VERSION = 1;
@@ -91,7 +92,8 @@ export type SerializedAppState = {
 }
 /** [link_origin, link_slot_index] | input_value */
-export type SerializedPromptInput = [ComfyNodeID, number] | any
+export type SerializedPromptInputLink = [ComfyNodeID, number]
 export type SerializedPromptInput = SerializedPromptInputLink | any
 export type SerializedPromptInputs = Record<string, SerializedPromptInput>;
@@ -209,7 +211,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
@@ -259,18 +267,29 @@ export default class ComfyApp {
        return Promise.resolve();
    }
    /*
     * TODO
     */
    async loadConfig() {
        try {
-            const config = await fetch(`/config.json`, { cache: "no-store" });
+            console.log("Loading config.json...")
-            const newConfig = await config.json() as ConfigState;
+            const config = localStorage.getItem("config")
-            configState.set({ ...get(configState), ...newConfig });
+            if (config == null)
                configState.loadDefault();
            else
                configState.load(JSON.parse(config));
        }
        catch (error) {
-            console.error(`Failed to load config`, error)
+            console.error(`Failed to load config, falling back to defaults`, error)
            configState.loadDefault();
        }
        // configState.onChange("linkDisplayType", (newValue) => {
        //     if (!this.lCanvas)
        //         return;
        //     this.lCanvas.links_render_mode = newValue;
        //     this.lCanvas.setDirty(true, true);
        // })
        configState.runOnChangedEvents();
    }
    async loadBuiltInTemplates(): Promise<SerializedComfyBoxTemplate[]> {
@@ -307,7 +326,7 @@ export default class ComfyApp {
            if (errors && errors.length > 0)
                error = "Error(s) loading builtin templates:\n" + errors.join("\n");
-            console.log(`Loaded {templates.length} builtin templates.`);
+            console.log(`Loaded ${templates.length} builtin templates.`);
            return [templates, error]
        })
@@ -349,7 +368,7 @@ export default class ComfyApp {
        }
    }
-    saveStateToLocalStorage() {
+    saveStateToLocalStorage(doNotify: boolean = true) {
        try {
            uiState.update(s => { s.forceSaveUserState = true; return s; })
            const state = get(workflowState)
@@ -361,9 +380,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 {
@@ -382,6 +403,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)
@@ -597,9 +621,33 @@ export default class ComfyApp {
            queueState.executionCached(promptID, nodes)
        });
-        this.api.addEventListener("execution_error", (promptID: PromptID, message: string) => {
+        this.api.addEventListener("execution_error", (error: ComfyExecutionError) => {
-            queueState.executionError(promptID, message)
+            const completedEntry = queueState.executionError(error)
            let workflow: ComfyBoxWorkflow | null;
            if (completedEntry) {
                const workflowID = completedEntry.entry.extraData.workflowID;
                if (workflowID) {
                    workflow = workflowState.getWorkflow(workflowID)
                }
            }
            if (workflow) {
                workflowState.executionError(workflow.id, error.prompt_id)
                notify(
                    `Execution error in workflow "${workflow.attrs.title}".\nClick for details.`,
                    {
                        type: "error",
                        showBar: true,
                        timeout: 15 * 1000,
                        onClick: () => {
                            uiState.update(s => { s.activeError = error.prompt_id; return s })
                        }
                    })
            }
            else {
                const message = formatExecutionError(error);
                notify(`Execution error: ${message}`, { type: "error", timeout: 10000 })
            }
        });
        this.api.init();
@@ -891,7 +939,7 @@ export default class ComfyApp {
        if (workflow.attrs.queuePromptButtonRunWorkflow) {
            // Hold control to queue at the front
            const num = this.ctrlDown ? -1 : 0;
-            this.queuePrompt(num, 1);
+            this.queuePrompt(workflow, num, 1);
        }
    }
@@ -941,14 +989,8 @@ export default class ComfyApp {
        return this.promptSerializer.serialize(workflow.graph, tag)
    }
-    async queuePrompt(num: number, batchCount: number = 1, tag: string | null = null) {
+    async queuePrompt(targetWorkflow: ComfyBoxWorkflow, num: number, batchCount: number = 1, tag: string | null = null) {
-        const activeWorkflow = workflowState.getActiveWorkflow();
+        this.queueItems.push({ num, batchCount, workflow: targetWorkflow });
        if (activeWorkflow == null) {
            notify("No workflow is opened!", { type: "error" })
            return;
        }
        this.queueItems.push({ num, batchCount, workflow: activeWorkflow });
        // Only have one action process the items so each one gets a unique seed correctly
        if (this.processingQueue) {
@@ -958,6 +1000,10 @@ export default class ComfyApp {
        if (tag === "")
            tag = null;
        if (targetWorkflow.attrs.showDefaultNotifications) {
            notify("Prompt queued.", { type: "info", showOn: "web" });
        }
        this.processingQueue = true;
        let workflow: ComfyBoxWorkflow;
@@ -968,11 +1014,12 @@ export default class ComfyApp {
                const thumbnails = []
                for (const node of workflow.graph.iterateNodesInOrderRecursive()) {
-                    if (node.mode !== NodeMode.ALWAYS || (tag != null && !nodeHasTag(node, tag)))
+                    if (node.mode !== NodeMode.ALWAYS || (tag != null && !nodeHasTag(node, tag, true)))
                        continue;
                    if ("getPromptThumbnails" in node) {
                        const thumbsToAdd = (node as ComfyGraphNode).getPromptThumbnails();
                        console.warn("THUMBNAILS", thumbsToAdd)
                        if (thumbsToAdd)
                            thumbnails.push(...thumbsToAdd)
                    }
@@ -1008,8 +1055,9 @@ export default class ComfyApp {
                        thumbnails
                    }
-                    let error: string | null = null;
+                    let error: ComfyAPIPromptErrorResponse | null = null;
-                    let promptID: PromptID | null = null;
+                    let errorMes: string | null = null;
                    let errorPromptID: PromptID | null = null;
                    const request: ComfyPromptRequest = {
                        number: num,
@@ -1019,22 +1067,36 @@ export default class ComfyApp {
                    try {
                        const response = await this.api.queuePrompt(request);
-                        if (response.error != null) {
+                        if ("error" in response) {
-                            error = response.error;
+                            error = response;
                            errorMes = formatValidationError(error)
                            errorPromptID = queueState.promptError(workflow.id, response, p, extraData)
                            workflowState.promptError(workflow.id, errorPromptID)
                        }
                        else {
                            queueState.afterQueued(workflow.id, response.promptID, num, p.output, extraData)
                            workflowState.afterQueued(workflow.id, response.promptID, p, extraData)
                        }
                    } catch (err) {
-                        error = err?.toString();
+                        errorMes = err?.toString();
                    }
                    if (error != null) {
-                        const mes: string = error;
+                        notify(
-                        notify(`Error queuing prompt: \n${mes} `, { type: "error" })
+                            `Prompt validation failed.\nClick for details.`,
                            {
                                type: "error",
                                showBar: true,
                                timeout: 1000 * 15,
                                onClick: () => {
                                    uiState.update(s => { s.activeError = errorPromptID; return s })
                                }
                            })
                        console.error(graphToGraphVis(workflow.graph))
                        console.error(promptToGraphVis(p))
                        console.error("Error queuing prompt", error, num, p)
                    }
                    else if (errorMes != null) {
                        break;
                    }
@@ -1256,7 +1318,7 @@ export default class ComfyApp {
            let defaultValue = null;
            if (foundInput != null) {
                const comfyInput = foundInput as IComfyInputSlot;
-                console.warn("[refreshComboInNodes] found frontend config:", node.title, node.type, comfyInput.config.values)
+                console.warn("[refreshComboInNodes] found frontend config:", node.title, node.type, comfyInput.config.values.length)
                values = comfyInput.config.values;
                defaultValue = comfyInput.config.defaultValue;
            }
--- a/src/lib/components/ComfyBoxWorkflowsView.svelte
+++ b/src/lib/components/ComfyBoxWorkflowsView.svelte
@@ -1,3 +1,7 @@
 <script context="module" lang="ts">
 export const WORKFLOWS_VIEW: any = {}
 </script>
 <script lang="ts">
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { PlusSquareDotted } from 'svelte-bootstrap-icons';
@@ -12,12 +16,15 @@
 import workflowState, { ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
 import selectionState from "$lib/stores/selectionState";
 import type ComfyApp from './ComfyApp';
- import { onMount } from "svelte";
+ import { onMount, setContext, tick } from "svelte";
 import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
 import { fade } from 'svelte/transition';
 import { cubicIn } from 'svelte/easing';
 import { truncateString } from '$lib/utils';
 import ComfyPaneView from './ComfyPaneView.svelte';
 import type { PromptID } from '$lib/api';
 import queueState, { type CompletedQueueEntry } from '$lib/stores/queueState';
 import { workflowErrorToGraphErrors } from '$lib/apiErrors';
 export let app: ComfyApp;
 export let uiTheme: string = "gradio-dark" // TODO config
@@ -44,6 +51,8 @@
     }
     );
     refreshView();
     lastError = null;
 })
 async function doRefreshCombos() {
@@ -70,10 +79,15 @@
 let graphSize = 0;
- $: if (containerElem) {
+ function getGraphPane(): HTMLDivElement | null {
     const canvas = containerElem.querySelector<HTMLDivElement>("#graph-canvas")
-     if (canvas) {
+     if (!canvas)
-         const paneNode = canvas.closest(".splitpanes__pane")
+         return null;
     return canvas.closest(".splitpanes__pane")
 }
 $: if (containerElem) {
     const paneNode = getGraphPane();
     if (paneNode) {
         (paneNode as HTMLElement).ontransitionstart = () => {
             $interfaceState.graphTransitioning = true
@@ -84,7 +98,6 @@
         }
     }
 }
 }
 function queuePrompt() {
     app.runDefaultQueueAction()
@@ -191,6 +204,82 @@
         return s;
     })
 };
 let lastError: PromptID | null = null;
 $: {
     const activeError = $uiState.activeError
     if (activeError != lastError) {
         if (activeError != null) {
             showError(activeError)
         }
         else {
             hideError();
         }
         lastError = $uiState.activeError;
     }
 }
 async function openGraph(cb: () => void) {
     const newGraphSize = Math.max(50, graphSize);
     const willOpenPane = newGraphSize != graphSize
     graphSize = newGraphSize
     if (willOpenPane) {
         const graphPane = getGraphPane();
         if (graphPane) {
             graphPane.addEventListener("transitionend", cb, { once: true })
             await tick()
         }
         else {
             cb()
         }
     }
     else {
         cb()
     }
 }
 async function showError(promptIDWithError: PromptID) {
     hideError();
     const completed: CompletedQueueEntry = get($queueState.queueCompleted).find(e => e.entry.promptID === promptIDWithError);
     if (!completed || !completed.error) {
         console.error("Prompt with error not found!", promptIDWithError);
         return
     }
     const workflow = workflowState.getWorkflow(completed.entry.extraData.workflowID)
     if (workflow == null) {
         console.error("Workflow with error not found!", promptIDWithError, completed);
         return
     }
     workflowState.setActiveWorkflow(app.lCanvas, workflow.id);
     $uiState.activeError = promptIDWithError;
     lastError = $uiState.activeError;
     const jumpToError = () => {
         app.resizeCanvas();
         app.lCanvas.draw(true, true);
         app.lCanvas.activeErrors = workflowErrorToGraphErrors(workflow.id, completed.error, completed.entry);
         app.lCanvas.jumpToFirstError();
     }
     await openGraph(jumpToError)
 }
 function hideError() {
     if (app?.lCanvas) {
         app.lCanvas.clearErrors();
     }
 }
 setContext(WORKFLOWS_VIEW, {
     showError,
     openGraph
 });
 </script>
 <div id="comfy-content" bind:this={containerElem} class:loading>
--- a/src/lib/components/ComfyGraphErrorList.svelte
+++ b/src/lib/components/ComfyGraphErrorList.svelte
@@ -0,0 +1,306 @@
 <script lang="ts">
 import { ComfyNodeErrorType, type ComfyGraphErrorLocation, type ComfyGraphErrors } from "$lib/apiErrors";
 import type ComfyApp from "./ComfyApp";
 import Accordion from "./gradio/app/Accordion.svelte";
 import uiState from '$lib/stores/uiState';
 import type { ComfyNodeDefInputType } from "$lib/ComfyNodeDef";
 import type { INodeInputSlot, LGraphNode, Subgraph } from "@litegraph-ts/core";
 import { UpstreamNodeLocator } from "./ComfyPromptSerializer";
 import JsonView from "./JsonView.svelte";
 export let app: ComfyApp;
 export let errors: ComfyGraphErrors;
 function closeList() {
     app.lCanvas.clearErrors();
     $uiState.activeError = null;
 }
 function getParentNode(error: ComfyGraphErrorLocation): Subgraph | null {
     const node = app.lCanvas.graph.getNodeByIdRecursive(error.nodeID);
     if (node == null || !node.graph._is_subgraph)
         return null;
     return node.graph._subgraph_node
 }
 function canJumpToDisconnectedInput(error: ComfyGraphErrorLocation): boolean {
     return error.errorType === ComfyNodeErrorType.RequiredInputMissing && error.input != null;
 }
 function jumpToDisconnectedInput(error: ComfyGraphErrorLocation) {
     if (error.errorType !== ComfyNodeErrorType.RequiredInputMissing || error.input == null) {
         return
     }
     const node = app.lCanvas.graph.getNodeByIdRecursive(error.nodeID);
     const inputIndex =node.findInputSlotIndexByName(error.input.name);
     if (inputIndex === -1) {
         return
     }
     // TODO multiple tags?
     const tag: string | null = error.queueEntry.extraData.extra_pnginfo.comfyBoxPrompt.subgraphs[0];
     const test = (node: LGraphNode) => (node as any).isBackendNode
     const nodeLocator = new UpstreamNodeLocator(test)
     const [_, foundLink, foundInputSlot, foundPrevNode] = nodeLocator.locateUpstream(node, inputIndex, tag);
     if (foundInputSlot != null && foundPrevNode != null) {
         app.lCanvas.jumpToNodeAndInput(foundPrevNode, foundInputSlot);
     }
 }
 function jumpToError(error: ComfyGraphErrorLocation) {
     app.lCanvas.jumpToError(error);
 }
 function getInputTypeName(type: ComfyNodeDefInputType) {
     if (Array.isArray(type)) {
         return `List (${type.length})`
     }
     return type;
 }
 </script>
 <div class="error-list">
    <div class="error-list-header">
        <button class="error-list-close" on:click={closeList}>✕</button>
    </div>
    <div class="error-list-scroll-container">
        {#each Object.entries(errors.errorsByID) as [nodeID, nodeErrors], i}
            {@const first = nodeErrors[0]}
            {@const parent = getParentNode(first)}
            {@const last = i === Object.keys(errors.errorsByID).length - 1}
            <div class="error-group">
                <div class="error-node-details">
                    <span class="error-node-type">{first.comfyNodeType}</span>
                    {#if parent}
                        <span class="error-node-parent">({parent.title})</span>
                    {/if}
                </div>
                <div class="error-entries" class:last>
                    {#each nodeErrors as error}
                        {@const isExecutionError = error.errorType === "execution"}
                        <div class="error-entry">
                            <div>
                                <div class="error-details">
                                    <button class="jump-to-error" class:execution-error={isExecutionError} on:click={() => jumpToError(error)}><span>⮎</span></button>
                                    <div class="error-details-wrapper">
                                        <span class="error-message" class:execution-error={isExecutionError}>{error.message}</span>
                                        {#if error.exceptionType}
                                            <span>({error.exceptionType})</span>
                                        {/if}
                                        {#if error.exceptionMessage && !isExecutionError}
                                            <div style:text-decoration="underline">{error.exceptionMessage}</div>
                                        {/if}
                                        {#if error.input}
                                            <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>
                                                    <span>Received value: <b>{error.input.receivedValue}</b></span>
                                                </div>
                                            {/if}
                                            {#if error.input.receivedType}
                                                <div>
                                                    <span>Received type: <b>{error.input.receivedType}</b></span>
                                                </div>
                                            {/if}
                                            {#if error.input.config}
                                                <div class="error-traceback-wrapper">
                                                    <Accordion label="Input Config" open={true}>
                                                        <div class="error-traceback">
                                                            <div class="error-traceback-contents">
                                                                <JsonView json={error.input.config[1]} />
                                                            </div>
                                                        </div>
                                                    </Accordion>
                                                </div>
                                            {/if}
                                        {/if}
                                    </div>
                                </div>
                            </div>
                            {#if error.traceback}
                                <div class="error-traceback-wrapper">
                                    <Accordion label="Traceback" open={false}>
                                        <div class="error-traceback">
                                            <div class="error-traceback-contents">
                                                {#each error.traceback as line}
                                                    <pre>{line}</pre>
                                                {/each}
                                            </div>
                                        </div>
                                    </Accordion>
                                </div>
                            {/if}
                        </div>
                    {/each}
                </div>
            </div>
        {/each}
    </div>
 </div>
 <style lang="scss">
 .error-list {
     width: 30%;
     height: 70%;
     margin: 1.0rem;
     position: absolute;
     right: 0;
     bottom: 0;
     border: 1px solid #aaa;
     color: #ddd;
     background: #444;
     font-size: 12pt;
 }
 .error-list-header {
     width: 100%;
     height: 24px;
     margin: auto;
     border-bottom: 1px solid #ccc;
     background: #282828;
     justify-content: center;
     text-align: center;
     .error-list-close {
         margin: auto;
         padding-right: 6px;
         position: absolute;
         top: 0;
         right: 0;
     }
 }
 .error-list-scroll-container {
     height: calc(100% - 24px);
     overflow-y: auto;
 }
 .error-node-details {
     font-size: 14pt;
     color: #ddd;
     font-weight: bold;
     padding: 0.7rem 1.0rem;
     background: #333;
 }
 .error-node-parent {
     color: #aaa;
     font-size: 12pt;
     font-weight: initial;
 }
 .error-entries:not(.last):last-child {
     border-bottom: 1px solid #ccc;
 }
 .error-entry {
     opacity: 100%;
     border-top: 1px solid #ccc;
     padding: 1rem;
 }
 .error-details {
     width: 100%;
     display: flex;
     flex-direction: row;
     gap: var(--spacing-md);
     vertical-align: bottom;
     position: relative;
     > span {
         bottom: 0;
         display: flex;
         flex-direction: column;
         justify-content: center;
     }
 }
 .error-details-wrapper {
     flex: 5 1 0%;
 }
 .error-message {
     color: #F66;
     &.execution-error {
         color: #E6E;
     }
     text-decoration: underline;
 }
 .error-input {
     font-size: 12pt;
 }
 .jump-to-error {
     border: 1px solid #ccc;
     background: #844;
     &.execution-error {
         background: #848;
     }
     &.locate {
         background: #488;
     }
     width: 32px;
     height: 32px;
     font-size: 14pt;
     text-align: center;
     display: flex;
     position: relative;
     justify-content: center;
     margin-right: 0.3rem;
     > span {
         margin: auto;
     }
     &:hover {
         filter: brightness(120%);
     }
     &:active {
         filter: brightness(80%);
     }
 }
 .error-traceback-wrapper {
     width: 100%;
     margin-top: 1.0rem;
     padding: 0.5rem;
     border: 1px solid #888;
     .error-traceback {
         font-size: 10pt;
         overflow: auto;
         white-space: nowrap;
         background: #333;
         .error-traceback-contents {
             width: 100%;
             font-family: monospace !important;
             padding: 1.0rem;
             > div {
                 width: 100%;
             }
         }
     }
 }
 </style>
--- a/src/lib/components/ComfyGraphView.svelte
+++ b/src/lib/components/ComfyGraphView.svelte
@@ -1,28 +1,48 @@
 <script lang="ts">
- import { Button } from "@gradio/button";
+ import { onMount } from "svelte";
 import type ComfyApp from "./ComfyApp";
 import DropZone from "./DropZone.svelte";
 import interfaceState from "$lib/stores/interfaceState";
 import workflowState from "$lib/stores/workflowState";
 import uiState from '$lib/stores/uiState';
 import ComfyGraphErrorList from "$lib/components/ComfyGraphErrorList.svelte"
 export let app: ComfyApp;
 let canvas: HTMLCanvasElement;
 onMount(async () => {
     if (app?.lCanvas) {
         canvas = app.lCanvas.canvas;
         app.lCanvas?.setCanvas(canvas)
     }
 })
 function doRecenter(): void {
     app?.lCanvas?.recenter();
 }
 function clearErrors(): void {
     $uiState.activeError = null;
 }
 </script>
 <div class="wrapper litegraph">
    <div class="canvas-wrapper pane-wrapper">
-        <canvas id="graph-canvas" />
+        <canvas bind:this={canvas} id="graph-canvas" />
        <DropZone {app} />
    </div>
    <div class="bar">
        {#if !$interfaceState.graphTransitioning}
        <span class="left">
-                <button on:click={doRecenter}>Recenter</button>
+            <button disabled={$interfaceState.graphTransitioning} on:click={doRecenter}>Recenter</button>
-            </span>
+            {#if $uiState.activeError != null}
                <button disabled={$interfaceState.graphTransitioning} on:click={clearErrors}>Clear Errors</button>
            {/if}
        </span>
    </div>
    {#if $uiState.activeError && app?.lCanvas?.activeErrors != null}
        <ComfyGraphErrorList {app} errors={app.lCanvas.activeErrors} />
    {/if}
 </div>
 <style lang="scss">
@@ -73,6 +93,9 @@
             background-color: #555;
             border-color: #777;
         }
         &:disabled {
             opacity: 50%;
         }
     }
 }
 </style>
--- a/src/lib/components/ComfyPaneView.svelte
+++ b/src/lib/components/ComfyPaneView.svelte
@@ -16,6 +16,7 @@
 import ComfyQueue from "./ComfyQueue.svelte";
 import ComfyTemplates from "./ComfyTemplates.svelte";
 import { SvelteComponent } from "svelte";
 	import { capitalize } from "$lib/utils";
 export let app: ComfyApp
 export let mode: ComfyPaneMode = "none";
@@ -40,7 +41,7 @@
        {:else if mode === "graph"}
            <ComfyGraphView {app} />
        {:else if mode === "properties"}
-            <ComfyProperties workflow={$workflowState.activeWorkflow} />
+            <ComfyProperties {app} workflow={$workflowState.activeWorkflow} />
        {:else if mode === "templates"}
            <ComfyTemplates {app} />
        {:else if mode === "queue"}
@@ -55,6 +56,7 @@
                <!-- svelte-ignore a11y-click-events-have-key-events -->
                <button class="mode-button ternary"
                        disabled={mode === theMode}
                        title={capitalize(theMode)}
                        class:selected={mode === theMode}
                        on:click={() => switchMode(theMode)}>
                    <svelte:component this={icon} width="100%" height="100%" />
@@ -99,7 +101,6 @@
                 color: var(--body-text-color);
             }
             &.selected {
                 color: var(--body-text-color);
                 background-color: var(--panel-background-fill);
             }
         }
--- a/src/lib/components/ComfyPromptSerializer.ts
+++ b/src/lib/components/ComfyPromptSerializer.ts
@@ -15,18 +15,17 @@ function isGraphInputOutput(node: LGraphNode): boolean {
    return node.is(GraphInput) || node.is(GraphOutput)
 }
-export function nodeHasTag(node: LGraphNode, tag: string): boolean {
+export function nodeHasTag(node: LGraphNode, tag: string, checkParents: boolean): boolean {
    // Ignore tags on reroutes since they're just movable wires and it defeats
    // the convenience gains to have to set tags for all them
    if (isReroute(node))
        return true;
    while (node != null) {
        if ("tags" in node.properties) {
            if (node.properties.tags.indexOf(tag) !== -1)
                return true;
        }
        if (!checkParents) {
            return false;
        }
        // Count parent subgraphs having the tag also.
        node = node.graph?._subgraph_node;
    }
@@ -38,8 +37,10 @@ export function isActiveNode(node: LGraphNode, tag: string | null = null): boole
    if (!node)
        return false;
-    // Check tags but not on graph inputs/outputs
+    // Ignore tags on reroutes since they're just movable wires and it defeats
-    if (!isGraphInputOutput(node) && (tag && !nodeHasTag(node, tag))) {
+    // the convenience gains to have to set tags for all them
    // Also ignore graph inputs/outputs
    if (!isReroute(node) && !isGraphInputOutput(node) && (tag && !nodeHasTag(node, tag, true))) {
        console.debug("Skipping tagged node", tag, node.properties.tags, node)
        return false;
    }
@@ -70,11 +71,13 @@ export function isActiveBackendNode(node: LGraphNode, tag: string | null = null)
    return true;
 }
 type UpstreamResult = [LGraph | null, LLink | null, number | null, LGraphNode | null];
 export class UpstreamNodeLocator {
    constructor(private isTheTargetNode: (node: LGraphNode) => boolean) {
    }
-    private followSubgraph(subgraph: Subgraph, link: LLink): [LGraph | null, LLink | null] {
+    private followSubgraph(subgraph: Subgraph, link: LLink): UpstreamResult {
        if (link.origin_id != subgraph.id)
            throw new Error("Invalid link and graph output!")
@@ -83,10 +86,10 @@ export class UpstreamNodeLocator {
            throw new Error("No inner graph input!")
        const nextLink = innerGraphOutput.getInputLink(0)
-        return [innerGraphOutput.graph, nextLink];
+        return [innerGraphOutput.graph, nextLink, 0, innerGraphOutput];
    }
-    private followGraphInput(graphInput: GraphInput, link: LLink): [LGraph | null, LLink | null] {
+    private followGraphInput(graphInput: GraphInput, link: LLink): UpstreamResult {
        if (link.origin_id != graphInput.id)
            throw new Error("Invalid link and graph input!")
@@ -99,10 +102,10 @@ export class UpstreamNodeLocator {
            throw new Error("No outer input slot!")
        const nextLink = outerSubgraph.getInputLink(outerInputIndex)
-        return [outerSubgraph.graph, nextLink];
+        return [outerSubgraph.graph, nextLink, outerInputIndex, outerSubgraph];
    }
-    private getUpstreamLink(parent: LGraphNode, currentLink: LLink): [LGraph | null, LLink | null] {
+    private getUpstreamLink(parent: LGraphNode, currentLink: LLink): UpstreamResult {
        if (parent.is(Subgraph)) {
            console.debug("FollowSubgraph")
            return this.followSubgraph(parent, currentLink);
@@ -112,17 +115,18 @@ export class UpstreamNodeLocator {
            return this.followGraphInput(parent, currentLink);
        }
        else if ("getUpstreamLink" in parent) {
-            return [parent.graph, (parent as ComfyGraphNode).getUpstreamLink()];
+            const link = (parent as ComfyGraphNode).getUpstreamLink();
            return [parent.graph, link, link?.target_slot, parent];
        }
        else if (parent.inputs.length === 1) {
            // Only one input, so assume we can follow it backwards.
            const link = parent.getInputLink(0);
            if (link) {
-                return [parent.graph, link]
+                return [parent.graph, link, 0, parent]
            }
        }
        console.warn("[graphToPrompt] Frontend node does not support getUpstreamLink", parent.type)
-        return [null, null];
+        return [null, null, null, null];
    }
    /*
@@ -132,13 +136,15 @@ export class UpstreamNodeLocator {
     * Returns the node and the output link attached to it that leads to the
     * starting node if any.
     */
-    locateUpstream(fromNode: LGraphNode, inputIndex: SlotIndex, tag: string | null): [LGraphNode | null, LLink | null] {
+    locateUpstream(fromNode: LGraphNode, inputIndex: SlotIndex, tag: string | null): [LGraphNode | null, LLink | null, number | null, LGraphNode | null] {
        let parent = fromNode.getInputNode(inputIndex);
        if (!parent)
-            return [null, null];
+            return [null, null, null, null];
        const seen = {}
        let currentLink = fromNode.getInputLink(inputIndex);
        let currentInputSlot = inputIndex;
        let currentNode = fromNode;
        const shouldFollowParent = (parent: LGraphNode) => {
            return isActiveNode(parent, tag) && !this.isTheTargetNode(parent);
@@ -151,7 +157,10 @@ export class UpstreamNodeLocator {
        // nodes have conditional logic that determines which link
        // to follow backwards.
        while (shouldFollowParent(parent)) {
-            const [nextGraph, nextLink] = this.getUpstreamLink(parent, currentLink);
+            const [nextGraph, nextLink, nextInputSlot, nextNode] = this.getUpstreamLink(parent, currentLink);
            currentInputSlot = nextInputSlot;
            currentNode = nextNode;
            if (nextLink == null) {
                console.warn("[graphToPrompt] No upstream link found in frontend node", parent)
@@ -175,9 +184,9 @@ export class UpstreamNodeLocator {
        }
        if (!isActiveNode(parent, tag) || !this.isTheTargetNode(parent) || currentLink == null)
-            return [null, null];
+            return [null, currentLink, currentInputSlot, currentNode];
-        return [parent, currentLink]
+        return [parent, currentLink, currentInputSlot, currentNode]
    }
 }
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -4,6 +4,7 @@
 import { LGraphNode } from "@litegraph-ts/core"
 import { type IDragItem, type WidgetLayout, ALL_ATTRIBUTES, type AttributesSpec, type WritableLayoutStateStore } from "$lib/stores/layoutStates"
 import uiState from "$lib/stores/uiState"
 import interfaceState from "$lib/stores/interfaceState"
 import workflowState from "$lib/stores/workflowState"
 import layoutStates from "$lib/stores/layoutStates"
 import selectionState from "$lib/stores/selectionState"
@@ -12,7 +13,11 @@
 import ComfyComboProperty from "./ComfyComboProperty.svelte";
 import type { ComfyWidgetNode } from "$lib/nodes/widgets";
 import type { ComfyBoxWorkflow } from "$lib/stores/workflowState";
 import { Diagram3 } from "svelte-bootstrap-icons";
 	import { getContext } from "svelte";
 	import { WORKFLOWS_VIEW } from "./ComfyBoxWorkflowsView.svelte";
 export let app: ComfyApp
 export let workflow: ComfyBoxWorkflow | null;
 let layoutState: WritableLayoutStateStore | null = null
@@ -22,7 +27,12 @@
 let target: IDragItem | null = null;
 let node: LGraphNode | null = null;
- $: if (layoutState) {
+ $: {
     if ($interfaceState.isJumpingToNode) {
         $interfaceState.isJumpingToNode = false;
     }
     {
         if (layoutState) {
             if ($selectionState.currentSelection.length > 0) {
                 node = null;
                 const targetId = $selectionState.currentSelection.slice(-1)[0]
@@ -37,6 +47,13 @@
             else if ($selectionState.currentSelectionNodes.length > 0) {
                 target = null;
                 node = $selectionState.currentSelectionNodes[0]
                 if (node != null && layoutState != null) {
                     const dragItem = layoutState.findLayoutForNode(node.id);
                     if (dragItem != null) {
                         target = dragItem;
                     }
                 }
             }
             else {
                 target = null
@@ -47,6 +64,8 @@
             target = null;
             node = null;
         }
     }
 }
 $: if (target) {
     for (const cat of Object.values(ALL_ATTRIBUTES)) {
@@ -291,18 +310,52 @@
     console.warn("[ComfyProperties] doRefreshPanel")
     $layoutStates.refreshPropsPanel += 1;
 }
 const workflowsViewContext = getContext(WORKFLOWS_VIEW) as any;
 async function jumpToNode() {
     if (!workflowsViewContext) {
         // strange svelte bug caused by HMR
         // https://github.com/sveltejs/svelte/issues/8655
         console.error("[ComfyProperties] No workflows view context!")
         return;
     }
     if (app?.lCanvas == null || workflow == null || node == null)
         return;
     const activeWorkflow = workflowState.setActiveWorkflow(app.lCanvas, workflow.id);
     if (activeWorkflow == null || !activeWorkflow.graph.getNodeByIdRecursive(node.id))
         return;
     await workflowsViewContext.openGraph(() => {
         app.lCanvas.jumpToNode(node);
     })
 }
 </script>
 <div class="props">
    <div class="props-scroller">
        <div class="top">
            <div class="target-name">
-            <span>
+                <div class="target-title-wrapper">
-                <span class="title">{target?.attrs?.title || node?.title || "Workflow"}<span>
+                    <span class="title">{target?.attrs?.title || node?.title || "Workflow"}</span>
                    {#if targetType !== ""}
                        <span class="type">({targetType})</span>
                    {/if}
-                </span>
+                </div>
-                </span>
+                {#if node != null}
                    <div class="target-name-button">
                        <button class="mode-button ternary"
                                disabled={node == null}
                                title="View in Graph"
                                on:click={jumpToNode}
                        >
                            <Diagram3 width="100%" height="100%" />
                        </button>
                    </div>
                {/if}
            </div>
        </div>
        <div class="props-entries">
@@ -478,8 +531,23 @@
                {/key}
            {/if}
        </div>
    </div>
 </div>
 <style lang="scss">
 $bottom-bar-height: 2.5rem;
 .props {
     width: 100%;
     height: 100%;
 }
 .props-scroller {
     width: 100%;
     height: calc(100% - $bottom-bar-height);
     overflow-x: hidden;
     overflow-y: auto;
 }
 .props-entry {
     padding-bottom: 0.5rem;
@@ -491,7 +559,7 @@
 .target-name {
     background: var(--input-background-fill);
-     border-color: var(--input-border-color);
+     border-color: var(--input-border-color);
     white-space: nowrap;
     .title {
@@ -501,6 +569,48 @@
             padding-left: 0.25rem;
             font-weight: normal;
         }
     }
     width: 100%;
     display: flex;
     flex-direction: row;
     > .target-title-wrapper {
         padding: 0.8rem 0 0.8rem 1.0rem;
         display: flex;
         flex-direction: row;
         width: 100%;
         text-align: center;
         > span {
             display: flex;
             flex-direction: column;
             justify-content: center;
         }
     }
     > .target-name-button {
         padding: 0.5rem;
         .mode-button {
             color: var(--comfy-accent-soft);
             height: $bottom-bar-height;
             width: 2.5rem;
             height: 2.5rem;
             margin: 1.0rem;
             padding: 0.5rem;
             margin-left: auto;
             @include square-button;
             color: var(--neutral-300);
             &:hover:not(:disabled) {
                 filter: brightness(120%) !important;
             }
             &:active:not(:disabled) {
                 filter: brightness(50%) !important;
             }
         }
     }
 }
@@ -518,13 +628,5 @@
         color: var(--neutral-500);
     }
 }
 .bottom {
     /* width: 100%;
        height: auto;
        position: absolute;
        bottom: 0;
        padding: 0.5em; */
 }
 @include disable-inputs;
--- a/src/lib/components/ComfyQueue.svelte
+++ b/src/lib/components/ComfyQueue.svelte
@@ -8,7 +8,8 @@
     date?: string,
     status: QueueUIEntryStatus,
     images?: string[], // URLs
-     details?: string // shown in a tooltip on hover
+     details?: string, // shown in a tooltip on hover
     error?: WorkflowError
 }
 </script>
@@ -21,15 +22,15 @@
 import { convertComfyOutputToComfyURL, convertFilenameToComfyURL, getNodeInfo, truncateString } from "$lib/utils"
 import type { Writable } from "svelte/store";
 import type { QueueItemType } from "$lib/api";
 import { ImageViewer } from "$lib/ImageViewer";
 import { Button } from "@gradio/button";
 import type ComfyApp from "./ComfyApp";
- import { tick } from "svelte";
+ import { getContext, tick } from "svelte";
 import Modal from "./Modal.svelte";
- import DropZone from "./DropZone.svelte";
+ import { type WorkflowError } from "$lib/stores/workflowState";
 	import workflowState from "$lib/stores/workflowState";
 import ComfyQueueListDisplay from "./ComfyQueueListDisplay.svelte";
 import ComfyQueueGridDisplay from "./ComfyQueueGridDisplay.svelte";
 	import { WORKFLOWS_VIEW } from "./ComfyBoxWorkflowsView.svelte";
 	import uiQueueState from "$lib/stores/uiQueueState";
 export let app: ComfyApp;
@@ -38,6 +39,8 @@
 let queueCompleted: Writable<CompletedQueueEntry[]> | null = null;
 let queueList: HTMLDivElement | null = null;
 const { showError } = getContext(WORKFLOWS_VIEW) as any;
 $: if ($queueState) {
     queuePending = $queueState.queuePending
     queueRunning = $queueState.queueRunning
@@ -50,46 +53,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) {
@@ -104,122 +95,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?.length > 0)
         message += ` (${subgraphs.join(', ')})`
     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.details = 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() {
@@ -231,11 +126,21 @@
 let selectedPrompt = null;
 let selectedImages = [];
 function showPrompt(entry: QueueUIEntry) {
     if (entry.error != null) {
         showModal = false;
         expandAll = false;
         selectedPrompt = null;
         selectedImages = [];
         showError(entry.entry.promptID);
     }
     else {
         selectedPrompt = entry.entry.prompt;
         selectedImages = entry.images;
         showModal = true;
         expandAll = false
     }
 }
 function closeModal() {
     selectedPrompt = null
--- a/src/lib/components/ComfyQueueListDisplay.svelte
+++ b/src/lib/components/ComfyQueueListDisplay.svelte
@@ -148,8 +148,11 @@
     &.success {
         /* background: green; */
     }
     &.validation_failed {
         background: #551a1a;
     }
     &.error {
-         background: red;
+         background: #401a40;
     }
     &.all_cached, &.interrupted {
         filter: brightness(80%);
--- a/src/lib/components/ComfySettingsView.svelte
+++ b/src/lib/components/ComfySettingsView.svelte
@@ -0,0 +1,260 @@
 <script lang="ts">
 import { CONFIG_CATEGORIES, CONFIG_DEFS_BY_CATEGORY, CONFIG_DEFS_BY_NAME, type ConfigDefAny, type ConfigDefEnum, type ConfigState } from "$lib/stores/configDefs";
 import { capitalize } from "$lib/utils";
 import { Checkbox } from "@gradio/form";
 import configState from "$lib/stores/configState";
 import type ComfyApp from "./ComfyApp";
 import NumberInput from "./NumberInput.svelte";
 import Textbox from "@gradio/form/src/Textbox.svelte";
 import { Button } from "@gradio/button";
 	import { SvelteToast } from "@zerodevx/svelte-toast";
 	import notify from "$lib/notify";
 export let app: ComfyApp
 let selectedCategory = CONFIG_CATEGORIES[0];
 let changes: Partial<Record<keyof ConfigState, any>> = {}
 const toastOptions = {
     intro: { duration: 200 },
     theme: {
         '--toastBarHeight': 0
     }
 }
 function selectCategory(category: string) {
     selectedCategory = category;
 }
 function setOption(def: ConfigDefAny, value: any) {
     if (!configState.validateConfigOption(def, value)) {
         console.warn(`[configState] Invalid value for option ${def.name} (${value}), setting to default (${def.defaultValue})`);
         value = def.defaultValue
     }
     changes[def.name] = value;
 }
 function setEnumOption(def: ConfigDefEnum<any, any>, e: Event): void {
     const select = e.target as HTMLSelectElement;
     const index = select.selectedIndex
     setOption(def, def.options.values[index].value)
 }
 function doSave() {
     for (const [k, v] of Object.entries(changes)) {
         const def = CONFIG_DEFS_BY_NAME[k]
         configState.setConfigOption(def, v, true);
     }
     changes = {};
     const json = JSON.stringify($configState);
     localStorage.setItem("config", json);
     notify("Config applied!", { type: "success" })
 }
 function doReset() {
     if (!confirm("Are you sure you want to reset the config to the defaults?"))
         return;
     configState.loadDefault(true);
     notify("Config reset!")
 }
 </script>
 <div class="comfy-settings">
    <div class="comfy-settings-categories">
        {#each CONFIG_CATEGORIES as category}
            <!-- svelte-ignore a11y-click-events-have-key-events -->
            <div class="comfy-settings-category" class:selected={selectedCategory === category} on:click={() => selectCategory(category)}>
                {capitalize(category)}
            </div>
        {/each}
    </div>
    <div class="comfy-settings-main">
        {#if selectedCategory}
            {@const categoryDefs = CONFIG_DEFS_BY_CATEGORY[selectedCategory]}
            {#key $configState}
                <div class="comfy-settings-entries">
                    {#each categoryDefs as def}
                        {@const value = $configState[def.name]}
                        <div class="comfy-settings-entry">
                            <div class="name">{def.name}</div>
                            {#if def.type === "boolean"}
                                <span class="ctrl checkbox">
                                    <Checkbox label={def.description} {value} on:change={(e) => setOption(def, e.detail)} />
                                </span>
                            {:else if def.type === "number"}
                                <div class="description">{def.description}</div>
                                <span class="ctrl number">
                                    <NumberInput label="" min={def.options.min} max={def.options.max} step={def.options.step} {value} on:release={(e) => setOption(def, e.detail)} />
                                </span>
                            {:else if def.type === "string"}
                                <div class="description">{def.description}</div>
                                <span class="ctrl textbox">
                                    <Textbox label="" lines={1} max_lines={1} {value} on:change={(e) => setOption(def, e.detail)} />
                                </span>
                            {:else if def.type === "string[]"}
                                <div class="description">{def.description}</div>
                                <span class="ctrl string-array">
                                    {value.join(",")}
                                </span>
                            {:else if def.type === "enum"}
                                <div class="description">{def.description}</div>
                                <span class="ctrl enum">
                                    <select id="ui-theme" name="ui-theme" on:change={(e) => setEnumOption(def, e)}>
                                        {#each def.options.values as option, i}
                                            {@const selected = def.options.values[i].value === value}
                                            <option value={option.value} {selected}>{option.label}</option>
                                        {/each}
                                    </select>
                                </span>
                            {:else}
                                (Unknown config type {def.type})
                            {/if}
                        </div>
                    {/each}
                </div>
            {/key}
        {:else}
            Please select a category.
        {/if}
        <div class="comfy-settings-bottom-bar">
            <div>
                <div class="left">
                    <Button variant="secondary" on:click={doReset}>
                        Reset
                    </Button>
                </div>
                <div class="right">
                    <Button variant="primary" on:click={doSave}>
                        Save
                    </Button>
                </div>
            </div>
        </div>
    </div>
    <SvelteToast options={toastOptions} />
 </div>
 <style lang="scss">
 $bottom-bar-height: 5rem;
 .comfy-settings {
     color: var(--body-text-color);
     display: flex;
     flex-direction: row;
     width: 100%;
     height: 100%;
 }
 .comfy-settings-categories {
     width: 20rem;
     height: 100%;
     color: var(--neutral-500);
     background: var(--neutral-800);
     border-left: 2px solid var(--comfy-splitpanes-background-fill);
 }
 .comfy-settings-category {
     padding: 2rem 3rem;
     font-size: 14pt;
     border-bottom: 1px solid grey;
     cursor: pointer;
     &.selected {
         color: var(--body-text-color);
         background: var(--neutral-700);
     }
 }
 .comfy-settings-main {
     width: 100%;
     height: calc(100% - $bottom-bar-height);
 }
 .comfy-settings-entries {
     padding: 3rem 3rem;
     height: 100%;
 }
 .comfy-settings-entry {
     padding: 1rem 3rem;
     .name {
         font-weight: bold;
         font-size: 13pt;
     }
     .description {
         font-size: 11pt;
         color: var(--neutral-400);
     }
     .ctrl {
         margin-top: 0.5rem;
         min-width: 5rem;
         display: block;
         &:not(.checkbox) {
             width: 20rem;
         }
         &.textbox {
             :global(span) {
                 display: block !important;
             }
         }
         &.checkbox {
             display: inline-flex !important;
             padding: 0 0.75rem;
             :global(label) {
                 color: var(--neutral-400);
                 font-size: 11pt;
             }
         }
         &.enum {
             select {
                 -webkit-appearance: none;
                 -moz-appearance: none;
                 background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
                 background-repeat: no-repeat;
                 background-position-x: 100%;
                 background-position-y: 8px;
             }
         }
     }
 }
 .comfy-settings-bottom-bar {
     background: var(--neutral-900);
     width: 100%;
     border-top: 2px solid var(--neutral-800);
     gap: var(--layout-gap);
     overflow-x: hidden;
     height: $bottom-bar-height;
     justify-content: center;
     padding: 0 2rem;
     margin: auto;
     position: relative;
     flex-direction: column;
     display: flex;
     > div {
         width: 100%;
         display: flex;
         gap: var(--layout-gap);
         margin: auto;
         flex-wrap: nowrap;
     }
     .left {
         left: 0;
     }
     .right {
         margin-left: auto;
     }
 }
 </style>
--- a/src/lib/components/ImageUpload.svelte
+++ b/src/lib/components/ImageUpload.svelte
@@ -3,7 +3,7 @@
 import type { ComfyImageLocation } from "$lib/nodes/ComfyWidgetNodes";
 import notify from "$lib/notify";
 import configState from "$lib/stores/configState";
- import { convertComfyOutputEntryToGradio, convertComfyOutputToComfyURL, type ComfyUploadImageAPIResponse } from "$lib/utils";
+ import { batchUploadFilesToComfyUI, convertComfyOutputToComfyURL, type ComfyBatchUploadResult } from "$lib/utils";
 import { Block, BlockLabel } from "@gradio/atoms";
 import { File as FileIcon } from "@gradio/icons";
 import type { FileData as GradioFileData } from "@gradio/upload";
@@ -18,6 +18,7 @@
 export let elem_classes: string[] = []
 export let style: string = ""
 export let label: string = ""
 export let mask: ComfyImageLocation | null;
 // let propsChanged: Writable<number> | null = null;
 let dragging = false;
 let pending_upload = false;
@@ -59,55 +60,10 @@
     dispatch("image_clicked")
 }
- interface GradioUploadResponse {
+ async function upload_files(files: Array<File>): Promise<ComfyBatchUploadResult> {
-     error?: string;
+     console.debug("UPLOADFILES", files);
     files?: Array<ComfyImageLocation>;
 }
 async function upload_files(root: string, files: Array<File>): Promise<GradioUploadResponse> {
     console.debug("UPLOADILFES", root, files);
     dispatch("uploading")
-
+     return batchUploadFilesToComfyUI(files);
     const url = configState.getBackendURL();
     const requests = files.map(async (file) => {
         const formData = new FormData();
         formData.append("image", file, file.name);
         return fetch(new Request(url + "/upload/image", {
             body: formData,
             method: 'POST'
         }))
         .then(r => r.json())
         .catch(error => error);
     });
     return Promise.all(requests)
                   .then( (results) => {
                       const errors = []
                       const files = []
                       for (const r of results) {
                           if (r instanceof Error) {
                               errors.push(r.toString())
                           }
                           else {
                               // bare filename of image
                               const resp = r as ComfyUploadImageAPIResponse;
                               files.push({
                                   filename: resp.name,
                                   subfolder: "",
                                   type: "input"
                               })
                           }
                       }
                       let error = null;
                       if (errors && errors.length > 0)
                           error = "Upload error(s):\n" + errors.join("\n");
                       return { error, files }
                   })
 }
 $: {
@@ -144,7 +100,7 @@
             );
             let upload_value = _value;
             pending_upload = true;
-             upload_files(root, files).then((response) => {
+             upload_files(files).then((response) => {
                 if (JSON.stringify(upload_value) !== JSON.stringify(_value)) {
                     // value has changed since upload started
                     console.error("[ImageUpload] value has changed since upload started", upload_value, _value)
@@ -217,6 +173,15 @@
                     bind:naturalWidth={imgWidth}
                     bind:naturalHeight={imgHeight}
                />
                {#key mask}
                    {#if mask}
                        <!-- svelte-ignore a11y-click-events-have-key-events -->
                        <img src={convertComfyOutputToComfyURL(mask)}
                            alt={firstImage.filename}
                            on:click={onImgClicked}
                        />
                    {/if}
                {/key}
            {:else}
                <Upload
                    file_count={fileCount}
@@ -246,6 +211,9 @@
     }
     img {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         max-width: 100%;
--- a/src/lib/components/LightboxModal.svelte
+++ b/src/lib/components/LightboxModal.svelte
@@ -41,7 +41,7 @@
 #lightboxModal{
     display: none;
     position: fixed;
-     z-index: 1001;
+     z-index: var(--layer-top);
     left: 0;
     top: 0;
     width: 100%;
--- a/src/lib/components/MaskCanvas.svelte
+++ b/src/lib/components/MaskCanvas.svelte
@@ -0,0 +1,669 @@
 <script context="module" lang="ts">
 export type MaskCanvasData = {
     hasMask: boolean,
     maskCanvas: HTMLCanvasElement | null,
     curLineGroup: LineGroup,
     redoCurLines: LineGroup,
 }
 export type LinePoint = {
     x: number,
     y: number
 }
 export interface Line {
     size?: number,
     points: LinePoint[]
 }
 export type LineGroup = Line[];
 </script>
 <script lang="ts">
 import { loadImage } from "$lib/widgets/utils"
 import { tick, createEventDispatcher } from "svelte";
 import { ArrowClockwise, ArrowCounterclockwise, XSquare, Exclude, Circle, Grid3x3Gap, ArrowsFullscreen, FullscreenExit } from "svelte-bootstrap-icons";
 export let fileURL: string | null = null;
 export let fullscreen: boolean = false;
 const dispatch = createEventDispatcher<{
     change: MaskCanvasData;
     release: MaskCanvasData;
     loaded: MaskCanvasData
 }>();
 let canvasCursor: string | undefined = undefined;
 let container: HTMLDivElement | null;
 let canvas: HTMLCanvasElement | null;
 let maskCanvas: HTMLCanvasElement | null;
 let renders: HTMLImageElement[] = [];
 let context: CanvasRenderingContext2D | null;
 let maskContext: CanvasRenderingContext2D | null;
 let curLineGroup: LineGroup = [];
 let redoCurLines: LineGroup = []
 let original: HTMLImageElement | null;
 let isImageLoaded: boolean = false;
 let imageWidth: number = 512;
 let imageHeight: number = 512;
 let scale: number = 1.0;
 let minScale: number = 1.0;
 let brushSize: number = 100;
 let maskBlur: number = 0;
 let clipMask: boolean = false;
 let hasMask: boolean = false;
 let isDrawing: boolean = false;
 let isPanning: boolean = false;
 let isBrushShowing: boolean = false;
 let transform = ""
 $: transform = `translate(${imx}px, ${imy}px) scale(${scale})`
 let imx: number = 0;
 let imy: number = 0;
 let x: number = 0;
 let y: number = 0;
 let panX: number = 0;
 let panY: number = 0;
 const BRUSH_COLOR = "#000"
 enum MouseButton {
     Left = 0,
     Middle = 1,
     Right = 2,
     Back = 3,
     Forward = 4
 }
 $: if (isPanning) {
     canvasCursor = "grab";
 }
 else if (isImageLoaded && isBrushShowing) {
     canvasCursor = "none";
 }
 else {
     canvasCursor = undefined;
 }
 $: {
     context = canvas ? canvas.getContext("2d") : null
 }
 function clearState() {
     hasMask = false;
     maskCanvas = null;
     maskContext = null;
     isImageLoaded = false;
     original = null;
     renders = []
     // curLineGroup = [];
     // redoCurLines = []
     imageWidth = 512;
     imageHeight = 512;
     scale = 1.0;
     minScale = 0.5;
 }
 let loadedFileURL: string | null = null
 let dispatchLoaded: boolean = false;
 $: if (fileURL !== loadedFileURL) {
     clearState();
     if (fileURL) {
         loadImage(fileURL).then(i => {
             original = i;
             isImageLoaded = true;
             dispatchLoaded = true;
         })
                           .catch(i => {
                               isImageLoaded = false;
                           })
     }
     else {
         isImageLoaded = false;
         original = null;
     }
     loadedFileURL = fileURL
 }
 $: {
     // initSizeAndScale(isImageLoaded, original);
     [imageWidth, imageHeight] = getCurrentWidthAndHeight(isImageLoaded, original)
     scale = initScale(imageWidth, imageHeight)
     initImagePos()
     // in case mask strokes were preserved after new image load
     // (use case: sending an inpainted image back while reusing the same mask)
     tick().then(() => {
         loaded();
     })
 }
 function loaded() {
     if (!dispatchLoaded)
         return;
     dispatchLoaded = false;
     redrawCurLines()
     hasMask = curLineGroup.length > 0;
     console.warn("[MaskCanvas] LOADED", maskCanvas, hasMask)
     dispatch("loaded", {
         hasMask,
         maskCanvas,
         curLineGroup,
         redoCurLines
     })
 }
 $: hasMask = curLineGroup.length > 0;
 function initImagePos() {
     if (!container)
         return
     const rect = container.getBoundingClientRect();
     imx = rect.width / 2 - (imageWidth / 2) * scale
     imy = rect.height / 2 - (imageHeight / 2) * scale
 }
 function initScale(width: number, height: number): number {
     const s = getScale(width, height);
     minScale = s / 2;
     return s;
 }
 function initSizeAndScale(isImageLoaded: boolean, original: HTMLImageElement | null) {
     [imageWidth, imageHeight] = getCurrentWidthAndHeight(isImageLoaded, original)
     scale = getScale(imageWidth, imageHeight)
     minScale = scale;
 }
 function drawOnCurrentRender(lineGroup: LineGroup) {
     draw(lineGroup)
     dispatch("change", {
         hasMask,
         maskCanvas,
         curLineGroup,
         redoCurLines
     })
 }
 function draw(lineGroup: LineGroup) {
     if (!context || !maskContext)
         return
     context.clearRect(0, 0, context.canvas.width, context.canvas.height)
     maskContext.clearRect(0, 0, maskContext.canvas.width, maskContext.canvas.height)
     const color = BRUSH_COLOR
     const drawMask = (ctx: CanvasRenderingContext2D) => {
         ctx.save();
         ctx.filter = `blur(${maskBlur}px)`
         drawLines(ctx, lineGroup, color)
         ctx.restore();
     }
     drawMask(maskContext);
     if (clipMask) {
         context.save();
         context.filter = `blur(${maskBlur}px)`
         drawLines(context, lineGroup, color)
         context.restore();
         context.globalCompositeOperation = "source-in"
         context.drawImage(original!!, 0, 0, imageWidth, imageHeight)
         context.globalCompositeOperation = "source-over";
     }
     else {
         drawMask(context);
     }
 }
 function updateMaskImage() {
     drawOnCurrentRender(curLineGroup);
 }
 function drawLines(ctx: CanvasRenderingContext2D, lines: LineGroup, color: string) {
     ctx.strokeStyle = color
     ctx.lineCap = 'round'
     ctx.lineJoin = 'round'
     lines.forEach(line => {
         if (!line?.points.length || !line.size) {
             return
         }
         ctx.lineWidth = line.size
         ctx.beginPath()
         ctx.moveTo(line.points[0].x, line.points[0].y)
         line.points.forEach(point => ctx.lineTo(point.x, point.y))
         ctx.stroke()
     })
 }
 function redrawCurLines() {
     drawOnCurrentRender(curLineGroup || [])
 }
 $: if (canvas && original) {
     console.warn("INITCANVAS", imageWidth, imageHeight, original.src)
     maskCanvas = document.createElement("canvas");
     maskContext = maskCanvas.getContext("2d")!;
     maskCanvas.width = imageWidth;
     maskCanvas.height = imageHeight;
     canvas.width = imageWidth;
     canvas.height = imageHeight;
     redrawCurLines() // no react on curLineGroup
 }
 function getCurrentWidthAndHeight(isImageLoaded: boolean, original: HTMLImageElement | null) {
     if (isImageLoaded && original){
         return [original.naturalWidth, original.naturalHeight]
     }
     return [512, 512]
 }
 function getScale(width: number, height: number): number {
     const size = container?.getBoundingClientRect();
     if (!size) {
         return 1.0
     }
     const ratioWidth = size.width / width
     const ratioHeight = (size.height) / height
     let scale: number = 1.0
     if (ratioWidth < 1 || ratioHeight < 1) {
         scale = Math.min(ratioWidth, ratioHeight)
     }
     return scale
 }
 function undoStroke() {
     if (curLineGroup.length === 0) {
         return
     }
     const lastLine = curLineGroup.pop()!
     const newRedoCurLines = [...redoCurLines, lastLine]
     redoCurLines = newRedoCurLines
     const newLineGroup = [...curLineGroup]
     curLineGroup = newLineGroup
     drawOnCurrentRender(newLineGroup)
 }
 function redoStroke() {
     if (redoCurLines.length === 0) {
         return
     }
     const line = redoCurLines.pop()!
     redoCurLines = [...redoCurLines]
     const newLineGroup = [...curLineGroup, line]
     curLineGroup = newLineGroup
     drawOnCurrentRender(newLineGroup)
 }
 export function clearStrokes() {
     redoCurLines = []
     const newLineGroup: LineGroup = []
     curLineGroup = newLineGroup
     drawOnCurrentRender(newLineGroup)
 }
 export function recenterImage() {
     scale = initScale(imageWidth, imageHeight)
     initImagePos();
 }
 async function toggleFullscreen() {
     fullscreen = !fullscreen;
     updateMaskImage();
     await tick();
     recenterImage();
 }
 function onCanvasMouseOver() {
     isBrushShowing = true;
 }
 function onCanvasFocus() {
     isBrushShowing = true;
 }
 function onCanvasMouseLeave() {
     isBrushShowing = false;
 }
 function mouseXY(e: MouseEvent): LinePoint {
     return { x: e.offsetX, y: e.offsetY }
 }
 function onCanvasMouseDown(e: MouseEvent) {
     if (!original?.src)
         return;
     if (isPanning)
         return;
     if (canvas == null)
         return;
     switch (e.button) {
         case MouseButton.Right:
             return;
         case MouseButton.Middle:
             isPanning = true;
             panX = e.offsetX * scale;
             panY = e.offsetY * scale;
             return;
     }
     isDrawing = true;
     redoCurLines = []
     let lineGroup: LineGroup = [...curLineGroup]
     lineGroup.push({size: brushSize, points: [mouseXY(e)] })
     curLineGroup = lineGroup
     drawOnCurrentRender(curLineGroup);
 }
 function onCanvasMouseUp() {
 }
 function onCanvasMouseMove(e: MouseEvent) {
     if (isPanning)
         return;
     if (!isDrawing)
         return;
     if (curLineGroup.length === 0)
         return
     curLineGroup[curLineGroup.length-1].points.push(mouseXY(e))
     curLineGroup = curLineGroup; // react
     drawOnCurrentRender(curLineGroup)
 }
 function onCanvasMouseWheel(e: WheelEvent) {
     e.preventDefault();
     if (!container || e.target != canvas)
         return;
     const bound = container.getBoundingClientRect()
     // coodinates on the image that were zoomed
     const x_ = e.clientX - bound.x
     const y_ = e.clientY - bound.y
     e.preventDefault();
     var delta = e.deltaY * -0.001
     delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency
     const zx = (x_ - imx)/scale
     const zy = (y_ - imy)/scale
     scale += delta * scale
     scale = Math.max(minScale,scale)
     imx = -zx * scale + x_
     imy = -zy * scale + y_
     x = e.offsetX * scale;
     y = e.offsetY * scale;
 }
 function onMouseMove(e: MouseEvent) {
     if (e.target != canvas)
         return;
     x = e.offsetX * scale;
     y = e.offsetY * scale;
     if (isPanning) {
         imx += x - panX;
         imy += y - panY;
     }
 }
 function onMouseUp(e: MouseEvent) {
     if (e.button === MouseButton.Middle) {
         isPanning = false
         panX = 0
         panY = 0
     }
     if (isPanning)
         return;
     if (!original?.src)
         return;
     if (!canvas)
         return;
     if (!isDrawing)
         return;
     isDrawing = false;
     dispatch("release", { hasMask, maskCanvas, curLineGroup, redoCurLines })
 }
 function dispatchRelease() {
     updateMaskImage()
     dispatch("release", { hasMask, maskCanvas, curLineGroup, redoCurLines })
 }
 </script>
 <svelte:window on:mouseup={onMouseUp} />
 <div class="me-container" class:fullscreen bind:this={container} on:mousemove={onMouseMove}>
    {#if !isImageLoaded}
        <div>
            (empty)
        </div>
    {:else}
        <div class="me-transform" style:transform={transform} style:--scale={scale}>
            <div class="me-canvas-container">
                <div class="me-original-image-container"
                     style:width="{imageWidth}px"
                     style:height="{imageHeight}px">
                    {#if original}
                        {@const showOriginal = !clipMask}
                        <img class="me-original-image"
                             src={original.src}
                             style:width={imageWidth}
                             style:height={imageHeight}
                             style:display={showOriginal ? "block" : "none"}
                        />
                    {/if}
                </div>
                <canvas class="me-canvas"
                        bind:this={canvas}
                        style:cursor={canvasCursor}
                        on:mouseover={onCanvasMouseOver}
                        on:focus={onCanvasFocus}
                        on:wheel={onCanvasMouseWheel}
                        on:mouseleave={onCanvasMouseLeave}
                        on:mousedown|preventDefault={onCanvasMouseDown}
                        on:mouseup|preventDefault={onCanvasMouseUp}
                        on:mousemove={onCanvasMouseMove}
                />
            </div>
        </div>
    {/if}
    {#if isImageLoaded && isBrushShowing && !isPanning}
        <div class="me-brush-cursor"
             style:width="{brushSize * scale}px"
             style:height="{brushSize * scale}px"
             style:left="{x + imx}px"
             style:top="{y + imy}px"
             style:transform="translate(-50%, -50%)"
        />
    {/if}
    <div class="me-toolkit-bar">
        <button disabled={curLineGroup.length === 0} on:click={undoStroke}>
            <ArrowCounterclockwise />
        </button>
        <button disabled={redoCurLines.length === 0} on:click={redoStroke}>
            <ArrowClockwise />
        </button>
        <button on:click={clearStrokes} disabled={curLineGroup.length === 0 && redoCurLines.length === 0}>
            <XSquare/>
        </button>
        <label>
            <Circle />
            <input type="range" min="1" max="200" bind:value={brushSize} step="0.1"
                   on:change={updateMaskImage}
                   on:pointerup={dispatchRelease}/>
        </label>
        <label>
            <Grid3x3Gap/>
            <input type="range" min="1" max="100" bind:value={maskBlur} step="0.1"
                   on:change={updateMaskImage}
                   on:pointerup={dispatchRelease}/>
        </label>
        <div class="toggle-button" class:toggled={clipMask} on:click={() => {clipMask = !clipMask; updateMaskImage()}}>
            <Exclude />
        </div>
        <div class="toggle-button" class:toggled={fullscreen} on:click={() => {toggleFullscreen()}}>
            {#if fullscreen}
                <FullscreenExit />
            {:else}
                <ArrowsFullscreen />
            {/if}
        </div>
    </div>
 </div>
 <style lang="scss">
 $bg-color: #a0a0a0;
 .me-container {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: hidden;
     background-color: white;
     background-image:
         linear-gradient(45deg, #ccc 25%, transparent 25%),
         linear-gradient(135deg, #ccc 25%, transparent 25%),
         linear-gradient(45deg, transparent 75%, #ccc 75%),
         linear-gradient(135deg, transparent 75%, #ccc 75%);
     background-size:25px 25px; /* Must be a square */
     background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
     &.fullscreen {
         position: fixed;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100vh;
         margin: auto;
         z-index: var(--layer-top);
     }
 }
 .me-transform {
     --scale: 1;
     display: flex;
     flex-wrap: wrap;
     width: -moz-fit-content;
     width: fit-content;
     height: -moz-fit-content;
     height: fit-content;
     margin: 0;
     padding: 0;
     transform-origin: 0% 0%;
 }
 .me-original-image-container {
     position: absolute;
     top: 0;
     left: 0;
     grid-area: editor-content;
     pointer-events: none;
     user-select: none;
     display: grid;
     grid-template-areas: 'original-image-content';
     border: calc((1 / var(--scale)) * 5px) dashed grey;
     img.me-original-image {
         grid-area: original-image-content;
     }
 }
 .me-canvas {
     position: absolute;
     z-index: 1;
 }
 .me-brush-cursor {
     position: absolute;
     border-radius: 50%;
     background-color: #000;
     border: 1px solid var(--yellow-accent);
     pointer-events: none;
 }
 .me-toolkit-bar {
     position: absolute;
     bottom: 0.5rem;
     border-radius: 3rem;
     padding: 0.4rem 24px;
     display: flex;
     margin: 0.5rem auto;
     gap: 16px;
     left: 0;
     right: 0;
     width: 80%;
     height: 3rem;
     align-items: center;
     justify-content: space-evenly;
     backdrop-filter: blur(12px);
     background-color: white;
     animation: slideUp 0.2s ease-out;
     border: var(--editor-toolkit-panel-border);
     box-shadow: 0 0 0 4px #0000001a, 0 3px 16px #00000014, 0 2px 6px 1px #00000017;
     label {
         display: flex;
         flex-direction: row;
         gap: 4px;
         input {
             width: 5rem;
         }
     }
     button {
         &:not(:disabled) {
             cursor: pointer;
         }
         &:hover:not(:disabled) {
             color: var(--secondary-600);
         }
         &:disabled {
             opacity: 40%;
         }
     }
     .toggle-button {
         &:hover:not(:disabled) {
             color: var(--secondary-600);
         }
         &:not(:disabled) {
             cursor: pointer;
         }
         &.toggled {
             color: var(--secondary-400);
         }
     }
 }
 </style>
--- a/src/lib/components/NumberInput.svelte
+++ b/src/lib/components/NumberInput.svelte
@@ -4,8 +4,8 @@
 	import { createEventDispatcher } from "svelte";
 export let value: number = 0;
- export let min: number = -1024
+ export let min: number | null = null
- export let max: number = 1024
+ export let max: number | null = null
 export let step: number = 1;
 export let label: string = "";
 export let disabled: boolean = false;
@@ -41,9 +41,11 @@
 <div class="wrap">
    <div class="head">
        {#if label}
            <label>
                <BlockTitle>{label}</BlockTitle>
            </label>
        {/if}
        <input
            data-testid="number-input"
            type="number"
@@ -83,11 +85,11 @@
     border: var(--input-border-width) solid var(--input-border-color);
     border-radius: var(--input-radius);
     background: var(--input-background-fill);
-     padding: var(--size-2) var(--size-2);
+     padding: var(--input-padding);
     color: var(--body-text-color);
     font-size: var(--input-text-size);
     line-height: var(--line-sm);
-     text-align: center;
+     // text-align: center;
 }
 input:disabled {
     -webkit-text-fill-color: var(--body-text-color);
@@ -95,11 +97,18 @@
     opacity: 1;
 }
- input[type="number"]:focus {
+ input[type="number"] {
     &:focus {
         box-shadow: var(--input-shadow-focus);
         border-color: var(--input-border-color-focus);
     }
     &::-webkit-inner-spin-button,
     &::-webkit-outer-spin-button {
         opacity: 100%;
     }
 }
 input::placeholder {
     color: var(--input-placeholder-color);
 }
@@ -107,4 +116,5 @@
 input[disabled] {
     cursor: not-allowed;
 }
 </style>
--- a/src/lib/components/OnClickToastItem.svelte
+++ b/src/lib/components/OnClickToastItem.svelte
@@ -0,0 +1,24 @@
 <script lang="ts">
 import type { NotifyOptions } from "$lib/notify";
 import { toast } from "@zerodevx/svelte-toast";
 export let message: string = ""
 export let notifyOptions: NotifyOptions
 export let toastID: string
 function onClick() {
     if (notifyOptions.onClick) {
         notifyOptions.onClick()
         toast.pop(toastID)
     }
 }
 </script>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click={onClick}>{message}</div>
 <style lang="scss">
 div {
     cursor: pointer;
 }
 </style>
--- 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/image/StaticImage.svelte
+++ b/src/lib/components/gradio/image/StaticImage.svelte
@@ -2,7 +2,7 @@
 	import { createEventDispatcher } from "svelte";
 	import type { SelectData } from "@gradio/utils";
 	import { BlockLabel, Empty, IconButton } from "@gradio/atoms";
-	import { Download } from "@gradio/icons";
+	import { Download, Clear } from "@gradio/icons";
 	import { get_coordinates_of_clicked_image } from "./utils";
 	import { Image } from "@gradio/icons";
@@ -33,13 +33,17 @@
 			dispatch("select", { index: coordinates, value: null });
 		}
 	};
 function remove() {
     value = null;
 }
 </script>
 <BlockLabel {show_label} Icon={Image} label={label || "Image"} />
 {#if value === null}
 	<Empty size="large" unpadded_box={true}><Image /></Empty>
 {:else}
-	<div class="download">
+	<div class="buttons">
 		<a
 			href={value}
 			target={window.__is_colab__ ? "_blank" : null}
@@ -47,6 +51,7 @@
 		>
 			<IconButton Icon={Download} label="Download" />
 		</a>
        <IconButton Icon={Clear} label="Remove" on:click={remove} />
 	</div>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<img src={value} alt="" class:selectable on:click={handle_click} bind:naturalWidth={imageWidth} bind:naturalHeight={imageHeight} />
@@ -63,9 +68,13 @@
 		cursor: crosshair;
 	}
-	.download {
+	.buttons {
 		display: flex;
 		position: absolute;
-		top: 6px;
+		top: var(--size-2);
-		right: 6px;
+		right: var(--size-2);
 		justify-content: flex-end;
 		gap: var(--spacing-sm);
 		z-index: var(--layer-5);
 	}
 </style>
--- a/src/lib/components/utils.ts
+++ b/src/lib/components/utils.ts
@@ -2,6 +2,9 @@ import type ComfyGraphCanvas from "$lib/ComfyGraphCanvas";
 import { type ContainerLayout, type IDragItem, type TemplateLayout, type WritableLayoutStateStore } from "$lib/stores/layoutStates"
 import type { LGraphCanvas, Vector2 } from "@litegraph-ts/core";
 import { get } from "svelte/store";
 import { PhotoBrowser, f7 } from "framework7-svelte";
 import { ImageViewer } from "$lib/ImageViewer";
 import interfaceState from "$lib/stores/interfaceState";
 export function handleContainerConsider(layoutState: WritableLayoutStateStore, container: ContainerLayout, evt: CustomEvent<DndEvent<IDragItem>>): IDragItem[] {
    return layoutState.updateChildren(container, evt.detail.items)
@@ -45,3 +48,25 @@ function doInsertTemplate(layoutState: WritableLayoutStateStore, droppedTemplate
    return get(layoutState).allItems[container.id].children;
 }
 let mobileLightbox = null;
 export function showMobileLightbox(images: any[], selectedImage: number, options: Partial<PhotoBrowser["params"]> = {}) {
    if (!f7)
        return
    if (mobileLightbox) {
        mobileLightbox.destroy();
        mobileLightbox = null;
    }
    history.pushState({ type: "gallery" }, "");
    mobileLightbox = f7.photoBrowser.create({
        photos: images,
        theme: get(interfaceState).isDarkMode ? "dark" : "light",
        type: 'popup',
        ...options
    });
    mobileLightbox.open(selectedImage)
 }
--- a/src/lib/convertVanillaWorkflow.ts
+++ b/src/lib/convertVanillaWorkflow.ts
@@ -68,7 +68,7 @@ function getConnectionPos(node: SerializedLGraphNode, is_input: boolean, slotNum
    return out;
 }
-function createSerializedWidgetNode(vanillaWorkflow: ComfyVanillaWorkflow, node: SerializedLGraphNode, slotIndex: number, isInput: boolean, widgetNodeType: string, value: any): [ComfyWidgetNode, SerializedComfyWidgetNode] {
+function createSerializedWidgetNode(vanillaWorkflow: ComfyVanillaWorkflow, widgetNodeType: string, value: any, node?: SerializedLGraphNode, slotIndex?: number, isInput?: boolean): [ComfyWidgetNode, SerializedComfyWidgetNode] {
    const comfyWidgetNode = LiteGraph.createNode<ComfyWidgetNode>(widgetNodeType);
    comfyWidgetNode.flags.collapsed = true;
    const size: Vector2 = [0, 0];
@@ -85,12 +85,15 @@ function createSerializedWidgetNode(vanillaWorkflow: ComfyVanillaWorkflow, node:
    const serWidgetNode = comfyWidgetNode.serialize() as SerializedComfyWidgetNode;
    serWidgetNode.comfyValue = value;
    serWidgetNode.shownOutputProperties = {};
    if (node != null) {
        getConnectionPos(node, isInput, slotIndex, serWidgetNode.pos);
        if (isInput)
            serWidgetNode.pos[0] -= size[0] - 20;
        else
            serWidgetNode.pos[0] += 20;
        serWidgetNode.pos[1] += LiteGraph.NODE_TITLE_HEIGHT / 2;
    }
    if (widgetNodeType === "ui/text" && typeof value === "string" && value.indexOf("\n") != -1) {
        const lineCount = countNewLines(value);
@@ -260,11 +263,12 @@ function convertPrimitiveNode(vanillaWorkflow: ComfyVanillaWorkflow, node: Seria
    const [comfyWidgetNode, serWidgetNode] = createSerializedWidgetNode(
        vanillaWorkflow,
        widgetNodeType,
        value,
        node,
        0, // first output on the PrimitiveNode
-        false, // this is an output slot index
+        false // this is an output slot index
-        widgetNodeType,
+    );
        value);
    // Set the UI node's min/max/step from the node def
    configureWidgetNodeProperties(serWidgetNode, widgetOpts)
@@ -381,6 +385,20 @@ export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWork
            removeSerializedNode(vanillaWorkflow, node);
            continue
        }
        else if (node.type === "Note") {
            const [comfyWidgetNode, serWidgetNode] = createSerializedWidgetNode(
                vanillaWorkflow,
                "ui/markdown",
                node.widgets_values[0]
            );
            serWidgetNode.pos = [node.pos[0], node.pos[1]]
            const group = layoutState.addContainer(left, { title: "" })
            layoutState.addWidget(group, comfyWidgetNode)
            removeSerializedNode(vanillaWorkflow, node);
            continue
        }
        const def = ComfyApp.knownBackendNodes[node.type];
        if (def == null) {
@@ -449,11 +467,12 @@ export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWork
                const [comfyWidgetNode, serWidgetNode] = createSerializedWidgetNode(
                    vanillaWorkflow,
                    widgetNodeType,
                    value,
                    node,
                    connInputIndex,
-                    true,
+                    true
-                    widgetNodeType,
+                );
                    value);
                configureWidgetNodeProperties(serWidgetNode, inputOpts)
@@ -492,11 +511,12 @@ export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWork
            // Let's create a gallery for this output node and hook it up
            const [comfyGalleryNode, serGalleryNode] = createSerializedWidgetNode(
                vanillaWorkflow,
                "ui/gallery",
                [],
                node,
                connOutputIndex,
                false,
-                "ui/gallery",
+            );
                []);
            if (group == null)
                group = layoutState.addContainer(isOutputNode ? right : left, { title: node.title || node.type })
--- a/src/lib/nodes/ComfyBackendNode.ts
+++ b/src/lib/nodes/ComfyBackendNode.ts
@@ -1,5 +1,5 @@
 import LGraphCanvas from "@litegraph-ts/core/src/LGraphCanvas";
-import ComfyGraphNode from "./ComfyGraphNode";
+import ComfyGraphNode, { type ComfyGraphNodeProperties } from "./ComfyGraphNode";
 import ComfyWidgets from "$lib/widgets"
 import type { ComfyWidgetNode } from "$lib/nodes/widgets";
 import { BuiltInSlotShape, BuiltInSlotType, LiteGraph, type SerializedLGraphNode } from "@litegraph-ts/core";
@@ -8,10 +8,19 @@ import type { ComfyInputConfig } from "$lib/IComfyInputSlot";
 import { iterateNodeDefOutputs, type ComfyNodeDef, iterateNodeDefInputs } from "$lib/ComfyNodeDef";
 import type { SerializedPromptOutput } from "$lib/utils";
 export interface ComfyBackendNodeProperties extends ComfyGraphNodeProperties {
    noOutputDisplay: boolean
 }
 /*
 * Base class for any node with configuration sent by the backend.
 */
 export class ComfyBackendNode extends ComfyGraphNode {
    override properties: ComfyBackendNodeProperties = {
        tags: [],
        noOutputDisplay: false
    }
    comfyClass: string;
    comfyNodeDef: ComfyNodeDef;
    displayName: string | null;
@@ -37,6 +46,10 @@ export class ComfyBackendNode extends ComfyGraphNode {
        }
    }
    get isOutputNode(): boolean {
        return this.comfyNodeDef.output_node;
    }
    // comfy class -> input name -> input config
    private static defaultInputConfigs: Record<string, Record<string, ComfyInputConfig>> = {}
--- a/src/lib/nodes/ComfyGraphNode.ts
+++ b/src/lib/nodes/ComfyGraphNode.ts
@@ -103,6 +103,16 @@ export default class ComfyGraphNode extends LGraphNode {
        return null;
    }
    /*
     * Traverses this node backwards in the graph in order to determine the type
     * for slot type inheritance. This is used if there isn't a valid upstream
     * link but the output type can be inferred otherwise (for example from
     * properties or other connected inputs)
     */
    getUpstreamLinkForInheritedType(): LLink | null {
        return this.getUpstreamLink();
    }
    get layoutState(): WritableLayoutStateStore | null {
        return layoutStates.getLayoutByNode(this);
    }
@@ -151,7 +161,7 @@ export default class ComfyGraphNode extends LGraphNode {
        while (currentNode) {
            updateNodes.unshift(currentNode);
-            const link = currentNode.getUpstreamLink();
+            const link = currentNode.getUpstreamLinkForInheritedType();
            if (link !== null) {
                const node = this.graph.getNodeById(link.origin_id) as ComfyGraphNode;
                if (node.canInheritSlotTypes) {
--- a/src/lib/nodes/ComfyPickFirstNode.ts
+++ b/src/lib/nodes/ComfyPickFirstNode.ts
@@ -1,6 +1,7 @@
 import { BuiltInSlotType, LiteGraph, NodeMode, type INodeInputSlot, type SlotLayout, type INodeOutputSlot, LLink, LConnectionKind, type ITextWidget, type SerializedLGraphNode, type IComboWidget } from "@litegraph-ts/core";
 import ComfyGraphNode, { type ComfyGraphNodeProperties } from "./ComfyGraphNode";
 import { Watch } from "@litegraph-ts/nodes-basic";
 import { nextLetter } from "$lib/utils";
 export type PickFirstMode = "anyActiveLink" | "truthy" | "dataNonNull"
@@ -8,17 +9,6 @@ export interface ComfyPickFirstNodeProperties extends ComfyGraphNodeProperties {
    mode: PickFirstMode
 }
 function nextLetter(s: string): string {
    return s.replace(/([a-zA-Z])[^a-zA-Z]*$/, function(a) {
        var c = a.charCodeAt(0);
        switch (c) {
            case 90: return 'A';
            case 122: return 'a';
            default: return String.fromCharCode(++c);
        }
    });
 }
 export default class ComfyPickFirstNode extends ComfyGraphNode {
    override properties: ComfyPickFirstNodeProperties = {
        tags: [],
--- a/src/lib/nodes/ComfyPickImageNode.ts
+++ b/src/lib/nodes/ComfyPickImageNode.ts
@@ -1,8 +1,17 @@
 import { LiteGraph, type ITextWidget, type SlotLayout, type INumberWidget } from "@litegraph-ts/core";
-import ComfyGraphNode from "./ComfyGraphNode";
+import ComfyGraphNode, { type ComfyGraphNodeProperties } from "./ComfyGraphNode";
 import { comfyFileToAnnotatedFilepath, type ComfyBoxImageMetadata } from "$lib/utils";
 export interface ComfyPickImageProperties extends ComfyGraphNodeProperties {
    imageTagFilter: string
 }
 export default class ComfyPickImageNode extends ComfyGraphNode {
    override properties: ComfyPickImageProperties = {
        tags: [],
        imageTagFilter: ""
    }
    static slotLayout: SlotLayout = {
        inputs: [
            { name: "images", type: "COMFYBOX_IMAGES,COMFYBOX_IMAGE" },
@@ -13,57 +22,87 @@ export default class ComfyPickImageNode extends ComfyGraphNode {
            { name: "filename", type: "string" },
            { name: "width", type: "number" },
            { name: "height", type: "number" },
            { name: "children", type: "COMFYBOX_IMAGES" },
        ]
    }
    tagFilterWidget: ITextWidget;
    filepathWidget: ITextWidget;
    folderWidget: ITextWidget;
    widthWidget: INumberWidget;
    heightWidget: INumberWidget;
    tagsWidget: ITextWidget;
    childrenWidget: INumberWidget;
    constructor(title?: string) {
        super(title)
        this.tagFilterWidget = this.addWidget("text", "Tag Filter", this.properties.imageTagFilter, "imageTagFilter")
        this.filepathWidget = this.addWidget("text", "File", "")
        this.filepathWidget.disabled = true;
        this.folderWidget = this.addWidget("text", "Folder", "")
        this.folderWidget.disabled = true;
        this.widthWidget = this.addWidget("number", "Width", 0)
        this.widthWidget.disabled = true;
        this.heightWidget = this.addWidget("number", "Height", 0)
-        for (const widget of this.widgets)
+        this.heightWidget.disabled = true;
-            widget.disabled = true;
+        this.tagsWidget = this.addWidget("text", "Tags", "")
        this.tagsWidget.disabled = true;
        this.childrenWidget = this.addWidget("number", "# of Children", 0)
        this.childrenWidget.disabled = true;
    }
    _value: ComfyBoxImageMetadata[] | null = null;
    _image: ComfyBoxImageMetadata | null = null;
    _path: string | null = null;
-    _index: number = 0;
+    _index: number | null = null;
    private setValue(value: ComfyBoxImageMetadata[] | ComfyBoxImageMetadata | null, index: number) {
        if (value != null && !Array.isArray(value)) {
            value = [value]
            index = 0;
        }
        const changed = this._value != value || this._index != index;
        this._value = value as ComfyBoxImageMetadata[];
        this._index = index;
        let image: ComfyBoxImageMetadata | null = null;
        if (value && this._index != null && value[this._index] != null) {
            image = value[this._index];
        }
        const changed = this._value != value || this._index != index || this._image != image;
        if (changed) {
-            if (value && value[this._index] != null) {
+            if (image) {
-                this._image = value[this._index]
+                this._image = image
                this._image.children ||= []
                this._image.tags ||= []
                this._path = comfyFileToAnnotatedFilepath(this._image.comfyUIFile);
                this.filepathWidget.value = this._image.comfyUIFile.filename
                this.folderWidget.value = this._image.comfyUIFile.type
                this.childrenWidget.value = this._image.children.length
                this.tagsWidget.value = this._image.tags.join(", ")
            }
            else {
                this._image = null;
                this._path = null;
                this.filepathWidget.value = "(None)"
                this.folderWidget.value = ""
                this.childrenWidget.value = 0
                this.tagsWidget.value = ""
            }
-            console.log("SET", value, this._image, this._path)
+
            console.log("SET", value, this._image, this._path, this.properties.imageTagFilter)
        }
    }
    override onExecute() {
        const data = this.getInputData(0)
-        const index = this.getInputData(1) || 0
+        let index = this.getInputData(1);
        if (this.properties.imageTagFilter != "" && Array.isArray(data))
            index = data.findIndex(i => i.tags?.includes(this.properties.imageTagFilter))
        else if (index == null)
            index = 0;
        this.setValue(data, index);
        if (this._image == null) {
@@ -71,6 +110,7 @@ export default class ComfyPickImageNode extends ComfyGraphNode {
            this.setOutputData(1, null)
            this.setOutputData(2, 0)
            this.setOutputData(3, 0)
            this.setOutputData(4, null)
            this.widthWidget.value = 0
            this.heightWidget.value = 0
@@ -80,6 +120,7 @@ export default class ComfyPickImageNode extends ComfyGraphNode {
            this.setOutputData(1, this._path);
            this.setOutputData(2, this._image.width);
            this.setOutputData(3, this._image.height);
            this.setOutputData(4, this._image.children);
            // XXX: image size doesn't load until the <img> element is ready on
            // the page so this can come after several frames' worth of
--- a/src/lib/nodes/ComfySwitch.ts
+++ b/src/lib/nodes/ComfySwitch.ts
@@ -0,0 +1,147 @@
 import { nextLetter } from "$lib/utils";
 import { LConnectionKind, LLink, LiteGraph, type INodeInputSlot, type INodeOutputSlot, type SlotLayout } from "@litegraph-ts/core";
 import ComfyGraphNode from "./ComfyGraphNode";
 export default class ComfySwitch extends ComfyGraphNode {
    static slotLayout: SlotLayout = {
        inputs: [
            { name: "A_value", type: "*" },
            { name: "A_cond", type: "boolean" },
        ],
        outputs: [
            { name: "out", type: "*" }
        ],
    }
    override canInheritSlotTypes = true;
    private _selected: number | null = null;
    constructor(title?: string) {
        super(title);
    }
    override getUpstreamLinkForInheritedType(): LLink | null {
        for (let index = 0; index < this.inputs.length / 2; index++) {
            const link = this.getInputLink(index * 2);
            if (link != null)
                return link
        }
        return null;
    }
    override getUpstreamLink(): LLink | null {
        const selected = this.getSelected();
        if (selected == null)
            return null;
        return this.getInputLink(selected * 2);
    }
    getSelected(): number | null {
        for (let i = 0; i < this.inputs.length / 2; i++) {
            if (this.getInputData(i * 2 + 1) == true)
                return i
        }
        return null;
    }
    override onDrawBackground(ctx: CanvasRenderingContext2D) {
        if (this.flags.collapsed || this._selected == null) {
            return;
        }
        ctx.fillStyle = "#AFB";
        var y = this._selected * 2 * LiteGraph.NODE_SLOT_HEIGHT + 6;
        ctx.beginPath();
        ctx.moveTo(30 + 50, y);
        ctx.lineTo(30 + 50, y + LiteGraph.NODE_SLOT_HEIGHT);
        ctx.lineTo(30 + 34, y + LiteGraph.NODE_SLOT_HEIGHT * 0.5);
        ctx.fill();
    };
    override onExecute() {
        this._selected = this.getSelected();
        var sel = this._selected
        if (sel == null || sel.constructor !== Number) {
            this.setOutputData(0, null)
            return
        }
        var v = this.getInputData(sel * 2);
        if (v !== undefined) {
            this.setOutputData(0, v);
        }
    }
    private hasActiveSlots(pairIndex: number): boolean {
        const slotValue = this.inputs[pairIndex * 2]
        const slotCond = this.inputs[pairIndex * 2 + 1];
        return slotValue && slotCond && (slotValue.link != null || slotCond.link != null);
    }
    override onConnectionsChange(
        type: LConnectionKind,
        slotIndex: number,
        isConnected: boolean,
        link: LLink,
        ioSlot: (INodeInputSlot | INodeOutputSlot)
    ) {
        super.onConnectionsChange(type, slotIndex, isConnected, link, ioSlot);
        if (type !== LConnectionKind.INPUT)
            return;
        const lastPairIdx = Math.floor((this.inputs.length / 2) - 1);
        let newlyConnected = false;
        if (isConnected) {
            newlyConnected = this.hasActiveSlots(lastPairIdx)
        }
        let newlyDisconnected = false;
        if (!isConnected) {
            newlyDisconnected = !this.hasActiveSlots(lastPairIdx) && !this.hasActiveSlots(lastPairIdx - 1)
        }
        console.error("CONNCHANGE", lastPairIdx, this.hasActiveSlots(lastPairIdx), isConnected, slotIndex, this.inputs.length, newlyConnected, newlyDisconnected);
        if (newlyConnected) {
            if (link != null) {
                // Add new inputs
                const lastInputName = this.inputs[this.inputs.length - 1].name
                const inputName = nextLetter(lastInputName.split("_")[0]);
                this.addInput(`${inputName}_value`, this.inputs[0].type)
                this.addInput(`${inputName}_cond`, "boolean")
            }
        }
        else if (newlyDisconnected) {
            // Remove empty inputs
            for (let i = this.inputs.length / 2; i > 0; i -= 1) {
                if (i <= 0)
                    break;
                if (!this.hasActiveSlots(i - 1)) {
                    this.removeInput(i * 2)
                    this.removeInput(i * 2)
                }
                else {
                    break;
                }
            }
            let name = "A"
            for (let i = 0; i < this.inputs.length; i += 2) {
                this.inputs[i].name = `${name}_value`;
                this.inputs[i + 1].name = `${name}_cond`
                name = nextLetter(name);
            }
        }
    }
 }
 LiteGraph.registerNodeType({
    class: ComfySwitch,
    title: "Comfy.Switch",
    desc: "Selects an output if its condition is true, if none match returns null",
    type: "utils/switch"
 })
--- a/src/lib/nodes/actions/ComfyExecuteSubgraphAction.ts
+++ b/src/lib/nodes/actions/ComfyExecuteSubgraphAction.ts
@@ -47,7 +47,7 @@ export default class ComfyExecuteSubgraphAction extends ComfyGraphNode {
        // Hold control to queue at the front
        const num = app.ctrlDown ? -1 : 0;
-        app.queuePrompt(num, 1, tag);
+        app.queuePrompt(this.workflow, num, 1, tag);
    }
 }
--- a/src/lib/nodes/actions/ComfyNotifyAction.ts
+++ b/src/lib/nodes/actions/ComfyNotifyAction.ts
@@ -3,17 +3,20 @@ import notify from "$lib/notify";
 import { convertComfyOutputToGradio, type SerializedPromptOutput } from "$lib/utils";
 import { BuiltInSlotType, LiteGraph, type SlotLayout } from "@litegraph-ts/core";
 import ComfyGraphNode, { type ComfyGraphNodeProperties } from "../ComfyGraphNode";
 import configState from "$lib/stores/configState";
 export interface ComfyNotifyActionProperties extends ComfyGraphNodeProperties {
    message: string,
-    type: string
+    type: string,
    alwaysShow: boolean
 }
 export default class ComfyNotifyAction extends ComfyGraphNode {
    override properties: ComfyNotifyActionProperties = {
        tags: [],
        message: "Nya.",
-        type: "info"
+        type: "info",
        alwaysShow: false
    }
    static slotLayout: SlotLayout = {
@@ -24,6 +27,9 @@ export default class ComfyNotifyAction extends ComfyGraphNode {
    }
    override onAction(action: any, param: any) {
        if (!configState.canShowNotificationText() && !this.properties.alwaysShow)
            return;
        const message = this.getInputData(0) || this.properties.message;
        if (!message)
            return;
--- a/src/lib/nodes/actions/ComfyPlaySoundAction.ts
+++ b/src/lib/nodes/actions/ComfyPlaySoundAction.ts
@@ -1,5 +1,7 @@
 import { BuiltInSlotType, LiteGraph, type SlotLayout } from "@litegraph-ts/core";
 import ComfyGraphNode, { type ComfyGraphNodeProperties } from "../ComfyGraphNode";
 import { playSound } from "$lib/utils";
 import configState from "$lib/stores/configState";
 export interface ComfyPlaySoundActionProperties extends ComfyGraphNodeProperties {
    sound: string,
@@ -19,11 +21,12 @@ export default class ComfyPlaySoundAction extends ComfyGraphNode {
    }
    override onAction(action: any, param: any) {
        if (!configState.canPlayNotificationSound())
            return;
        const sound = this.getInputData(0) || this.properties.sound;
        if (sound) {
-            const url = `${location.origin}/sound/${sound}`;
+            playSound(sound)
            const audio = new Audio(url);
            audio.play();
        }
    };
 }
--- 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/ComfySetNodeModeAction.ts
+++ b/src/lib/nodes/actions/ComfySetNodeModeAction.ts
@@ -53,7 +53,7 @@ export default class ComfySetNodeModeAction extends ComfyGraphNode {
        for (const node of this.graph._nodes) {
            if ("tags" in node.properties) {
                const comfyNode = node as ComfyGraphNode;
-                const hasTag = tags.some(t => nodeHasTag(comfyNode, t));
+                const hasTag = tags.some(t => nodeHasTag(comfyNode, t, false));
                if (hasTag) {
                    let newMode: NodeMode;
                    if (enabled) {
--- a/src/lib/nodes/actions/ComfySetNodeModeAdvancedAction.ts
+++ b/src/lib/nodes/actions/ComfySetNodeModeAdvancedAction.ts
@@ -69,7 +69,7 @@ export default class ComfySetNodeModeAdvancedAction extends ComfyGraphNode {
        for (const node of this.graph.iterateNodesInOrderRecursive()) {
            if ("tags" in node.properties) {
                const comfyNode = node as ComfyGraphNode;
-                const hasTag = nodeHasTag(comfyNode, action.tag);
+                const hasTag = nodeHasTag(comfyNode, action.tag, false);
                if (hasTag) {
                    let newMode: NodeMode;
--- a/src/lib/nodes/index.ts
+++ b/src/lib/nodes/index.ts
@@ -2,6 +2,7 @@ export { default as ComfyReroute } from "./ComfyReroute"
 export { default as ComfyPickFirstNode } from "./ComfyPickFirstNode"
 export { default as ComfyValueControl } from "./ComfyValueControl"
 export { default as ComfySelector } from "./ComfySelector"
 export { default as ComfySwitch } from "./ComfySwitch"
 export { default as ComfyTriggerNewEventNode } from "./ComfyTriggerNewEventNode"
 export { default as ComfyConfigureQueuePromptButton } from "./ComfyConfigureQueuePromptButton"
 export { default as ComfyPickImageNode } from "./ComfyPickImageNode"
--- a/src/lib/nodes/widgets/ComfyComboNode.ts
+++ b/src/lib/nodes/widgets/ComfyComboNode.ts
@@ -41,6 +41,7 @@ export default class ComfyComboNode extends ComfyWidgetNode<string> {
    firstLoad: Writable<boolean>;
    lightUp: Writable<boolean>;
    valuesForCombo: Writable<any[]>; // Changed when the combo box has values.
    maxLabelWidthChars: number = 0;
    constructor(name?: string) {
        super(name, "A")
@@ -77,13 +78,17 @@ export default class ComfyComboNode extends ComfyWidgetNode<string> {
        else
            formatter = (value: any) => `${value}`;
        this.maxLabelWidthChars = 0;
        let valuesForCombo = []
        try {
            valuesForCombo = this.properties.values.map((value, index) => {
                const label = formatter(value);
                this.maxLabelWidthChars = Math.max(this.maxLabelWidthChars, label.length)
                return {
                    value,
-                    label: formatter(value),
+                    label,
                    index
                }
            })
@@ -91,9 +96,11 @@ export default class ComfyComboNode extends ComfyWidgetNode<string> {
        catch (err) {
            console.error("Failed formatting!", err)
            valuesForCombo = this.properties.values.map((value, index) => {
                const label = `${value}`
                this.maxLabelWidthChars = Math.max(this.maxLabelWidthChars, label.length)
                return {
                    value,
-                    label: `${value}`,
+                    label,
                    index
                }
            })
--- a/src/lib/nodes/widgets/ComfyGalleryNode.ts
+++ b/src/lib/nodes/widgets/ComfyGalleryNode.ts
@@ -99,6 +99,12 @@ export default class ComfyGalleryNode extends ComfyWidgetNode<ComfyBoxImageMetad
        if (newIndex != null) {
            this.selectedImage.set(newIndex)
            this.forceSelectImage.set(true)
            const image = this.getValue()[newIndex]
            if (image) {
                this.imageWidth.set(image.width || 0)
                this.imageHeight.set(image.height || 0)
            }
        }
    }
--- a/src/lib/nodes/widgets/ComfyImageUploadNode.ts
+++ b/src/lib/nodes/widgets/ComfyImageUploadNode.ts
@@ -6,14 +6,17 @@ import ImageUploadWidget from "$lib/widgets/ImageUploadWidget.svelte";
 import type { ComfyWidgetProperties } from "./ComfyWidgetNode";
 import ComfyWidgetNode from "./ComfyWidgetNode";
 import { get, writable, type Writable } from "svelte/store";
 import { type LineGroup } from "$lib/components/MaskCanvas.svelte"
 export interface ComfyImageUploadNodeProperties extends ComfyWidgetProperties {
    maskCount: number
 }
 export default class ComfyImageUploadNode extends ComfyWidgetNode<ComfyBoxImageMetadata[]> {
    properties: ComfyImageUploadNodeProperties = {
        defaultValue: [],
        tags: [],
        maskCount: 0
    }
    static slotLayout: SlotLayout = {
@@ -39,15 +42,23 @@ export default class ComfyImageUploadNode extends ComfyWidgetNode<ComfyBoxImageM
        super(name, [])
    }
-    override onExecute() {
+    override onExecute(param: any, options: object) {
        // TODO better way of getting image size?
        const value = get(this.value)
        if (value && value.length > 0) {
            value[0].width = get(this.imgWidth)
            value[0].height = get(this.imgHeight)
            // NOTE: assumes masks will have the same image size as the parent image!
            for (const child of value[0].children) {
                child.width = get(this.imgWidth)
                child.height = get(this.imgHeight)
            }
        }
        super.onExecute(param, options);
    }
    override parseValue(value: any): ComfyBoxImageMetadata[] {
        return parseWhateverIntoImageMetadata(value) || [];
    }
--- a/src/lib/nodes/widgets/ComfyMarkdownNode.ts
+++ b/src/lib/nodes/widgets/ComfyMarkdownNode.ts
@@ -0,0 +1,58 @@
 import { BuiltInSlotType, LiteGraph, type ITextWidget, type SlotLayout } from "@litegraph-ts/core";
 import MarkdownWidget from "$lib/widgets/MarkdownWidget.svelte";
 import ComfyWidgetNode, { type ComfyWidgetProperties } from "./ComfyWidgetNode";
 export interface ComfyMarkdownProperties extends ComfyWidgetProperties {
 }
 export default class ComfyMarkdownNode extends ComfyWidgetNode<string> {
    override properties: ComfyMarkdownProperties = {
        tags: [],
        defaultValue: false,
    }
    static slotLayout: SlotLayout = {
        inputs: [
            { name: "store", type: BuiltInSlotType.ACTION }
        ],
        outputs: [
            { name: "value", type: "string" },
            { name: "changed", type: BuiltInSlotType.EVENT },
        ]
    }
    override svelteComponentType = MarkdownWidget;
    override defaultValue = "";
    constructor(name?: string) {
        super(name, "")
    }
    override createDisplayWidget(): ITextWidget {
        const widget = this.addWidget<ITextWidget>(
            "text",
            "Value",
            "",
            (v: string) => {
                if (v == null || v === this.getValue()) {
                    return;
                }
                this.setValue(v);
            },
            {
                multiline: true,
                inputStyle: { fontFamily: "monospace" }
            }
        )
        return widget;
    }
 }
 LiteGraph.registerNodeType({
    class: ComfyMarkdownNode,
    title: "UI.Markdown",
    desc: "Displays Markdown in the UI",
    type: "ui/markdown"
 })
--- a/src/lib/nodes/widgets/ComfyWidgetNode.ts
+++ b/src/lib/nodes/widgets/ComfyWidgetNode.ts
@@ -106,13 +106,18 @@ export default abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
        this.value = writable(value)
        this.color ||= color.color
        this.bgColor ||= color.bgColor
-        this.displayWidget = this.addWidget<ITextWidget>(
+        this.displayWidget = this.createDisplayWidget();
        this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
    }
    protected createDisplayWidget(): ITextWidget {
        const widget = this.addWidget<ITextWidget>(
            "text",
            "Value",
            ""
-        );
+        )
-        this.displayWidget.disabled = true; // prevent editing
+        widget.disabled = true; // prevent editing
-        this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
+        return widget;
    }
    addPropertyAsOutput(propertyName: string, type: string) {
--- a/src/lib/nodes/widgets/index.ts
+++ b/src/lib/nodes/widgets/index.ts
@@ -9,3 +9,4 @@ export { default as ComfyRadioNode } from "./ComfyRadioNode"
 export { default as ComfyNumberNode } from "./ComfyNumberNode"
 export { default as ComfyTextNode } from "./ComfyTextNode"
 export { default as ComfyMultiRegionNode } from "./ComfyMultiRegionNode"
 export { default as ComfyMarkdownNode } from "./ComfyMarkdownNode"
--- a/src/lib/notify.ts
+++ b/src/lib/notify.ts
@@ -2,13 +2,16 @@ import { toast } from "@zerodevx/svelte-toast";
 import type { SvelteToastOptions } from "@zerodevx/svelte-toast/stores";
 import { type Notification } from "framework7/components/notification"
 import { f7 } from "framework7-svelte"
 import OnClickToastItem from "$lib/components/OnClickToastItem.svelte"
 export type NotifyOptions = {
    title?: string,
    type?: "neutral" | "info" | "warning" | "error" | "success",
    imageUrl?: string,
    timeout?: number | null,
-    showOn?: "web" | "native" | "all" | "none"
+    showOn?: "web" | "native" | "all" | "none",
    showBar?: boolean,
    onClick?: () => void,
 }
 function notifyf7(text: string, options: NotifyOptions) {
@@ -19,13 +22,25 @@ function notifyf7(text: string, options: NotifyOptions) {
    if (closeTimeout === undefined)
        closeTimeout = 3000;
    const on: Notification.Parameters["on"] = {}
    if (options.onClick) {
        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',
        // subtitle: 'Notification with close on click',
        text: text,
        closeOnClick: true,
-        closeTimeout
+        closeTimeout,
        on,
        icon
    });
    notification.open();
 }
@@ -33,31 +48,48 @@ function notifyf7(text: string, options: NotifyOptions) {
 function notifyToast(text: string, options: NotifyOptions) {
    const toastOptions: SvelteToastOptions = {
        dismissable: options.timeout !== null,
        duration: options.timeout || 5000,
        theme: {},
    }
    if (options.showBar) {
        toastOptions.theme['--toastBarHeight'] = "6px"
    }
    if (options.type === "success") {
-        toastOptions.theme = {
+        toastOptions.theme['--toastBackground'] = 'var(--color-green-600)';
-            '--toastBackground': 'var(--color-green-600)',
+        toastOptions.theme['--toastBarBackground'] = 'var(--color-green-900)';
        }
    }
    else if (options.type === "info") {
-        toastOptions.theme = {
+        toastOptions.theme['--toastBackground'] = 'var(--color-blue-500)';
-            '--toastBackground': 'var(--color-blue-500)',
+        toastOptions.theme['--toastBarBackground'] = 'var(--color-blue-800)';
        }
    }
    else if (options.type === "warning") {
-        toastOptions.theme = {
+        toastOptions.theme['--toastBackground'] = 'var(--color-yellow-600)';
-            '--toastBackground': 'var(--color-yellow-600)',
+        toastOptions.theme['--toastBarBackground'] = 'var(--color-yellow-900)';
        }
    }
    else if (options.type === "error") {
-        toastOptions.theme = {
+        toastOptions.theme['--toastBackground'] = 'var(--color-red-500)';
-            '--toastBackground': 'var(--color-red-500)',
+        toastOptions.theme['--toastBarBackground'] = 'var(--color-red-800)';
        }
    }
    if (options.onClick) {
        toast.push({
            component: {
                src: OnClickToastItem,
                props: {
                    message: text,
                    notifyOptions: options
                },
                sendIdTo: "toastID"
            },
            ...toastOptions
        })
    }
    else {
        toast.push(text, toastOptions);
    }
 }
 function notifyNative(text: string, options: NotifyOptions) {
    if (document.hasFocus())
@@ -78,7 +110,11 @@ function notifyNative(text: string, options: NotifyOptions) {
    const notification = new Notification(title, nativeOptions);
-    notification.onclick = () => window.focus();
+    notification.onclick = () => {
        window.focus();
        if (options.onClick)
            options.onClick();
    }
 }
 export default function notify(text: string, options: NotifyOptions = {}) {
--- a/src/lib/stores/configDefs.ts
+++ b/src/lib/stores/configDefs.ts
@@ -0,0 +1,236 @@
 import { LinkRenderMode } from "@litegraph-ts/core";
 /*
 * Supported config option types.
 */
 type ConfigDefType = "boolean" | "number" | "string" | "string[]" | "enum";
 // A simple parameter description interface
 export interface ConfigDef<IdType extends string, TypeType extends ConfigDefType, ValueType, OptionsType = any> {
    // This generic `IdType` is what makes the "array of keys and values to new
    // interface definition" thing work
    name: IdType;
    type: TypeType,
    description?: string,
    category: string,
    defaultValue: ValueType,
    options: OptionsType,
 }
 export type ConfigDefAny = ConfigDef<string, any, any>
 export type ConfigDefBoolean<IdType extends string> = ConfigDef<IdType, "boolean", boolean>;
 export type NumberOptions = {
    min?: number,
    max?: number,
    step: number
 }
 export type ConfigDefNumber<IdType extends string> = ConfigDef<IdType, "number", number, NumberOptions>;
 export type ConfigDefString<IdType extends string> = ConfigDef<IdType, "string", string>;
 export type ConfigDefStringArray<IdType extends string> = ConfigDef<IdType, "string[]", string[]>;
 export interface EnumValue<T> {
    label: string,
    value: T
 }
 export interface EnumOptions<T> {
    values: EnumValue<T>[]
 }
 export type ConfigDefEnum<IdType extends string, T> = ConfigDef<IdType, "enum", T, EnumOptions<T>>;
 export function validateConfigOption(def: ConfigDefAny, v: any): boolean {
    switch (def.type) {
        case "boolean":
            return typeof v === "boolean";
        case "number":
            return typeof v === "number";
        case "string":
            return typeof v === "string";
        case "string[]":
            return Array.isArray(v) && v.every(vs => typeof vs === "string");
        case "enum":
            return Boolean(def.options.values.find((o: EnumValue<any>) => o.value === v));
    }
    return false;
 }
 // Configuration parameters ------------------------------------
 const defComfyUIHostname: ConfigDefString<"comfyUIHostname"> = {
    name: "comfyUIHostname",
    type: "string",
    defaultValue: "localhost",
    category: "backend",
    description: "Backend domain for ComfyUI",
    options: {}
 };
 const defComfyUIPort: ConfigDefNumber<"comfyUIPort"> = {
    name: "comfyUIPort",
    type: "number",
    defaultValue: 8188,
    category: "backend",
    description: "Backend port for ComfyUI",
    options: {
        min: 1,
        max: 65535,
        step: 1
    }
 };
 export enum NotificationState {
    MessageAndSound,
    MessageOnly,
    SoundOnly,
    None
 }
 const defNotifications: ConfigDefEnum<"notifications", NotificationState> = {
    name: "notifications",
    type: "enum",
    defaultValue: NotificationState.MessageAndSound,
    category: "ui",
    description: "Controls how notifications are shown",
    options: {
        values: [
            {
                value: NotificationState.MessageAndSound,
                label: "Message & sound"
            },
            {
                value: NotificationState.MessageOnly,
                label: "Message only"
            },
            {
                value: NotificationState.SoundOnly,
                label: "Sound only"
            },
            {
                value: NotificationState.None,
                label: "None"
            },
        ]
    }
 };
 const defAlwaysStripUserState: ConfigDefBoolean<"alwaysStripUserState"> = {
    name: "alwaysStripUserState",
    type: "boolean",
    defaultValue: false,
    category: "behavior",
    description: "Strip user state even if saving to local storage",
    options: {}
 };
 const defPromptForWorkflowName: ConfigDefBoolean<"promptForWorkflowName"> = {
    name: "promptForWorkflowName",
    type: "boolean",
    defaultValue: false,
    category: "behavior",
    description: "When saving, always prompt for a name to save the workflow as",
    options: {}
 };
 const defConfirmWhenUnloadingUnsavedChanges: ConfigDefBoolean<"confirmWhenUnloadingUnsavedChanges"> = {
    name: "confirmWhenUnloadingUnsavedChanges",
    type: "boolean",
    defaultValue: true,
    category: "behavior",
    description: "When closing the tab, open the confirmation window if there's unsaved changes",
    options: {}
 };
 const defCacheBuiltInResources: ConfigDefBoolean<"cacheBuiltInResources"> = {
    name: "cacheBuiltInResources",
    type: "boolean",
    defaultValue: true,
    category: "behavior",
    description: "Cache loading of built-in resources to save network use",
    options: {}
 };
 const defBuiltInTemplates: ConfigDefStringArray<"builtInTemplates"> = {
    name: "builtInTemplates",
    type: "string[]",
    defaultValue: ["ControlNet", "LoRA x5", "Model Loader", "Positive_Negative", "Seed Randomizer"],
    category: "templates",
    description: "Basenames of templates that can be loaded from public/templates. Saves LocalStorage space.",
    options: {}
 };
 // const defLinkDisplayType: ConfigDefEnum<"linkDisplayType", LinkRenderMode> = {
 //     name: "linkDisplayType",
 //     type: "enum",
 //     defaultValue: LinkRenderMode.SPLINE_LINK,
 //     category: "graph",
 //     description: "How to display links in the graph",
 //     options: {
 //         values: [
 //             {
 //                 value: LinkRenderMode.STRAIGHT_LINK,
 //                 label: "Straight"
 //             },
 //             {
 //                 value: LinkRenderMode.LINEAR_LINK,
 //                 label: "Linear"
 //             },
 //             {
 //                 value: LinkRenderMode.SPLINE_LINK,
 //                 label: "Spline"
 //             }
 //         ]
 //     },
 // };
 // Configuration exports ------------------------------------
 export const CONFIG_DEFS = [
    defComfyUIHostname,
    defComfyUIPort,
    defNotifications,
    defAlwaysStripUserState,
    defPromptForWorkflowName,
    defConfirmWhenUnloadingUnsavedChanges,
    defCacheBuiltInResources,
    defBuiltInTemplates,
    // defLinkDisplayType
 ] as const;
 export const CONFIG_DEFS_BY_NAME: Record<string, ConfigDefAny>
    = CONFIG_DEFS.reduce((dict, def) => {
        if (def.name in dict)
            throw new Error(`Duplicate named config definition: ${def.name}`)
        dict[def.name] = def;
        return dict
    }, {})
 export const CONFIG_DEFS_BY_CATEGORY: Record<string, ConfigDefAny[]>
    = CONFIG_DEFS.reduce((dict, def) => {
        dict[def.category] ||= []
        dict[def.category].push(def)
        return dict
    }, {})
 export const CONFIG_CATEGORIES: string[]
    = CONFIG_DEFS.reduce((arr, def) => {
        if (!arr.includes(def.category))
            arr.push(def.category)
        return arr
    }, [])
 type Config<T extends ReadonlyArray<Readonly<ConfigDef<string, ConfigDefType, any>>>> = {
    [K in T[number]["name"]]: Extract<T[number], { name: K }>["defaultValue"]
 } extends infer O
    ? { [P in keyof O]: O[P] }
    : never;
 export type ConfigState = Config<typeof CONFIG_DEFS>
 const pairs: [string, any][] = CONFIG_DEFS.map(item => { return [item.name, structuredClone(item.defaultValue)] })
 export const defaultConfig: ConfigState = pairs.reduce((dict, v) => { dict[v[0]] = v[1]; return dict; }, {}) as any;
--- a/src/lib/stores/configState.ts
+++ b/src/lib/stores/configState.ts
@@ -1,54 +1,143 @@
 import { debounce } from '$lib/utils';
 import { toHashMap } from '@litegraph-ts/core';
 import { get, writable } from 'svelte/store';
 import type { Writable } from 'svelte/store';
-
+import { defaultConfig, type ConfigState, type ConfigDefAny, CONFIG_DEFS_BY_NAME, validateConfigOption, NotificationState } from './configDefs';
 export type ConfigState = {
    /** Backend domain for ComfyUI */
    comfyUIHostname: string,
    /** Backend port for ComfyUI */
    comfyUIPort: number,
    /** Strip user state even if saving to local storage */
    alwaysStripUserState: boolean,
    /** When saving, always prompt for a name to save the workflow as */
    promptForWorkflowName: boolean,
    /** When closing the tab, open the confirmation window if there's unsaved changes */
    confirmWhenUnloadingUnsavedChanges: boolean,
    /** Basenames of templates that can be loaded from public/templates. Saves LocalStorage space. */
    builtInTemplates: string[],
    /** Cache loading of built-in resources to save network use */
    cacheBuiltInResources: boolean
 }
 type ConfigStateOps = {
-    getBackendURL: () => string
+    getBackendURL: () => string,
    canShowNotificationText: () => boolean,
    canPlayNotificationSound: () => boolean,
    load: (data: any, runOnChanged?: boolean) => ConfigState
    loadDefault: (runOnChanged?: boolean) => ConfigState
    setConfigOption: (def: ConfigDefAny, v: any, runOnChanged: boolean) => boolean
    validateConfigOption: (def: ConfigDefAny, v: any) => boolean
    onChange: <K extends keyof ConfigState>(optionName: K, callback: ConfigOnChangeCallback<ConfigState[K]>) => void
    runOnChangedEvents: () => void,
 }
 export type WritableConfigStateStore = Writable<ConfigState> & ConfigStateOps;
-const store: Writable<ConfigState> = writable(
+const store: Writable<ConfigState> = writable({ ...defaultConfig })
-    {
+const callbacks: Record<string, ConfigOnChangeCallback<any>[]> = {}
-        comfyUIHostname: "localhost",
+let changedOptions: Partial<Record<keyof ConfigState, [any, any]>> = {}
        comfyUIPort: 8188,
        alwaysStripUserState: false,
        promptForWorkflowName: false,
        confirmWhenUnloadingUnsavedChanges: true,
        builtInTemplates: [],
        cacheBuiltInResources: true,
    })
 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 {
    const state = get(store).notifications;
    return state === NotificationState.MessageAndSound || state === NotificationState.MessageOnly;
 }
 function canPlayNotificationSound(): boolean {
    const state = get(store).notifications;
    return state === NotificationState.MessageAndSound || state === NotificationState.SoundOnly;
 }
 function setConfigOption(def: ConfigDefAny, v: any, runOnChanged: boolean): boolean {
    let valid = false;
    store.update(state => {
        const oldValue = state[def.name]
        valid = validateConfigOption(def, v);
        if (!valid) {
            console.warn(`[configState] Invalid value for option ${def.name} (${v}), setting to default (${def.defaultValue})`);
            state[def.name] = structuredClone(def.defaultValue);
        }
        else {
            state[def.name] = v
        }
        const changed = oldValue != state[def.name];
        if (changed) {
            if (runOnChanged) {
                if (callbacks[def.name]) {
                    for (const callback of callbacks[def.name]) {
                        callback(state[def.name], oldValue)
                    }
                }
            }
            else {
                if (changedOptions[def.name] == null) {
                    changedOptions[def.name] = [oldValue, state[def.name]];
                }
                else {
                    changedOptions[def.name][1] = state[def.name]
                }
            }
        }
        return state;
    })
    return valid;
 }
 function load(data: any, runOnChanged: boolean = false): ConfigState {
    changedOptions = {}
    store.set({ ...defaultConfig })
    if (data != null && typeof data === "object") {
        for (const [k, v] of Object.entries(data)) {
            const def = CONFIG_DEFS_BY_NAME[k]
            if (def == null) {
                delete data[k]
                continue;
            }
            setConfigOption(def, v, runOnChanged);
        }
    }
    return get(store);
 }
 function loadDefault(runOnChanged: boolean = false) {
    return load(null, runOnChanged);
 }
 export type ConfigOnChangeCallback<V> = (value: V, oldValue?: V) => void;
 function onChange<K extends keyof ConfigState>(optionName: K, callback: ConfigOnChangeCallback<ConfigState[K]>) {
    callbacks[optionName] ||= []
    callbacks[optionName].push(callback)
 }
 function runOnChangedEvents() {
    console.debug("Running changed events for config...")
    for (const [optionName, [oldValue, newValue]] of Object.entries(changedOptions)) {
        const def = CONFIG_DEFS_BY_NAME[optionName]
        if (callbacks[optionName]) {
            console.debug("Running callback!", optionName, oldValue, newValue)
            for (const callback of callbacks[def.name]) {
                callback(newValue, oldValue)
            }
        }
    }
    changedOptions = {}
 }
 const configStateStore: WritableConfigStateStore =
 {
    ...store,
-    getBackendURL
+    getBackendURL,
    canShowNotificationText,
    canPlayNotificationSound,
    validateConfigOption,
    setConfigOption,
    load,
    loadDefault,
    onChange,
    runOnChangedEvents
 }
 export default configStateStore;
--- 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,11 +16,20 @@ export type InterfaceState = {
    showIndicator: boolean,
    indicatorValue: any,
-    graphTransitioning: boolean
+    graphTransitioning: boolean,
    isJumpingToNode: boolean,
    selectedWorkflowIndex: number | null
    showingWorkflow: boolean,
    selectedTab: number,
    showSheet: boolean,
    isDarkMode: boolean
 }
 type InterfaceStateOps = {
    showIndicator: (pointerX: number, pointerY: number, value: any) => void,
    querySendOutput: (value: any, type: SlotType, receiveTargets: WorkflowReceiveOutputTargets[], cb: (modal: ModalData) => void) => void,
 }
 export type WritableInterfaceStateStore = Writable<InterfaceState> & InterfaceStateOps;
@@ -25,7 +40,15 @@ const store: Writable<InterfaceState> = writable(
        showIndicator: false,
        indicatorValue: null,
-        graphTransitioning: false
+        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)
@@ -44,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
@@ -616,6 +616,19 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                defaultValue: true
            },
            // ImageUpload
            {
                name: "maskCount",
                type: "number",
                location: "nodeProps",
                editable: true,
                validNodeTypes: ["ui/image_upload"],
                defaultValue: 0,
                min: 0,
                max: 8,
                step: 1
            },
            // Radio
            {
                name: "defaultValue",
@@ -667,10 +680,17 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                location: "workflow",
                editable: true,
                defaultValue: true
            },
            {
                name: "showDefaultNotifications",
                type: "boolean",
                location: "workflow",
                editable: true,
                defaultValue: true
            }
        ]
    }
-];
+] as const;
 // This is needed so the specs can be iterated with svelte's keyed #each.
 let i = 0;
@@ -792,8 +812,8 @@ type LayoutStateOps = {
    moveItem: (target: IDragItem, to: ContainerLayout, index?: number) => void,
    groupItems: (dragItemIDs: DragItemID[], attrs?: Partial<Attributes>) => ContainerLayout,
    ungroup: (container: ContainerLayout) => void,
-    findLayoutEntryForNode: (nodeId: ComfyNodeID) => DragItemEntry | null,
+    findLayoutEntryForNode: (nodeId: NodeID) => DragItemEntry | null,
-    findLayoutForNode: (nodeId: ComfyNodeID) => IDragItem | null,
+    findLayoutForNode: (nodeId: NodeID) => IDragItem | null,
    iterateBreadthFirst: (id?: DragItemID | null) => Iterable<DragItemEntry>,
    serialize: () => SerializedLayoutState,
    serializeAtRoot: (rootID: DragItemID) => SerializedLayoutState,
@@ -1196,7 +1216,7 @@ function createRaw(workflow: ComfyBoxWorkflow | null = null): WritableLayoutStat
        store.set(state)
    }
-    function findLayoutEntryForNode(nodeId: ComfyNodeID): DragItemEntry | null {
+    function findLayoutEntryForNode(nodeId: NodeID): DragItemEntry | null {
        const state = get(store)
        const found = Object.entries(state.allItems).find(pair =>
            pair[1].dragItem.type === "widget"
@@ -1206,7 +1226,7 @@ function createRaw(workflow: ComfyBoxWorkflow | null = null): WritableLayoutStat
        return null;
    }
-    function findLayoutForNode(nodeId: ComfyNodeID): WidgetLayout | null {
+    function findLayoutForNode(nodeId: NodeID): WidgetLayout | null {
        const found = findLayoutEntryForNode(nodeId);
        if (!found)
            return null;
@@ -1491,16 +1511,12 @@ function getLayoutByDragItemID(dragItemID: DragItemID): WritableLayoutStateStore
    return Object.values(get(layoutStates).all).find(l => get(l).allItems[dragItemID] != null)
 }
-function getDragItemByNode(node: LGraphNode): WidgetLayout | null {
+function getDragItemByNode(node: LGraphNode): IDragItem | null {
    const layout = getLayoutByNode(node);
    if (layout == null)
        return null;
-    const entry = get(layout).allItemsByNode[node.id]
+    return layout.findLayoutForNode(node.id);
    if (entry && entry.dragItem.type === "widget")
        return entry.dragItem as WidgetLayout;
    return null;
 }
 export type LayoutStateStores = {
@@ -1523,7 +1539,7 @@ export type LayoutStateStoresOps = {
    getLayoutByGraph: (graph: LGraph) => WritableLayoutStateStore | null,
    getLayoutByNode: (node: LGraphNode) => WritableLayoutStateStore | null,
    getLayoutByDragItemID: (dragItemID: DragItemID) => WritableLayoutStateStore | null,
-    getDragItemByNode: (node: LGraphNode) => WidgetLayout | null,
+    getDragItemByNode: (node: LGraphNode) => IDragItem | null,
 }
 export type WritableLayoutStateStores = Writable<LayoutStateStores> & LayoutStateStoresOps;
--- a/src/lib/stores/queueState.ts
+++ b/src/lib/stores/queueState.ts
@@ -1,10 +1,16 @@
-import type { ComfyAPIHistoryEntry, ComfyAPIHistoryItem, ComfyAPIHistoryResponse, ComfyAPIQueueResponse, ComfyAPIStatusResponse, ComfyBoxPromptExtraData, ComfyNodeID, PromptID, QueueItemType } from "$lib/api";
+import type { ComfyAPIHistoryEntry, ComfyAPIHistoryItem, ComfyAPIHistoryResponse, ComfyAPIQueueResponse, ComfyAPIStatusResponse, ComfyBoxPromptExtraData, ComfyExecutionError, ComfyNodeID, PromptID, QueueItemType } from "$lib/api";
-import type { Progress, SerializedPromptInputsAll, SerializedPromptOutputs, WorkflowInstID } from "$lib/components/ComfyApp";
+import type { ComfyAPIPromptErrorResponse } from "$lib/apiErrors";
 import type { Progress, SerializedPrompt, SerializedPromptInputsAll, SerializedPromptOutputs, } from "$lib/components/ComfyApp";
 import type { ComfyExecutionResult } from "$lib/nodes/ComfyWidgetNodes";
 import notify from "$lib/notify";
 import { playSound } from "$lib/utils";
 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";
-export type QueueEntryStatus = "success" | "error" | "interrupted" | "all_cached" | "unknown";
+export type QueueEntryStatus = "success" | "validation_failed" | "error" | "interrupted" | "all_cached" | "unknown";
 type QueueStateOps = {
    queueUpdated: (resp: ComfyAPIQueueResponse) => void,
@@ -13,13 +19,14 @@ type QueueStateOps = {
    executionStart: (promptID: PromptID) => void,
    executingUpdated: (promptID: PromptID | null, runningNodeID: ComfyNodeID | null) => QueueEntry | null;
    executionCached: (promptID: PromptID, nodes: ComfyNodeID[]) => void,
-    executionError: (promptID: PromptID, message: string) => void,
+    executionError: (error: ComfyExecutionError) => CompletedQueueEntry | null,
    progressUpdated: (progress: Progress) => void
    getQueueEntry: (promptID: PromptID) => QueueEntry | null;
    afterQueued: (workflowID: WorkflowInstID, promptID: PromptID, number: number, prompt: SerializedPromptInputsAll, extraData: any) => void
    queueItemDeleted: (type: QueueItemType, id: PromptID) => void;
    queueCleared: (type: QueueItemType) => void;
    onExecuted: (promptID: PromptID, nodeID: ComfyNodeID, output: ComfyExecutionResult) => QueueEntry | null
    promptError: (id: WorkflowInstID, error: ComfyAPIPromptErrorResponse, prompt: SerializedPrompt, extraData: ComfyBoxPromptExtraData) => PromptID
 }
 /*
@@ -32,6 +39,10 @@ export type QueueEntry = {
    number: number,
    queuedAt?: Date,
    finishedAt?: Date,
    /*
     * Can also be generated by the frontend if prompt validation fails
     * (the backend won't send back a prompt ID in that case)
     */
    promptID: PromptID,
    prompt: SerializedPromptInputsAll,
    extraData: ComfyBoxPromptExtraData,
@@ -44,7 +55,7 @@ export type QueueEntry = {
    /* Nodes of the workflow that have finished running so far. */
    nodesRan: Set<ComfyNodeID>,
    /* Nodes of the workflow the backend reported as cached. */
-    cachedNodes: Set<ComfyNodeID>
+    cachedNodes: Set<ComfyNodeID>,
 }
 /*
@@ -59,7 +70,7 @@ export type CompletedQueueEntry = {
    /** Message to display in the frontend */
    message?: string,
    /** Detailed error/stacktrace, perhaps inspectible with a popup */
-    error?: string,
+    error?: WorkflowError
 }
 /*
@@ -227,21 +238,32 @@ function moveToRunning(index: number, queue: Writable<QueueEntry[]>) {
    store.set(state)
 }
-function moveToCompleted(index: number, queue: Writable<QueueEntry[]>, status: QueueEntryStatus, message?: string, error?: string) {
+function moveToCompleted(index: number, queue: Writable<QueueEntry[]>, status: QueueEntryStatus, message?: string, error?: ComfyExecutionError): CompletedQueueEntry {
    const state = get(store)
    const entry = get(queue)[index];
    let workflowError: WorkflowExecutionError | null = null;
    if (error) {
        workflowError = {
            type: "execution",
            error
        }
        entry.nodesRan = new Set(error.executed);
    }
    console.debug("[queueState] Move to completed", entry.promptID, index, status, message, error)
    entry.finishedAt = new Date() // Now
    queue.update(qp => { qp.splice(index, 1); return qp });
    const completed: CompletedQueueEntry = { entry, status, message, error: workflowError }
    state.queueCompleted.update(qc => {
        const completed: CompletedQueueEntry = { entry, status, message, error }
        qc.push(completed)
        return qc
    })
    state.isInterrupting = false;
    store.set(state)
    return completed;
 }
 function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null): QueueEntry | null {
@@ -263,10 +285,19 @@ function executingUpdated(promptID: PromptID, runningNodeID: ComfyNodeID | null)
            if (entry != null) {
                const totalNodesInPrompt = Object.keys(entry.prompt).length
                if (entry.cachedNodes.size >= Object.keys(entry.prompt).length) {
-                    notify("Prompt was cached, nothing to run.", { type: "warning" })
+                    notify("Prompt was cached, nothing to run.", { type: "warning", showOn: "web" })
                    moveToCompleted(index, queue, "all_cached", "(Execution was cached)");
                }
                else if (entry.nodesRan.size >= totalNodesInPrompt) {
                    const workflow = workflowState.getWorkflow(entry.extraData.workflowID);
                    if (workflow?.attrs.showDefaultNotifications) {
                        if (configState.canShowNotificationText()) {
                            notify("Prompt finished!", { type: "success" });
                        }
                        if (configState.canPlayNotificationSound()) {
                            playSound("notification.mp3")
                        }
                    }
                    moveToCompleted(index, queue, "success")
                }
                else {
@@ -307,20 +338,22 @@ function executionCached(promptID: PromptID, nodes: ComfyNodeID[]) {
    })
 }
-function executionError(promptID: PromptID, message: string) {
+function executionError(error: ComfyExecutionError): CompletedQueueEntry | null {
-    console.debug("[queueState] executionError", promptID, message)
+    console.debug("[queueState] executionError", error)
    let entry_ = null;
    store.update(s => {
-        const [index, entry, queue] = findEntryInPending(promptID);
+        const [index, entry, queue] = findEntryInPending(error.prompt_id);
        if (entry != null) {
-            moveToCompleted(index, queue, "error", "Error executing", message)
+            entry_ = moveToCompleted(index, queue, "error", "Error executing", error)
        }
        else {
-            console.error("[queueState] Could not find in pending! (executionError)", promptID)
+            console.error("[queueState] Could not find in pending! (executionError)", error.prompt_id)
        }
        s.progress = null;
        s.runningNodeID = null;
        return s
    })
    return entry_;
 }
 function createNewQueueEntry(promptID: PromptID, number: number = -1, prompt: SerializedPromptInputsAll = {}, extraData: any = {}): QueueEntry {
@@ -412,7 +445,6 @@ function queueCleared(type: QueueItemType) {
    store.update(s => {
        if (type === "queue") {
            s.queuePending.set([]);
            s.queueRunning.set([]);
            s.queueRemaining = 0;
            s.runningNodeID = null;
            s.progress = null;
@@ -425,6 +457,43 @@ function queueCleared(type: QueueItemType) {
    })
 }
 function promptError(workflowID: WorkflowInstID, error: ComfyAPIPromptErrorResponse, prompt: SerializedPrompt, extraData: ComfyBoxPromptExtraData): PromptID {
    const workflowError: WorkflowValidationError = {
        type: "validation",
        workflowID,
        error,
        prompt,
        extraData
    }
    const entry: QueueEntry = {
        number: 0,
        queuedAt: new Date(), // Now
        finishedAt: new Date(),
        promptID: uuidv4(), // Just for keeping track
        prompt: prompt.output,
        extraData,
        goodOutputs: [],
        outputs: {},
        nodesRan: new Set(),
        cachedNodes: new Set(),
    }
    const completedEntry: CompletedQueueEntry = {
        entry,
        status: "validation_failed",
        message: "Validation failed",
        error: workflowError
    }
    store.update(s => {
        s.queueCompleted.update(qc => { qc.push(completedEntry); return qc })
        return s;
    })
    return entry.promptID;
 }
 const queueStateStore: WritableQueueStateStore =
 {
    ...store,
@@ -440,6 +509,7 @@ const queueStateStore: WritableQueueStateStore =
    queueItemDeleted,
    queueCleared,
    getQueueEntry,
-    onExecuted
+    onExecuted,
    promptError,
 }
 export default queueStateStore;
--- a/src/lib/stores/uiQueueState.ts
+++ b/src/lib/stores/uiQueueState.ts
@@ -0,0 +1,207 @@
 import type { PromptID, QueueItemType } from '$lib/api';
 import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
 import queueState, { type CompletedQueueEntry, type QueueEntry } from './queueState';
 import type { WorkflowError } from './workflowState';
 import { convertComfyOutputToComfyURL } from '$lib/utils';
 export type QueueUIEntryStatus = QueueEntryStatus | "pending" | "running";
 export type QueueUIEntry = {
    entry: QueueEntry,
    message: string,
    submessage: string,
    date?: string,
    status: QueueUIEntryStatus,
    images?: string[], // URLs
    details?: string, // shown in a tooltip on hover
    error?: WorkflowError
 }
 export type UIQueueState = {
    mode: QueueItemType,
    queuedEntries: QueueUIEntry[],
    runningEntries: QueueUIEntry[],
    queueUIEntries: QueueUIEntry[],
    historyUIEntries: QueueUIEntry[],
 }
 type UIQueueStateOps = {
    updateEntries: (force?: boolean) => void
    clearAll: () => void
    clearQueue: () => void
    clearHistory: () => void
 }
 export type WritableUIQueueStateStore = Writable<UIQueueState> & UIQueueStateOps;
 const store: Writable<UIQueueState> = writable(
    {
        mode: "queue",
        queuedEntries: [],
        runningEntries: [],
        completedEntries: [],
        queueUIEntries: [],
        historyUIEntries: [],
    })
 function formatDate(date: Date): string {
    const time = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
    const day = date.toLocaleString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }).replace(',', '');
    return [time, day].join(", ")
 }
 function convertEntry(entry: QueueEntry, status: QueueUIEntryStatus): QueueUIEntry {
    let date = entry.finishedAt || entry.queuedAt;
    let dateStr = null;
    if (date) {
        dateStr = formatDate(date);
    }
    const subgraphs: string[] | null = entry.extraData?.extra_pnginfo?.comfyBoxPrompt?.subgraphs;
    let message = "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;
 }
 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.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
@@ -1,3 +1,4 @@
 import type { PromptID } from '$lib/api';
 import { writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
@@ -11,7 +12,9 @@ export type UIState = {
    uiEditMode: UIEditMode,
    reconnecting: boolean,
-    forceSaveUserState: boolean | null
+    forceSaveUserState: boolean | null,
    activeError: PromptID | null
 }
 type UIStateOps = {
@@ -30,6 +33,8 @@ const store: Writable<UIState> = writable(
        reconnecting: false,
        forceSaveUserState: null,
        activeError: null
    })
 function reconnecting() {
--- a/src/lib/stores/workflowState.ts
+++ b/src/lib/stores/workflowState.ts
@@ -8,8 +8,10 @@ import layoutStates from './layoutStates';
 import { v4 as uuidv4 } from "uuid";
 import type ComfyGraphCanvas from '$lib/ComfyGraphCanvas';
 import { blankGraph } from '$lib/defaultGraph';
-import type { SerializedAppState } from '$lib/components/ComfyApp';
+import type { SerializedAppState, SerializedPrompt } from '$lib/components/ComfyApp';
 import type ComfyReceiveOutputNode from '$lib/nodes/actions/ComfyReceiveOutputNode';
 import type { ComfyBoxPromptExtraData, PromptID } from '$lib/api';
 import type { ComfyAPIPromptErrorResponse, ComfyExecutionError } from '$lib/apiErrors';
 type ActiveCanvas = {
    canvas: LGraphCanvas | null;
@@ -54,8 +56,30 @@ export type WorkflowAttributes = {
     * Comfy.QueueEvents node.
     */
    queuePromptButtonRunWorkflow: boolean,
    /*
     * If true, notifications will be shown when a prompt is queued and
     * completed. Set to false if you need more detailed control over the
     * notification type/contents, and use the `ComfyNotifyAction` node instead.
     */
    showDefaultNotifications: boolean,
 }
 export type WorkflowValidationError = {
    type: "validation"
    workflowID: WorkflowInstID,
    error: ComfyAPIPromptErrorResponse,
    prompt: SerializedPrompt,
    extraData: ComfyBoxPromptExtraData
 }
 export type WorkflowExecutionError = {
    type: "execution"
    error: ComfyExecutionError,
 }
 export type WorkflowError = WorkflowValidationError | WorkflowExecutionError;
 export class ComfyBoxWorkflow {
    /*
     * Used for uniquely identifying the instance of the opened workflow in the frontend.
@@ -82,6 +106,11 @@ export class ComfyBoxWorkflow {
     */
    missingNodeTypes: Set<string> = new Set();
    /*
     * Completed queue entry ID that holds the last validation/execution error.
     */
    lastError?: PromptID
    get layout(): WritableLayoutStateStore | null {
        return layoutStates.getLayout(this.id)
    }
@@ -217,7 +246,7 @@ export class ComfyBoxWorkflow {
            // this.#invokeExtensions("loadedGraphNode", node);
        }
-        this.attrs = data.attrs;
+        this.attrs = { ...defaultWorkflowAttributes, ...data.attrs };
        // Now restore the layout
        // Subsequent added nodes will add the UI data to layoutState
@@ -250,7 +279,10 @@ type WorkflowStateOps = {
    closeWorkflow: (canvas: ComfyGraphCanvas, index: number) => void,
    closeAllWorkflows: (canvas: ComfyGraphCanvas) => void,
    setActiveWorkflow: (canvas: ComfyGraphCanvas, index: number | WorkflowInstID) => ComfyBoxWorkflow | null,
-    findReceiveOutputTargets: (type: SlotType | SlotType[]) => WorkflowReceiveOutputTargets[]
+    findReceiveOutputTargets: (type: SlotType | SlotType[]) => WorkflowReceiveOutputTargets[],
    afterQueued: (id: WorkflowInstID, promptID: PromptID) => void
    promptError: (id: WorkflowInstID, promptID: PromptID) => void
    executionError: (id: WorkflowInstID, promptID: PromptID) => void
 }
 export type WritableWorkflowStateStore = Writable<WorkflowState> & WorkflowStateOps;
@@ -372,7 +404,7 @@ function setActiveWorkflow(canvas: ComfyGraphCanvas, index: number | WorkflowIns
    const workflow = state.openedWorkflows[index]
    if (workflow.id === state.activeWorkflowID)
-        return;
+        return state.activeWorkflow;
    if (state.activeWorkflow != null)
        state.activeWorkflow.stop("app")
@@ -413,6 +445,36 @@ function findReceiveOutputTargets(type: SlotType | SlotType[]): WorkflowReceiveO
    return result;
 }
 function afterQueued(id: WorkflowInstID, promptID: PromptID) {
    const workflow = getWorkflow(id);
    if (workflow == null) {
        console.warn("[workflowState] afterQueued: workflow not found", id, promptID)
        return
    }
    workflow.lastError = null;
 }
 function promptError(id: WorkflowInstID, promptID: PromptID) {
    const workflow = getWorkflow(id);
    if (workflow == null) {
        console.warn("[workflowState] promptError: workflow not found", id, promptID)
        return
    }
    workflow.lastError = promptID;
 }
 function executionError(id: WorkflowInstID, promptID: PromptID) {
    const workflow = getWorkflow(id);
    if (workflow == null) {
        console.warn("[workflowState] executionError: workflow not found", id, promptID)
        return
    }
    workflow.lastError = promptID;
 }
 const workflowStateStore: WritableWorkflowStateStore =
 {
    ...store,
@@ -427,6 +489,9 @@ const workflowStateStore: WritableWorkflowStateStore =
    closeWorkflow,
    closeAllWorkflows,
    setActiveWorkflow,
-    findReceiveOutputTargets
+    findReceiveOutputTargets,
    afterQueued,
    promptError,
    executionError,
 }
 export default workflowStateStore;
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,10 +4,11 @@ import type { FileData as GradioFileData } from "@gradio/upload";
 import { Subgraph, type LGraph, type LGraphNode, type LLink, type SerializedLGraph, type UUID, type NodeID, type SlotType, type Vector4, type SerializedLGraphNode } from "@litegraph-ts/core";
 import { get } from "svelte/store";
 import type { ComfyNodeID } from "./api";
-import { type SerializedPrompt } from "./components/ComfyApp";
+import 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";
 export function clamp(n: number, min: number, max: number): number {
    if (max <= min)
@@ -75,6 +76,13 @@ export function download(filename: string, text: string, type: string = "text/pl
    }, 0);
 }
 export function downloadCanvas(canvas: HTMLCanvasElement, filename: string, type: string = "image/png") {
    var link = document.createElement('a');
    link.download = filename;
    link.href = canvas.toDataURL(type);
    link.click();
 }
 export const MAX_LOCAL_STORAGE_MB = 5;
 export function getLocalStorageUsedMB(): number {
@@ -434,6 +442,8 @@ export type ComfyBoxImageMetadata = {
    width?: number,
    /* Image height. */
    height?: number,
    /* Child images associated with this image, like masks. */
    children: ComfyBoxImageMetadata[]
 }
 export function isComfyBoxImageMetadata(value: any): value is ComfyBoxImageMetadata {
@@ -458,6 +468,7 @@ export function filenameToComfyBoxMetadata(filename: string, type: ComfyUploadIm
        },
        name: "Filename",
        tags: [],
        children: []
    }
 }
@@ -467,6 +478,7 @@ export function comfyFileToComfyBoxMetadata(comfyUIFile: ComfyImageLocation): Co
        comfyUIFile,
        name: "File",
        tags: [],
        children: []
    }
 }
@@ -607,6 +619,125 @@ 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);
    })
 }
 export function nextLetter(s: string): string {
    return s.replace(/([a-zA-Z])[^a-zA-Z]*$/, function(a) {
        var c = a.charCodeAt(0);
        switch (c) {
            case 90: return 'A';
            case 122: return 'a';
            default: return String.fromCharCode(++c);
        }
    });
 }
 export function playSound(sound: string) {
    if (!configState.canPlayNotificationSound())
        return;
    const url = `${location.origin}/sound/${sound}`;
    const audio = new Audio(url);
    audio.play();
 }
 export interface ComfyBatchUploadResult {
    error?: string;
    files: Array<ComfyImageLocation>;
 }
 export type ComfyBatchBlob = {
    blob: Blob,
    filename: string,
    overwrite?: boolean
 }
 export async function batchUploadFilesToComfyUI(files: Array<File>): Promise<ComfyBatchUploadResult> {
    const blobs = files.map(f => { return { blob: f, filename: f.name } })
    return batchUploadBlobsToComfyUI(blobs)
 }
 export async function batchUploadBlobsToComfyUI(blobs: ComfyBatchBlob[]): Promise<ComfyBatchUploadResult> {
    const url = configState.getBackendURL();
    const requests = blobs.map(async (blob) => {
        const formData = new FormData();
        formData.append("image", blob.blob, blob.filename);
        if (blob.overwrite) {
            formData.append("overwrite", "true")
        }
        return fetch(new Request(url + "/upload/image", {
            body: formData,
            method: 'POST'
        }))
            .then(r => r.json())
            .catch(error => error);
    });
    return Promise.all(requests)
        .then((results) => {
            const errors = []
            const files = []
            for (const r of results) {
                if (r instanceof Error) {
                    errors.push(r.toString())
                }
                else {
                    // bare filename of image
                    const resp = r as ComfyUploadImageAPIResponse;
                    files.push({
                        filename: resp.name,
                        subfolder: "",
                        type: "input"
                    })
                }
            }
            let error = null;
            if (errors && errors.length > 0)
                error = "Upload error(s):\n" + errors.join("\n");
            return { error, files }
        })
 }
 export function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
    return new Promise(function(resolve) {
        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))
 }
--- 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 { getSafetensorsMetadata } from '$lib/utils';
 export let widget: WidgetLayout | null = null;
 export let isMobile: boolean = false;
 let node: ComfyComboNode | null = null;
@@ -73,26 +74,10 @@
     }
 }
 function onSelect(e: CustomEvent<any>) {
     if (input)
         input.blur();
     navigator.vibrate(20)
     const item = e.detail
     console.debug("[ComboWidget] SELECT", item, item.index)
     $nodeValue = item.value;
     activeIndex = item.index;
     listOpen = false;
 }
 let activeIndex = null;
 let hoverItemIndex = null;
 let filterText = "";
 let listOpen = null;
 let scrollToIndex = null;
 let start = 0;
 let end = 0;
 function handleHover(index: number) {
     // console.warn("HOV", index)
@@ -107,7 +92,9 @@
     $nodeValue = item.value
     listOpen = false;
     filterText = ""
-     input?.blur()
+     setTimeout(() => {
         input?.blur();
     }, 100)
 }
 function onFilter() {
@@ -129,10 +116,25 @@
     };
 }
 let title: ""
 $: nodeValue && $nodeValue && (title = getTitle($nodeValue))
 function getTitle(value?: string) {
     if (value == null) {
         if (!nodeValue)
             return ""
         value = $nodeValue
     }
     if (value && value.length > 80)
         return String(value)
     return ""
 }
 </script>
 <div class="wrapper comfy-combo" class:mobile={isMobile} class:updated={$lightUp}>
-    <label>
+    <label title={title}>
        {#if widget.attrs.title !== ""}
            <BlockTitle show_label={true}>
                {widget.attrs.title}
@@ -158,7 +160,10 @@
            on:select={(e) => handleSelect(e.detail.index)}
            on:blur
            on:filter={onFilter}>
-            <div class="comfy-select-list" slot="list" let:filteredItems>
+            <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}
@@ -175,6 +180,7 @@
                                class:mobile={isMobile}
                                let:index={i}
                                let:style
                                title={getTitle(filteredItems[i].label)}
                                {style}
                                class:active={activeIndex === filteredItems[i].index}
                                class:hover={hoverItemIndex === i}
@@ -274,8 +280,15 @@
 }
 .comfy-select-list {
-     width: 30rem;
+     --maxLabelWidth: 100;
     --maxListWidth: 50vw;
     &.mobile {
         --maxListWidth: 80vw;
     }
     font-size: 14px;
     color: var(--item-color);
     width: min(calc((var(--maxLabelWidth) + 10) * 1ch), var(--maxListWidth));
     > :global(.virtual-list-wrapper) {
         box-shadow: var(--block-shadow);
--- a/src/lib/widgets/GalleryWidget.svelte
+++ b/src/lib/widgets/GalleryWidget.svelte
@@ -11,6 +11,7 @@
 import { clamp, comfyBoxImageToComfyURL, type ComfyBoxImageMetadata } from "$lib/utils";
 import { f7 } from "framework7-svelte";
 import type { ComfyGalleryNode } from "$lib/nodes/widgets";
 	import { showMobileLightbox } from "$lib/components/utils";
 export let widget: WidgetLayout | null = null;
 export let isMobile: boolean = false;
@@ -47,19 +48,8 @@
     object_fit: "cover",
     // preview: true
 }
 let element: HTMLDivElement;
 let mobileLightbox = null;
 function showMobileLightbox(source: HTMLImageElement) {
     if (!f7)
         return
     if (mobileLightbox) {
         mobileLightbox.destroy();
         mobileLightbox = null;
     }
 function showMobileLightbox_(source: HTMLImageElement, selectedImage: number) {
     const galleryElem = source.closest<HTMLDivElement>("div.block")
     console.debug("[ImageViewer] showModal", source, galleryElem);
     if (!galleryElem || ImageViewer.all_gallery_buttons(galleryElem).length === 0) {
@@ -72,23 +62,16 @@
     const images = allGalleryButtons.map(button => {
         return {
             url: (button.children[0] as HTMLImageElement).src,
-             caption: "Image"
+             // caption: "Image"
         }
     })
-     history.pushState({ type: "gallery" }, "");
+     showMobileLightbox(images, selectedImage, { thumbs: images });
     mobileLightbox = f7.photoBrowser.create({
         photos: images,
         thumbs: images.map(i => i.url),
         type: 'popup',
     });
     mobileLightbox.open($selected_image)
 }
 function onClicked(e: CustomEvent<HTMLImageElement>) {
     if (isMobile) {
-         showMobileLightbox(e.detail)
+         showMobileLightbox_(e.detail, $selected_image)
     }
     else {
         ImageViewer.instance.showLightbox(e.detail)
@@ -103,7 +86,7 @@
 {#if widget && node && nodeValue && $nodeValue}
    {#if widget.attrs.variant === "image"}
-        <div class="wrapper comfy-image-widget" style={widget.attrs.style || ""} bind:this={element}>
+        <div class="wrapper comfy-image-widget" style={widget.attrs.style || ""}>
            <Block variant="solid" padding={false}>
                {#if $nodeValue && $nodeValue.length > 0}
                    {@const value = $nodeValue[$nodeValue.length-1]}
@@ -122,7 +105,7 @@
        </div>
    {:else}
        {@const images = $nodeValue.map(comfyBoxImageToComfyURL)}
-        <div class="wrapper comfy-gallery-widget gradio-gallery" style={widget.attrs.style || ""} bind:this={element}>
+        <div class="wrapper comfy-gallery-widget gradio-gallery" style={widget.attrs.style || ""}>
            <Block variant="solid" padding={false}>
                <div class="padding">
                    <Gallery
--- a/src/lib/widgets/ImageUploadWidget.svelte
+++ b/src/lib/widgets/ImageUploadWidget.svelte
@@ -3,46 +3,148 @@
 import { Block } from "@gradio/atoms";
 import { TextBox } from "@gradio/form";
 import Row from "$lib/components/gradio/app/Row.svelte";
- import { get, writable, type Writable } from "svelte/store";
+ import { writable, type Writable } from "svelte/store";
 import Modal from "$lib/components/Modal.svelte";
 import { Button } from "@gradio/button";
- import { Embed as Klecks } from "klecks";
+ import {
-
+     type ComfyBoxImageMetadata,
- import "klecks/style/style.scss";
+     comfyFileToComfyBoxMetadata,
     comfyBoxImageToComfyFile,
     type ComfyImageLocation,
     comfyBoxImageToComfyURL,
     convertComfyOutputToComfyURL,
     batchUploadBlobsToComfyUI,
     canvasToBlob,
 	 basename
 } from "$lib/utils";
 import ImageUpload from "$lib/components/ImageUpload.svelte";
 import { uploadImageToComfyUI, type ComfyBoxImageMetadata, comfyFileToComfyBoxMetadata, comfyBoxImageToComfyURL, comfyBoxImageToComfyFile, type ComfyUploadImageType, type ComfyImageLocation } from "$lib/utils";
 import configState from "$lib/stores/configState";
 import notify from "$lib/notify";
 import NumberInput from "$lib/components/NumberInput.svelte";
 	import type { ComfyImageEditorNode } from "$lib/nodes/widgets";
 import { ImageViewer } from "$lib/ImageViewer";
-	import { generateBlankCanvas, generateImageCanvas } from "./utils";
+ import MaskCanvas, { type LineGroup, type MaskCanvasData } from "$lib/components/MaskCanvas.svelte";
 import type { ComfyImageUploadNode } from "$lib/nodes/widgets";
 	import { tick } from "svelte";
 export let widget: WidgetLayout | null = null;
 export let isMobile: boolean = false;
- let node: ComfyImageEditorNode | null = null;
+ let node: ComfyImageUploadNode | null = null;
 let nodeValue: Writable<ComfyBoxImageMetadata[]> | null = null;
 let attrsChanged: Writable<number> | null = null;
 let imgWidth: Writable<number> = writable(0);
 let imgHeight: Writable<number> = writable(0);
 let maskCanvasComp: MaskCanvas | null = null;
 let editMask: boolean = false;
 $: widget && setNodeValue(widget);
 let canMask = false;
 $: canMask = (node?.properties?.maskCount || 0) > 0;
 $: if (!canMask) clearMask();
 function setNodeValue(widget: WidgetLayout) {
     if (widget) {
-         node = widget.node as ComfyImageEditorNode
+         node = widget.node as ComfyImageUploadNode
         nodeValue = node.value;
         attrsChanged = widget.attrsChanged;
         imgWidth = node.imgWidth
         imgHeight = node.imgHeight
         status = $nodeValue && $nodeValue.length > 0 ? "uploaded" : "empty"
     }
 };
 let hasImage = false;
 $: hasImage = $nodeValue && $nodeValue.length > 0;
 $: if (!hasImage) {
     editMask = false;
 }
 let mask: ComfyImageLocation | null;
 $: if (hasImage && canMask) {
     mask = $nodeValue[0].children?.find(i => i.tags.includes("mask"))?.comfyUIFile;
 }
 else {
     mask = null;
 }
 const MASK_FILENAME: string = "ComfyBoxMask.png"
 async function onMaskReleased(e: CustomEvent<MaskCanvasData>) {
     const data = e.detail;
     if (data.maskCanvas != null && data.hasMask) {
         await saveMask(data.maskCanvas)
     }
 }
 async function saveMask(maskCanvas: HTMLCanvasElement) {
     if (!canMask) {
         notify("Mask editing is disabled for this widget.", { type: "warning" })
         return;
     }
     if (!maskCanvas) {
         notify("No mask canvas!", { type: "warning" })
         return
     }
     if (!$nodeValue || $nodeValue.length === 0) {
         notify("No image uploaded to apply mask to.", { type: "warning" })
         return
     }
     const hadNoMask = $nodeValue[0].children.findIndex(i => i.tags?.includes("mask")) === -1;
     const existFilename = $nodeValue[0].comfyUIFile.filename
     const filename = existFilename ? `${basename(existFilename)}_mask.png` : MASK_FILENAME
     console.warn("[ImageUpload] UPLOAD MASK", filename)
     await canvasToBlob(maskCanvas)
         .then(blob => batchUploadBlobsToComfyUI([{
             blob,
             filename,
             overwrite: true
         }]))
         .then(result => {
             const meta = result.files.map(f => {
                 const m = comfyFileToComfyBoxMetadata(f)
                 m.tags = ["mask"]
                 m.width = maskCanvas.width;
                 m.height = maskCanvas.height;
                 return m;
             });
             if ($nodeValue.length > 0) {
                 // TODO support multiple images?
                 $nodeValue[0].children = meta;
                 if (hadNoMask) {
                     notify("Uploaded mask successfully!", { type: "success" })
                 }
             }
             else {
                 throw new Error("No image was uploaded yet.")
             }
         })
         .catch(error => {
             notify(`Failed to upload mask to ComfyUI: ${error}`, { type: "error", timeout: 10000 })
         })
 }
 function clearMask() {
     for (const image of $nodeValue) {
         // TODO other child image types preserved here?
         image.children = [];
     }
     mask = null;
     if (maskCanvasComp) {
         maskCanvasComp.clearStrokes();
     }
 }
 async function toggleEditMask() {
     editMask = !editMask;
     await tick();
     if (maskCanvasComp) {
         maskCanvasComp.recenterImage();
     }
 }
 let editorRoot: HTMLDivElement | null = null;
 let showModal = false;
 let kl: Klecks | null = null;
 function disposeEditor() {
     console.warn("[ImageEditorWidget] CLOSING", widget, $nodeValue)
@@ -53,96 +155,9 @@
         }
     }
     kl = null;
     showModal = false;
 }
 const FILENAME: string = "ComfyUITemp.png";
 const SUBFOLDER: string = "ComfyBox_Editor";
 const DIRECTORY: ComfyUploadImageType = "input";
 async function submitKlecksToComfyUI(onSuccess: () => void, onError: () => void) {
     const blob = kl.getPNG();
     status = "uploading"
     await uploadImageToComfyUI(blob, FILENAME, DIRECTORY, SUBFOLDER)
         .then((entry: ComfyImageLocation) => {
             const meta: ComfyBoxImageMetadata = comfyFileToComfyBoxMetadata(entry);
             $nodeValue = [meta] // TODO more than one image
             status = "uploaded"
             notify("Saved image to ComfyUI!", { type: "success" })
             onSuccess();
         })
         .catch(err => {
             notify(`Failed to upload image from editor: ${err}`, { type: "error", timeout: 10000 })
             status = "error"
             uploadError = err;
             $nodeValue = []
             onError();
         })
 }
 let closeDialog = null;
 async function saveAndClose() {
     console.log(closeDialog, kl)
     if (!closeDialog || !kl)
         return;
     submitKlecksToComfyUI(() => {}, () => {});
     closeDialog()
 }
 let blankImageWidth = 512;
 let blankImageHeight = 512;
 async function openImageEditor() {
     if (!editorRoot)
         return;
     showModal = true;
     const url = configState.getBackendURL();
     kl = new Klecks({
         embedUrl: url,
         onSubmit: submitKlecksToComfyUI,
         targetEl: editorRoot,
         warnOnPageClose: false
     });
     console.warn("[ImageEditorWidget] OPENING", widget, $nodeValue)
     let canvas = null;
     let width = blankImageWidth;
     let height = blankImageHeight;
     if ($nodeValue && $nodeValue.length > 0) {
         const comfyImage = $nodeValue[0];
         const comfyURL = comfyBoxImageToComfyURL(comfyImage);
         [canvas, width, height] = await generateImageCanvas(comfyURL);
     }
     else {
         canvas = generateBlankCanvas(width, height);
     }
     kl.openProject({
         width: width,
         height: height,
         layers: [{
             name: 'Image',
             opacity: 1,
             mixModeStr: 'source-over',
             image: canvas
         }]
     });
     setTimeout(function () {
         kl?.klApp?.out("yo");
     }, 1000);
 }
 function openLightbox() {
     if (!$nodeValue || $nodeValue.length === 0)
         return;
@@ -185,9 +200,6 @@
     notify(`Failed to upload image to ComfyUI: ${uploadError}`, { type: "error", timeout: 10000 })
 }
 function onChange(e: CustomEvent<ComfyImageLocation[]>) {
 }
 let _value: ComfyImageLocation[] = []
 $: if ($nodeValue)
     _value = $nodeValue.map(comfyBoxImageToComfyFile)
@@ -195,6 +207,9 @@
     _value = []
 $: canEdit = status === "empty" || status === "uploaded";
 function onChange(e: CustomEvent<ComfyImageLocation[]>) {
 }
 </script>
 <div class="wrapper comfy-image-editor">
@@ -215,9 +230,17 @@
        />
    {:else}
        <div class="comfy-image-editor-panel">
            {#if _value && canMask}
                {@const comfyURL = convertComfyOutputToComfyURL(_value[0])}
                <div class="mask-canvas-wrapper" style:display={editMask ? "block" : "none"}>
                    <MaskCanvas bind:this={maskCanvasComp} fileURL={comfyURL} on:release={onMaskReleased} on:loaded={onMaskReleased} />
                </div>
            {/if}
            <div style:display={(canMask && editMask) ? "none" : "block"}>
                <ImageUpload value={_value}
                             bind:imgWidth={$imgWidth}
                             bind:imgHeight={$imgHeight}
                             {mask}
                             fileCount={"single"}
                             elem_classes={[]}
                             style={""}
@@ -229,50 +252,29 @@
                             on:change={onChange}
                             on:image_clicked={openLightbox}
                />
            <Modal bind:showModal closeOnClick={false} on:close={disposeEditor} bind:closeDialog>
                <div>
                    <div id="klecks-loading-screen">
                        <span id="klecks-loading-screen-text"></span>
            </div>
                    <div class="image-editor-root" bind:this={editorRoot} />
                </div>
                <div slot="buttons">
                    <Button variant="primary" on:click={saveAndClose}>
                        Save and Close
                    </Button>
                    <Button variant="secondary" on:click={closeDialog}>
                        Discard Edits
                    </Button>
                </div>
            </Modal>
            <Block>
-                {#if !$nodeValue || $nodeValue.length === 0}
+                {#if hasImage}
                    {@const maskCount = $nodeValue[0] ? $nodeValue[0].children.filter(f => f.tags?.includes("mask")).length : 0}
                    <Row>
-                        <Row>
+                        {#if canMask}
-                            <Button variant="secondary" disabled={!canEdit} on:click={openImageEditor}>
+                            <div>
-                                Create Image
+                                {#if editMask}
                                    <Button variant="secondary" on:click={() => { clearMask(); notify("Mask cleared."); }}>
                                        Clear Mask
                                    </Button>
                                {/if}
                                <Button disabled={!_value} on:click={toggleEditMask}>
                                    {#if editMask}
                                        Show Image
                                    {:else}
                                        Edit Mask
                                    {/if}
                                </Button>
                            <div>
                                <TextBox show_label={false} disabled={true} value="Status: {status}"/>
                            </div>
                            {#if uploadError}
                                <div>
                                    Upload error: {uploadError}
                            </div>
                        {/if}
                        </Row>
                        <Row>
                            <NumberInput label={"Width"} min={64} max={2048} step={64} bind:value={blankImageWidth} />
                            <NumberInput label={"Height"} min={64} max={2048} step={64} bind:value={blankImageHeight} />
                        </Row>
                    </Row>
                {:else}
                    <Row>
                        <Button variant="secondary" disabled={!canEdit} on:click={openImageEditor}>
                            Edit Image
                        </Button>
                        <div>
-                            <TextBox label={""} show_label={false} disabled={true} lines={1} max_lines={1} value="Status: {status}"/>
+                            <TextBox label={""} show_label={false} disabled={true} lines={1} max_lines={1} value="Images: {$nodeValue.length}, masks: {maskCount}"/>
                        </div>
                        {#if uploadError}
                            <div>
@@ -287,25 +289,13 @@
 </div>
 <style lang="scss">
 .image-editor-root {
     width: 75vw;
     height: 75vh;
     overflow: hidden;
     color: black;
     :global(> .g-root) {
         height: calc(100% - 59px);
     }
 }
 .comfy-image-editor {
     :global(> dialog) {
         overflow: hidden;
     }
 }
- :global(.kl-popup) {
+ .mask-canvas-wrapper {
-     z-index: 999999999999;
+     height: calc(var(--size-96) * 1.5);
 }
 </style>
--- a/src/lib/widgets/MarkdownWidget.svelte
+++ b/src/lib/widgets/MarkdownWidget.svelte
@@ -0,0 +1,233 @@
 <script lang="ts">
 import { type WidgetLayout } from "$lib/stores/layoutStates";
 import { get, type Writable, writable } from "svelte/store";
 import { Block } from "@gradio/atoms";
 import type { ComfyMarkdownNode } from "$lib/nodes/widgets";
 import SvelteMarkdown from "@dogagenc/svelte-markdown"
 import NullMarkdownRenderer from "./markdown/NullMarkdownRenderer.svelte"
 import { SvelteComponentDev } from "svelte/internal";
 export let widget: WidgetLayout | null = null;
 export let isMobile: boolean = false;
 let node: ComfyMarkdownNode | null = null;
 let nodeValue: Writable<string> = writable("");
 let attrsChanged: Writable<number> = writable(0);
 let renderers: Record<string, typeof SvelteComponentDev> = {
     "html": NullMarkdownRenderer
 }
 $: widget && setNodeValue(widget);
 function setNodeValue(widget: WidgetLayout) {
     if (widget) {
         node = widget.node as ComfyMarkdownNode
         nodeValue = node.value;
         attrsChanged = widget.attrsChanged;
     }
 };
 </script>
 <div class="wrapper prose">
    {#key $attrsChanged}
        {#if widget !== null && node !== null}
            <Block>
                <SvelteMarkdown source={$nodeValue} {renderers} />
            </Block>
        {/if}
    {/key}
 </div>
 <style lang="scss">
 .wrapper {
     padding: 2px;
     width: 100%;
     height: 100%;
     :global(> button) {
         height: 100%;
     }
     :global(> .block) {
         border-radius: 0 !important;
     }
 }
 .prose {
     font-weight: var(--prose-text-weight);
     font-size: var(--text-md);
 }
 .prose * {
     color: var(--body-text-color);
 }
 .prose p {
     margin-bottom: var(--spacing-sm);
     line-height: var(--line-lg);
 }
 /* headings
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose h1,
 .prose h2,
 .prose h3,
 .prose h4,
 .prose h5 {
     margin: var(--spacing-xxl) 0 var(--spacing-lg);
     font-weight: var(--prose-header-text-weight);
     line-height: 1.3;
 }
 .prose > *:first-child {
     margin-top: 0;
 }
 .prose h1 {
     margin-top: 0;
     font-size: var(--text-xxl);
 }
 .prose h2 {
     font-size: var(--text-xl);
 }
 .prose h3 {
     font-size: var(--text-lg);
 }
 .prose h4 {
     font-size: 1.1em;
 }
 .prose h5 {
     font-size: 1.05em;
 }
 /* lists
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose ul {
     list-style: circle inside;
 }
 .prose ol {
     list-style: decimal inside;
 }
 .prose ul > p,
 .prose li > p {
     display: inline-block;
 }
 .prose ol,
 .prose ul {
     margin-top: 0;
     padding-left: 0;
 }
 .prose ul ul,
 .prose ul ol,
 .prose ol ol,
 .prose ol ul {
     margin: 0.5em 0 0.5em 3em;
     font-size: 90%;
 }
 .prose li {
     margin-bottom: 0.5em;
 }
 /* code
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose code {
     border: 1px solid var(--border-color-primary);
     border-radius: var(--radius-sm);
     background: var(--background-fill-secondary);
     padding: 1px 3px;
     font-size: 85%;
     white-space: nowrap;
 }
 .prose pre > code {
     display: block;
     padding: 0.5em 0.7em;
     /* font-size: 100%; */
     white-space: pre;
 }
 /* tables
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose th,
 .prose td {
     border-bottom: 1px solid #e1e1e1;
     padding: 12px 15px;
     text-align: left;
 }
 .prose th:first-child,
 .prose td:first-child {
     padding-left: 0;
 }
 .prose th:last-child,
 .prose td:last-child {
     padding-right: 0;
 }
 /* spacing
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose button,
 .prose .button {
     margin-bottom: var(--spacing-sm);
 }
 .prose input,
 .prose textarea,
 .prose select,
 .prose fieldset {
     margin-bottom: var(--spacing-sm);
 }
 .prose pre,
 .prose blockquote,
 .prose dl,
 .prose figure,
 .prose table,
 .prose p,
 .prose ul,
 .prose ol,
 .prose form {
     margin-bottom: var(--spacing-md);
 }
 /* links
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose a {
     color: var(--link-text-color);
     text-decoration: underline;
 }
 .prose a:visited {
     color: var(--link-text-color-visited);
 }
 .prose a:hover {
     color: var(--link-text-color-hover);
 }
 .prose a:active {
     color: var(--link-text-color-active);
 }
 /* misc
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .prose hr {
     margin-top: 3em;
     margin-bottom: 3.5em;
     border-width: 0;
     border-top: 1px solid #e1e1e1;
 }
 .prose blockquote {
     margin: var(--size-6) 0 !important;
     border-left: 5px solid var(--border-color-primary);
     padding-left: var(--size-2);
 }
 .prose :last-child {
     margin-bottom: 0 !important;
 }
 </style>
--- a/src/lib/widgets/markdown/NullMarkdownRenderer.svelte
+++ b/src/lib/widgets/markdown/NullMarkdownRenderer.svelte
@@ -0,0 +1,7 @@
 <script>
  export let href = "";
  export let title = undefined;
  export let text = "";
 </script>
 <div/>
--- a/src/main-desktop.ts
+++ b/src/main-desktop.ts
@@ -1,3 +1,15 @@
 import { isMobileBrowser } from "$lib/utils"
 const isMobile = isMobileBrowser(navigator.userAgent);
 const params = new URLSearchParams(window.location.search)
 if (params.get("desktop") !== "true") {
    if (isMobile) {
        window.location.href = "/mobile/"
    }
 }
 // Run node registration before anthing else, in the proper order
 import "$lib/nodeImports";
@@ -12,7 +24,7 @@ const comfyApp = new ComfyApp();
 const app = new App({
    target: document.getElementById("app-root"),
-    props: { app: comfyApp }
+    props: { app: comfyApp, isMobile }
 })
 export default app;
--- a/src/mobile/GenToolbar.svelte
+++ b/src/mobile/GenToolbar.svelte
@@ -1,19 +1,11 @@
 <script lang="ts">
 import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
 import queueState from "$lib/stores/queueState";
 import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
 import { getNodeInfo } from "$lib/utils"
 import { Link, Toolbar } from "framework7-svelte"
 import ProgressBar from "$lib/components/ProgressBar.svelte";
 	import Indicator from "./Indicator.svelte";
 	import interfaceState from "$lib/stores/interfaceState";
 	import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
 export let subworkflowID: number = -1;
 export let app: ComfyApp = undefined;
 let layoutState: WritableLayoutStateStore = null;
 let fileInput: HTMLInputElement = undefined;
 let workflow: ComfyBoxWorkflow | null = null;
 $: workflow = $workflowState.activeWorkflow;
@@ -22,111 +14,28 @@
     navigator.vibrate(20)
     app.runDefaultQueueAction()
 }
 async function refreshCombos() {
     navigator.vibrate(20)
     await app.refreshComboInNodes()
 }
 function doSave(): void {
     if (!fileInput)
         return;
     navigator.vibrate(20)
     app.querySave()
 }
 function doLoad(): void {
     if (!fileInput)
         return;
     navigator.vibrate(20)
     fileInput.value = null;
     fileInput.click();
 }
 function loadWorkflow(): void {
     app.handleFile(fileInput.files[0]);
 }
 function doSaveLocal(): void {
     navigator.vibrate(20)
     app.saveStateToLocalStorage();
 }
 </script>
-<div class="bottom">
+<Toolbar bottom color="red" style="bottom: calc(var(--f7-toolbar-height))">
    {#if $queueState.runningNodeID || $queueState.progress}
        <div class="node-name">
            <span>Node: {getNodeInfo($queueState.runningNodeID)}</span>
        </div>
        <div class="progress-bar">
            <ProgressBar value={$queueState.progress?.value} max={$queueState.progress?.max} />
        </div>
    {/if}
    {#if typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0}
        <div class="queue-remaining in-progress">
            <div>
                Queued prompts: {$queueState.queueRemaining}.
            </div>
        </div>
    {/if}
 </div>
 <Toolbar bottom>
    {#if workflow != null && workflow.attrs.queuePromptButtonName != ""}
        <div style:width="100%">
            <Link on:click={queuePrompt}>
                {workflow.attrs.queuePromptButtonName}
            </Link>
        </div>
    {/if}
    <Link on:click={refreshCombos}>🔄</Link>
    <Link on:click={doSave}>Save</Link>
    <Link on:click={doSaveLocal}>Save Local</Link>
    <Link on:click={doLoad}>Load</Link>
    <input bind:this={fileInput} id="comfy-file-input" type="file" accept=".json" on:change={loadWorkflow} />
 </Toolbar>
 {#if $interfaceState.showIndicator}
    <Indicator value={$interfaceState.indicatorValue} />
 {/if}
 <style lang="scss">
 #comfy-file-input {
     display: none;
 }
- .bottom {
+ :global(.toolbar) {
-     display: flex;
+     --f7-toolbar-font-size: 13pt;
     flex-direction: row;
     position: absolute;
     text-align: center;
     width: 100%;
     height: 2rem;
     bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
     z-index: var(--layer-top);
     background-color: grey;
     .node-name {
         flex-grow: 1;
         background-color: var(--color-red-300);
         padding: 0.2em;
         display: flex;
         justify-content: center;
         align-items: center;
 }
-     .progress-bar {
+ :global(.dark .toolbar.color-red) {
-         flex-grow: 10;
+     background: var(--neutral-700) !important;
         background-color: var(--color-red-300);
         display: flex;
         justify-content: center;
         align-items: center;
     }
     .queue-remaining {
         flex-grow: 1;
         padding: 0.2em;
         &.in-progress {
             background-color: var(--secondary-300);
         }
     }
 }
 </style>
--- a/src/mobile/MainToolbar.svelte
+++ b/src/mobile/MainToolbar.svelte
@@ -0,0 +1,198 @@
 <script lang="ts">
 import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
 import queueState from "$lib/stores/queueState";
 import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
 import { getNodeInfo } from "$lib/utils"
 import { LayoutTextSidebarReverse, Image, Grid } from "svelte-bootstrap-icons";
 import { Link, Toolbar } from "framework7-svelte"
 import ProgressBar from "$lib/components/ProgressBar.svelte";
 import Progressbar from "$lib/components/f7/progressbar.svelte";
 import Indicator from "./Indicator.svelte";
 import interfaceState from "$lib/stores/interfaceState";
 import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
 export let subworkflowID: number = -1;
 export let app: ComfyApp = undefined;
 let layoutState: WritableLayoutStateStore = null;
 let fileInput: HTMLInputElement = undefined;
 let workflow: ComfyBoxWorkflow | null = null;
 $: workflow = $workflowState.activeWorkflow;
 function queuePrompt() {
     navigator.vibrate(20)
     app.runDefaultQueueAction()
 }
 async function refreshCombos() {
     navigator.vibrate(20)
     await app.refreshComboInNodes()
 }
 function doSave(): void {
     if (!fileInput)
         return;
     navigator.vibrate(20)
     app.querySave()
 }
 function doLoad(): void {
     if (!fileInput)
         return;
     navigator.vibrate(20)
     fileInput.value = null;
     fileInput.click();
 }
 function loadWorkflow(): void {
     app.handleFile(fileInput.files[0]);
 }
 function doSaveLocal(): void {
     navigator.vibrate(20)
     app.saveStateToLocalStorage();
 }
 let queued: false;
 $: queued = Boolean($queueState.runningNodeID || $queueState.progress)
 let running = false;
 $: running = typeof $queueState.queueRemaining === "number" && $queueState.queueRemaining > 0;
 let progress;
 $: progress = $queueState.progress
 let progressPercent = 0
 let progressText = ""
 $: if (progress) {
     progressPercent = (progress.value / progress.max) * 100;
     progressText = progressPercent.toFixed(1) + "%";
 } else {
     progressPercent = 0
     progressText = "??.?%"
 }
 let centerHref = "/workflows/"
 $: if ($interfaceState.selectedWorkflowIndex && !$interfaceState.showingWorkflow) {
     centerHref = `/workflows/${$interfaceState.selectedWorkflowIndex}/`
 }
 else {
     centerHref = "/workflows/";
 }
 let toolbarCount = 0;
 $: toolbarCount = $interfaceState.showingWorkflow ? 2 : 1;
 const ICON_SIZE = "1.5rem";
 let selectedTab = 1;
 </script>
 <div class="bottom" style:--toolbarCount={toolbarCount}>
    <div class="bars">
        {#if queued}
            <div class="node-name">
                <span>Node: {getNodeInfo($queueState.runningNodeID)} ({progressText})</span>
            </div>
        {/if}
    </div>
    <div class="wrapper">
        {#if queued}
            {#if progress}
                <Progressbar color="blue" progress={progressPercent} />
            {:else if running}
                <Progressbar color="blue" infinite />
            {/if}
        {/if}
    </div>
 </div>
 <Toolbar bottom tabbar color="blue" class={toolbarCount > 1 ? "hasGenToolbar" : ""}>
    <Link transition="f7-dive" href="/queue/" tabLinkActive={$interfaceState.selectedTab === 0}>
        <LayoutTextSidebarReverse width={ICON_SIZE} height={ICON_SIZE} />
    </Link>
    <Link transition="f7-dive" href={centerHref} tabLinkActive={$interfaceState.selectedTab === 1}>
        <Image width={ICON_SIZE} height={ICON_SIZE} />
    </Link>
    <Link transition="f7-dive" href="/gallery/" tabLinkActive={$interfaceState.selectedTab === 2}>
        <Grid width={ICON_SIZE} height={ICON_SIZE} />
    </Link>
 </Toolbar>
 {#if $interfaceState.showIndicator}
    <Indicator value={$interfaceState.indicatorValue} />
 {/if}
 <style lang="scss">
 #comfy-file-input {
     display: none;
 }
 :global(.progressbar.color-blue) {
     background: var(--neutral-400) !important;
 }
 :global(.dark .progressbar.color-blue) {
     background: var(--neutral-500) !important;
 }
 :global(.dark .toolbar.color-blue) {
     background: var(--neutral-800) !important;
 }
 :global(.dark .toolbar.color-blue.hasGenToolbar) {
     border-top: 2px solid var(--neutral-600);
 }
 :global(.dark .tab-link-active) {
     --f7-tabbar-link-active-color: var(--secondary-500);
     --f7-tabbar-link-active-bg-color: #283547;
 }
 .bottom {
     --toolbarCount: 1;
     position: absolute;
     text-align: center;
     width: 100%;
     font-size: 13pt;
     bottom: calc(var(--f7-toolbar-height) * var(--toolbarCount));
     z-index: var(--layer-top);
 }
 .bars {
     display: flex;
     flex-direction: row;
     .bars {
         display: flex;
         flex-direction: row;
     }
     .node-name {
         flex-grow: 1;
         background-color: var(--comfy-node-name-background);
         color: var(--comfy-node-name-foreground);
         padding: 0.2em;
         display: flex;
         justify-content: center;
         align-items: center;
     }
     .progress-bar {
         flex-grow: 10;
         background-color: var(--color-red-300);
         display: flex;
         justify-content: center;
         align-items: center;
     }
     .queue-remaining {
         flex-grow: 1;
         padding: 0.2em;
         &.in-progress {
             background-color: var(--secondary-300);
         }
     }
 }
 </style>
--- a/src/mobile/routes/gallery.svelte
+++ b/src/mobile/routes/gallery.svelte
@@ -0,0 +1,120 @@
 <script lang="ts">
 import { Page, Navbar, Block, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, f7 } from "framework7-svelte"
 import WidgetContainer from "$lib/components/WidgetContainer.svelte";
 import type ComfyApp from "$lib/components/ComfyApp";
 import { writable, type Writable } from "svelte/store";
 import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
 import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
 import interfaceState from "$lib/stores/interfaceState";
 import { onMount } from "svelte";
 import GenToolbar from '../GenToolbar.svelte'
 import { partition, showLightbox } from "$lib/utils";
 	import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
 	import { showMobileLightbox } from "$lib/components/utils";
 	import notify from "$lib/notify";
 export let app: ComfyApp
 let _entries: ReadonlyArray<QueueUIEntry> = []
 $: _entries = $uiQueueState.historyUIEntries;
 let allEntries: [QueueUIEntry, string][][] = []
 let allImages: string[] = []
 let gridCols = 3;
 function onPageBeforeIn() {
     $interfaceState.selectedTab = 2;
 }
 $: buildImageList(_entries);
 function buildImageList(entries: ReadonlyArray<QueueUIEntry>) {
     const _allEntries = []
     for (const entry of entries) {
         for (const image of entry.images) {
             _allEntries.push([entry, image]);
         }
     }
     allEntries = partition(_allEntries, gridCols);
     allImages = _allEntries.map(p => p[1]);
 }
 function handleClick(e: MouseEvent, entry: QueueUIEntry, index: number) {
     showMobileLightbox(allImages, index)
 }
 async function clearHistory() {
     f7.dialog.confirm("Are you sure you want to clear the current history?", async () => {
         await app.clearQueue("history");
         uiQueueState.updateEntries(true)
         notify("History cleared!")
     })
 }
 </script>
 <Page name="gallery" on:pageBeforeIn={onPageBeforeIn}>
    <Navbar>
        <NavLeft></NavLeft>
        <NavTitle>Gallery</NavTitle>
        <NavRight>
            <Link on:click={clearHistory}>🗑️</Link>
        </NavRight>
    </Navbar>
    <Block>
        {#each allEntries as group, i}
            <div class="grid grid-cols-{gridCols} grid-gap">
                {#each group as [entry, image], j}
                    {@const index = i * gridCols + j}
                    <div class="grid-entry">
                        <!-- svelte-ignore a11y-click-events-have-key-events -->
                        <img class="grid-entry-image"
                             on:click={(e) => handleClick(e, entry, index)}
                        src={image}
                        loading="lazy"
                        alt="thumbnail" />
                    </div>
                {/each}
            </div>
        {/each}
    </Block>
 </Page>
 <style lang="scss">
 .container {
     overflow-x: hidden;
     // Disable pull to refresh
     overscroll-behavior-y: contain;
     // framework7's css conflicts with gradio's
     :global(.block) {
         z-index: unset; // f7 sets it to 1
     }
 }
 // TODO generalize this to all properties!
 :global(.root-container.mobile > .block > .v-pane) {
     flex-direction: column !important;
 }
 .grid-entry {
     display: flex;
     justify-content: center;
     align-items: center;
     aspect-ratio: 1 / 1;
     object-fit: cover;
 }
 .grid-entry-image {
     aspect-ratio: 1 / 1;
     object-fit: cover;
     margin-bottom: var(--f7-grid-gap);
     &:hover {
         cursor: pointer;
         filter: brightness(120%) contrast(120%);
     }
 }
 </style>
--- a/src/mobile/routes/home.svelte
+++ b/src/mobile/routes/home.svelte
@@ -1,35 +0,0 @@
 <script lang="ts">
 import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
 import { Page, Navbar, Button, BlockTitle, Block, List, ListItem } from "framework7-svelte"
 export let app: ComfyApp | null = null;
 async function doLoadDefault() {
     var confirmed = confirm("Would you like to load the default workflow in a new tab?");
     if (confirmed) {
         await app.initDefaultWorkflow();
     }
 }
 </script>
 <Page name="home">
    <Navbar title="Home Page" />
    <BlockTitle>Yo</BlockTitle>
    <Block>
        <div>{app} Nodes</div>
    </Block>
    <List strong inset dividersIos class="components-list searchbar-found">
        <ListItem link="/subworkflows/" title="Workflows">
            <i class="icon icon-f7" slot="media" />
        </ListItem>
        <ListItem link="/graph/" title="Show Node Graph">
            <i class="icon icon-f7" slot="media" />
        </ListItem>
    </List>
    <Block strong outlineIos>
        <Button fill={true} onClick={doLoadDefault}>Load Default Graph</Button>
    </Block>
 </Page>
--- a/src/mobile/routes/list-subworkflows.svelte
+++ b/src/mobile/routes/list-subworkflows.svelte
@@ -1,16 +0,0 @@
 <script lang="ts">
 import ComfyApp from "$lib/components/ComfyApp";
 import { Page, Navbar, Link, BlockTitle, Block, List, ListItem } from "framework7-svelte"
 export let app: ComfyApp;
 </script>
 <Page name="subworkflows">
  <Navbar title="Workflows" backLink="Back" />
    <List strong inset dividersIos class="components-list searchbar-found">
        <ListItem link="/subworkflows/{1}/" title="Workflow 1">
            <i class="icon icon-f7" slot="media" />
        </ListItem>
    </List>
 </Page>
--- a/src/mobile/routes/queue.svelte
+++ b/src/mobile/routes/queue.svelte
@@ -0,0 +1,155 @@
 <script lang="ts">
 import { Page, Navbar, Block, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, List, ListItem, Card, CardHeader, CardContent, CardFooter, f7 } from "framework7-svelte"
 import WidgetContainer from "$lib/components/WidgetContainer.svelte";
 import type ComfyApp from "$lib/components/ComfyApp";
 import { writable, type Writable } from "svelte/store";
 import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
 import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
 import interfaceState from "$lib/stores/interfaceState";
 import { onMount } from "svelte";
 import GenToolbar from '../GenToolbar.svelte'
 import { partition, showLightbox, truncateString } from "$lib/utils";
 	import uiQueueState, { type QueueUIEntry } from "$lib/stores/uiQueueState";
 	import { showMobileLightbox } from "$lib/components/utils";
 	import queueState from "$lib/stores/queueState";
 	import notify from "$lib/notify";
 export let app: ComfyApp
 let _entries: ReadonlyArray<QueueUIEntry> = []
 $: _entries = $uiQueueState.queueUIEntries;
 function onPageBeforeIn() {
     $interfaceState.selectedTab = 0;
 }
 async function interrupt() {
     await app.interrupt();
 }
 async function clearQueue() {
     f7.dialog.confirm("Are you sure you want to clear the current queue?", async () => {
         await app.clearQueue("queue");
         uiQueueState.updateEntries(true)
         notify("Queue cleared!")
     })
 }
 function findPrompt(entry: QueueUIEntry): string {
     let s = ""
     for (const inputs of Object.values(entry.entry.prompt)) {
         if (inputs.class_type === "CLIPTextEncode") {
             for (const [key, value] of Object.entries(inputs.inputs)) {
                 if (key === "text") {
                     s += value + "\n"
                 }
             }
         }
     }
     return truncateString(s, 240);
 }
 async function doCancel(entry: QueueUIEntry) {
     if ($queueState.isInterrupting) {
         return;
     }
     // TODO support interrupting from multiple running items!
     if (entry.status === "running") {
         await app.interrupt();
     }
     else {
         await app.deleteQueueItem("queue", entry.entry.promptID);
     }
     notify("Queue item canceled.")
     uiQueueState.updateEntries(true)
 }
 function getCardImage(entry: QueueUIEntry): string {
     if (entry.images.length > 0)
         return entry.images[0]
     return "https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg"
 }
 </script>
 <Page name="queue" on:pageBeforeIn={onPageBeforeIn}>
    <Navbar>
        <NavLeft></NavLeft>
        <NavTitle>Queue</NavTitle>
        <NavRight>
            <Link on:click={interrupt}>🛑️</Link>
            <Link on:click={clearQueue}>🗑️</Link>
        </NavRight>
    </Navbar>
    <Block>
        <List>
            {#each _entries as entry, i}
                {@const prompt = findPrompt(entry)}
                <ListItem>
                    <Card outlineMd class="demo-card-header-pic">
                        <CardHeader valign="bottom"
                                    style="background-image: url({getCardImage(entry)})">
                            {entry.message}
                        </CardHeader>
                        <CardContent>
                            <p class="list-entry-message">{entry.submessage}</p>
                            <p>
                                {prompt}
                            </p>
                        </CardContent>
                        <CardFooter>
                            <Link on:click={() => doCancel(entry)}>Cancel</Link>
                            {#if entry.date}
                                <p>{entry.date}</p>
                            {/if}
                        </CardFooter>
                    </Card>
                </ListItem>
            {/each}
        </List>
    </Block>
 </Page>
 <style lang="scss">
 .container {
     overflow-x: hidden;
     // Disable pull to refresh
     overscroll-behavior-y: contain;
     // framework7's css conflicts with gradio's
     :global(.block) {
         z-index: unset; // f7 sets it to 1
     }
 }
 // TODO generalize this to all properties!
 :global(.root-container.mobile > .block > .v-pane) {
     flex-direction: column !important;
 }
 .grid-entry {
     display: flex;
     justify-content: center;
     align-items: center;
     aspect-ratio: 1 / 1;
     object-fit: cover;
 }
 .grid-entry-image {
     aspect-ratio: 1 / 1;
     object-fit: cover;
     margin-bottom: var(--f7-grid-gap);
     &:hover {
         cursor: pointer;
         filter: brightness(120%) contrast(120%);
     }
 }
 .list-entry-message {
     font-size: 15pt;
 }
 </style>
--- a/src/mobile/routes/subworkflow.svelte
+++ b/src/mobile/routes/subworkflow.svelte
@@ -1,47 +0,0 @@
 <script lang="ts">
 import { Page, Navbar, Link, BlockTitle, Block, List, ListItem, Toolbar } from "framework7-svelte"
 import WidgetContainer from "$lib/components/WidgetContainer.svelte";
 import type ComfyApp from "$lib/components/ComfyApp";
 import { writable, type Writable } from "svelte/store";
 import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
 import workflowState, { type ComfyBoxWorkflow } from "$lib/stores/workflowState";
 export let subworkflowID: number = -1;
 export let app: ComfyApp
 // TODO move
 let workflow: ComfyBoxWorkflow | null = null
 let layoutState: WritableLayoutStateStore | null = null;
 $: workflow = $workflowState.activeWorkflow;
 $: layoutState = workflow ? workflow.layout : null;
 </script>
 <Page name="subworkflow">
    <Navbar title="Workflow {subworkflowID}" backLink="Back" />
    {#if layoutState}
        <div class="container">
            <WidgetContainer bind:dragItem={$layoutState.root} {layoutState} isMobile={true} classes={["root-container", "mobile"]} />
        </div>
    {/if}
 </Page>
 <style lang="scss">
 .container {
     overflow-x: hidden;
     // Disable pull to refresh
     overscroll-behavior-y: contain;
     // framework7's css conflicts with gradio's
     :global(.block) {
         z-index: unset; // f7 sets it to 1
     }
 }
 // TODO generalize this to all properties!
 :global(.root-container.mobile > .block > .v-pane) {
     flex-direction: column !important;
 }
 </style>
--- a/src/mobile/routes/workflow.svelte
+++ b/src/mobile/routes/workflow.svelte
@@ -0,0 +1,114 @@
 <script lang="ts">
 import { Page, Navbar, Tabs, Tab, NavLeft, NavTitle, NavRight, Link, Actions, ActionsGroup, ActionsButton, ActionsLabel, Sheet, Toolbar, PageContent, Block } from "framework7-svelte"
 import WidgetContainer from "$lib/components/WidgetContainer.svelte";
 import type ComfyApp from "$lib/components/ComfyApp";
 import { writable, type Writable } from "svelte/store";
 import { MenuUp } from 'svelte-bootstrap-icons';
 import type { IDragItem, WritableLayoutStateStore } from "$lib/stores/layoutStates";
 import workflowState, { type ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
 import interfaceState from "$lib/stores/interfaceState";
 import { onMount } from "svelte";
 import GenToolbar from '../GenToolbar.svelte'
 	import { onDestroy } from "svelte";
 export let workflowIndex: number;
 export let app: ComfyApp
 let workflow: ComfyBoxWorkflow;
 let root: IDragItem | null;
 let title = ""
 let actionsOpened = false;
 function onPageBeforeIn() {
     workflow = $workflowState.openedWorkflows[workflowIndex-1]
     if (workflow) {
         workflowState.setActiveWorkflow(app.lCanvas, workflow.id)
     }
     $interfaceState.selectedWorkflowIndex = workflowIndex
     $interfaceState.showingWorkflow = true;
     $interfaceState.selectedTab = 1;
 }
 function onPageBeforeOut() {
     $interfaceState.showingWorkflow = false;
 }
 async function refreshCombos() {
     navigator.vibrate(20)
     await app.refreshComboInNodes()
 }
 function doSaveLocal(): void {
     navigator.vibrate(20)
     app.saveStateToLocalStorage();
 }
 $: layoutState = workflow?.layout;
 $: title = workflow?.attrs?.title || `Workflow: ${workflow?.id || workflowIndex}`;
 $: if (layoutState && $layoutState.root) {
     root = $layoutState.root
 } else {
     root = null;
 }
 </script>
 <Page name="workflow" style="--f7-page-toolbar-bottom-offset: calc(var(--f7-toolbar-height) * 2)"
      on:pageBeforeIn={onPageBeforeIn}
      on:pageBeforeOut={onPageBeforeOut}
 >
    <Navbar>
        <NavLeft backLink="Back" backLinkUrl="/workflows/" backLinkForce={true}></NavLeft>
        <NavTitle>{title}</NavTitle>
        <NavRight>
            <Link icon="icon-bars" on:click={() => {actionsOpened = true;}}>
            <MenuUp />
            </Link>
        </NavRight>
    </Navbar>
    {#if workflow}
        {#if root}
            <div class="container">
                <WidgetContainer bind:dragItem={root} isMobile={true} classes={["root-container"]} {layoutState} />
            </div>
        {/if}
    {:else}
        <div>
            Workflow not found.
        </div>
    {/if}
  <Actions bind:opened={actionsOpened}>
    <ActionsGroup>
      <ActionsLabel>Actions</ActionsLabel>
      <ActionsButton strong on:click={refreshCombos}>Refresh Dropdowns</ActionsButton>
      <ActionsButton strong on:click={doSaveLocal}>Save to Local Storage</ActionsButton>
      <!-- <ActionsButton>Button 2</ActionsButton> -->
      <ActionsButton color="red">Cancel</ActionsButton>
    </ActionsGroup>
  </Actions>
 </Page>
 <style lang="scss">
 .container {
     overflow-x: hidden;
     // Disable pull to refresh
     overscroll-behavior-y: contain;
     // framework7's css conflicts with gradio's
     :global(.block) {
         z-index: unset; // f7 sets it to 1
     }
 }
 // TODO generalize this to all properties!
 :global(.root-container.mobile > .block > .v-pane) {
     flex-direction: column !important;
 }
 .demo-sheet-push {
     bottom: calc(var(--f7-toolbar-height) * 3);
 }
 </style>
--- a/src/mobile/routes/workflows.svelte
+++ b/src/mobile/routes/workflows.svelte
@@ -0,0 +1,74 @@
 <script lang="ts">
 import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
 import workflowState, { ComfyBoxWorkflow, type WorkflowInstID } from "$lib/stores/workflowState";
 import { onMount } from "svelte";
 import interfaceState from "$lib/stores/interfaceState";
 import { f7 } from 'framework7-svelte';
 import { XCircle } from 'svelte-bootstrap-icons';
 import { Page, Navbar, Button, BlockTitle, Block, List, ListItem } from "framework7-svelte"
 export let app: ComfyApp | null = null;
 let fileInput: HTMLInputElement = undefined;
 async function doLoadDefault() {
     f7.dialog.confirm("Would you like to load the default workflow in a new tab?", async () => {
         await app.initDefaultWorkflow();
         app.saveStateToLocalStorage(false);
     })
 }
 function onClickDelete(workflow: ComfyBoxWorkflow, e: Event) {
     e.preventDefault();
     e.stopImmediatePropagation();
     f7.dialog.confirm("Are you sure you want to delete this workflow?", workflow.attrs.title || `Workflow: ${workflow.id}`,
                       () => {
                           app.closeWorkflow(workflow.id);
                           app.saveStateToLocalStorage(false);
                       })}
 function doLoad(): void {
     if (!fileInput)
         return;
     navigator.vibrate(20)
     fileInput.value = null;
     fileInput.click();
 }
 function loadWorkflow(): void {
     app.handleFile(fileInput.files[0]);
 }
 function onPageBeforeIn() {
     $interfaceState.selectedWorkflowIndex = null;
     $interfaceState.selectedTab = 1;
 }
 </script>
 <Page name="home" on:pageBeforeIn={onPageBeforeIn}>
    <Navbar title="Home Page" />
    {#if $workflowState.openedWorkflows}
        <List strong inset dividersIos class="components-list searchbar-found">
            {#each $workflowState.openedWorkflows as workflow, i}
                <ListItem link="/workflows/{i+1}/" transition="f7-cover" title={workflow.attrs.title || `Workflow: ${workflow.id}`}>
                    <svelte:fragment slot="media">
                        <div on:pointerdown={(e) => onClickDelete(workflow, e)}>
                            <XCircle width="1.5em" height="1.5em" />
                        </div>
                    </svelte:fragment>
                </ListItem>
            {/each}
        </List>
    {:else}
        (No workflows opened.)
    {/if}
    <Block strong outlineIos>
        <p class="grid grid-cols-2 grid-gap">
            <Button outline onClick={doLoadDefault}>Load default graph</Button>
            <Button outline onClick={doLoad}>Load from file...</Button>
        </p>
    </Block>
    <input bind:this={fileInput} id="comfy-file-input" style:display="none" type="file" accept=".json" on:change={loadWorkflow} />
 </Page>
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -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 {
@@ -92,33 +90,43 @@ body {
     &.primary {
         background: var(--button-primary-background-fill);
-         &:hover {
+         &:hover:not(:disabled) {
             background: var(--button-primary-background-fill-hover);
         }
     }
     &.secondary {
         background: var(--button-secondary-background-fill);
-         &:hover {
+         &:hover:not(:disabled) {
             background: var(--button-secondary-background-fill-hover);
         }
     }
     &.ternary {
         background: var(--panel-background-fill);
-         &:hover {
+         &:hover:not(:disabled) {
             background: var(--block-background-fill);
         }
         &.selected {
             background: var(--panel-background-fill);
         }
     }
-     &:hover {
+     &:hover:not(:disabled) {
         filter: brightness(85%);
     }
-     &:active {
+     &:active:not(:disabled) {
         filter: brightness(50%)
     }
     &.selected {
-         filter: brightness(80%)
+         color: var(--body-text-color);
         filter: none;
     }
     &:disabled:not(.selected) {
         background: var(--neutral-700);
         color: var(--neutral-400);
         opacity: 50%;
     }
 }
@@ -242,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/stores/configStateTests.ts
+++ b/src/tests/stores/configStateTests.ts
@@ -0,0 +1,33 @@
 import { get } from "svelte/store";
 import configState, { type ConfigState } from "$lib/stores/configState"
 import { expect } from 'vitest';
 import UnitTest from "../UnitTest";
 import { Watch } from "@litegraph-ts/nodes-basic";
 export default class configStateTests extends UnitTest {
    test__loadsDefaultsFromInvalid() {
        const saved = "foo"
        const config = configState.load(saved)
        expect(config).toBeInstanceOf(Object)
        expect(config.comfyUIHostname).toEqual("localhost")
    }
    test__loadsDefaultsFromBlank() {
        const saved = {}
        const config = configState.load(saved)
        expect(config).toBeInstanceOf(Object)
        expect(config.comfyUIHostname).toEqual("localhost")
    }
    test__loadsDefaultsFromInvalidValues() {
        const saved = {
            comfyUIHostname: 1234 as any
        }
        const config = configState.load(saved)
        expect(config).toBeInstanceOf(Object)
        expect(config.comfyUIHostname).toEqual("localhost")
    }
 }
--- a/src/tests/testSuite.ts
+++ b/src/tests/testSuite.ts
@@ -3,3 +3,4 @@ export { default as ComfyGraphTests } from "./ComfyGraphTests"
 export { default as parseA1111Tests } from "./parseA1111Tests"
 export { default as convertA1111ToStdPromptTests } from "./convertA1111ToStdPromptTests"
 export { default as convertVanillaWorkflowTest } from "./convertVanillaWorkflowTests"
 export { default as configStateTests } from "./stores/configStateTests"
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -55,6 +55,7 @@ export default defineConfig({
        },
    },
    build: {
        minify: isProduction,
        sourcemap: true,
        rollupOptions: {
            input: {
Author	SHA1	Message	Date
space-nuko	f0c01a66ce	Mobile queue	2023-05-31 22:25:53 -05:00
space-nuko	4547cc1a27	Mobile gallery	2023-05-31 19:19:23 -05:00
space-nuko	3cd623fd20	Refactor UI queue state	2023-05-31 17:34:14 -05:00
space-nuko	263d62cb34	By index instead of workflow ID	2023-05-31 17:04:00 -05:00
space-nuko	d8ac97cb87	More mobile overhauling	2023-05-31 16:58:34 -05:00
space-nuko	6f3275da00	Mobile overhaul	2023-05-31 15:49:45 -05:00
space-nuko	5474687041	Progressbar on mobile improvement	2023-05-31 14:28:56 -05:00
space-nuko	c537cb71bf	Proper mobile redirection	2023-05-31 11:41:48 -05:00
space-nuko	dbef7d0d70	Merge pull request #95 from space-nuko/frontend-note Frontend Markdown note	2023-05-31 10:51:44 -05:00
space-nuko	5270c6750e	Fix	2023-05-29 18:59:11 -05:00
space-nuko	ac53ba226b	Fix	2023-05-29 18:52:48 -05:00
space-nuko	01514421f3	Fix	2023-05-29 18:49:44 -05:00
space-nuko	8890e45b66	Display mask on image upload	2023-05-29 18:45:08 -05:00
space-nuko	97bc7ce6ba	Update litegraph	2023-05-29 18:29:04 -05:00
space-nuko	cba6e6e47c	Don't render markdown embedded HTML	2023-05-29 18:23:29 -05:00
space-nuko	8b1c8ba9ee	Render markdown in frontend	2023-05-29 18:19:09 -05:00
space-nuko	1a23039b60	Merge pull request #94 from space-nuko/disable-notifications Option to control how notifications are shown	2023-05-29 10:31:40 -05:00
space-nuko	51d77ddc53	Option to control how notifications are shown	2023-05-29 10:27:14 -05:00
space-nuko	a2075ede60	Merge pull request #88 from space-nuko/prompt-settings Settings menu	2023-05-28 20:53:48 -05:00
space-nuko	ce6f3b1273	Improve error list	2023-05-28 20:39:21 -05:00
space-nuko	fe736232a9	Enum support	2023-05-28 20:06:08 -05:00
space-nuko	e411d29f09	Basic settings screen	2023-05-28 18:41:54 -05:00
space-nuko	4d8390115d	Config state temp2	2023-05-28 16:48:33 -05:00
space-nuko	8fc4b74aed	Config state temp	2023-05-28 15:08:33 -05:00
space-nuko	0bc9d06910	Jump to node from widget properties button	2023-05-28 11:49:00 -05:00
space-nuko	3be662c598	Click toast item pointer change	2023-05-28 09:19:44 -05:00
space-nuko	0dce8bc2b3	Merge pull request #83 from space-nuko/mask-canvas Mask canvas	2023-05-28 00:57:16 -05:00
space-nuko	45f7a8d2c1	Fix title	2023-05-28 00:47:51 -05:00
space-nuko	60d0fb3128	Update img2img masked workflow	2023-05-28 00:47:51 -05:00
space-nuko	9a29e124e9	Better combo menu width handling	2023-05-28 00:47:51 -05:00
space-nuko	c255e5b425	Show title for cut off select item entries	2023-05-28 00:47:51 -05:00
space-nuko	3b9d4533f9	Preserve mask when sending output into image upload	2023-05-28 00:47:48 -05:00
space-nuko	cb9e8540a0	Mask canvas for masked img2img	2023-05-28 00:47:27 -05:00
space-nuko	7e2b6111dd	Merge pull request #79 from space-nuko/error-handling Better error display	2023-05-28 00:46:47 -05:00
space-nuko	88d99d2bcb	Improve	2023-05-27 09:35:19 -05:00
space-nuko	a3eddfc350	Use pre	2023-05-27 02:07:25 -05:00
space-nuko	5cb93e6581	Fix	2023-05-27 02:04:20 -05:00
space-nuko	17d6e68b75	Update	2023-05-27 02:02:32 -05:00
space-nuko	35b991728f	Fix	2023-05-27 01:53:49 -05:00
space-nuko	49ede4e2c8	Fix	2023-05-27 01:30:20 -05:00
space-nuko	a0b7418caf	Improve error jumping	2023-05-27 01:13:06 -05:00
space-nuko	d144ec2ccd	Show error list	2023-05-27 00:21:55 -05:00
space-nuko	72af089eab	Support as-yet-released error API upp	2023-05-26 23:04:25 -05:00
space-nuko	1da8dc35ec	Reuse sent gallery image width/height	2023-05-26 19:50:19 -05:00
space-nuko	51e02f8179	Fix subgraphs queue string	2023-05-26 19:50:07 -05:00
space-nuko	32ed6cb5fd	Merge pull request #75 from space-nuko/fix-graph-input-output-tags More subgraph/template fixes	2023-05-26 18:00:18 -05:00
space-nuko	cdcf566a43	Strip user state for upscaleByModel	2023-05-26 17:09:09 -05:00
space-nuko	b3584dd2ad	Default notifications for workflows	2023-05-26 17:06:23 -05:00
space-nuko	60bd989915	Strip tags from top-level nodes when inserting templates	2023-05-26 16:06:54 -05:00
space-nuko	2e6030beca	Merge pull request #74 from space-nuko/fix-graph-input-output-tags Support for subgraph actions/events + switch node	2023-05-26 15:16:23 -05:00
space-nuko	eb335e9be7	Fix litegraph	2023-05-26 14:19:05 -05:00
space-nuko	73e007844a	Default preserve outputs true	2023-05-26 14:01:55 -05:00
space-nuko	e729bc6c46	Update default workflow	2023-05-26 13:57:42 -05:00
space-nuko	d11f66c5ac	fix HR not setting thumbnails	2023-05-26 13:33:05 -05:00
space-nuko	9f5b14a2bf	Update default workflow	2023-05-26 13:27:33 -05:00
space-nuko	74bad3bd1e	Update default workflow	2023-05-26 13:11:34 -05:00
space-nuko	8e27a2611c	Switch node	2023-05-26 12:59:38 -05:00
space-nuko	9faba38754	Merge pull request #73 from space-nuko/fix-graph-input-output-tags Fixes for tag scoping	2023-05-25 22:18:17 -05:00
space-nuko	521ebb0ccf	Fix default workflow	2023-05-25 22:13:38 -05:00
space-nuko	684e115f30	Fixes for tag scoping	2023-05-25 21:59:03 -05:00
space-nuko	6ba17176c6	Merge pull request #72 from space-nuko/builtin-templates Builtin templates	2023-05-25 21:19:25 -05:00