[Manager] Wrap manager requests with log wrapper (#3081)

src/composables/useManagerQueue.ts

@@ -20,6 +20,9 @@ export const useManagerQueue = () => {
   const clientQueueLength = computed(() => clientQueueItems.value.length)
   const onCompletedQueue = ref<((() => void) | undefined)[]>([])
   const onCompleteWaitingCount = ref(0)
+  const uncompletedCount = computed(
+    () => clientQueueLength.value + onCompleteWaitingCount.value
+  )
 
   const serverQueueStatus = ref<ManagerWsQueueStatus>(ManagerWsQueueStatus.DONE)
   const isServerIdle = computed(
@@ -93,6 +96,7 @@ export const useManagerQueue = () => {
     allTasksDone,
     statusMessage: readonly(serverQueueStatus),
     queueLength: clientQueueLength,
+    uncompletedCount,
 
     enqueueTask,
     clearQueue,

src/stores/comfyManagerStore.ts

@@ -4,12 +4,14 @@ import { ref, watch } from 'vue'
 
 import { useCachedRequest } from '@/composables/useCachedRequest'
 import { useManagerQueue } from '@/composables/useManagerQueue'
+import { useServerLogs } from '@/composables/useServerLogs'
 import { useComfyManagerService } from '@/services/comfyManagerService'
 import {
   InstallPackParams,
   InstalledPacksResponse,
   ManagerPackInfo,
   ManagerPackInstalled,
+  TaskLog,
   UpdateAllPacksParams
 } from '@/types/comfyManagerTypes'
 
@@ -23,8 +25,10 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
   const disabledPacksIds = ref<Set<string>>(new Set())
   const installedPacksIds = ref<Set<string>>(new Set())
   const isStale = ref(true)
+  const taskLogs = ref<TaskLog[]>([])
 
-  const { statusMessage, allTasksDone, enqueueTask } = useManagerQueue()
+  const { statusMessage, allTasksDone, enqueueTask, uncompletedCount } =
+    useManagerQueue()
 
   const setStale = () => {
     isStale.value = true
@@ -107,12 +111,40 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
 
   whenever(isStale, refreshInstalledList, { immediate: true })
 
+  const withLogs = (task: () => Promise<null>, taskName: string) => {
+    const { startListening, stopListening, logs } = useServerLogs()
+
+    const loggedTask = async () => {
+      taskLogs.value.push({ taskName, logs: logs.value })
+      startListening()
+      return task()
+    }
+
+    const onComplete = () => {
+      stopListening()
+      setStale()
+    }
+
+    return { task: loggedTask, onComplete }
+  }
+
   const installPack = useCachedRequest<InstallPackParams, void>(
     async (params: InstallPackParams, signal?: AbortSignal) => {
-      enqueueTask({
-        task: () => managerService.installPack(params, signal),
-        onComplete: setStale
-      })
+      if (!params.id) return
+
+      let actionDescription = 'Installing'
+      if (installedPacksIds.value.has(params.id)) {
+        const installedPack = installedPacks.value[params.id]
+
+        if (installedPack && installedPack.ver !== params.selected_version) {
+          actionDescription = `Changing version from ${installedPack.ver} to ${params.selected_version}:`
+        } else {
+          actionDescription = 'Enabling'
+        }
+      }
+
+      const task = () => managerService.installPack(params, signal)
+      enqueueTask(withLogs(task, `${actionDescription} ${params.id}`))
     },
     { maxSize: 1 }
   )
@@ -120,41 +152,34 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
   const uninstallPack = (params: ManagerPackInfo, signal?: AbortSignal) => {
     installPack.clear()
     installPack.cancel()
-
-    enqueueTask({
-      task: () => managerService.uninstallPack(params, signal),
-      onComplete: setStale
-    })
+    const task = () => managerService.uninstallPack(params, signal)
+    enqueueTask(withLogs(task, `Uninstalling ${params.id}`))
   }
 
   const updatePack = useCachedRequest<ManagerPackInfo, void>(
     async (params: ManagerPackInfo, signal?: AbortSignal) => {
-      updateAllPacks.clear()
       updateAllPacks.cancel()
-
-      enqueueTask({
-        task: () => managerService.updatePack(params, signal),
-        onComplete: setStale
-      })
+      const task = () => managerService.updatePack(params, signal)
+      enqueueTask(withLogs(task, `Updating ${params.id}`))
     },
     { maxSize: 1 }
   )
 
   const updateAllPacks = useCachedRequest<UpdateAllPacksParams, void>(
     async (params: UpdateAllPacksParams, signal?: AbortSignal) => {
-      enqueueTask({
-        task: () => managerService.updateAllPacks(params, signal),
-        onComplete: setStale
-      })
+      const task = () => managerService.updateAllPacks(params, signal)
+      enqueueTask(withLogs(task, 'Updating all packs'))
     },
     { maxSize: 1 }
   )
 
   const disablePack = (params: ManagerPackInfo, signal?: AbortSignal) => {
-    enqueueTask({
-      task: () => managerService.disablePack(params, signal),
-      onComplete: setStale
-    })
+    const task = () => managerService.disablePack(params, signal)
+    enqueueTask(withLogs(task, `Disabling ${params.id}`))
+  }
+
+  const clearLogs = () => {
+    taskLogs.value = []
   }
 
   return {
@@ -163,6 +188,9 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
     error: managerService.error,
     statusMessage,
     allTasksDone,
+    uncompletedCount,
+    taskLogs,
+    clearLogs,
 
     // Installed packs state
     installedPacks,

src/types/comfyManagerTypes.ts

@@ -16,6 +16,11 @@ export interface SearchOption<T> {
   label: string
 }
 
+export type TaskLog = {
+  taskName: string
+  logs: string[]
+}
+
 enum ManagerPackState {
   /** Pack is installed and enabled */
   INSTALLED = 'installed',