Show free VRAM

Merge pull request #102 from space-nuko/mobile-improvements
Mobile improvements
2023-06-02 10:42:25 -05:00 · 2023-05-31 22:38:50 -05:00 · 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
62 changed files with 3249 additions and 2614 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": false,
-	"builtInTemplates": ["ControlNet", "LoRA x5", "Model Loader", "Positive_Negative", "Seed Randomizer"],
-	"cacheBuiltInResources": true
-}
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4,12 +4,12 @@
 import "@litegraph-ts/core/css/litegraph.css";
 import "./scss/global.scss";

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

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

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

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

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

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

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

 export let app: ComfyApp;

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

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

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

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

 export type SerializedGraphCanvasState = {
    offset: Vector2,
@@ -118,13 +119,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
        //     color = "yellow";
        //     thickness = 5;
        // }
-        if (ss.currentHoveredNodes.has(node.id)) {
-            color = "lightblue";
-        }
-        else if (isRunningNode) {
-            color = "#0f0";
-        }
-        else if (nodeErrors) {
+        if (nodeErrors) {
            const hasExecutionError = nodeErrors.find(e => e.errorType === "execution");
            if (hasExecutionError) {
                blink = true;
@@ -139,6 +134,12 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
            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) {
@@ -193,6 +194,8 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
        }
    }

+    private static CONNECTION_POS: Vector2 = [0, 0];
+
    private highlightNodeInput(node: LGraphNode, inputSlot: SlotNameOrIndex, ctx: CanvasRenderingContext2D) {
        let inputIndex: number;
        if (typeof inputSlot === "number")
@@ -200,7 +203,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
        else
            inputIndex = node.findInputSlotIndexByName(inputSlot)
        if (inputIndex !== -1) {
-            let pos = node.getConnectionPos(true, inputIndex);
+            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();
@@ -330,7 +333,8 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
    /**
     * Handle keypress
     *
-     * Ctrl + M mute/unmute selected nodes
+     * Ctrl + M      mute/unmute selected nodes
+     * Ctrl + Space  open node searchbox
     */
    override processKey(e: KeyboardEvent): boolean | undefined {
        const res = super.processKey(e);
@@ -350,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) {
@@ -363,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();
@@ -700,6 +719,8 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
    }

    jumpToNode(node: LGraphNode) {
+        interfaceState.update(s => { s.isJumpingToNode = true; return s; })
+
        this.closeAllSubgraphs();

        const subgraphs = Array.from(node.iterateParentSubgraphNodes()).reverse();
@@ -709,6 +730,7 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
        }

        this.centerOnNode(node);
+        this.selectNode(node);
    }

    jumpToNodeAndInput(node: LGraphNode, slotIndex: number) {
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -6,7 +6,7 @@ import type { SerializedLGraph, UUID } from "@litegraph-ts/core";
 import type { SerializedLayoutState } from "./stores/layoutStates";
 import type { ComfyNodeDef, ComfyNodeDefInput } from "./ComfyNodeDef";
 import type { WorkflowInstID } from "./stores/workflowState";
-import type { ComfyAPIPromptErrorResponse } from "./apiErrors";
+import type { ComfyAPIPromptErrorResponse, ComfyExecutionError, ComfyInterruptedError } from "./apiErrors";

 export type ComfyPromptRequest = {
    client_id?: string,
@@ -60,6 +60,20 @@ export type ComfyAPIHistoryResponse = {
    error?: string
 }

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

+    private getHostname(): string {
+        let hostname = this.hostname || location.hostname;
+        if (hostname === "localhost") {
+            // For dev use, assume same hostname as connected server
+            hostname = location.hostname;
+        }
+        return hostname;
+    }
+
    private getBackendUrl(): string {
-        const hostname = this.hostname || location.hostname;
+        const hostname = this.getHostname()
        const port = this.port || location.port;
        return `${window.location.protocol}//${hostname}:${port}`
    }
@@ -146,7 +169,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(
@@ -362,4 +385,9 @@ export default class ComfyAPI {
    async interrupt(): Promise<Response> {
        return fetch(this.getBackendUrl() + "/interrupt", { method: "POST" });
    }
+
+    async getSystemStats(): Promise<ComfyAPISystemStatsResponse> {
+        return fetch(this.getBackendUrl() + "/system_stats")
+            .then(async (resp) => (await resp.json()) as ComfyAPISystemStatsResponse);
+    }
 }
--- a/src/lib/components/ComfyApp.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
@@ -39,6 +39,7 @@ import DanbooruTags from "$lib/DanbooruTags";
 import { deserializeTemplateFromSVG, type SerializedComfyBoxTemplate } from "$lib/ComfyBoxTemplate";
 import templateState from "$lib/stores/templateState";
 import { formatValidationError, type ComfyAPIPromptErrorResponse, formatExecutionError, type ComfyExecutionError } from "$lib/apiErrors";
+import systemState from "$lib/stores/systemState";

 export const COMFYBOX_SERIAL_VERSION = 1;

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

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

        // Load previous workflow
@@ -261,18 +268,29 @@ export default class ComfyApp {
        return Promise.resolve();
    }

-    /*
-     * TODO
-     */
    async loadConfig() {
        try {
-            const config = await fetch(`/config.json`, { cache: "no-store" });
-            const newConfig = await config.json() as ConfigState;
-            configState.set({ ...get(configState), ...newConfig });
+            console.log("Loading config.json...")
+            const config = localStorage.getItem("config")
+            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[]> {
@@ -351,7 +369,7 @@ export default class ComfyApp {
        }
    }

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

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

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

@@ -979,7 +1019,7 @@ export default class ComfyApp {
            tag = null;

        if (targetWorkflow.attrs.showDefaultNotifications) {
-            notify("Prompt queued.", { type: "info" });
+            notify("Prompt queued.", { type: "info", showOn: "web" });
        }

        this.processingQueue = true;
--- a/src/lib/components/ComfyBoxWorkflowsView.svelte
+++ b/src/lib/components/ComfyBoxWorkflowsView.svelte
@@ -220,6 +220,26 @@
     }
 }

+ 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();

@@ -247,23 +267,7 @@
         app.lCanvas.jumpToFirstError();
     }

-     const newGraphSize = Math.max(50, graphSize);
-     const willOpenPane = newGraphSize != graphSize
-     graphSize = newGraphSize
-
-     if (willOpenPane) {
-         const graphPane = getGraphPane();
-         if (graphPane) {
-             graphPane.addEventListener("transitionend", jumpToError, { once: true })
-             await tick()
-         }
-         else {
-             jumpToError()
-         }
-     }
-     else {
-         jumpToError()
-     }
+     await openGraph(jumpToError)
 }

 function hideError() {
@@ -273,7 +277,8 @@
 }

 setContext(WORKFLOWS_VIEW, {
-     showError
+     showError,
+     openGraph
 });
 </script>

--- a/src/lib/components/ComfyGraphErrorList.svelte
+++ b/src/lib/components/ComfyGraphErrorList.svelte
@@ -68,88 +68,91 @@
    <div class="error-list-header">
        <button class="error-list-close" on:click={closeList}>✕</button>
    </div>
-    {#each Object.entries(errors.errorsByID) as [nodeID, nodeErrors]}
-        {@const first = nodeErrors[0]}
-        {@const parent = getParentNode(first)}
-        <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">
-                {#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>
+    <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}
-                                        </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]} />
+                                            {#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>
-                                                    </div>
-                                                </Accordion>
-                                            </div>
+                                                    </Accordion>
+                                                </div>
+                                            {/if}
                                        {/if}
-                                    {/if}
+                                    </div>
                                </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}
+                            {#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>
-                                    </div>
-                                </Accordion>
-                            </div>
-                        {/if}
-                    </div>
-                {/each}
+                                    </Accordion>
+                                </div>
+                            {/if}
+                        </div>
+                    {/each}
+                </div>
            </div>
-        </div>
-    {/each}
+        {/each}
+    </div>
 </div>

 <style lang="scss">
@@ -158,7 +161,6 @@
     width: 30%;
     height: 70%;
     margin: 1.0rem;
-     overflow-y: auto;
     position: absolute;
     right: 0;
     bottom: 0;
@@ -186,6 +188,11 @@
     }
 }

+ .error-list-scroll-container {
+     height: calc(100% - 24px);
+     overflow-y: auto;
+ }
+
 .error-node-details {
     font-size: 14pt;
     color: #ddd;
@@ -200,7 +207,7 @@
     font-weight: initial;
 }

- .error-entries:last-child {
+ .error-entries:not(.last):last-child {
     border-bottom: 1px solid #ccc;
 }

--- a/src/lib/components/ComfyPaneView.svelte
+++ b/src/lib/components/ComfyPaneView.svelte
@@ -15,7 +15,8 @@
 import ComfyProperties from "./ComfyProperties.svelte";
 import ComfyQueue from "./ComfyQueue.svelte";
 import ComfyTemplates from "./ComfyTemplates.svelte";
-	import { SvelteComponent } from "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/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"
@@ -11,8 +12,12 @@
 import ComfyNumberProperty from "./ComfyNumberProperty.svelte";
 import ComfyComboProperty from "./ComfyComboProperty.svelte";
 import type { ComfyWidgetNode } from "$lib/nodes/widgets";
-	import type { ComfyBoxWorkflow } from "$lib/stores/workflowState";
+ 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,30 +27,44 @@
 let target: IDragItem | null = null;
 let node: LGraphNode | null = null;

- $: if (layoutState) {
-     if ($selectionState.currentSelection.length > 0) {
-         node = null;
-         const targetId = $selectionState.currentSelection.slice(-1)[0]
-         const entry = $layoutState.allItems[targetId]
-         if (entry != null) {
-             target = entry.dragItem
-             if (target.type === "widget") {
-                 node = (target as WidgetLayout).node
+ $: {
+     if ($interfaceState.isJumpingToNode) {
+         $interfaceState.isJumpingToNode = false;
+     }
+     {
+         if (layoutState) {
+             if ($selectionState.currentSelection.length > 0) {
+                 node = null;
+                 const targetId = $selectionState.currentSelection.slice(-1)[0]
+                 const entry = $layoutState.allItems[targetId]
+                 if (entry != null) {
+                     target = entry.dragItem
+                     if (target.type === "widget") {
+                         node = (target as WidgetLayout).node
+                     }
+                 }
+             }
+             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
+                 node = null;
             }
         }
+         else {
+             target = null;
+             node = null;
+         }
     }
-     else if ($selectionState.currentSelectionNodes.length > 0) {
-         target = null;
-         node = $selectionState.currentSelectionNodes[0]
-     }
-     else {
-         target = null
-         node = null;
-     }
- }
- else {
-     target = null;
-     node = null;
 }

 $: if (target) {
@@ -291,195 +310,244 @@
     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="top">
-        <div class="target-name">
-            <span>
-                <span class="title">{target?.attrs?.title || node?.title || "Workflow"}<span>
+    <div class="props-scroller">
+        <div class="top">
+            <div class="target-name">
+                <div class="target-title-wrapper">
+                    <span class="title">{target?.attrs?.title || node?.title || "Workflow"}</span>
                    {#if targetType !== ""}
                        <span class="type">({targetType})</span>
                    {/if}
-                </span>
-                </span>
+                </div>
+                {#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>
-    <div class="props-entries">
-        {#if workflow != null && layoutState != null}
-            {#key workflow.id}
-                {#key $layoutStates.refreshPropsPanel}
-                    {#each ALL_ATTRIBUTES as category(category.categoryName)}
-                        <div class="category-name">
-                            <span>
-                                <span class="title">{category.categoryName}</span>
-                            </span>
-                        </div>
-                        {#each category.specs as spec(spec.id)}
-                            {#if validWidgetAttribute(spec, target)}
-                                <div class="props-entry">
-                                    {#if spec.type === "string"}
-                                        <TextBox
-                                            value={getAttribute(target, spec)}
-                                            on:change={(e) => updateAttribute(spec, target, e.detail)}
-                                            on:input={(e) => updateAttribute(spec, target, e.detail)}
-                                            disabled={!$uiState.uiUnlocked || !spec.editable}
-                                            label={spec.name}
-                                            max_lines={spec.multiline ? 5 : 1}
-                                            />
-                                    {:else if spec.type === "boolean"}
-                                            <Checkbox
+        <div class="props-entries">
+            {#if workflow != null && layoutState != null}
+                {#key workflow.id}
+                    {#key $layoutStates.refreshPropsPanel}
+                        {#each ALL_ATTRIBUTES as category(category.categoryName)}
+                            <div class="category-name">
+                                <span>
+                                    <span class="title">{category.categoryName}</span>
+                                </span>
+                            </div>
+                            {#each category.specs as spec(spec.id)}
+                                {#if validWidgetAttribute(spec, target)}
+                                    <div class="props-entry">
+                                        {#if spec.type === "string"}
+                                            <TextBox
                                                value={getAttribute(target, spec)}
                                                on:change={(e) => updateAttribute(spec, target, e.detail)}
+                                                on:input={(e) => updateAttribute(spec, target, e.detail)}
                                                disabled={!$uiState.uiUnlocked || !spec.editable}
                                                label={spec.name}
+                                                max_lines={spec.multiline ? 5 : 1}
                                                />
-                                    {:else if spec.type === "number"}
-                                                <ComfyNumberProperty
-                                                    name={spec.name}
+                                        {:else if spec.type === "boolean"}
+                                                <Checkbox
                                                    value={getAttribute(target, spec)}
-                                                    step={spec.step || 1}
-                                                    min={spec.min || -1024}
-                                                    max={spec.max || 1024}
-                                                    disabled={!$uiState.uiUnlocked || !spec.editable}
                                                    on:change={(e) => updateAttribute(spec, target, e.detail)}
+                                                    disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                    label={spec.name}
                                                    />
-                                    {:else if spec.type === "enum"}
-                                                    <ComfyComboProperty
+                                        {:else if spec.type === "number"}
+                                                    <ComfyNumberProperty
                                                        name={spec.name}
                                                        value={getAttribute(target, spec)}
-                                                        values={spec.values}
+                                                        step={spec.step || 1}
+                                                        min={spec.min || -1024}
+                                                        max={spec.max || 1024}
                                                        disabled={!$uiState.uiUnlocked || !spec.editable}
                                                        on:change={(e) => updateAttribute(spec, target, e.detail)}
                                                        />
-                                    {/if}
-                                </div>
-                            {:else if node}
-                                {#if validNodeProperty(spec, node)}
-                                    <div class="props-entry">
-                                        {#if spec.type === "string"}
-                                            <TextBox
-                                                value={getProperty(node, spec)}
-                                                on:change={(e) => updateProperty(spec, e.detail)}
-                                                on:input={(e) => updateProperty(spec, e.detail)}
-                                                label={spec.name}
-                                                disabled={!$uiState.uiUnlocked || !spec.editable}
-                                                max_lines={spec.multiline ? 5 : 1}
-                                                />
-                                        {:else if spec.type === "boolean"}
-                                                <Checkbox
-                                                    value={getProperty(node, spec)}
-                                                    label={spec.name}
-                                                    disabled={!$uiState.uiUnlocked || !spec.editable}
-                                                    on:change={(e) => updateProperty(spec, e.detail)}
-                                                    />
-                                        {:else if spec.type === "number"}
-                                                    <ComfyNumberProperty
-                                                        name={spec.name}
-                                                        value={getProperty(node, spec)}
-                                                        step={spec.step || 1}
-                                                        min={spec.min || -1024}
-                                                        max={spec.max || 1024}
-                                                        disabled={!$uiState.uiUnlocked || !spec.editable}
-                                                        on:change={(e) => updateProperty(spec, e.detail)}
-                                                        />
                                        {:else if spec.type === "enum"}
                                                        <ComfyComboProperty
                                                            name={spec.name}
-                                                            value={getProperty(node, spec)}
+                                                            value={getAttribute(target, spec)}
                                                            values={spec.values}
                                                            disabled={!$uiState.uiUnlocked || !spec.editable}
-                                                            on:change={(e) => updateProperty(spec, e.detail)}
+                                                            on:change={(e) => updateAttribute(spec, target, e.detail)}
                                                            />
                                        {/if}
                                    </div>
-                                {:else if validNodeVar(spec, node)}
+                                {:else if node}
+                                    {#if validNodeProperty(spec, node)}
+                                        <div class="props-entry">
+                                            {#if spec.type === "string"}
+                                                <TextBox
+                                                    value={getProperty(node, spec)}
+                                                    on:change={(e) => updateProperty(spec, e.detail)}
+                                                    on:input={(e) => updateProperty(spec, e.detail)}
+                                                    label={spec.name}
+                                                    disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                    max_lines={spec.multiline ? 5 : 1}
+                                                    />
+                                            {:else if spec.type === "boolean"}
+                                                    <Checkbox
+                                                        value={getProperty(node, spec)}
+                                                        label={spec.name}
+                                                        disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                        on:change={(e) => updateProperty(spec, e.detail)}
+                                                        />
+                                            {:else if spec.type === "number"}
+                                                        <ComfyNumberProperty
+                                                            name={spec.name}
+                                                            value={getProperty(node, spec)}
+                                                            step={spec.step || 1}
+                                                            min={spec.min || -1024}
+                                                            max={spec.max || 1024}
+                                                            disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                            on:change={(e) => updateProperty(spec, e.detail)}
+                                                            />
+                                            {:else if spec.type === "enum"}
+                                                            <ComfyComboProperty
+                                                                name={spec.name}
+                                                                value={getProperty(node, spec)}
+                                                                values={spec.values}
+                                                                disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                                on:change={(e) => updateProperty(spec, e.detail)}
+                                                                />
+                                            {/if}
+                                        </div>
+                                    {:else if validNodeVar(spec, node)}
+                                        <div class="props-entry">
+                                            {#if spec.type === "string"}
+                                                <TextBox
+                                                    value={getVar(node, spec)}
+                                                    on:change={(e) => updateVar(spec, e.detail)}
+                                                    on:input={(e) => updateVar(spec, e.detail)}
+                                                    label={spec.name}
+                                                    disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                    max_lines={spec.multiline ? 5 : 1}
+                                                    />
+                                            {:else if spec.type === "boolean"}
+                                                    <Checkbox
+                                                        value={getVar(node, spec)}
+                                                        on:change={(e) => updateVar(spec, e.detail)}
+                                                        disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                        label={spec.name}
+                                                        />
+                                            {:else if spec.type === "number"}
+                                                        <ComfyNumberProperty
+                                                            name={spec.name}
+                                                            value={getVar(node, spec)}
+                                                            step={spec.step || 1}
+                                                            min={spec.min || -1024}
+                                                            max={spec.max || 1024}
+                                                            disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                            on:change={(e) => updateVar(spec, e.detail)}
+                                                            />
+                                            {:else if spec.type === "enum"}
+                                                            <ComfyComboProperty
+                                                                name={spec.name}
+                                                                value={getVar(node, spec)}
+                                                                values={spec.values}
+                                                                disabled={!$uiState.uiUnlocked || !spec.editable}
+                                                                on:change={(e) => updateVar(spec, e.detail)}
+                                                                />
+                                            {/if}
+                                        </div>
+                                    {/if}
+                                {:else if !node && !target && validWorkflowAttribute(spec)}
                                    <div class="props-entry">
                                        {#if spec.type === "string"}
                                            <TextBox
-                                                value={getVar(node, spec)}
-                                                on:change={(e) => updateVar(spec, e.detail)}
-                                                on:input={(e) => updateVar(spec, e.detail)}
+                                                value={getWorkflowAttribute(spec)}
+                                                on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
+                                                on:input={(e) => updateWorkflowAttribute(spec, e.detail)}
                                                label={spec.name}
                                                disabled={!$uiState.uiUnlocked || !spec.editable}
                                                max_lines={spec.multiline ? 5 : 1}
                                                />
                                        {:else if spec.type === "boolean"}
                                                <Checkbox
-                                                    value={getVar(node, spec)}
-                                                    on:change={(e) => updateVar(spec, e.detail)}
+                                                    value={getWorkflowAttribute(spec)}
+                                                    on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
                                                    disabled={!$uiState.uiUnlocked || !spec.editable}
                                                    label={spec.name}
                                                    />
                                        {:else if spec.type === "number"}
                                                    <ComfyNumberProperty
                                                        name={spec.name}
-                                                        value={getVar(node, spec)}
+                                                        value={getWorkflowAttribute(spec)}
                                                        step={spec.step || 1}
                                                        min={spec.min || -1024}
                                                        max={spec.max || 1024}
                                                        disabled={!$uiState.uiUnlocked || !spec.editable}
-                                                        on:change={(e) => updateVar(spec, e.detail)}
+                                                        on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
                                                        />
                                        {:else if spec.type === "enum"}
                                                        <ComfyComboProperty
                                                            name={spec.name}
-                                                            value={getVar(node, spec)}
+                                                            value={getWorkflowAttribute(spec)}
                                                            values={spec.values}
                                                            disabled={!$uiState.uiUnlocked || !spec.editable}
-                                                            on:change={(e) => updateVar(spec, e.detail)}
+                                                            on:change={(e) => updateWorkflowAttribute(spec, e.detail)}

                                                            />
                                        {/if}
                                    </div>
-                            {:else if !node && !target && validWorkflowAttribute(spec)}
-                                <div class="props-entry">
-                                    {#if spec.type === "string"}
-                                        <TextBox
-                                            value={getWorkflowAttribute(spec)}
-                                            on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
-                                            on:input={(e) => updateWorkflowAttribute(spec, e.detail)}
-                                            label={spec.name}
-                                            disabled={!$uiState.uiUnlocked || !spec.editable}
-                                            max_lines={spec.multiline ? 5 : 1}
-                                            />
-                                    {:else if spec.type === "boolean"}
-                                            <Checkbox
-                                                value={getWorkflowAttribute(spec)}
-                                                on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
-                                                disabled={!$uiState.uiUnlocked || !spec.editable}
-                                                label={spec.name}
-                                                />
-                                    {:else if spec.type === "number"}
-                                                <ComfyNumberProperty
-                                                    name={spec.name}
-                                                    value={getWorkflowAttribute(spec)}
-                                                    step={spec.step || 1}
-                                                    min={spec.min || -1024}
-                                                    max={spec.max || 1024}
-                                                    disabled={!$uiState.uiUnlocked || !spec.editable}
-                                                    on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
-                                                    />
-                                    {:else if spec.type === "enum"}
-                                                    <ComfyComboProperty
-                                                        name={spec.name}
-                                                        value={getWorkflowAttribute(spec)}
-                                                        values={spec.values}
-                                                        disabled={!$uiState.uiUnlocked || !spec.editable}
-                                                        on:change={(e) => updateWorkflowAttribute(spec, e.detail)}
-
-                                                        />
-                                    {/if}
-                                </div>
+                                {/if}
                            {/each}
-                        {/each}
+                        {/each}
                    {/key}
-                {/key}
-            {/key}
+                {/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
@@ -16,6 +16,7 @@
 <script lang="ts">
 import queueState, { type CompletedQueueEntry, type QueueEntry, type QueueEntryStatus } from "$lib/stores/queueState";
 import ProgressBar from "./ProgressBar.svelte";
+ import SystemStatsBar from "./SystemStatsBar.svelte";
 import Spinner from "./Spinner.svelte";
 import PromptDisplay from "./PromptDisplay.svelte";
 import { List, ListUl, Grid } from "svelte-bootstrap-icons";
@@ -30,6 +31,7 @@
 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;

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

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

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

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

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

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

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

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

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

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

 async function interrupt() {
@@ -351,6 +242,9 @@
            <div class="node-name">
                <span>Node: {getNodeInfo($queueState.runningNodeID)}</span>
            </div>
+            <div>
+                <SystemStatsBar />
+            </div>
            <div>
                <ProgressBar value={$queueState.progress?.value} max={$queueState.progress?.max} />
            </div>
@@ -373,7 +267,8 @@
 $bottom-bar-height: 70px;
 $workflow-tabs-height: 2.5rem;
 $mode-buttons-height: 30px;
- $queue-height: calc(100vh - #{$pending-height} - #{$pane-mode-buttons-height} - #{$mode-buttons-height} - #{$bottom-bar-height} - #{$workflow-tabs-height} - 0.9rem);
+ $system-stats-bar-height: 24px;
+ $queue-height: calc(100vh - #{$pending-height} - #{$pane-mode-buttons-height} - #{$mode-buttons-height} - #{$bottom-bar-height} - #{$workflow-tabs-height} - 0.9rem - #{$system-stats-bar-height});
 $queue-height-history: calc(#{$queue-height} - #{$display-mode-buttons-height});

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

     img {
+         position: absolute;
+         top: 0;
+         left: 0;
         width: 100%;
         height: 100%;
         max-width: 100%;
--- a/src/lib/components/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/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 max: number = 1024
+ export let min: number | null = null
+ 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">
-        <label>
-            <BlockTitle>{label}</BlockTitle>
-        </label>
+        {#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,9 +97,16 @@
     opacity: 1;
 }

- input[type="number"]:focus {
-     box-shadow: var(--input-shadow-focus);
-     border-color: var(--input-border-color-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 {
@@ -107,4 +116,5 @@
 input[disabled] {
     cursor: not-allowed;
 }
+
 </style>
--- a/src/lib/components/OnClickToastItem.svelte
+++ b/src/lib/components/OnClickToastItem.svelte
@@ -16,3 +16,9 @@

 <!-- 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/SystemStatsBar.svelte
+++ b/src/lib/components/SystemStatsBar.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { ComfyDevice } from "$lib/api";
+	import systemState from "$lib/stores/systemState";
+
+ export let value: number | null = null;
+ export let max: number | null = null;
+ export let classes: string = "";
+ export let styles: string = "";
+ let percent: number = 0;
+ let totalGB: string = "";
+ let usedGB: string = "";
+ let text: string = ""
+
+ let device: ComfyDevice | null = null;
+ $: device = $systemState.devices[0]
+
+ function toGB(bytes: number): string {
+     return (bytes / 1024 / 1024 / 1024).toFixed(1)
+ }
+
+ $: if (device) {
+     percent = (1 - (device.vram_free / device.vram_total)) * 100;
+     totalGB = toGB(device.vram_total);
+     usedGB = toGB(device.vram_total - device.vram_free);
+     text = `${usedGB} / ${totalGB}GB (${percent.toFixed(1)}%)`
+ } else {
+     percent = 0
+     totalGB = ""
+     usedGB = ""
+     text = "??.?%"
+ }
+</script>
+
+<div class="progress {classes}" style={styles}>
+    <div class="bar" style="width: {percent}%;">
+        <span class="label">VRAM: {text}</span>
+    </div>
+</div>
+
+<style>
+ .progress {
+     height: 18px;
+     margin: 5px;
+     text-align: center;
+     color: var(--neutral-400);
+     border: 1px solid var(--neutral-500);
+     padding: 0px;
+     position: relative;
+ }
+
+ .bar {
+     height: 100%;
+     background: var(--secondary-800);
+ }
+
+ .label {
+     font-size: 8pt;
+     position: absolute;
+     margin: 0;
+     left: 0;
+     right: 0;
+     top: 50%;
+     transform: translateY(-50%);
+ }
+</style>
--- a/src/lib/components/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/utils.ts
+++ b/src/lib/components/utils.ts
@@ -2,6 +2,9 @@ import type ComfyGraphCanvas from "$lib/ComfyGraphCanvas";
 import { type ContainerLayout, type IDragItem, type TemplateLayout, type WritableLayoutStateStore } from "$lib/stores/layoutStates"
 import type { LGraphCanvas, Vector2 } from "@litegraph-ts/core";
 import { get } from "svelte/store";
+import { PhotoBrowser, f7 } from "framework7-svelte";
+import { ImageViewer } from "$lib/ImageViewer";
+import interfaceState from "$lib/stores/interfaceState";

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

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

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

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

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

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

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

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

                configureWidgetNodeProperties(serWidgetNode, inputOpts)

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

            if (group == null)
                group = layoutState.addContainer(isOutputNode ? right : left, { title: node.title || node.type })
--- a/src/lib/nodes/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/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,6 +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,
@@ -20,6 +21,9 @@ 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) {
            playSound(sound)
--- a/src/lib/nodes/actions/ComfySendOutputAction.ts
+++ b/src/lib/nodes/actions/ComfySendOutputAction.ts
@@ -8,6 +8,7 @@ import notify from "$lib/notify";
 import workflowState from "$lib/stores/workflowState";
 import { get } from "svelte/store";
 import type ComfyApp from "$lib/components/ComfyApp";
+import interfaceState from "$lib/stores/interfaceState";

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

        this.isActive = true;

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

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

+    let icon = null;
+    if (options.imageUrl) {
+        icon = `<img src="${options.imageUrl}"/>`
+    }
+
    const notification = f7.notification.create({
        title: options.title,
        titleRightText: 'now',
@@ -34,7 +39,8 @@ function notifyf7(text: string, options: NotifyOptions) {
        text: text,
        closeOnClick: true,
        closeTimeout,
-        on
+        on,
+        icon
    });
    notification.open();
 }
--- a/src/lib/stores/configDefs.ts
+++ b/src/lib/stores/configDefs.ts
@@ -0,0 +1,250 @@
+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 defPollSystemStatsInterval: ConfigDefNumber<"pollSystemStatsInterval"> = {
+    name: "pollSystemStatsInterval",
+    type: "number",
+    defaultValue: 1000,
+    category: "behavior",
+    description: "Interval in milliseconds to refresh system stats (total/free VRAM). Set to 0 to disable",
+    options: {
+        min: 0,
+        max: 60000,
+        step: 100
+    }
+};
+
+const defBuiltInTemplates: ConfigDefStringArray<"builtInTemplates"> = {
+    name: "builtInTemplates",
+    type: "string[]",
+    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,
+    defPollSystemStatsInterval,
+    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';
-
-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
-}
+import { defaultConfig, type ConfigState, type ConfigDefAny, CONFIG_DEFS_BY_NAME, validateConfigOption, NotificationState } from './configDefs';

 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(
-    {
-        comfyUIHostname: "localhost",
-        comfyUIPort: 8188,
-        alwaysStripUserState: false,
-        promptForWorkflowName: false,
-        confirmWhenUnloadingUnsavedChanges: true,
-        builtInTemplates: [],
-        cacheBuiltInResources: true,
-    })
+const store: Writable<ConfigState> = writable({ ...defaultConfig })
+const callbacks: Record<string, ConfigOnChangeCallback<any>[]> = {}
+let changedOptions: Partial<Record<keyof ConfigState, [any, any]>> = {}

 function getBackendURL(): string {
    const state = get(store);
-    return `${window.location.protocol}//${state.comfyUIHostname}:${state.comfyUIPort}`
+    let hostname = state.comfyUIHostname
+    if (hostname === "localhost") {
+        // For dev use, assume same hostname as connected server
+        hostname = location.hostname;
+    }
+    return `${window.location.protocol}//${hostname}:${state.comfyUIPort}`
+}
+
+function canShowNotificationText(): boolean {
+    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
@@ -690,7 +690,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
            }
        ]
    }
-];
+] as const;

 // This is needed so the specs can be iterated with svelte's keyed #each.
 let i = 0;
@@ -812,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,
-    findLayoutForNode: (nodeId: ComfyNodeID) => IDragItem | null,
+    findLayoutEntryForNode: (nodeId: NodeID) => DragItemEntry | null,
+    findLayoutForNode: (nodeId: NodeID) => IDragItem | null,
    iterateBreadthFirst: (id?: DragItemID | null) => Iterable<DragItemEntry>,
    serialize: () => SerializedLayoutState,
    serializeAtRoot: (rootID: DragItemID) => SerializedLayoutState,
@@ -1216,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"
@@ -1226,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;
@@ -1511,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]
-    if (entry && entry.dragItem.type === "widget")
-        return entry.dragItem as WidgetLayout;
-
-    return null;
+    return layout.findLayoutForNode(node.id);
 }

 export type LayoutStateStores = {
@@ -1543,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
@@ -7,6 +7,8 @@ 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" | "validation_failed" | "error" | "interrupted" | "all_cached" | "unknown";

@@ -283,14 +285,18 @@ 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) {
-                        notify("Prompt finished!", { type: "success" });
-                        playSound("notification.mp3")
+                        if (configState.canShowNotificationText()) {
+                            notify("Prompt finished!", { type: "success" });
+                        }
+                        if (configState.canPlayNotificationSound()) {
+                            playSound("notification.mp3")
+                        }
                    }
                    moveToCompleted(index, queue, "success")
                }
@@ -439,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;
--- a/src/lib/stores/systemState.ts
+++ b/src/lib/stores/systemState.ts
@@ -0,0 +1,39 @@
+import { debounce, isMobileBrowser } from '$lib/utils';
+import { get, writable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
+import type { WorkflowInstID, WorkflowReceiveOutputTargets } from './workflowState';
+import modalState, { type ModalData } from './modalState';
+import type { SlotType } from '@litegraph-ts/core';
+import type ComfyApp from '$lib/components/ComfyApp';
+import SendOutputModal, { type SendOutputModalResult } from "$lib/components/modal/SendOutputModal.svelte";
+import workflowState from './workflowState';
+import type { ComfyAPISystemStatsResponse, ComfyDevice } from '$lib/api';
+
+
+
+export type SystemState = {
+    devices: ComfyDevice[]
+}
+
+type SystemStateOps = {
+    updateState: (resp: ComfyAPISystemStatsResponse) => void
+}
+
+export type WritableSystemStateStore = Writable<SystemState> & SystemStateOps;
+const store: Writable<SystemState> = writable(
+    {
+        devices: []
+    })
+
+function updateState(resp: ComfyAPISystemStatsResponse) {
+    store.set({
+        devices: resp.devices
+    })
+}
+
+const interfaceStateStore: WritableSystemStateStore =
+{
+    ...store,
+    updateState
+}
+export default interfaceStateStore;
--- a/src/lib/stores/uiQueueState.ts
+++ b/src/lib/stores/uiQueueState.ts
@@ -0,0 +1,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/workflowState.ts
+++ b/src/lib/stores/workflowState.ts
@@ -404,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")
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -4,10 +4,11 @@ import type { FileData as GradioFileData } from "@gradio/upload";
 import { Subgraph, type LGraph, type LGraphNode, type LLink, type SerializedLGraph, type UUID, type NodeID, type SlotType, type Vector4, type SerializedLGraphNode } from "@litegraph-ts/core";
 import { get } from "svelte/store";
 import type { ComfyNodeID } from "./api";
-import { type SerializedPrompt } from "./components/ComfyApp";
-import workflowState from "./stores/workflowState";
+import ComfyApp, { type SerializedPrompt } from "./components/ComfyApp";
+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)
@@ -618,6 +619,9 @@ export async function readFileToText(file: File): Promise<string> {
        reader.onload = async () => {
            resolve(reader.result as string);
        };
+        reader.onerror = async () => {
+            reject(reader.error);
+        }
        reader.readAsText(file);
    })
 }
@@ -635,6 +639,9 @@ export function nextLetter(s: string): string {
 }

 export function playSound(sound: string) {
+    if (!configState.canPlayNotificationSound())
+        return;
+
    const url = `${location.origin}/sound/${sound}`;
    const audio = new Audio(url);
    audio.play();
@@ -706,3 +713,31 @@ export function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
        canvas.toBlob(resolve);
    });
 }
+
+export type SafetensorsMetadata = Record<string, string>
+
+export async function getSafetensorsMetadata(folder: string, filename: string): Promise<SafetensorsMetadata> {
+    const url = configState.getBackendURL();
+    const params = new URLSearchParams({ filename })
+
+    return fetch(new Request(url + `/view_metadata/${folder}?` + params)).then(r => r.json())
+}
+
+export function partition<T>(myArray: T[], chunkSize: number): T[] {
+    let index = 0;
+    const arrayLength = myArray.length;
+    const tempArray = [];
+
+    for (index = 0; index < arrayLength; index += chunkSize) {
+        const myChunk = myArray.slice(index, index + chunkSize);
+        tempArray.push(myChunk);
+    }
+
+    return tempArray;
+}
+
+const MOBILE_USER_AGENTS = ["iPhone", "iPad", "Android", "BlackBerry", "WebOs"].map(a => new RegExp(a, "i"))
+
+export function isMobileBrowser(userAgent: string): boolean {
+    return MOBILE_USER_AGENTS.some(a => userAgent.match(a))
+}
--- 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() {
@@ -173,7 +160,10 @@
            on:select={(e) => handleSelect(e.detail.index)}
            on:blur
            on:filter={onFilter}>
-            <div class="comfy-select-list" slot="list" let:filteredItems style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
+            <div class="comfy-select-list" slot="list"
+                 class:mobile={isMobile}
+                 let:filteredItems
+                 style:--maxLabelWidth={node.maxLabelWidthChars || 100}>
                {#if filteredItems.length > 0}
                    {@const itemSize = isMobile ? 50 : 25}
                    {@const itemsToShow = isMobile ? 10 : 30}
@@ -291,9 +281,14 @@

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@mixin square-button {
@@ -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	f08f50951f	Show free VRAM	2023-06-02 10:42:25 -05:00
space-nuko	173e9aa61a	Merge pull request #102 from space-nuko/mobile-improvements Mobile improvements	2023-05-31 22:38:50 -05:00
space-nuko	f0c01a66ce	Mobile queue	2023-05-31 22:25:53 -05:00
space-nuko	4547cc1a27	Mobile gallery	2023-05-31 19:19:23 -05:00
space-nuko	3cd623fd20	Refactor UI queue state	2023-05-31 17:34:14 -05:00
space-nuko	263d62cb34	By index instead of workflow ID	2023-05-31 17:04:00 -05:00
space-nuko	d8ac97cb87	More mobile overhauling	2023-05-31 16:58:34 -05:00
space-nuko	6f3275da00	Mobile overhaul	2023-05-31 15:49:45 -05:00
space-nuko	5474687041	Progressbar on mobile improvement	2023-05-31 14:28:56 -05:00
space-nuko	c537cb71bf	Proper mobile redirection	2023-05-31 11:41:48 -05:00
space-nuko	dbef7d0d70	Merge pull request #95 from space-nuko/frontend-note Frontend Markdown note	2023-05-31 10:51:44 -05:00
space-nuko	5270c6750e	Fix	2023-05-29 18:59:11 -05:00
space-nuko	ac53ba226b	Fix	2023-05-29 18:52:48 -05:00
space-nuko	01514421f3	Fix	2023-05-29 18:49:44 -05:00
space-nuko	8890e45b66	Display mask on image upload	2023-05-29 18:45:08 -05:00
space-nuko	97bc7ce6ba	Update litegraph	2023-05-29 18:29:04 -05:00
space-nuko	cba6e6e47c	Don't render markdown embedded HTML	2023-05-29 18:23:29 -05:00
space-nuko	8b1c8ba9ee	Render markdown in frontend	2023-05-29 18:19:09 -05:00
space-nuko	1a23039b60	Merge pull request #94 from space-nuko/disable-notifications Option to control how notifications are shown	2023-05-29 10:31:40 -05:00
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