Add generation progress to browser tab title (#855)

src/App.vue

@@ -5,6 +5,7 @@
   <GlobalDialog />
   <GlobalToast />
   <UnloadWindowConfirmDialog />
+  <BrowserTabTitle />
 </template>
 
 <script setup lang="ts">
@@ -27,6 +28,7 @@ import NodeLibrarySidebarTab from './components/sidebar/tabs/NodeLibrarySidebarT
 import GlobalDialog from './components/dialog/GlobalDialog.vue'
 import GlobalToast from './components/toast/GlobalToast.vue'
 import UnloadWindowConfirmDialog from './components/dialog/UnloadWindowConfirmDialog.vue'
+import BrowserTabTitle from './components/BrowserTabTitle.vue'
 import { api } from './scripts/api'
 import { StatusWsMessageStatus } from './types/apiTypes'
 import { useQueuePendingTaskCountStore } from './stores/queueStore'

src/components/BrowserTabTitle.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <!-- This component does not render anything visible. -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useExecutionStore } from '@/stores/executionStore'
+import { useTitle } from '@vueuse/core'
+import { computed } from 'vue'
+
+const executionStore = useExecutionStore()
+const executionText = computed(() =>
+  executionStore.isIdle ? '' : `[${executionStore.executionProgress}%]`
+)
+const title = computed(() => executionText.value + 'ComfyUI')
+useTitle(title)
+</script>

src/components/dialog/UnloadWindowConfirmDialog.vue

@@ -1,3 +1,11 @@
+<template>
+  <div>
+    <!-- This component does not render anything visible. It is used to confirm
+    the user wants to close the window, and if they do, it will call the
+    beforeunload event. -->
+  </div>
+</template>
+
 <script setup lang="ts">
 import { useSettingStore } from '@/stores/settingStore'
 import { onMounted, onUnmounted } from 'vue'

src/stores/executionStore.ts

@@ -19,6 +19,8 @@ export const useExecutionStore = defineStore('execution', () => {
     return Object.values(activePrompt.value.nodes).length
   })
 
+  const isIdle = computed(() => !activePromptId.value)
+
   const nodesExecuted = computed(() => {
     if (!activePrompt.value) return 0
     return Object.values(activePrompt.value.nodes).filter(Boolean).length
@@ -102,6 +104,7 @@ export const useExecutionStore = defineStore('execution', () => {
   }
 
   return {
+    isIdle,
     activePromptId,
     queuedPrompts,
     executingNodeId,