From ea6d5d4e591dd3aa050304d5d36005ab98dd6023 Mon Sep 17 00:00:00 2001
From: Mel Massadian <7041726+melMass@users.noreply.github.com>
Date: Sun, 7 Dec 2025 22:58:57 +0100
Subject: [PATCH] =?UTF-8?q?refactor(api):=20=E2=9C=A8=20add=20reactive=20A?=
 =?UTF-8?q?PI=20change=20notifications?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- introduced MTB_API_CHANGED_EVENT custom event for triggering panel updates
- added notifyAPIChanged() function dispatched on API modifications
- setup event listener in APIPanel constructor to debounce updates via requestAnimationFrame
- improved boolean value handling to recognize numeric 1/'1' as true
- ensures UI stays in sync when API properties change across extension, widget manager, and panel
---
 web_source/src/lib/InspectorInput.svelte |  5 +++--
 web_source/src/mtb_api/extension.ts      |  4 +++-
 web_source/src/mtb_api/index.ts          |  2 +-
 web_source/src/mtb_api/panel.svelte.ts   | 25 ++++++++++++++++++++++++
 web_source/src/mtb_api/widget-manager.ts |  4 ++++
 5 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/web_source/src/lib/InspectorInput.svelte b/web_source/src/lib/InspectorInput.svelte
index 0b0e037..64b2047 100644
--- a/web_source/src/lib/InspectorInput.svelte
+++ b/web_source/src/lib/InspectorInput.svelte
@@ -59,17 +59,18 @@
       />
     {/if}
   {:else if item.type === 'BOOLEAN'}
+    {@const isChecked = value === true || value === 'true' || value === 1 || value === '1'}
     <label class="mtb-toggle">
       <input
         type="checkbox"
-        checked={value === true || value === 'true'}
+        checked={isChecked}
         onchange={(e) => {
           value = e.currentTarget.checked
           onInput(e)
         }}
       />
       <span class="mtb-toggle-slider"></span>
-      <span class="mtb-toggle-label">{value ? 'On' : 'Off'}</span>
+      <span class="mtb-toggle-label">{isChecked ? 'On' : 'Off'}</span>
     </label>
   {:else if item.type === 'COLOR'}
     <ColorPicker
diff --git a/web_source/src/mtb_api/extension.ts b/web_source/src/mtb_api/extension.ts
index 4f49469..aaab5b8 100644
--- a/web_source/src/mtb_api/extension.ts
+++ b/web_source/src/mtb_api/extension.ts
@@ -6,7 +6,7 @@
 import { app } from '@/scripts/app'
 import * as shared from '@mtb/shared'
 import { apiSettingsWidgetManager } from './widget-manager'
-import { getAPIPanel } from './panel.svelte'
+import { getAPIPanel, notifyAPIChanged } from './panel.svelte'
 import type { MTBNode } from './types'
 
 interface ContextMenuItem {
@@ -79,6 +79,7 @@ export function registerMtbApiExtension(): void {
             } else {
               node.setProperty('useAPI', true)
             }
+            notifyAPIChanged()
           },
         }
         options.push(markApiItem)
@@ -97,6 +98,7 @@ export function registerMtbApiExtension(): void {
               apiSettingsWidgetManager.applySettings(node, { isAPIOutput: true })
               node.setProperty('useAPI', true)
             }
+            notifyAPIChanged()
           },
         }
         options.push(markOutputItem)
diff --git a/web_source/src/mtb_api/index.ts b/web_source/src/mtb_api/index.ts
index 6e21972..a889419 100644
--- a/web_source/src/mtb_api/index.ts
+++ b/web_source/src/mtb_api/index.ts
@@ -19,5 +19,5 @@ export { API_COLOR, OUTPUT_COLOR } from './constants'
 // Re-export core modules
 export { graphToPrompt } from './graph-to-prompt'
 export { APISettingsWidgetManager, apiSettingsWidgetManager } from './widget-manager'
-export { APIPanel, getAPIPanel } from './panel.svelte'
+export { APIPanel, getAPIPanel, notifyAPIChanged, MTB_API_CHANGED_EVENT } from './panel.svelte'
 export { registerMtbApiExtension } from './extension'
diff --git a/web_source/src/mtb_api/panel.svelte.ts b/web_source/src/mtb_api/panel.svelte.ts
index a525a02..e6e3a46 100644
--- a/web_source/src/mtb_api/panel.svelte.ts
+++ b/web_source/src/mtb_api/panel.svelte.ts
@@ -30,6 +30,14 @@ function createPanelProps() {
   return props
 }
 
+/** Custom event for API changes */
+export const MTB_API_CHANGED_EVENT = 'mtb:api:changed'
+
+/** Dispatch event to notify panel of changes */
+export function notifyAPIChanged(): void {
+  window.dispatchEvent(new CustomEvent(MTB_API_CHANGED_EVENT))
+}
+
 /**
  * Controls the API panel UI for managing exposed workflow inputs
  */
@@ -37,9 +45,26 @@ export class APIPanel {
   private component: ReturnType<typeof mount> | null = null
   private props = createPanelProps()
   private sidebarMode = false
+  private listening = false
 
   constructor() {
     // Don't mount automatically - wait for renderInto or show
+    this.setupChangeListener()
+  }
+
+  /**
+   * Listen for API changes and update panel reactively
+   */
+  private setupChangeListener(): void {
+    if (this.listening) return
+    this.listening = true
+
+    window.addEventListener(MTB_API_CHANGED_EVENT, () => {
+      // Debounce updates slightly
+      requestAnimationFrame(() => {
+        this.updateContent()
+      })
+    })
   }
 
   /**
diff --git a/web_source/src/mtb_api/widget-manager.ts b/web_source/src/mtb_api/widget-manager.ts
index 71da4c5..2177dbd 100644
--- a/web_source/src/mtb_api/widget-manager.ts
+++ b/web_source/src/mtb_api/widget-manager.ts
@@ -8,6 +8,7 @@ import { $el } from '@/scripts/ui'
 import * as shared from '@mtb/shared'
 import { API_COLOR, OUTPUT_COLOR } from './constants'
 import { API_INPUT_TYPES, type APIInputType, type APINodeSettings, type MTBNode } from './types'
+import { notifyAPIChanged } from './panel.svelte'
 import CSS from './api_nodes.css?inline'
 
 declare const LiteGraph: {
@@ -199,6 +200,7 @@ export class APISettingsWidgetManager {
         })
         contentContainer.classList.add('mtb_api_disabled')
       }
+      notifyAPIChanged()
     })
 
     const title = document.createElement('span')
@@ -236,6 +238,7 @@ export class APISettingsWidgetManager {
       this.applySettings(node, {
         inputs: { [widget.name]: { type: typeSelect.value as APIInputType } },
       })
+      notifyAPIChanged()
     })
 
     // Name input
@@ -252,6 +255,7 @@ export class APISettingsWidgetManager {
       this.applySettings(node, {
         inputs: { [widget.name]: { name: nameInput.value } },
       })
+      notifyAPIChanged()
     })
 
     const separator = document.createElement('hr')