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
-                        // since we don't have a prompt ID until the backend
-                        // returns!
-                        promptID = response.promptID;
-                        queueState.afterQueued(promptID, num, p.output, extraData)
-
                             error = response.error;
+                        }
+                        else {
+                            queueState.afterQueued(response.promptID, num, p.output, extraData)
+                        }
                     } 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]
+     if (entry != null) {
+         target = entry.dragItem
          attrsChanged = target.attrsChanged;
          if (target.type === "widget") {
              node = (target as WidgetLayout).node
          }
-     else {
-         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,10 +236,8 @@ function executionError(promptID: PromptID, message: string) {
     })
 }
 
-function afterQueued(promptID: PromptID, number: number, prompt: SerializedPromptInputsAll, extraData: any) {
+function createNewQueueEntry(promptID: PromptID, number: number = -1, prompt: SerializedPromptInputsAll = {}, extraData: any = {}): QueueEntry {
-    console.debug("[queueState] afterQueued", promptID, Object.keys(prompt))
+    return {
-    store.update(s => {
-        const entry: QueueEntry = {
         number,
         queuedAt: new Date(), // Now
         finishedAt: null,
@@ -250,8 +249,38 @@ function afterQueued(promptID: PromptID, number: number, prompt: SerializedPromp
         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 [index, entry, queue] = findEntryInPending(promptID);
+        if (entry == null) {
+            const entry = createNewQueueEntry(promptID, number, prompt, extraData);
+            s.queuePending.update(qp => { qp.push(entry); return qp })
+            console.debug("[queueState] ADD PROMPT", promptID)
+        }
+        else {
+            entry.number = number;
+            entry.prompt = prompt
+            entry.extraData = extraData
+            queue.set(get(queue))
+            console.warn("[queueState] UPDATE 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 {