Listen for new execution_start message

src/lib/api.ts

@@ -79,6 +79,7 @@ type ComfyAPIEvents = {
     reconnected: () => void,
     executing: (promptID: PromptID | null, runningNodeID: ComfyNodeID | null) => void,
     executed: (promptID: PromptID, nodeID: ComfyNodeID, output: SerializedPromptOutputs) => void,
+    execution_start: (promptID: PromptID) => void,
     execution_cached: (promptID: PromptID, nodes: ComfyNodeID[]) => void,
     execution_error: (promptID: PromptID, message: string) => void,
 }
@@ -183,6 +184,9 @@ export default class ComfyAPI {
                     case "executed":
                         this.eventBus.emit("executed", msg.data.prompt_id, msg.data.node, msg.data.output);
                         break;
+                    case "execution_start":
+                        this.eventBus.emit("execution_start", msg.data.prompt_id);
+                        break;
                     case "execution_cached":
                         this.eventBus.emit("execution_cached", msg.data.prompt_id, msg.data.nodes);
                         break;

src/lib/components/ComfyApp.ts

@@ -351,6 +351,10 @@ export default class ComfyApp {
             queueState.onExecuted(promptID, nodeID, output)
         });
 
+        this.api.addEventListener("execution_start", (promptID: PromptID) => {
+            queueState.executionStart(promptID)
+        });
+
         this.api.addEventListener("execution_cached", (promptID: PromptID, nodes: ComfyNodeID[]) => {
             queueState.executionCached(promptID, nodes)
         });
@@ -614,8 +618,8 @@ export default class ComfyApp {
                         thumbnails
                     }
 
-                    let error = null;
+                    let error: string | null = null;
-                    let promptID = null;
+                    let promptID: PromptID | null = null;
 
                     const request: ComfyPromptRequest = {
                         number: num,
@@ -625,20 +629,18 @@ export default class ComfyApp {
 
                     try {
                         const response = await this.api.queuePrompt(request);
-
+                        if (response.error != null) {
-                        // BUG: This can cause race conditions updating frontend state
+                            error = response.error;
-                        // since we don't have a prompt ID until the backend
+                        }
-                        // returns!
+                        else {
-                        promptID = response.promptID;
+                            queueState.afterQueued(response.promptID, num, p.output, extraData)
-                        queueState.afterQueued(promptID, num, p.output, extraData)
+                        }
-
-                        error = response.error;
                     } catch (err) {
-                        error = { error: err }
+                        error = err?.toString();
                     }
 
                     if (error != null) {
-                        const mes = error.error
+                        const mes: string = error;
                         notify(`Error queuing prompt:\n${mes}`, { type: "error" })
                         console.error(graphToGraphVis(this.lGraph))
                         console.error(promptToGraphVis(p))
@@ -795,7 +797,7 @@ export default class ComfyApp {
             console.debug("[ComfyApp] Reconfiguring combo widget", backendNode.type, "=>", comboNode.type, rawValues.length)
             comboNode.doAutoConfig(inputSlot, { includeProperties: new Set(["values"]), setWidgetTitle: false })
 
-            comboNode.formatValues(rawValues)
+            comboNode.formatValues(rawValues as string[])
             if (!rawValues?.includes(get(comboNode.value))) {
                 comboNode.setValue(rawValues[0])
             }

src/lib/components/ComfyNumberProperty.svelte

@@ -45,6 +45,11 @@
          }
      }
  }
+ input {
+     color: var(--body-text-color);
+     background: var(--input-background-fill);
+     border: var(--input-border-width) solid var(--input-border-color)
+ }
  input[disabled] {
      cursor: not-allowed;
  }

src/lib/components/ComfyProperties.svelte

@@ -19,14 +19,15 @@
  $: refreshPropsPanel = $layoutState.refreshPropsPanel;
 
  $: if ($selectionState.currentSelection.length > 0) {
+     node = null;
      const targetId = $selectionState.currentSelection.slice(-1)[0]
-     target = $layoutState.allItems[targetId].dragItem
+     const entry = $layoutState.allItems[targetId]
-     attrsChanged = target.attrsChanged;
+     if (entry != null) {
-     if (target.type === "widget") {
+         target = entry.dragItem
-         node = (target as WidgetLayout).node
+         attrsChanged = target.attrsChanged;
-     }
+         if (target.type === "widget") {
-     else {
+             node = (target as WidgetLayout).node
-         node = null;
+         }
      }
  }
  else if ($selectionState.currentSelectionNodes.length > 0) {

src/lib/stores/queueState.ts

@@ -14,6 +14,7 @@ type QueueStateOps = {
     queueUpdated: (resp: ComfyAPIQueueResponse) => void,
     historyUpdated: (resp: ComfyAPIHistoryResponse) => void,
     statusUpdated: (status: ComfyAPIStatusResponse | null) => void,
+    executionStart: (promptID: PromptID) => void,
     executingUpdated: (promptID: PromptID | null, runningNodeID: ComfyNodeID | null) => void,
     executionCached: (promptID: PromptID, nodes: ComfyNodeID[]) => void,
     executionError: (promptID: PromptID, message: string) => void,
@@ -235,23 +236,51 @@ function executionError(promptID: PromptID, message: string) {
     })
 }
 
+function createNewQueueEntry(promptID: PromptID, number: number = -1, prompt: SerializedPromptInputsAll = {}, extraData: any = {}): QueueEntry {
+    return {
+        number,
+        queuedAt: new Date(), // Now
+        finishedAt: null,
+        promptID,
+        prompt,
+        extraData,
+        goodOutputs: [],
+        outputs: {},
+        nodesRan: new Set(),
+        cachedNodes: new Set()
+    }
+}
+
+function executionStart(promptID: PromptID) {
+    console.debug("[queueState] executionStart", promptID)
+    store.update(s => {
+        const [index, entry, queue] = findEntryInPending(promptID);
+        if (entry == null) {
+            const entry = createNewQueueEntry(promptID);
+            s.queuePending.update(qp => { qp.push(entry); return qp })
+            console.debug("[queueState] ADD PROMPT", promptID)
+        }
+        s.isInterrupting = false;
+        return s
+    })
+}
+
 function afterQueued(promptID: PromptID, number: number, prompt: SerializedPromptInputsAll, extraData: any) {
     console.debug("[queueState] afterQueued", promptID, Object.keys(prompt))
     store.update(s => {
-        const entry: QueueEntry = {
+        const [index, entry, queue] = findEntryInPending(promptID);
-            number,
+        if (entry == null) {
-            queuedAt: new Date(), // Now
+            const entry = createNewQueueEntry(promptID, number, prompt, extraData);
-            finishedAt: null,
+            s.queuePending.update(qp => { qp.push(entry); return qp })
-            promptID,
+            console.debug("[queueState] ADD PROMPT", promptID)
-            prompt,
+        }
-            extraData,
+        else {
-            goodOutputs: [],
+            entry.number = number;
-            outputs: {},
+            entry.prompt = prompt
-            nodesRan: new Set(),
+            entry.extraData = extraData
-            cachedNodes: new Set()
+            queue.set(get(queue))
+            console.warn("[queueState] UPDATE PROMPT", promptID)
         }
-        s.queuePending.update(qp => { qp.push(entry); return qp })
-        console.debug("[queueState] ADD PROMPT", promptID)
         s.isInterrupting = false;
         return s
     })
@@ -279,6 +308,7 @@ const queueStateStore: WritableQueueStateStore =
     historyUpdated,
     statusUpdated,
     progressUpdated,
+    executionStart,
     executingUpdated,
     executionCached,
     executionError,

src/scss/global.scss

@@ -98,9 +98,14 @@ hr {
     color: var(--panel-border-color);
 }
 
+input, textarea {
+    border-radius: 0 !important;
+}
+
 select {
     color: var(--body-text-color);
-    background: var(--block-background-fill);
+    background: var(--input-background-fill);
+    border: var(--input-border-width) solid var(--input-border-color)
 }
 
 .container {