[Electron] xterm startup logs (#1620)

* Add live terminal output

* Fix scrolling

* Refactor loading

* Fallback to polling if endpoint fails

* Comment

* Move clientId to executionStore
Refactor types

* Remove polling

* wip terminal command input

* Refactor to use node-pty

* Hide tabs if not electron

* Lint fix

* ts fix

* Refactor tab components

* Use xterm for startup logs

* Nicer logs display

* Fix not setting xterm + mark terminal as raw

src/hooks/bottomPanelTabs/useTerminal.ts

@@ -1,14 +1,16 @@
 import { FitAddon } from '@xterm/addon-fit'
 import { Terminal } from '@xterm/xterm'
 import { debounce } from 'lodash'
-import { onMounted, onUnmounted, Ref } from 'vue'
+import { markRaw, onMounted, onUnmounted, Ref } from 'vue'
 import '@xterm/xterm/css/xterm.css'
 
 export function useTerminal(element: Ref<HTMLElement>) {
   const fitAddon = new FitAddon()
-  const terminal = new Terminal({
-    convertEol: true
-  })
+  const terminal = markRaw(
+    new Terminal({
+      convertEol: true
+    })
+  )
   terminal.loadAddon(fitAddon)
 
   onMounted(async () => {

src/views/ServerStartView.vue

@@ -3,42 +3,56 @@
     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"
   >
     <h2 class="text-2xl font-bold">{{ ProgressMessages[status] }}</h2>
-    <LogTerminal :fetch-logs="fetchLogs" :fetch-interval="500" />
+    <BaseTerminal @created="terminalCreated" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import LogTerminal from '@/components/common/LogTerminal.vue'
+import { ref, onMounted, Ref } from 'vue'
+import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
 import {
   ProgressStatus,
   ProgressMessages
 } from '@comfyorg/comfyui-electron-types'
 import { electronAPI } from '@/utils/envUtil'
+import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+import { Terminal } from '@xterm/xterm'
 
 const electron = electronAPI()
 
 const status = ref<ProgressStatus>(ProgressStatus.INITIAL_STATE)
-const logs = ref<string[]>([])
+let xterm: Terminal | undefined
 
 const updateProgress = ({ status: newStatus }: { status: ProgressStatus }) => {
   status.value = newStatus
-  logs.value = [] // Clear logs when status changes
+  xterm?.clear()
 }
 
-const addLogMessage = (message: string) => {
-  logs.value = [...logs.value, message]
-}
+const terminalCreated = (
+  { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
+  root: Ref<HTMLElement>
+) => {
+  xterm = terminal
+
+  useAutoSize(root, true, true)
+  electron.onLogMessage((message: string) => {
+    terminal.write(message)
+  })
 
-const fetchLogs = async () => {
-  return logs.value.join('\n')
+  terminal.options.cursorBlink = false
+  terminal.options.disableStdin = true
+  terminal.options.cursorInactiveStyle = 'block'
 }
 
 onMounted(() => {
   electron.sendReady()
   electron.onProgressUpdate(updateProgress)
-  electron.onLogMessage((message: string) => {
-    addLogMessage(message)
-  })
 })
 </script>
+
+<style scoped>
+:deep(.xterm-helper-textarea) {
+  /* Hide this as it moves all over when uv is running */
+  display: none;
+}
+</style>