Update frontend to v1.9.17 (#6814)

Co-authored-by: huchenlei <20929282+huchenlei@users.noreply.github.com>

web/assets/BaseViewTemplate-DlGljfEG.js

@@ -1,4 +1,4 @@
-import { d as defineComponent, U as ref, p as onMounted, b4 as isElectron, W as nextTick, b5 as electronAPI, o as openBlock, f as createElementBlock, i as withDirectives, v as vShow, j as unref, b6 as isNativeWindow, m as createBaseVNode, A as renderSlot, ai as normalizeClass } from "./index-DqqhYDnY.js";
+import { d as defineComponent, T as ref, p as onMounted, b8 as isElectron, V as nextTick, b9 as electronAPI, o as openBlock, f as createElementBlock, i as withDirectives, v as vShow, j as unref, ba as isNativeWindow, m as createBaseVNode, A as renderSlot, aj as normalizeClass } from "./index-DqXp9vW4.js";
 const _hoisted_1 = { class: "flex-grow w-full flex items-center justify-center overflow-auto" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "BaseViewTemplate",
@@ -27,7 +27,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["font-sans w-screen h-screen flex flex-col pointer-events-auto", [
+        class: normalizeClass(["font-sans w-screen h-screen flex flex-col", [
           props.dark ? "text-neutral-300 bg-neutral-900 dark-theme" : "text-neutral-900 bg-neutral-300"
         ]])
       }, [
@@ -48,4 +48,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as _
 };
-//# sourceMappingURL=BaseViewTemplate-Cz111_1A.js.map
+//# sourceMappingURL=BaseViewTemplate-DlGljfEG.js.map

web/assets/DesktopStartView-B2BMUZxW.js

@@ -0,0 +1,19 @@
+import { d as defineComponent, o as openBlock, y as createBlock, z as withCtx, k as createVNode, j as unref, bE as script } from "./index-DqXp9vW4.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-DlGljfEG.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DesktopStartView",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, { dark: "" }, {
+        default: withCtx(() => [
+          createVNode(unref(script), { class: "m-8 w-48 h-48" })
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=DesktopStartView-B2BMUZxW.js.map

web/assets/DesktopStartView-FKlxS2Lt.js

@@ -1,22 +0,0 @@
-import { d as defineComponent, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, k as createVNode, j as unref, bz as script } from "./index-DqqhYDnY.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-Cz111_1A.js";
-const _hoisted_1 = { class: "max-w-screen-sm w-screen p-8" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "DesktopStartView",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, { dark: "" }, {
-        default: withCtx(() => [
-          createBaseVNode("div", _hoisted_1, [
-            createVNode(unref(script), { mode: "indeterminate" })
-          ])
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=DesktopStartView-FKlxS2Lt.js.map

web/assets/DesktopUpdateView-CxchaIvw.css

@@ -0,0 +1,20 @@
+
+.download-bg[data-v-8d77828d]::before {
+  position: absolute;
+  margin: 0px;
+  color: var(--p-text-muted-color);
+  font-family: 'primeicons';
+  top: -2rem;
+  right: 2rem;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  opacity: 0.02;
+  font-size: min(14rem, 90vw);
+  z-index: 0
+}

web/assets/DesktopUpdateView-DWsew03S.js

@@ -0,0 +1,58 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { d as defineComponent, T as ref, d8 as onUnmounted, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, j as unref, bg as t, k as createVNode, bE as script, l as script$1, b9 as electronAPI, _ as _export_sfc } from "./index-DqXp9vW4.js";
+import { s as script$2 } from "./index-B0BQ8jlU.js";
+import { _ as _sfc_main$1 } from "./TerminalOutputDrawer-BgTEspHP.js";
+import { _ as _sfc_main$2 } from "./BaseViewTemplate-DlGljfEG.js";
+const _hoisted_1 = { class: "h-screen w-screen grid items-center justify-around overflow-y-auto" };
+const _hoisted_2 = { class: "relative m-8 text-center" };
+const _hoisted_3 = { class: "download-bg pi-download text-4xl font-bold" };
+const _hoisted_4 = { class: "m-8" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DesktopUpdateView",
+  setup(__props) {
+    const electron = electronAPI();
+    const terminalVisible = ref(false);
+    const toggleConsoleDrawer = /* @__PURE__ */ __name(() => {
+      terminalVisible.value = !terminalVisible.value;
+    }, "toggleConsoleDrawer");
+    onUnmounted(() => electron.Validation.dispose());
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$2, { dark: "" }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1, [
+            createBaseVNode("div", _hoisted_2, [
+              createBaseVNode("h1", _hoisted_3, toDisplayString(unref(t)("desktopUpdate.title")), 1),
+              createBaseVNode("div", _hoisted_4, [
+                createBaseVNode("span", null, toDisplayString(unref(t)("desktopUpdate.description")), 1)
+              ]),
+              createVNode(unref(script), { class: "m-8 w-48 h-48" }),
+              createVNode(unref(script$1), {
+                style: { "transform": "translateX(-50%)" },
+                class: "fixed bottom-0 left-1/2 my-8",
+                label: unref(t)("maintenance.consoleLogs"),
+                icon: "pi pi-desktop",
+                "icon-pos": "left",
+                severity: "secondary",
+                onClick: toggleConsoleDrawer
+              }, null, 8, ["label"]),
+              createVNode(_sfc_main$1, {
+                modelValue: terminalVisible.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => terminalVisible.value = $event),
+                header: unref(t)("g.terminal"),
+                "default-message": unref(t)("desktopUpdate.terminalDefaultMessage")
+              }, null, 8, ["modelValue", "header", "default-message"])
+            ])
+          ]),
+          createVNode(unref(script$2))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const DesktopUpdateView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8d77828d"]]);
+export {
+  DesktopUpdateView as default
+};
+//# sourceMappingURL=DesktopUpdateView-DWsew03S.js.map

web/assets/DownloadGitView-SPK8AXQU.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, k as createVNode, j as unref, l as script, be as useRouter } from "./index-DqqhYDnY.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-Cz111_1A.js";
+import { d as defineComponent, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, k as createVNode, j as unref, l as script, bi as useRouter } from "./index-DqXp9vW4.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-DlGljfEG.js";
 const _hoisted_1 = { class: "max-w-screen-sm flex flex-col gap-8 p-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-no-repeat bg-right-top bg-origin-padding" };
 const _hoisted_2 = { class: "mt-24 text-4xl font-bold text-red-500" };
 const _hoisted_3 = { class: "space-y-4" };
@@ -55,4 +55,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=DownloadGitView-DVXUne-M.js.map
+//# sourceMappingURL=DownloadGitView-SPK8AXQU.js.map

web/assets/ExtensionPanel-1HZtMFvH.js

@@ -1,8 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, U as ref, dl as FilterMatchMode, dr as useExtensionStore, a as useSettingStore, p as onMounted, c as computed, o as openBlock, y as createBlock, z as withCtx, k as createVNode, dm as SearchBox, j as unref, bj as script, m as createBaseVNode, f as createElementBlock, D as renderList, E as toDisplayString, a7 as createTextVNode, F as Fragment, l as script$1, B as createCommentVNode, a4 as script$3, ax as script$4, bn as script$5, dn as _sfc_main$1 } from "./index-DqqhYDnY.js";
-import { g as script$2, h as script$6 } from "./index-BapOFhAR.js";
-import "./index-DXE47DZl.js";
+import { d as defineComponent, T as ref, dx as FilterMatchMode, dC as useExtensionStore, a as useSettingStore, p as onMounted, c as computed, o as openBlock, y as createBlock, z as withCtx, k as createVNode, dy as SearchBox, j as unref, bn as script, m as createBaseVNode, f as createElementBlock, D as renderList, E as toDisplayString, a8 as createTextVNode, F as Fragment, l as script$1, B as createCommentVNode, a5 as script$3, ay as script$4, br as script$5, dz as _sfc_main$1 } from "./index-DqXp9vW4.js";
+import { g as script$2, h as script$6 } from "./index-KUUE4Ew8.js";
+import "./index-BTHx8UHZ.js";
 const _hoisted_1 = { class: "flex justify-end" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ExtensionPanel",
@@ -179,4 +179,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=ExtensionPanel-iPOrhDVM.js.map
+//# sourceMappingURL=ExtensionPanel-1HZtMFvH.js.map

web/assets/GraphView-Bo28XDd0.css

@@ -1,6 +1,5 @@
 
-.comfy-menu-hamburger[data-v-7ed57d1a] {
-    pointer-events: auto;
+.comfy-menu-hamburger[data-v-82120b51] {
     position: fixed;
     z-index: 9999;
     display: flex;
@@ -41,19 +40,19 @@
   z-index: 999;
 }
 
-.p-buttongroup-vertical[data-v-cb8f9a1a] {
+.p-buttongroup-vertical[data-v-27a9500c] {
   display: flex;
   flex-direction: column;
   border-radius: var(--p-button-border-radius);
   overflow: hidden;
   border: 1px solid var(--p-panel-border-color);
 }
-.p-buttongroup-vertical .p-button[data-v-cb8f9a1a] {
+.p-buttongroup-vertical .p-button[data-v-27a9500c] {
   margin: 0;
   border-radius: 0;
 }
 
-.node-tooltip[data-v-46859edf] {
+.node-tooltip[data-v-f03142eb] {
   background: var(--comfy-input-bg);
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
@@ -133,13 +132,11 @@
   border-right: 4px solid var(--p-button-text-primary-color);
 }
 
-.side-tool-bar-container[data-v-33cac83a] {
+.side-tool-bar-container[data-v-04875455] {
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  pointer-events: auto;
-
   width: var(--sidebar-width);
   height: 100%;
 
@@ -150,16 +147,16 @@
   --sidebar-width: 4rem;
   --sidebar-icon-size: 1.5rem;
 }
-.side-tool-bar-container.small-sidebar[data-v-33cac83a] {
+.side-tool-bar-container.small-sidebar[data-v-04875455] {
   --sidebar-width: 2.5rem;
   --sidebar-icon-size: 1rem;
 }
-.side-tool-bar-end[data-v-33cac83a] {
+.side-tool-bar-end[data-v-04875455] {
   align-self: flex-end;
   margin-top: auto;
 }
 
-.status-indicator[data-v-8d011a31] {
+.status-indicator[data-v-fd6ae3af] {
   position: absolute;
   font-weight: 700;
   font-size: 1.5rem;
@@ -221,7 +218,7 @@
   border-radius: 0px
 }
 
-[data-v-38831d8e] .workflow-tabs {
+[data-v-6ab68035] .workflow-tabs {
   background-color: var(--comfy-menu-bg);
 }
 
@@ -235,31 +232,36 @@
   border-bottom-right-radius: 0;
 }
 
-.actionbar[data-v-915e5456] {
+.actionbar[data-v-ebd56d51] {
   pointer-events: all;
   position: fixed;
   z-index: 1000;
 }
-.actionbar.is-docked[data-v-915e5456] {
+.actionbar.is-docked[data-v-ebd56d51] {
   position: static;
   border-style: none;
   background-color: transparent;
   padding: 0px;
 }
-.actionbar.is-dragging[data-v-915e5456] {
+.actionbar.is-dragging[data-v-ebd56d51] {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
-[data-v-915e5456] .p-panel-content {
+[data-v-ebd56d51] .p-panel-content {
   padding: 0.25rem;
 }
-.is-docked[data-v-915e5456] .p-panel-content {
+.is-docked[data-v-ebd56d51] .p-panel-content {
   padding: 0px;
 }
-[data-v-915e5456] .p-panel-header {
+[data-v-ebd56d51] .p-panel-header {
   display: none;
 }
+.drag-handle[data-v-ebd56d51] {
+  height: -moz-max-content;
+  height: max-content;
+  width: 0.75rem;
+}
 
 .top-menubar[data-v-56df69d2] .p-menubar-item-link svg {
   display: none;
@@ -275,7 +277,7 @@
   border-style: solid;
 }
 
-.comfyui-menu[data-v-929e7543] {
+.comfyui-menu[data-v-68d3b5b9] {
   width: 100vw;
   height: var(--comfy-topbar-height);
   background: var(--comfy-menu-bg);
@@ -288,19 +290,94 @@
   order: 0;
   grid-column: 1/-1;
 }
-.comfyui-menu.dropzone[data-v-929e7543] {
+.comfyui-menu.dropzone[data-v-68d3b5b9] {
   background: var(--p-highlight-background);
 }
-.comfyui-menu.dropzone-active[data-v-929e7543] {
+.comfyui-menu.dropzone-active[data-v-68d3b5b9] {
   background: var(--p-highlight-background-focus);
 }
-[data-v-929e7543] .p-menubar-item-label {
+[data-v-68d3b5b9] .p-menubar-item-label {
   line-height: revert;
 }
-.comfyui-logo[data-v-929e7543] {
+.comfyui-logo[data-v-68d3b5b9] {
   font-size: 1.2em;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   cursor: default;
 }
+
+.comfyui-body[data-v-e89d9273] {
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto 1fr auto;
+}
+
+/**
+  +------------------+------------------+------------------+
+  |                                                        |
+  |  .comfyui-body-                                        |
+  |       top                                              |
+  | (spans all cols)                                       |
+  |                                                        |
+  +------------------+------------------+------------------+
+  |                  |                  |                  |
+  | .comfyui-body-   |   #graph-canvas  | .comfyui-body-   |
+  |      left        |                  |      right       |
+  |                  |                  |                  |
+  |                  |                  |                  |
+  +------------------+------------------+------------------+
+  |                                                        |
+  |  .comfyui-body-                                        |
+  |      bottom                                            |
+  | (spans all cols)                                       |
+  |                                                        |
+  +------------------+------------------+------------------+
+*/
+.comfyui-body-top[data-v-e89d9273] {
+  order: -5;
+  /* Span across all columns */
+  grid-column: 1/-1;
+  /* Position at the first row */
+  grid-row: 1;
+  /* Top menu bar dropdown needs to be above of graph canvas splitter overlay which is z-index: 999 */
+  /* Top menu bar z-index needs to be higher than bottom menu bar z-index as by default
+  pysssss's image feed is located at body-bottom, and it can overlap with the queue button, which
+  is located in body-top. */
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+}
+.comfyui-body-left[data-v-e89d9273] {
+  order: -4;
+  /* Position in the first column */
+  grid-column: 1;
+  /* Position below the top element */
+  grid-row: 2;
+  z-index: 10;
+  display: flex;
+}
+.graph-canvas-container[data-v-e89d9273] {
+  width: 100%;
+  height: 100%;
+  order: -3;
+  grid-column: 2;
+  grid-row: 2;
+  position: relative;
+  overflow: hidden;
+}
+.comfyui-body-right[data-v-e89d9273] {
+  order: -2;
+  z-index: 10;
+  grid-column: 3;
+  grid-row: 2;
+}
+.comfyui-body-bottom[data-v-e89d9273] {
+  order: 4;
+  /* Span across all columns */
+  grid-column: 1/-1;
+  grid-row: 3;
+  /* Bottom menu bar dropdown needs to be above of graph canvas splitter overlay which is z-index: 999 */
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+}

web/assets/InstallView-x9XCq0hC.js

@@ -1,9 +1,9 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, U as ref, bm as useModel, o as openBlock, f as createElementBlock, m as createBaseVNode, E as toDisplayString, k as createVNode, j as unref, bn as script, bh as script$1, ar as withModifiers, z as withCtx, ab as script$2, K as useI18n, c as computed, ai as normalizeClass, B as createCommentVNode, a4 as script$3, a7 as createTextVNode, b5 as electronAPI, _ as _export_sfc, p as onMounted, r as resolveDirective, bg as script$4, i as withDirectives, bo as script$5, bp as script$6, l as script$7, y as createBlock, bj as script$8, bq as MigrationItems, w as watchEffect, F as Fragment, D as renderList, br as script$9, bs as mergeModels, bt as ValidationState, Y as normalizeI18nKey, O as watch, bu as checkMirrorReachable, bv as _sfc_main$7, bw as mergeValidationStates, bc as t, a$ as script$a, bx as CUDA_TORCH_URL, by as NIGHTLY_CPU_TORCH_URL, be as useRouter, ag as toRaw } from "./index-DqqhYDnY.js";
-import { s as script$b, a as script$c, b as script$d, c as script$e, d as script$f } from "./index-BNlqgrYT.js";
+import { d as defineComponent, T as ref, bq as useModel, o as openBlock, f as createElementBlock, m as createBaseVNode, E as toDisplayString, k as createVNode, j as unref, br as script, bl as script$1, as as withModifiers, z as withCtx, ac as script$2, I as useI18n, c as computed, aj as normalizeClass, B as createCommentVNode, a5 as script$3, a8 as createTextVNode, b9 as electronAPI, _ as _export_sfc, p as onMounted, r as resolveDirective, bk as script$4, i as withDirectives, bs as script$5, bt as script$6, l as script$7, y as createBlock, bn as script$8, bu as MigrationItems, w as watchEffect, F as Fragment, D as renderList, bv as script$9, bw as mergeModels, bx as ValidationState, X as normalizeI18nKey, N as watch, by as checkMirrorReachable, bz as _sfc_main$7, bA as isInChina, bB as mergeValidationStates, bg as t, b3 as script$a, bC as CUDA_TORCH_URL, bD as NIGHTLY_CPU_TORCH_URL, bi as useRouter, ah as toRaw } from "./index-DqXp9vW4.js";
+import { s as script$b, a as script$c, b as script$d, c as script$e, d as script$f } from "./index-A-dAhghd.js";
 import { P as PYTHON_MIRROR, a as PYPI_MIRROR } from "./uvMirrors-B-HKMf6X.js";
-import { _ as _sfc_main$8 } from "./BaseViewTemplate-Cz111_1A.js";
+import { _ as _sfc_main$8 } from "./BaseViewTemplate-DlGljfEG.js";
 const _hoisted_1$5 = { class: "flex flex-col gap-6 w-[600px]" };
 const _hoisted_2$5 = { class: "flex flex-col gap-4" };
 const _hoisted_3$5 = { class: "text-2xl font-semibold text-neutral-100" };
@@ -314,6 +314,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const pathExists = ref(false);
     const appData = ref("");
     const appPath = ref("");
+    const inputTouched = ref(false);
     const electron = electronAPI();
     onMounted(async () => {
       const paths = await electron.getSystemPaths();
@@ -355,6 +356,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         pathError.value = t2("install.failedToSelectDirectory");
       }
     }, "browsePath");
+    const onFocus = /* @__PURE__ */ __name(() => {
+      if (!inputTouched.value) {
+        inputTouched.value = true;
+        return;
+      }
+      validatePath(installPath.value);
+    }, "onFocus");
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
       return openBlock(), createElementBlock("div", _hoisted_1$3, [
@@ -370,10 +378,16 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     _cache[0] || (_cache[0] = ($event) => installPath.value = $event),
                     validatePath
                   ],
-                  class: normalizeClass(["w-full", { "p-invalid": pathError.value }])
+                  class: normalizeClass(["w-full", { "p-invalid": pathError.value }]),
+                  onFocus
                 }, null, 8, ["modelValue", "class"]),
                 withDirectives(createVNode(unref(script$5), { class: "pi pi-info-circle" }, null, 512), [
-                  [_directive_tooltip, _ctx.$t("install.installLocationTooltip")]
+                  [
+                    _directive_tooltip,
+                    _ctx.$t("install.installLocationTooltip"),
+                    void 0,
+                    { top: true }
+                  ]
                 ])
               ]),
               _: 1
@@ -595,13 +609,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      const _component_UrlInput = _sfc_main$7;
       return openBlock(), createElementBlock("div", _hoisted_1$1, [
         createBaseVNode("div", _hoisted_2$1, [
           createBaseVNode("h3", _hoisted_3$1, toDisplayString(_ctx.$t(`settings.${normalizedSettingId.value}.name`)), 1),
           createBaseVNode("p", _hoisted_4$1, toDisplayString(_ctx.$t(`settings.${normalizedSettingId.value}.tooltip`)), 1)
         ]),
-        createVNode(_component_UrlInput, {
+        createVNode(_sfc_main$7, {
           modelValue: modelValue.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
           "validate-url-fn": /* @__PURE__ */ __name((mirror) => unref(checkMirrorReachable)(mirror + (_ctx.item.validationPathSuffix ?? "")), "validate-url-fn"),
@@ -653,11 +666,24 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           };
       }
     }, "getTorchMirrorItem");
-    const mirrors = computed(() => [
+    const userIsInChina = ref(false);
+    onMounted(async () => {
+      userIsInChina.value = await isInChina();
+    });
+    const useFallbackMirror = /* @__PURE__ */ __name((mirror) => ({
+      ...mirror,
+      mirror: mirror.fallbackMirror
+    }), "useFallbackMirror");
+    const mirrors = computed(
+      () => [
         [PYTHON_MIRROR, pythonMirror],
         [PYPI_MIRROR, pypiMirror],
         [getTorchMirrorItem(__props.device), torchMirror]
-    ]);
+      ].map(([item, modelValue]) => [
+        userIsInChina.value ? useFallbackMirror(item) : item,
+        modelValue
+      ])
+    );
     const validationStates = ref(
       mirrors.value.map(() => ValidationState.IDLE)
     );
@@ -942,4 +968,4 @@ const InstallView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-
 export {
   InstallView as default
 };
-//# sourceMappingURL=InstallView-CVZcZZXJ.js.map
+//# sourceMappingURL=InstallView-x9XCq0hC.js.map

web/assets/KeybindingPanel-BIrxefrS.js

@@ -1,9 +1,9 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, c as computed, o as openBlock, f as createElementBlock, F as Fragment, D as renderList, k as createVNode, z as withCtx, a7 as createTextVNode, E as toDisplayString, j as unref, a4 as script, B as createCommentVNode, U as ref, dl as FilterMatchMode, an as useKeybindingStore, L as useCommandStore, K as useI18n, Y as normalizeI18nKey, w as watchEffect, aR as useToast, r as resolveDirective, y as createBlock, dm as SearchBox, m as createBaseVNode, l as script$2, bg as script$4, ar as withModifiers, bj as script$5, ab as script$6, i as withDirectives, dn as _sfc_main$2, dp as KeyComboImpl, dq as KeybindingImpl, _ as _export_sfc } from "./index-DqqhYDnY.js";
-import { g as script$1, h as script$3 } from "./index-BapOFhAR.js";
-import { u as useKeybindingService } from "./keybindingService-DEgCutrm.js";
-import "./index-DXE47DZl.js";
+import { d as defineComponent, c as computed, o as openBlock, f as createElementBlock, F as Fragment, D as renderList, k as createVNode, z as withCtx, a8 as createTextVNode, E as toDisplayString, j as unref, a5 as script, B as createCommentVNode, T as ref, dx as FilterMatchMode, ao as useKeybindingStore, J as useCommandStore, I as useI18n, X as normalizeI18nKey, w as watchEffect, aV as useToast, r as resolveDirective, y as createBlock, dy as SearchBox, m as createBaseVNode, l as script$2, bk as script$4, as as withModifiers, bn as script$5, ac as script$6, i as withDirectives, dz as _sfc_main$2, dA as KeyComboImpl, dB as KeybindingImpl, _ as _export_sfc } from "./index-DqXp9vW4.js";
+import { g as script$1, h as script$3 } from "./index-KUUE4Ew8.js";
+import { u as useKeybindingService } from "./keybindingService-DgS0S2M6.js";
+import "./index-BTHx8UHZ.js";
 const _hoisted_1$1 = {
   key: 0,
   class: "px-2"
@@ -96,6 +96,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     __name(removeKeybinding, "removeKeybinding");
     function captureKeybinding(event) {
+      if (!event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+        switch (event.key) {
+          case "Escape":
+            cancelEdit();
+            return;
+          case "Enter":
+            saveKeybinding();
+            return;
+        }
+      }
       const keyCombo = KeyComboImpl.fromEvent(event);
       newBindingKeyCombo.value = keyCombo;
     }
@@ -151,7 +161,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             value: commandsData.value,
             selection: selectedCommandData.value,
             "onUpdate:selection": _cache[1] || (_cache[1] = ($event) => selectedCommandData.value = $event),
-            "global-filter-fields": ["id"],
+            "global-filter-fields": ["id", "label"],
             filters: filters.value,
             selectionMode: "single",
             stripedRows: "",
@@ -216,7 +226,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             visible: editDialogVisible.value,
             "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => editDialogVisible.value = $event),
             modal: "",
-            header: currentEditingCommand.value?.id,
+            header: currentEditingCommand.value?.label,
             onHide: cancelEdit
           }, {
             footer: withCtx(() => [
@@ -275,8 +285,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const KeybindingPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2554ab36"]]);
+const KeybindingPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8454e24f"]]);
 export {
   KeybindingPanel as default
 };
-//# sourceMappingURL=KeybindingPanel-CeHhC2F4.js.map
+//# sourceMappingURL=KeybindingPanel-BIrxefrS.js.map

web/assets/KeybindingPanel-CDYVPYDp.css

@@ -0,0 +1,8 @@
+
+[data-v-8454e24f] .p-datatable-tbody > tr > td {
+  padding: 0.25rem;
+  min-height: 2rem
+}
+[data-v-8454e24f] .p-datatable-row-selected .actions,[data-v-8454e24f] .p-datatable-selectable-row:hover .actions {
+  visibility: visible
+}

web/assets/KeybindingPanel-DvrUYZ4S.css

@@ -1,8 +0,0 @@
-
-[data-v-2554ab36] .p-datatable-tbody > tr > td {
-  padding: 0.25rem;
-  min-height: 2rem
-}
-[data-v-2554ab36] .p-datatable-row-selected .actions,[data-v-2554ab36] .p-datatable-selectable-row:hover .actions {
-  visibility: visible
-}

web/assets/MaintenanceView-DEJCj8SR.css

@@ -63,10 +63,10 @@
 }
 }
 
-[data-v-74b78f7d] .p-tag {
+[data-v-dd50a7dd] .p-tag {
   --p-tag-gap: 0.375rem;
 }
-.backspan[data-v-74b78f7d]::before {
+.backspan[data-v-dd50a7dd]::before {
   position: absolute;
   margin: 0px;
   color: var(--p-text-muted-color);

web/assets/ManualConfigurationView-D3on5kXY.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, K as useI18n, U as ref, p as onMounted, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, k as createVNode, j as unref, a4 as script, a$ as script$1, l as script$2, b5 as electronAPI, _ as _export_sfc } from "./index-DqqhYDnY.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-Cz111_1A.js";
+import { d as defineComponent, I as useI18n, T as ref, p as onMounted, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, k as createVNode, j as unref, a5 as script, b3 as script$1, l as script$2, b9 as electronAPI, _ as _export_sfc } from "./index-DqXp9vW4.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-DlGljfEG.js";
 const _hoisted_1 = { class: "comfy-installer grow flex flex-col gap-4 text-neutral-300 max-w-110" };
 const _hoisted_2 = { class: "text-2xl font-semibold text-neutral-100" };
 const _hoisted_3 = { class: "m-1 text-neutral-300" };
@@ -71,4 +71,4 @@ const ManualConfigurationView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scop
 export {
   ManualConfigurationView as default
 };
-//# sourceMappingURL=ManualConfigurationView-Cz0_f_T-.js.map
+//# sourceMappingURL=ManualConfigurationView-D3on5kXY.js.map

web/assets/MetricsConsentView-DK20ednB.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-Cz111_1A.js";
-import { d as defineComponent, aR as useToast, K as useI18n, U as ref, be as useRouter, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, a7 as createTextVNode, k as createVNode, j as unref, bn as script, l as script$1, b5 as electronAPI } from "./index-DqqhYDnY.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-DlGljfEG.js";
+import { d as defineComponent, aV as useToast, I as useI18n, T as ref, bi as useRouter, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, a8 as createTextVNode, k as createVNode, j as unref, br as script, l as script$1, b9 as electronAPI } from "./index-DqXp9vW4.js";
 const _hoisted_1 = { class: "h-full p-8 2xl:p-16 flex flex-col items-center justify-center" };
 const _hoisted_2 = { class: "bg-neutral-800 rounded-lg shadow-lg p-6 w-full max-w-[600px] flex flex-col gap-6" };
 const _hoisted_3 = { class: "text-3xl font-semibold text-neutral-100" };
@@ -83,4 +83,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=MetricsConsentView-B5NlgqrS.js.map
+//# sourceMappingURL=MetricsConsentView-DK20ednB.js.map

web/assets/NotSupportedView-BzM0uuqA.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, be as useRouter, r as resolveDirective, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, k as createVNode, j as unref, l as script, i as withDirectives, _ as _export_sfc } from "./index-DqqhYDnY.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-Cz111_1A.js";
+import { d as defineComponent, bi as useRouter, r as resolveDirective, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, k as createVNode, j as unref, l as script, i as withDirectives, _ as _export_sfc } from "./index-DqXp9vW4.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-DlGljfEG.js";
 const _imports_0 = "" + new URL("images/sad_girl.png", import.meta.url).href;
 const _hoisted_1 = { class: "sad-container" };
 const _hoisted_2 = { class: "no-drag sad-text flex items-center" };
@@ -83,4 +83,4 @@ const NotSupportedView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "
 export {
   NotSupportedView as default
 };
-//# sourceMappingURL=NotSupportedView-BUpntA4x.js.map
+//# sourceMappingURL=NotSupportedView-BzM0uuqA.js.map

web/assets/ServerConfigPanel-D0jTW_iX.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { o as openBlock, f as createElementBlock, m as createBaseVNode, H as markRaw, d as defineComponent, a as useSettingStore, ae as storeToRefs, O as watch, dy as useCopyToClipboard, K as useI18n, y as createBlock, z as withCtx, j as unref, bj as script, E as toDisplayString, D as renderList, F as Fragment, k as createVNode, l as script$1, B as createCommentVNode, bh as script$2, dz as FormItem, dn as _sfc_main$1, b5 as electronAPI } from "./index-DqqhYDnY.js";
-import { u as useServerConfigStore } from "./serverConfigStore-Kb5DJVFt.js";
+import { o as openBlock, f as createElementBlock, m as createBaseVNode, H as markRaw, d as defineComponent, a as useSettingStore, af as storeToRefs, N as watch, dJ as useCopyToClipboard, I as useI18n, y as createBlock, z as withCtx, j as unref, bn as script, E as toDisplayString, D as renderList, F as Fragment, k as createVNode, l as script$1, B as createCommentVNode, bl as script$2, dK as FormItem, dz as _sfc_main$1, b9 as electronAPI } from "./index-DqXp9vW4.js";
+import { u as useServerConfigStore } from "./serverConfigStore-C8uoM7Sm.js";
 const _hoisted_1$1 = {
   viewBox: "0 0 24 24",
   width: "1.2em",
@@ -153,4 +153,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=ServerConfigPanel-B1lI5M9c.js.map
+//# sourceMappingURL=ServerConfigPanel-D0jTW_iX.js.map

web/assets/ServerStartView-BENqs5bD.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, K as useI18n, U as ref, bk as ProgressStatus, p as onMounted, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, a7 as createTextVNode, E as toDisplayString, j as unref, f as createElementBlock, B as createCommentVNode, k as createVNode, l as script, i as withDirectives, v as vShow, bl as BaseTerminal, b5 as electronAPI, _ as _export_sfc } from "./index-DqqhYDnY.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-Cz111_1A.js";
+import { d as defineComponent, I as useI18n, T as ref, bo as ProgressStatus, p as onMounted, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, a8 as createTextVNode, E as toDisplayString, j as unref, f as createElementBlock, B as createCommentVNode, k as createVNode, l as script, i as withDirectives, v as vShow, bp as BaseTerminal, b9 as electronAPI, _ as _export_sfc } from "./index-DqXp9vW4.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-DlGljfEG.js";
 const _hoisted_1 = { class: "flex flex-col w-full h-full items-center" };
 const _hoisted_2 = { class: "text-2xl font-bold" };
 const _hoisted_3 = { key: 0 };
@@ -93,8 +93,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ServerStartView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4140d62b"]]);
+const ServerStartView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e6ba9633"]]);
 export {
   ServerStartView as default
 };
-//# sourceMappingURL=ServerStartView-BpH4TXPO.js.map
+//# sourceMappingURL=ServerStartView-BENqs5bD.js.map

web/assets/ServerStartView-BZ7uhZHv.css

@@ -1,5 +1,5 @@
 
-[data-v-4140d62b] .xterm-helper-textarea {
+[data-v-e6ba9633] .xterm-helper-textarea {
   /* Hide this as it moves all over when uv is running */
   display: none;
 }

web/assets/UserSelectView-CRPNAEVJ.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, aj as useUserStore, be as useRouter, U as ref, c as computed, p as onMounted, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, k as createVNode, bf as withKeys, j as unref, bg as script, bh as script$1, bi as script$2, bj as script$3, a7 as createTextVNode, B as createCommentVNode, l as script$4 } from "./index-DqqhYDnY.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-Cz111_1A.js";
+import { d as defineComponent, ak as useUserStore, bi as useRouter, T as ref, c as computed, p as onMounted, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, k as createVNode, bj as withKeys, j as unref, bk as script, bl as script$1, bm as script$2, bn as script$3, a8 as createTextVNode, B as createCommentVNode, l as script$4 } from "./index-DqXp9vW4.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-DlGljfEG.js";
 const _hoisted_1 = {
   id: "comfy-user-selection",
   class: "min-w-84 relative rounded-lg bg-[var(--comfy-menu-bg)] p-5 px-10 shadow-lg"
@@ -98,4 +98,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=UserSelectView-wxa07xPk.js.map
+//# sourceMappingURL=UserSelectView-CRPNAEVJ.js.map

web/assets/WelcomeView-Cvtvw05C.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { d as defineComponent, be as useRouter, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, k as createVNode, j as unref, l as script, _ as _export_sfc } from "./index-DqqhYDnY.js";
-import { _ as _sfc_main$1 } from "./BaseViewTemplate-Cz111_1A.js";
+import { d as defineComponent, bi as useRouter, o as openBlock, y as createBlock, z as withCtx, m as createBaseVNode, E as toDisplayString, k as createVNode, j as unref, l as script, _ as _export_sfc } from "./index-DqXp9vW4.js";
+import { _ as _sfc_main$1 } from "./BaseViewTemplate-DlGljfEG.js";
 const _hoisted_1 = { class: "flex flex-col items-center justify-center gap-8 p-8" };
 const _hoisted_2 = { class: "animated-gradient-text text-glow select-none" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -36,4 +36,4 @@ const WelcomeView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-
 export {
   WelcomeView as default
 };
-//# sourceMappingURL=WelcomeView-BrXELNIm.js.map
+//# sourceMappingURL=WelcomeView-Cvtvw05C.js.map

web/assets/index-A-dAhghd.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value2) => __defProp(target, "name", { value: value2, configurable: true });
-import { bA as BaseStyle, bB as script$6, o as openBlock, f as createElementBlock, as as mergeProps, cJ as findIndexInList, c5 as find, bK as resolveComponent, y as createBlock, C as resolveDynamicComponent, z as withCtx, m as createBaseVNode, E as toDisplayString, A as renderSlot, B as createCommentVNode, ai as normalizeClass, bO as findSingle, F as Fragment, bL as Transition, i as withDirectives, v as vShow, bT as UniqueComponentId } from "./index-DqqhYDnY.js";
+import { bG as BaseStyle, bH as script$6, o as openBlock, f as createElementBlock, at as mergeProps, cO as findIndexInList, c4 as find, bR as resolveComponent, y as createBlock, C as resolveDynamicComponent, z as withCtx, m as createBaseVNode, E as toDisplayString, A as renderSlot, B as createCommentVNode, aj as normalizeClass, bJ as findSingle, F as Fragment, bI as Transition, i as withDirectives, v as vShow, bP as UniqueComponentId } from "./index-DqXp9vW4.js";
 var classes$4 = {
   root: /* @__PURE__ */ __name(function root(_ref) {
     var instance = _ref.instance;
@@ -536,4 +536,4 @@ export {
   script as d,
   script$4 as s
 };
-//# sourceMappingURL=index-BNlqgrYT.js.map
+//# sourceMappingURL=index-A-dAhghd.js.map

web/assets/index-BTHx8UHZ.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { bZ as script$1, o as openBlock, f as createElementBlock, as as mergeProps, m as createBaseVNode } from "./index-DqqhYDnY.js";
+import { bX as script$1, o as openBlock, f as createElementBlock, at as mergeProps, m as createBaseVNode } from "./index-DqXp9vW4.js";
 var script = {
   name: "BarsIcon",
   "extends": script$1
@@ -24,4 +24,4 @@ script.render = render;
 export {
   script as s
 };
-//# sourceMappingURL=index-DXE47DZl.js.map
+//# sourceMappingURL=index-BTHx8UHZ.js.map

web/assets/index-CBxvvAzM.css

@@ -306,6 +306,7 @@
 .litegraph .dialog .dialog-footer {
   height: 50px;
   padding: 10px;
+  margin: 0;
   border-top: 1px solid #1a1a1a;
 }
 
@@ -442,63 +443,6 @@
   color: black;
 }
 
-.litegraph .subgraph_property {
-  padding: 4px;
-}
-
-.litegraph .subgraph_property:hover {
-  background-color: #333;
-}
-
-.litegraph .subgraph_property.extra {
-  margin-top: 8px;
-}
-
-.litegraph .subgraph_property span.name {
-  font-size: 1.3em;
-  padding-left: 4px;
-}
-
-.litegraph .subgraph_property span.type {
-  opacity: 0.5;
-  margin-right: 20px;
-  padding-left: 4px;
-}
-
-.litegraph .subgraph_property span.label {
-  display: inline-block;
-  width: 60px;
-  padding: 0px 10px;
-}
-
-.litegraph .subgraph_property input {
-  width: 140px;
-  color: #999;
-  background-color: #1a1a1a;
-  border-radius: 4px;
-  border: 0;
-  margin-right: 10px;
-  padding: 4px;
-  padding-left: 10px;
-}
-
-.litegraph .subgraph_property button {
-  background-color: #1c1c1c;
-  color: #aaa;
-  border: 0;
-  border-radius: 2px;
-  padding: 4px 10px;
-  cursor: pointer;
-}
-
-.litegraph .subgraph_property.extra {
-  color: #ccc;
-}
-
-.litegraph .subgraph_property.extra input {
-  background-color: #111;
-}
-
 .litegraph .bullet_icon {
   margin-left: 10px;
   border-radius: 10px;
@@ -661,21 +605,6 @@
 .litegraph .dialog .dialog-content {
   display: block;
 }
-.litegraph .dialog .dialog-content .subgraph_property {
-  padding: 5px;
-}
-.litegraph .dialog .dialog-footer {
-  margin: 0;
-}
-.litegraph .dialog .dialog-footer .subgraph_property {
-  margin-top: 0;
-  display: flex;
-  align-items: center;
-  padding: 5px;
-}
-.litegraph .dialog .dialog-footer .subgraph_property .name {
-  flex: 1;
-}
 .litegraph .graphdialog {
   display: flex;
   align-items: center;
@@ -2110,6 +2039,9 @@
   .-right-4{
     right: -1rem;
   }
+  .bottom-0{
+    bottom: 0px;
+  }
   .bottom-\[10px\]{
     bottom: 10px;
   }
@@ -2119,6 +2051,15 @@
   .left-0{
     left: 0px;
   }
+  .left-1\/2{
+    left: 50%;
+  }
+  .left-12{
+    left: 3rem;
+  }
+  .left-2{
+    left: 0.5rem;
+  }
   .left-\[-350px\]{
     left: -350px;
   }
@@ -2128,6 +2069,9 @@
   .top-0{
     top: 0px;
   }
+  .top-2{
+    top: 0.5rem;
+  }
   .top-\[50px\]{
     top: 50px;
   }
@@ -2137,6 +2081,9 @@
   .z-10{
     z-index: 10;
   }
+  .z-20{
+    z-index: 20;
+  }
   .z-\[1000\]{
     z-index: 1000;
   }
@@ -2196,6 +2143,10 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
   }
+  .my-8{
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
   .mb-2{
     margin-bottom: 0.5rem;
   }
@@ -2286,6 +2237,9 @@
   .h-16{
     height: 4rem;
   }
+  .h-48{
+    height: 12rem;
+  }
   .h-6{
     height: 1.5rem;
   }
@@ -2331,6 +2285,9 @@
   .min-h-screen{
     min-height: 100vh;
   }
+  .w-0{
+    width: 0px;
+  }
   .w-1\/2{
     width: 50%;
   }
@@ -2343,12 +2300,21 @@
   .w-16{
     width: 4rem;
   }
+  .w-24{
+    width: 6rem;
+  }
   .w-28{
     width: 7rem;
   }
+  .w-3{
+    width: 0.75rem;
+  }
   .w-3\/12{
     width: 25%;
   }
+  .w-32{
+    width: 8rem;
+  }
   .w-44{
     width: 11rem;
   }
@@ -2458,6 +2424,9 @@
   .cursor-pointer{
     cursor: pointer;
   }
+  .touch-none{
+    touch-action: none;
+  }
   .select-none{
     -webkit-user-select: none;
        -moz-user-select: none;
@@ -2893,6 +2862,10 @@
     --tw-text-opacity: 1;
     color: rgb(239 68 68 / var(--tw-text-opacity));
   }
+  .text-white{
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
   .underline{
     text-decoration-line: underline;
   }
@@ -3035,8 +3008,6 @@ body {
   height: 100vh;
   margin: 0;
   overflow: hidden;
-  grid-template-columns: auto 1fr auto;
-  grid-template-rows: auto 1fr auto;
   background: var(--bg-color) var(--bg-img);
   color: var(--fg-color);
   min-height: -webkit-fill-available;
@@ -3046,87 +3017,6 @@ body {
   font-family: Arial, sans-serif;
 }
 
-/**
-  +------------------+------------------+------------------+
-  |                                                        |
-  |  .comfyui-body-                                        |
-  |       top                                              |
-  | (spans all cols)                                       |
-  |                                                        |
-  +------------------+------------------+------------------+
-  |                  |                  |                  |
-  | .comfyui-body-   |   #graph-canvas  | .comfyui-body-   |
-  |      left        |                  |      right       |
-  |                  |                  |                  |
-  |                  |                  |                  |
-  +------------------+------------------+------------------+
-  |                                                        |
-  |  .comfyui-body-                                        |
-  |      bottom                                            |
-  | (spans all cols)                                       |
-  |                                                        |
-  +------------------+------------------+------------------+
-*/
-
-.comfyui-body-top {
-  order: -5;
-  /* Span across all columns */
-  grid-column: 1/-1;
-  /* Position at the first row */
-  grid-row: 1;
-  /* Top menu bar dropdown needs to be above of graph canvas splitter overlay which is z-index: 999 */
-  /* Top menu bar z-index needs to be higher than bottom menu bar z-index as by default
-  pysssss's image feed is located at body-bottom, and it can overlap with the queue button, which
-  is located in body-top. */
-  z-index: 1001;
-  display: flex;
-  flex-direction: column;
-}
-
-.comfyui-body-left {
-  order: -4;
-  /* Position in the first column */
-  grid-column: 1;
-  /* Position below the top element */
-  grid-row: 2;
-  z-index: 10;
-  display: flex;
-}
-
-.graph-canvas-container {
-  width: 100%;
-  height: 100%;
-  order: -3;
-  grid-column: 2;
-  grid-row: 2;
-  position: relative;
-  overflow: hidden;
-}
-
-#graph-canvas {
-  width: 100%;
-  height: 100%;
-  touch-action: none;
-}
-
-.comfyui-body-right {
-  order: -2;
-  z-index: 10;
-  grid-column: 3;
-  grid-row: 2;
-}
-
-.comfyui-body-bottom {
-  order: 4;
-  /* Span across all columns */
-  grid-column: 1/-1;
-  grid-row: 3;
-  /* Bottom menu bar dropdown needs to be above of graph canvas splitter overlay which is z-index: 999 */
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-}
-
 .comfy-multiline-input {
   background-color: var(--comfy-input-bg);
   color: var(--input-text);
@@ -3541,84 +3431,6 @@ dialog::backdrop {
   justify-content: center;
 }
 
-#comfy-settings-dialog {
-  padding: 0;
-  width: 41rem;
-}
-
-#comfy-settings-dialog tr > td:first-child {
-  text-align: right;
-}
-
-#comfy-settings-dialog tbody button,
-#comfy-settings-dialog table > button {
-  background-color: var(--bg-color);
-  border: 1px var(--border-color) solid;
-  border-radius: 0;
-  color: var(--input-text);
-  font-size: 1rem;
-  padding: 0.5rem;
-}
-
-#comfy-settings-dialog button:hover {
-  background-color: var(--tr-odd-bg-color);
-}
-
-/* General CSS for tables */
-
-.comfy-table {
-  border-collapse: collapse;
-  color: var(--input-text);
-  font-family: Arial, sans-serif;
-  width: 100%;
-}
-
-.comfy-table caption {
-  position: sticky;
-  top: 0;
-  background-color: var(--bg-color);
-  color: var(--input-text);
-  font-size: 1rem;
-  font-weight: bold;
-  padding: 8px;
-  text-align: center;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.comfy-table caption .comfy-btn {
-  position: absolute;
-  top: -2px;
-  right: 0;
-  bottom: 0;
-  cursor: pointer;
-  border: none;
-  height: 100%;
-  border-radius: 0;
-  aspect-ratio: 1/1;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  font-size: 20px;
-}
-
-.comfy-table caption .comfy-btn:focus {
-  outline: none;
-}
-
-.comfy-table tr:nth-child(even) {
-  background-color: var(--tr-even-bg-color);
-}
-
-.comfy-table tr:nth-child(odd) {
-  background-color: var(--tr-odd-bg-color);
-}
-
-.comfy-table td,
-.comfy-table th {
-  border: 1px solid var(--border-color);
-  padding: 8px;
-}
-
 /* Context menu */
 
 .litegraph .dialog {
@@ -3718,24 +3530,6 @@ dialog::backdrop {
   will-change: transform;
 }
 
-@media only screen and (max-width: 450px) {
-  #comfy-settings-dialog .comfy-table tbody {
-    display: grid;
-  }
-  #comfy-settings-dialog .comfy-table tr {
-    display: grid;
-  }
-  #comfy-settings-dialog tr > td:first-child {
-    text-align: center;
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-  #comfy-settings-dialog tr > td:not(:first-child) {
-    text-align: center;
-    border-top: none;
-  }
-}
-
 audio.comfy-audio.empty-audio-widget {
   display: none;
 }
@@ -3746,7 +3540,6 @@ audio.comfy-audio.empty-audio-widget {
   left: 0;
   width: 100%;
   height: 100%;
-  pointer-events: none;
 }
 
 /* Set auto complete panel's width as it is not accessible within vue-root */
@@ -3926,7 +3719,7 @@ audio.comfy-audio.empty-audio-widget {
     padding-top: 0px
 }
 
-.prompt-dialog-content[data-v-3df70997] {
+.prompt-dialog-content[data-v-4f1e3bbe] {
   white-space: pre-wrap;
 }
 
@@ -3944,17 +3737,17 @@ audio.comfy-audio.empty-audio-widget {
   margin-bottom: 1rem;
 }
 
-.comfy-error-report[data-v-3faf7785] {
+.comfy-error-report[data-v-e5000be2] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
-.action-container[data-v-3faf7785] {
+.action-container[data-v-e5000be2] {
   display: flex;
   gap: 1rem;
   justify-content: flex-end;
 }
-.wrapper-pre[data-v-3faf7785] {
+.wrapper-pre[data-v-e5000be2] {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
@@ -4023,13 +3816,13 @@ audio.comfy-audio.empty-audio-widget {
   padding: 0px;
 }
 
-.form-input[data-v-1451da7b] .input-slider .p-inputnumber input,
-.form-input[data-v-1451da7b] .input-slider .slider-part {
+.form-input[data-v-a29c257f] .input-slider .p-inputnumber input,
+.form-input[data-v-a29c257f] .input-slider .slider-part {
 
     width: 5rem
 }
-.form-input[data-v-1451da7b] .p-inputtext,
-.form-input[data-v-1451da7b] .p-select {
+.form-input[data-v-a29c257f] .p-inputtext,
+.form-input[data-v-a29c257f] .p-select {
 
     width: 11rem
 }
@@ -4319,26 +4112,26 @@ audio.comfy-audio.empty-audio-widget {
     position: relative;
 }
 
-[data-v-250ab9af] .p-terminal .xterm {
+[data-v-873a313f] .p-terminal .xterm {
   overflow-x: auto;
 }
-[data-v-250ab9af] .p-terminal .xterm-screen {
+[data-v-873a313f] .p-terminal .xterm-screen {
   background-color: black;
   overflow-y: hidden;
 }
 
-[data-v-90a7f075] .p-terminal .xterm {
+[data-v-14fef2e4] .p-terminal .xterm {
   overflow-x: auto;
 }
-[data-v-90a7f075] .p-terminal .xterm-screen {
+[data-v-14fef2e4] .p-terminal .xterm-screen {
   background-color: black;
   overflow-y: hidden;
 }
 
-[data-v-03daf1c8] .p-terminal .xterm {
+[data-v-cf0c7d52] .p-terminal .xterm {
   overflow-x: auto;
 }
-[data-v-03daf1c8] .p-terminal .xterm-screen {
+[data-v-cf0c7d52] .p-terminal .xterm-screen {
   background-color: black;
   overflow-y: hidden;
 }
@@ -4650,28 +4443,28 @@ audio.comfy-audio.empty-audio-widget {
   box-sizing: border-box;
 }
 
-.tree-node[data-v-654109c7] {
+.tree-node[data-v-a945b5a8] {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.leaf-count-badge[data-v-654109c7] {
+.leaf-count-badge[data-v-a945b5a8] {
   margin-left: 0.5rem;
 }
-.node-content[data-v-654109c7] {
+.node-content[data-v-a945b5a8] {
   display: flex;
   align-items: center;
   flex-grow: 1;
 }
-.leaf-label[data-v-654109c7] {
+.leaf-label[data-v-a945b5a8] {
   margin-left: 0.5rem;
 }
-[data-v-654109c7] .editable-text span {
+[data-v-a945b5a8] .editable-text span {
   word-break: break-all;
 }
 
-[data-v-976a6d58] .tree-explorer-node-label {
+[data-v-e3a237e6] .tree-explorer-node-label {
   width: 100%;
   display: flex;
   align-items: center;
@@ -4684,10 +4477,10 @@ audio.comfy-audio.empty-audio-widget {
  * By setting the position to relative on the parent and using an absolutely positioned pseudo-element,
  * we can create a visual indicator for the drop target without affecting the layout of other elements.
  */
-[data-v-976a6d58] .p-tree-node-content:has(.tree-folder) {
+[data-v-e3a237e6] .p-tree-node-content:has(.tree-folder) {
   position: relative;
 }
-[data-v-976a6d58] .p-tree-node-content:has(.tree-folder.can-drop)::after {
+[data-v-e3a237e6] .p-tree-node-content:has(.tree-folder.can-drop)::after {
   content: '';
   position: absolute;
   top: 0;
@@ -4790,7 +4583,7 @@ audio.comfy-audio.empty-audio-widget {
   vertical-align: top;
 }
 
-[data-v-0bb2ac55] .pi-fake-spacer {
+[data-v-3be51840] .pi-fake-spacer {
   height: 1px;
   width: 16px;
 }