From 242f641a1d65110a865888a74cf18ac383a0dc37 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 9 Nov 2024 12:12:51 -0500
Subject: [PATCH 01/10] WIP

---
 src/views/ServerStartView.vue | 56 ++++++++++++++++++++++++++++++-----
 1 file changed, 48 insertions(+), 8 deletions(-)

diff --git a/src/views/ServerStartView.vue b/src/views/ServerStartView.vue
index c35fbf0941..a6d2fd9bec 100644
--- a/src/views/ServerStartView.vue
+++ b/src/views/ServerStartView.vue
@@ -1,17 +1,57 @@
-<!-- This is a dummy page built for electron app only. -->
-<!-- Replace this page with the electron side logic on installation & log streaming. -->
 <template>
   <div
-    class="absolute inset-0 flex flex-col items-center justify-center h-screen bg-surface-0"
+    class="font-sans flex flex-col justify-center items-center h-screen m-0 text-neutral-300 bg-neutral-900"
   >
-    <ProgressSpinner class="w-16 h-16 mb-4" />
-    <div class="text-xl">{{ $t('loading') }}{{ counter }}</div>
+    <FirstTimeSetup
+      v-if="showSetup"
+      :initial-path="defaultInstallLocation"
+      @complete="showSetup = false"
+    />
+    <ProgressOverlay v-else :status="status" :logs="logs" />
   </div>
 </template>
 
 <script setup lang="ts">
-import ProgressSpinner from 'primevue/progressspinner'
-import { useInterval } from '@vueuse/core'
+import { ref, onMounted } from 'vue'
+import ProgressOverlay from './screens/ProgressOverlay.vue'
+import FirstTimeSetup from './screens/FirstTimeSetup.vue'
+import { ProgressStatus } from '@comfyorg/comfyui-electron-types'
+import { electronAPI as getElectronAPI } from '@/utils/envUtil'
 
-const counter = useInterval(1000)
+const electronAPI = getElectronAPI()
+
+const showSetup = ref<boolean | null>(null)
+const status = ref<ProgressStatus>(ProgressStatus.INITIAL_STATE)
+const logs = ref<string[]>([])
+const defaultInstallLocation = ref('')
+
+const updateProgress = ({ status: newStatus }: { status: ProgressStatus }) => {
+  status.value = newStatus
+  logs.value = [] // Clear logs when status changes
+}
+
+const addLogMessage = (message: string) => {
+  logs.value = [...logs.value, message]
+}
+
+onMounted(() => {
+  electronAPI.sendReady()
+
+  electronAPI.onShowSelectDirectory(() => {
+    showSetup.value = true
+  })
+
+  electronAPI.onFirstTimeSetupComplete(() => {
+    showSetup.value = false
+  })
+
+  electronAPI.onProgressUpdate(updateProgress)
+  electronAPI.onLogMessage((message: string) => {
+    addLogMessage(message)
+  })
+
+  electronAPI.onDefaultInstallLocation((location: string) => {
+    defaultInstallLocation.value = location
+  })
+})
 </script>

From 38307eda7168b7d49b5dbd9f3939044c7f89341c Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 9 Nov 2024 12:15:05 -0500
Subject: [PATCH 02/10] Add LogTerminal

---
 src/components/common/LogTerminal.vue | 66 +++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/components/common/LogTerminal.vue

diff --git a/src/components/common/LogTerminal.vue b/src/components/common/LogTerminal.vue
new file mode 100644
index 0000000000..60ef2860b6
--- /dev/null
+++ b/src/components/common/LogTerminal.vue
@@ -0,0 +1,66 @@
+<!-- A simple read-only terminal component that displays logs. -->
+<template>
+  <div class="p-terminal rounded-none h-full w-full">
+    <ScrollPanel class="h-full w-full" ref="scrollPanelRef">
+      <pre class="px-4 whitespace-pre-wrap">{{ log }}</pre>
+    </ScrollPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ScrollPanel from 'primevue/scrollpanel'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = defineProps<{
+  fetchLogs: () => Promise<string>
+  fetchInterval: number
+}>()
+
+const log = ref<string>('')
+const scrollPanelRef = ref<InstanceType<typeof ScrollPanel> | null>(null)
+/**
+ * Whether the user has scrolled to the bottom of the terminal.
+ * This is used to prevent the terminal from scrolling to the bottom
+ * when new logs are fetched.
+ */
+const scrolledToBottom = ref(false)
+
+let intervalId: number = 0
+
+onMounted(async () => {
+  const element = scrollPanelRef.value?.$el
+  const scrollContainer = element?.querySelector('.p-scrollpanel-content')
+
+  if (scrollContainer) {
+    scrollContainer.addEventListener('scroll', () => {
+      scrolledToBottom.value =
+        scrollContainer.scrollTop + scrollContainer.clientHeight ===
+        scrollContainer.scrollHeight
+    })
+  }
+
+  const scrollToBottom = () => {
+    if (scrollContainer) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight
+    }
+  }
+
+  watch(log, () => {
+    if (scrolledToBottom.value) {
+      scrollToBottom()
+    }
+  })
+
+  const fetchLogs = async () => {
+    log.value = await props.fetchLogs()
+  }
+
+  await fetchLogs()
+  scrollToBottom()
+  intervalId = window.setInterval(fetchLogs, props.fetchInterval)
+})
+
+onBeforeUnmount(() => {
+  window.clearInterval(intervalId)
+})
+</script>

From 682ec1eff88986e3573fc4e3a11ac3fbed3f2a1b Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 9 Nov 2024 12:23:26 -0500
Subject: [PATCH 03/10] Modify server startup view

---
 src/views/ServerStartView.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/views/ServerStartView.vue b/src/views/ServerStartView.vue
index a6d2fd9bec..33e1c2faf3 100644
--- a/src/views/ServerStartView.vue
+++ b/src/views/ServerStartView.vue
@@ -7,15 +7,21 @@
       :initial-path="defaultInstallLocation"
       @complete="showSetup = false"
     />
-    <ProgressOverlay v-else :status="status" :logs="logs" />
+    <div v-else>
+      <h2 class="text-2xl font-bold">{{ ProgressMessages[status] }}</h2>
+      <LogTerminal :fetch-logs="fetchLogs" :fetch-interval="500" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import ProgressOverlay from './screens/ProgressOverlay.vue'
 import FirstTimeSetup from './screens/FirstTimeSetup.vue'
-import { ProgressStatus } from '@comfyorg/comfyui-electron-types'
+import LogTerminal from '@/components/common/LogTerminal.vue'
+import {
+  ProgressStatus,
+  ProgressMessages
+} from '@comfyorg/comfyui-electron-types'
 import { electronAPI as getElectronAPI } from '@/utils/envUtil'
 
 const electronAPI = getElectronAPI()
@@ -34,6 +40,10 @@ const addLogMessage = (message: string) => {
   logs.value = [...logs.value, message]
 }
 
+const fetchLogs = async () => {
+  return logs.value.join('\n')
+}
+
 onMounted(() => {
   electronAPI.sendReady()
 

From 51ef48b57903d45eb4f33e825531f3c9c841f728 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 9 Nov 2024 19:24:12 -0500
Subject: [PATCH 04/10] Add installView

---
 src/components/install/WelcomeScreen.vue | 44 ++++++++++++++++++++++++
 src/router.ts                            | 15 ++++++++
 src/views/InstallView.vue                |  7 ++++
 3 files changed, 66 insertions(+)
 create mode 100644 src/components/install/WelcomeScreen.vue
 create mode 100644 src/views/InstallView.vue

diff --git a/src/components/install/WelcomeScreen.vue b/src/components/install/WelcomeScreen.vue
new file mode 100644
index 0000000000..60855d9063
--- /dev/null
+++ b/src/components/install/WelcomeScreen.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-col items-center justify-center gap-8 p-8">
+    <!-- Header -->
+    <h1 class="text-4xl font-bold text-neutral-100">Welcome to ComfyUI</h1>
+
+    <!-- Get Started Button -->
+    <Button
+      label="Get Started"
+      icon="pi pi-arrow-right"
+      iconPos="right"
+      size="large"
+      @click="$emit('start')"
+      class="p-4 text-lg"
+    />
+
+    <!-- Installation Steps -->
+    <div class="w-[600px]">
+      <Steps :model="installSteps" :readonly="true" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const installSteps = [
+  {
+    label: 'Installation Location',
+    icon: 'pi pi-folder'
+  },
+  {
+    label: 'Python Setup',
+    icon: 'pi pi-code'
+  },
+  {
+    label: 'Migration',
+    icon: 'pi pi-download'
+  },
+  {
+    label: 'Review',
+    icon: 'pi pi-check'
+  }
+]
+
+defineEmits(['start'])
+</script>
diff --git a/src/router.ts b/src/router.ts
index dd69f09539..bed4ad5faf 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -24,6 +24,21 @@ const router = createRouter({
           path: 'server-start',
           name: 'ServerStartView',
           component: () => import('@/views/ServerStartView.vue'),
+          beforeEnter: async (to, from, next) => {
+            // Only allow access to this page in electron environment
+            if (isElectron()) {
+              next()
+            } else {
+              // TODO: Get from electronAPI
+              const isFirstTimeInstall = true
+              next(isFirstTimeInstall ? '/install' : '/')
+            }
+          }
+        },
+        {
+          path: 'install',
+          name: 'InstallView',
+          component: () => import('@/views/InstallView.vue'),
           beforeEnter: async (to, from, next) => {
             // Only allow access to this page in electron environment
             if (isElectron()) {
diff --git a/src/views/InstallView.vue b/src/views/InstallView.vue
new file mode 100644
index 0000000000..922325ddc5
--- /dev/null
+++ b/src/views/InstallView.vue
@@ -0,0 +1,7 @@
+<template>
+  <WelcomeScreen />
+</template>
+
+<script setup lang="ts">
+import WelcomeScreen from '@/components/install/WelcomeScreen.vue'
+</script>

From 6340fc0b6607a9a2265b96639456a51bc2a8d513 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 9 Nov 2024 22:26:51 -0500
Subject: [PATCH 05/10] Add basic welcome screen and dev server setup

---
 package-lock.json                        |  9 +++----
 package.json                             |  3 ++-
 src/components/install/WelcomeScreen.vue | 13 ++++++----
 src/router.ts                            |  6 ++---
 src/scripts/ui.ts                        |  1 +
 src/views/InstallView.vue                |  6 ++++-
 src/views/ServerStartView.vue            |  4 ---
 vite.electron.config.mts                 | 33 ++++++++++++++++++++++++
 8 files changed, 55 insertions(+), 20 deletions(-)
 create mode 100644 vite.electron.config.mts

diff --git a/package-lock.json b/package-lock.json
index 6ebc48a217..f4e1a06409 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.3.38",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
+        "@comfyorg/comfyui-electron-types": "^0.2.10",
         "@comfyorg/litegraph": "^0.8.24",
         "@primevue/themes": "^4.0.5",
         "@vueuse/core": "^11.0.0",
@@ -32,7 +33,6 @@
       "devDependencies": {
         "@babel/core": "^7.24.7",
         "@babel/preset-env": "^7.22.20",
-        "@comfyorg/comfyui-electron-types": "^0.2.9",
         "@eslint/js": "^9.8.0",
         "@iconify/json": "^2.2.245",
         "@pinia/testing": "^0.1.5",
@@ -1916,10 +1916,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/comfyui-electron-types": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.2.9.tgz",
-      "integrity": "sha512-wXmeGrQnuiEXlUkWDAnfkPgb8YTICX8EsNKSIWDb5uMSx46fW8gJQjTc1ehawV/fw1MmuqjhOpw+rV1f2+DAtw==",
-      "dev": true,
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.2.10.tgz",
+      "integrity": "sha512-JwqFeqmJBp6n276Ki+VEkMkO43rFHobdt93AzJYpWC+BXGUuvTyquon/MvblWtJDnTdO0mGWGXztDFe0sXie6A==",
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
diff --git a/package.json b/package.json
index ad3b463adc..b1b11e4cf5 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:electron": "vite --config vite.electron.config.mts",
     "build": "npm run typecheck && vite build",
     "deploy": "npm run build && node scripts/deploy.js",
     "release": "node scripts/release.js",
@@ -26,7 +27,6 @@
   "devDependencies": {
     "@babel/core": "^7.24.7",
     "@babel/preset-env": "^7.22.20",
-    "@comfyorg/comfyui-electron-types": "^0.2.9",
     "@eslint/js": "^9.8.0",
     "@iconify/json": "^2.2.245",
     "@pinia/testing": "^0.1.5",
@@ -71,6 +71,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
+    "@comfyorg/comfyui-electron-types": "^0.2.10",
     "@comfyorg/litegraph": "^0.8.24",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",
diff --git a/src/components/install/WelcomeScreen.vue b/src/components/install/WelcomeScreen.vue
index 60855d9063..08a0f637d3 100644
--- a/src/components/install/WelcomeScreen.vue
+++ b/src/components/install/WelcomeScreen.vue
@@ -21,19 +21,22 @@
 </template>
 
 <script setup lang="ts">
+import Steps from 'primevue/steps'
+import Button from 'primevue/button'
+
 const installSteps = [
   {
-    label: 'Installation Location',
+    label: 'Install Location',
     icon: 'pi pi-folder'
   },
-  {
-    label: 'Python Setup',
-    icon: 'pi pi-code'
-  },
   {
     label: 'Migration',
     icon: 'pi pi-download'
   },
+  {
+    label: 'Desktop Settings',
+    icon: 'pi pi-desktop'
+  },
   {
     label: 'Review',
     icon: 'pi pi-check'
diff --git a/src/router.ts b/src/router.ts
index bed4ad5faf..b1ce6e9e28 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -4,7 +4,7 @@ import {
   createWebHistory
 } from 'vue-router'
 import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
-import { isElectron } from './utils/envUtil'
+import { isElectron, electronAPI } from './utils/envUtil'
 
 const isFileProtocol = () => window.location.protocol === 'file:'
 
@@ -29,9 +29,7 @@ const router = createRouter({
             if (isElectron()) {
               next()
             } else {
-              // TODO: Get from electronAPI
-              const isFirstTimeInstall = true
-              next(isFirstTimeInstall ? '/install' : '/')
+              next((await electronAPI().isFirstTimeSetup()) ? '/install' : '/')
             }
           }
         },
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index fdd1b35e24..e1de12905f 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -636,6 +636,7 @@ export class ComfyUI {
         }
       })
     ]) as HTMLDivElement
+    this.menuContainer.style.display = 'none'
 
     this.restoreMenuPosition = dragElement(this.menuContainer, this.settings)
 
diff --git a/src/views/InstallView.vue b/src/views/InstallView.vue
index 922325ddc5..03b0df2753 100644
--- a/src/views/InstallView.vue
+++ b/src/views/InstallView.vue
@@ -1,5 +1,9 @@
 <template>
-  <WelcomeScreen />
+  <div
+    class="font-sans flex flex-col justify-center items-center h-screen m-0 text-neutral-300 bg-neutral-900 dark-theme pointer-events-auto"
+  >
+    <WelcomeScreen />
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/ServerStartView.vue b/src/views/ServerStartView.vue
index 33e1c2faf3..abbacef3bc 100644
--- a/src/views/ServerStartView.vue
+++ b/src/views/ServerStartView.vue
@@ -59,9 +59,5 @@ onMounted(() => {
   electronAPI.onLogMessage((message: string) => {
     addLogMessage(message)
   })
-
-  electronAPI.onDefaultInstallLocation((location: string) => {
-    defaultInstallLocation.value = location
-  })
 })
 </script>
diff --git a/vite.electron.config.mts b/vite.electron.config.mts
new file mode 100644
index 0000000000..f8a64dc292
--- /dev/null
+++ b/vite.electron.config.mts
@@ -0,0 +1,33 @@
+import { defineConfig, Plugin } from 'vite'
+import { mergeConfig } from 'vite'
+import type { UserConfig } from 'vitest/config'
+import baseConfig from './vite.config.mts'
+import type { ElectronAPI } from '@comfyorg/comfyui-electron-types'
+
+const electronAPIMock: Partial<ElectronAPI> = {
+  sendReady: () => {},
+  onShowSelectDirectory: () => {},
+  onFirstTimeSetupComplete: () => {},
+  onProgressUpdate: () => {},
+  onLogMessage: () => {},
+  isFirstTimeSetup: () => Promise.resolve(true)
+}
+
+const mockElectronAPI: Plugin = {
+  name: 'mock-electron-api',
+  transformIndexHtml() {
+    return [
+      {
+        tag: 'script',
+        children: `window.electronAPI = ${JSON.stringify(electronAPIMock)};`
+      }
+    ]
+  }
+}
+
+export default mergeConfig(
+  baseConfig as unknown as UserConfig,
+  defineConfig({
+    plugins: [mockElectronAPI]
+  })
+)
\ No newline at end of file

From f1395e72f669d218ace61857099ecfa4c850d62e Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 9 Nov 2024 22:30:08 -0500
Subject: [PATCH 06/10] nit

---
 src/views/ServerStartView.vue | 25 +++----------------------
 1 file changed, 3 insertions(+), 22 deletions(-)

diff --git a/src/views/ServerStartView.vue b/src/views/ServerStartView.vue
index abbacef3bc..81fac0a720 100644
--- a/src/views/ServerStartView.vue
+++ b/src/views/ServerStartView.vue
@@ -1,22 +1,14 @@
 <template>
   <div
-    class="font-sans flex flex-col justify-center items-center h-screen m-0 text-neutral-300 bg-neutral-900"
+    class="font-sans flex flex-col justify-center items-center h-screen m-0 text-neutral-300 bg-neutral-900 dark-theme pointer-events-auto"
   >
-    <FirstTimeSetup
-      v-if="showSetup"
-      :initial-path="defaultInstallLocation"
-      @complete="showSetup = false"
-    />
-    <div v-else>
-      <h2 class="text-2xl font-bold">{{ ProgressMessages[status] }}</h2>
-      <LogTerminal :fetch-logs="fetchLogs" :fetch-interval="500" />
-    </div>
+    <h2 class="text-2xl font-bold">{{ ProgressMessages[status] }}</h2>
+    <LogTerminal :fetch-logs="fetchLogs" :fetch-interval="500" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import FirstTimeSetup from './screens/FirstTimeSetup.vue'
 import LogTerminal from '@/components/common/LogTerminal.vue'
 import {
   ProgressStatus,
@@ -26,10 +18,8 @@ import { electronAPI as getElectronAPI } from '@/utils/envUtil'
 
 const electronAPI = getElectronAPI()
 
-const showSetup = ref<boolean | null>(null)
 const status = ref<ProgressStatus>(ProgressStatus.INITIAL_STATE)
 const logs = ref<string[]>([])
-const defaultInstallLocation = ref('')
 
 const updateProgress = ({ status: newStatus }: { status: ProgressStatus }) => {
   status.value = newStatus
@@ -46,15 +36,6 @@ const fetchLogs = async () => {
 
 onMounted(() => {
   electronAPI.sendReady()
-
-  electronAPI.onShowSelectDirectory(() => {
-    showSetup.value = true
-  })
-
-  electronAPI.onFirstTimeSetupComplete(() => {
-    showSetup.value = false
-  })
-
   electronAPI.onProgressUpdate(updateProgress)
   electronAPI.onLogMessage((message: string) => {
     addLogMessage(message)

From 753d75ea2ad0af886db60fefb953d96cc1095d66 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 9 Nov 2024 22:35:54 -0500
Subject: [PATCH 07/10] nit

---
 src/router.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/router.ts b/src/router.ts
index b1ce6e9e28..b76dcea471 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -27,9 +27,13 @@ const router = createRouter({
           beforeEnter: async (to, from, next) => {
             // Only allow access to this page in electron environment
             if (isElectron()) {
-              next()
+              if (await electronAPI().isFirstTimeSetup()) {
+                next('/install')
+              } else {
+                next()
+              }
             } else {
-              next((await electronAPI().isFirstTimeSetup()) ? '/install' : '/')
+              next('/')
             }
           }
         },

From fddf3cb98abd1efeb898d01d8cc3cbbb0beba053 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 9 Nov 2024 22:37:52 -0500
Subject: [PATCH 08/10] nit

---
 src/router.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/router.ts b/src/router.ts
index b76dcea471..cfbde0b031 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -4,7 +4,7 @@ import {
   createWebHistory
 } from 'vue-router'
 import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
-import { isElectron, electronAPI } from './utils/envUtil'
+import { isElectron } from './utils/envUtil'
 
 const isFileProtocol = () => window.location.protocol === 'file:'
 
@@ -27,11 +27,7 @@ const router = createRouter({
           beforeEnter: async (to, from, next) => {
             // Only allow access to this page in electron environment
             if (isElectron()) {
-              if (await electronAPI().isFirstTimeSetup()) {
-                next('/install')
-              } else {
-                next()
-              }
+              next()
             } else {
               next('/')
             }

From 2da1872ccb5558e6c912066193387d55fa39a6df Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 9 Nov 2024 22:40:22 -0500
Subject: [PATCH 09/10] nit

---
 src/utils/envUtil.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/envUtil.ts b/src/utils/envUtil.ts
index c656a67119..b2cb723cdd 100644
--- a/src/utils/envUtil.ts
+++ b/src/utils/envUtil.ts
@@ -5,5 +5,5 @@ export function isElectron() {
 }
 
 export function electronAPI() {
-  return window['electronAPI'] as ElectronAPI
+  return (window as any)['electronAPI'] as ElectronAPI
 }

From 1c590b707fae53578aeef8aa95934086150ceff3 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sun, 10 Nov 2024 09:29:57 -0500
Subject: [PATCH 10/10] nit

---
 src/scripts/app.ts | 2 ++
 src/scripts/ui.ts  | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 5a6a2d8b40..4fd5bc3f3c 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -1784,6 +1784,8 @@ export class ComfyApp {
    */
   async setup(canvasEl: HTMLCanvasElement) {
     this.canvasEl = canvasEl
+    // Show menu container for GraphView.
+    this.ui.menuContainer.style.display = 'block'
     await this.#setUser()
 
     this.resizeCanvas()
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index e1de12905f..e9f828bae1 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -636,6 +636,7 @@ export class ComfyUI {
         }
       })
     ]) as HTMLDivElement
+    // Hide by default on construction so it does not interfere with other views.
     this.menuContainer.style.display = 'none'
 
     this.restoreMenuPosition = dragElement(this.menuContainer, this.settings)