node-red-contrib-room-tools 1.8.9 → 1.8.16

package/meter-frame.js

@@ -0,0 +1,111 @@
+// Shared, non-reactive receivers; usable in Node and injected Vue component methods.
+function createMeterReceiver (manifest) {
+  const number = value => typeof value === 'number' && Number.isFinite(value)
+  if (manifest?.kind !== 'meter-manifest' || typeof manifest.streamId !== 'string' ||
+    !manifest.streamId.trim() || manifest.streamId.length > 255 ||
+    typeof manifest.epoch !== 'string' || !manifest.epoch || manifest.epoch.length > 128 ||
+    !Number.isInteger(manifest.layoutVersion) || manifest.layoutVersion < 1 ||
+    manifest.layoutVersion > 2147483647 || manifest.clock !== 'monotonic-ms' ||
+    !number(manifest.publishHz) || manifest.publishHz < 1 || manifest.publishHz > 60 ||
+    !Array.isArray(manifest.points) || !manifest.points.length || manifest.points.length > 256) {
+    throw Error('Invalid meter manifest')
+  }
+  const paths = new Set()
+  const points = Array.from(manifest.points, point => {
+    if (typeof point?.path !== 'string' || !/^\/[^/]/.test(point.path) ||
+      point.path.length > 1025 || paths.has(point.path) ||
+      !['integer', 'float'].includes(point.type) || !number(point.min) ||
+      !number(point.max) || point.min >= point.max ||
+      (point.type === 'integer' && (!Number.isSafeInteger(point.min) || !Number.isSafeInteger(point.max))) ||
+      typeof point.unit !== 'string' || point.unit.length > 32) throw Error('Invalid meter point')
+    paths.add(point.path)
+    return Object.freeze({ path: point.path, type: point.type, min: point.min, max: point.max, unit: point.unit })
+  })
+  const schema = Object.freeze({ ...manifest, points: Object.freeze(points) })
+  let latest = null, pending = false, closed = false
+  return {
+    manifest: schema,
+    accept (frame) {
+      if (closed || frame?.kind !== 'meter-frame' || frame.streamId !== schema.streamId ||
+        frame.epoch !== schema.epoch || frame.layoutVersion !== schema.layoutVersion ||
+        !Number.isSafeInteger(frame.seq) || frame.seq < 1 || (latest && frame.seq <= latest.seq) ||
+        !number(frame.sampleTime) || frame.sampleTime < 0 ||
+        !Array.isArray(frame.values) || frame.values.length !== points.length ||
+        !Array.isArray(frame.valid) || frame.valid.length !== points.length) return false
+      const values = [], valid = []
+      for (let index = 0; index < points.length; index++) {
+        const point = points[index], value = frame.values[index], flag = frame.valid[index]
+        if (typeof flag !== 'boolean' || (flag && (!number(value) ||
+          value < point.min || value > point.max ||
+          (point.type === 'integer' && !Number.isSafeInteger(value))))) return false
+        values.push(flag ? value : null)
+        valid.push(flag)
+      }
+      latest = Object.freeze({ kind: 'meter-frame', streamId: schema.streamId,
+        epoch: schema.epoch, seq: frame.seq, layoutVersion: schema.layoutVersion,
+        sampleTime: frame.sampleTime, values: Object.freeze(values), valid: Object.freeze(valid) })
+      pending = true
+      return true
+    },
+    snapshot () { return latest },
+    take () {
+      if (!pending) return null
+      pending = false
+      return latest
+    },
+    close () { closed = true; pending = false; latest = null }
+  }
+}
+
+function createMeterRenderer ({ receiver, requestFrame, cancelFrame, apply }) {
+  let handle = null, closed = false
+  return {
+    receive (frame) {
+      if (closed || !receiver.accept(frame)) return false
+      if (handle === null) {
+        handle = requestFrame(() => {
+          handle = null
+          const current = receiver.take()
+          if (!closed && current) apply(current)
+        })
+      }
+      return true
+    },
+    close () {
+      closed = true
+      if (handle !== null) cancelFrame(handle)
+      handle = null
+      receiver.close()
+    }
+  }
+}
+
+function createRoomMeterReceiver (layout) {
+  if (layout?.kind !== 'room-meter-layout' || typeof layout.panelId !== 'string' ||
+    typeof layout.room !== 'string' || typeof layout.epoch !== 'string' || !layout.epoch ||
+    !Array.isArray(layout.ids) || !layout.ids.length || layout.ids.length > 256 ||
+    layout.ids.some(id => typeof id !== 'string' || !id) || new Set(layout.ids).size !== layout.ids.length) {
+    throw Error('Invalid Room meter layout')
+  }
+  let latest = null, pending = false, closed = false
+  const count = layout.ids.length
+  return {
+    accept (frame) {
+      if (closed || frame?.kind !== 'room-meter-frame' || frame.panelId !== layout.panelId ||
+        frame.room !== layout.room || frame.epoch !== layout.epoch ||
+        !Number.isSafeInteger(frame.seq) || frame.seq < 1 || (latest && frame.seq <= latest.seq) ||
+        !Array.isArray(frame.values) || frame.values.length !== count ||
+        !Array.isArray(frame.valid) || frame.valid.length !== count ||
+        frame.valid.some((flag, index) => typeof flag !== 'boolean' || (flag
+          ? typeof frame.values[index] !== 'number' || !Number.isFinite(frame.values[index])
+          : frame.values[index] !== null))) return false
+      latest = { values: frame.values.slice(), valid: frame.valid.slice(), seq: frame.seq }
+      pending = true
+      return true
+    },
+    take () { if (!pending) return null; pending = false; return latest },
+    close () { closed = true; latest = null; pending = false }
+  }
+}
+
+module.exports = { createMeterReceiver, createMeterRenderer, createRoomMeterReceiver }

package/meter-route.js

@@ -0,0 +1,12 @@
+function meterRoute (value) {
+  if (value == null) return null
+  if (!value || typeof value !== 'object' || Array.isArray(value) ||
+    typeof value.streamId !== 'string' || !value.streamId.trim() || value.streamId.length > 255 ||
+    ![value.eventPath, value.manifestPath].every(path => typeof path === 'string' &&
+      /^\/\/[^/]/.test(path) && path.length <= 1026) || value.eventPath === value.manifestPath) {
+    throw Error('Invalid meter delivery metadata')
+  }
+  return { streamId: value.streamId, eventPath: value.eventPath, manifestPath: value.manifestPath }
+}
+
+module.exports = { meterRoute }

package/native-binding-plan.js

@@ -1,4 +1,5 @@
 const { configuredRoutes } = require('./control-bound-protocol')
+const { meterRoute } = require('./meter-route')
 
 const supportedTypes = {
   boolean: { eventType: 'Boolean', eventOptions: { boolParamFilter: 'Any' } },
@@ -28,6 +29,7 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
   const nodes = []
   const readTargets = new Map()
   const writeTargets = new Map()
+  const meterStreams = new Map()
   const commandRules = []
   const commandWires = []
 
@@ -51,7 +53,10 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     if (['source', 'preset'].includes(type) && !['enum', 'integer', 'string'].includes(target.type)) {
       throw new Error(`Choice control bound to ${target.type}: ${path}`)
     }
-    if (!['mute', 'power', 'level', 'dimmer', 'position', 'text', 'source', 'preset'].includes(type)) {
+    if (type === 'meter' && (!target.meter || !['integer', 'float'].includes(target.type) || target.access !== 'ro')) {
+      throw new Error(`Meter control must bind to a readonly Meter target: ${path}`)
+    }
+    if (!['mute', 'power', 'level', 'dimmer', 'position', 'meter', 'text', 'source', 'preset'].includes(type)) {
       throw new Error(`Control type requires a separate command adapter: ${type}`)
     }
     if (!['ro', 'wo', 'rw'].includes(target.access) || !target.access.includes(access)) {
@@ -88,6 +93,47 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     if (control.mode !== 'write') {
       if (!binding.readPath) throw new Error(`Missing read path: ${id}`)
       const target = metadata(binding.device, binding.readPath, control.type, 'r')
+      if (target.meter) {
+        const meter = meterRoute(target.meter)
+        if (control.mode !== 'read' || control.adapter !== 'meter') throw Error(`Meter is read-only: ${id}`)
+        const key = JSON.stringify([target.device, meter.streamId])
+        const previous = meterStreams.get(key)
+        if (previous) {
+          if (JSON.stringify(previous.meter) !== JSON.stringify(meter) || previous.onebased !== target.onebased) {
+            throw Error(`Conflicting meter stream: ${meter.streamId}`)
+          }
+          continue
+        }
+        const index = meterStreams.size + 1
+        const statusId = `${scopeId}-meter-read-${index}`
+        const tagIds = []
+        meterStreams.set(key, { meter, onebased: target.onebased, statusId, tagIds })
+        for (const [role, path] of [['manifest', meter.manifestPath], ['frame', meter.eventPath]]) {
+          const eventId = `${scopeId}-meter-${role}-${index}`
+          const tagId = `${eventId}-tag`
+          tagIds.push(tagId)
+          const y = 540 + (index - 1) * 280 + (role === 'frame' ? 140 : 0)
+          if (role === 'manifest') nodes.push({
+            id: statusId, type: 'Status', z: subflowId, name: `Read meter manifest ${target.device}`,
+            x: 440, y: y - 60, mojo: { version: '1.0', device: [target.device],
+              parameter: path, onebased: target.onebased }, wires: [[tagId]]
+          })
+          nodes.push({ id: eventId, type: 'Event', z: subflowId,
+            name: `Watch meter ${role} ${target.device} ${meter.streamId}`, x: 440, y,
+            mojo: { version: '1.0', device: [target.device], event: path,
+              eventKind: role === 'frame' ? 'Event' : 'Parameter', paramType: 'String',
+              onebased: target.onebased }, wires: [[tagId]] })
+          nodes.push({ id: tagId, type: 'change', z: subflowId,
+            name: `Identify meter ${role} ${target.device}`, x: 1000, y,
+            rules: [
+              { t: 'set', p: 'kind', pt: 'msg', to: 'device-meter-' + role, tot: 'str' },
+              { t: 'set', p: 'device', pt: 'msg', to: target.device, tot: 'str' },
+              { t: 'set', p: 'path', pt: 'msg', to: path, tot: 'str' },
+              { t: 'set', p: 'streamId', pt: 'msg', to: meter.streamId, tot: 'str' }
+            ], wires: [[]] })
+        }
+        continue
+      }
       const key = JSON.stringify([target.device, target.path])
       if (readTargets.has(key)) continue
       const index = readTargets.size + 1
@@ -128,6 +174,8 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
   }
 
   const commandSwitchId = `${scopeId}-commands`
+  // Meter lanes follow ordinary feedback lanes without overlapping their labels.
+  for (const node of nodes) if (node.id.startsWith(`${scopeId}-meter-`)) node.y += readTargets.size * 170
   const routerId = `${scopeId}-router`
   if (commandRules.length) {
     nodes.push({
@@ -148,16 +196,17 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     ],
     checkall: 'false', repair: false, outputs: 2,
     wires: [commandRules.length ? [commandSwitchId] : [],
-      [...readTargets.values()].map(target => target.statusId)]
+      [...readTargets.values(), ...meterStreams.values()].map(target => target.statusId)]
   })
   const subflow = {
     id: subflowId, type: 'subflow', name: `Binding bridge ${scopeId}`,
     info: 'Generated panel binding bridge. Requires a Controller node and authenticated command source.',
     category: 'panel binding',
     in: [{ x: 170, y: 150, wires: [{ id: routerId }] }],
-    out: readTargets.size
-      ? [{ x: 1290, y: Math.round((390 + (readTargets.size + 1) * 85) / 10) * 10,
-        wires: [...readTargets.values()].map(target => ({ id: target.tagId, port: 0 })) }]
+    out: readTargets.size || meterStreams.size
+      ? [{ x: meterStreams.size ? 1600 : 1290, y: Math.round((390 + (readTargets.size + meterStreams.size + 1) * 85) / 10) * 10,
+        wires: [...readTargets.values()].map(target => ({ id: target.tagId, port: 0 }))
+          .concat([...meterStreams.values()].flatMap(target => target.tagIds.map(id => ({ id, port: 0 })))) }]
       : [],
     env: [], meta: {}, color: '#96bca7'
   }
@@ -166,7 +215,8 @@ function compileNativeBindingPlan ({ panel, targets, scopeId }) {
     manifest: {
       subflowId,
       controls: routes.size,
-      nativeReads: readTargets.size,
+      nativeReads: readTargets.size + meterStreams.size,
+      nativeMeterStreams: meterStreams.size,
       nativeWrites: writeTargets.size,
       requiresController: true,
       initialReadMessage: { kind: 'read-all' }

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "node-red-contrib-room-tools",
-  "version": "1.8.9",
+  "version": "1.8.16",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "node-red-contrib-room-tools",
-      "version": "1.8.9",
+      "version": "1.8.16",
       "license": "UNLICENSED",
       "dependencies": {
         "@vue/compiler-sfc": "3.5.42",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-red-contrib-room-tools",
-  "version": "1.8.9",
+  "version": "1.8.16",
   "description": "Authenticated visual control panel binding for Node-RED and MUSE Automator",
   "license": "UNLICENSED",
   "engines": { "node": ">=18.16.0" },
@@ -21,11 +21,16 @@
     "control-catalog.js",
     "control-type-contract.json",
     "control-type-model.js",
+    "meter-route.js",
+    "meter-frame.js",
+    "panel-meter.js",
+    "panel-meter-client.js",
     "panel-template-instrumentation.js",
     "panel-visual-bindings.js",
     "panel-visual-apply.js",
     "panel-editor-auth.js",
     "panel-http.js",
+    "panel-flow-editor-sync.js",
     "panel-binding-editor.js",
     "native-binding-plan.js",
     "managed-native-bridge.js",

package/panel-binding-editor.js

@@ -6,10 +6,15 @@ function initializeVisualBinding () {
   const root = this.$el
   const base = config.editorEndpoint
   const saved = new Map(Object.entries(config.bindings || {}))
+  const meterEntries = [...saved].filter(([, entry]) => entry.readMeta?.meter)
+  const meterTargets = new Map()
+  let meterClient = null, lastMeterFrame = null
   const attached = new WeakSet()
   const feedbackModels = new Map()
   const pendingText = new Map()
   const cleanup = []
+  let disposed = false
+  cleanup.push(() => { disposed = true })
   let editing = new URL(window.location.href).searchParams.get('cp-edit') === config.panelId
   let editSession = null
   let snapshot = null
@@ -47,15 +52,15 @@ function initializeVisualBinding () {
       status.dataset.error = error ? 'true' : 'false'
     }
   }
-  async function request (path, method = 'GET', body) {
-    const response = await component.__panelFetch(base + path, {
+  async function request (path, method = 'GET', body, timeoutMs) {
+    const { response, result } = await component.__panelFetch(base + path, {
       method, credentials: 'same-origin',
       headers: method === 'POST'
         ? { 'Content-Type': 'application/json', 'X-Panel-CSRF': editSession?.csrf || '' }
         : undefined,
       body: method === 'POST' ? JSON.stringify(body || {}) : undefined
-    }, path === '/apply' ? 120000 : 12000)
-    const result = await response.json().catch(() => ({}))
+    }, path === '/apply' ? 120000 : (timeoutMs ?? 12000),
+    async response => ({ response, result: await response.json() }))
     if (!response.ok) throw new Error(result.error || `Request failed (${response.status})`)
     return result
   }
@@ -104,7 +109,7 @@ function initializeVisualBinding () {
   }
   function showFeedback () {
     for (const [id, binding] of saved) {
-      if (binding.mode === 'write') continue
+      if (binding.mode === 'write' || binding.readMeta?.meter) continue
       const matches = root.querySelectorAll('[data-cp-auto="' + binding.locator + '"]')
       if (matches.length !== 1) continue
       if (!Object.prototype.hasOwnProperty.call(component.boundState, id)) continue
@@ -192,8 +197,44 @@ function initializeVisualBinding () {
         })
       } else node.addEventListener('change', () => send(true))
     }
+    if (meterEntries.length) {
+      const locators = new Map()
+      for (const node of root.querySelectorAll('[data-cp-auto]')) {
+        const locator = node.getAttribute('data-cp-auto')
+        locators.set(locator, locators.has(locator) ? null : node)
+      }
+      meterTargets.clear()
+      for (const [id, binding] of meterEntries) {
+        const node = locators.get(binding.locator)
+        if (node) meterTargets.set(id, { node, binding })
+      }
+      if (lastMeterFrame) applyMeterFrame(lastMeterFrame.frame, lastMeterFrame.ids)
+      else invalidateMeters()
+    }
     showFeedback()
   }
+  function applyMeterFrame (frame, ids) {
+    lastMeterFrame = { frame, ids }
+    for (let index = 0; index < ids.length; index++) {
+      const target = meterTargets.get(ids[index])
+      if (!target) continue
+      const { node, binding } = target
+      node.setAttribute('data-cpv-meter-valid', String(frame.valid[index]))
+      node.setAttribute('aria-invalid', String(!frame.valid[index]))
+      if (!frame.valid[index]) continue
+      const value = mappedValue(frame.values[index], binding.readMeta, numericRange(binding, node))
+      if (binding.model) {
+        if (binding.model in component && !component.$options?.computed?.[binding.model]) component[binding.model] = value
+      } else node.value = value
+    }
+  }
+  function invalidateMeters () {
+    lastMeterFrame = null
+    for (const { node } of meterTargets.values()) {
+      node.setAttribute('data-cpv-meter-valid', 'false')
+      node.setAttribute('aria-invalid', 'true')
+    }
+  }
   function attachModelControls () {
     for (const [id, binding] of saved) {
       if (!binding.component || !binding.model || binding.mode === 'read') continue
@@ -330,6 +371,7 @@ function initializeVisualBinding () {
   }
   function closeLoginScreen () { loginScreen?.remove(); loginScreen = null }
   function showLoginForm (title, login, editor = false) {
+    if (disposed) return
     const content = coverPage(title, editor ? 'editor' : 'panel', 'login')
     const form = element('form')
     const user = field(form, editor ? 'Editor username' : 'Username', element('input'))
@@ -353,6 +395,7 @@ function initializeVisualBinding () {
       message.textContent = ''
       try {
         await login(user.value, password.value)
+        if (disposed) return
         closeLoginScreen()
       } catch (error) {
         message.textContent = error.message
@@ -366,13 +409,13 @@ function initializeVisualBinding () {
   }
   function loginView () {
     showLoginForm('ControlPanel editor', async (username, password) => {
-      const response = await component.__panelFetch(base + '/login', {
+      const { response, result } = await component.__panelFetch(base + '/login', {
         method: 'POST', credentials: 'same-origin',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ username, password })
-      })
-      const result = await response.json()
+      }, 12000, async response => ({ response, result: await response.json() }))
       if (!response.ok) throw new Error(result.error || 'Login failed')
+      if (disposed) return
       editSession = result
       await loadEditor()
     }, true)
@@ -382,7 +425,9 @@ function initializeVisualBinding () {
   }
   async function loadEditor () {
     snapshot = await request('/config')
+    if (disposed) return
     const response = await request('/devices')
+    if (disposed) return
     devices = response.devices
     draft = snapshot.bindings.map(entry => ({ ...entry, onebased: numberingMode(entry) }))
     closeOverlay()
@@ -390,6 +435,7 @@ function initializeVisualBinding () {
     renderToolbar()
     inform('Choose a control on the page')
     updateBindingMarkers()
+    meterClient?.setAuth({ endpoint: base, csrf: editSession.csrf, header: 'X-Panel-CSRF' })
   }
   function choose (label, options, selected) {
     const select = element('select')
@@ -658,6 +704,25 @@ function initializeVisualBinding () {
   }
   attachControls()
   attachModelControls()
+  if (this.__boundPanelConfig().meter && meterEntries.length) {
+    try {
+      const ids = meterEntries.map(([id]) => id).sort((a, b) => a.localeCompare(b))
+      meterClient = this.__createPanelMeterClient({ socket: this.$socket,
+        panelId: config.panelId, room: this.__boundPanelConfig().room, ids,
+        request: (...args) => component.__panelFetch(...args),
+        createReceiver: this.__createRoomMeterReceiver, createRenderer: this.__createMeterRenderer,
+        apply: applyMeterFrame, invalidate: invalidateMeters,
+        onUnauthorized: () => {
+          if (editing) { editSession = null; loginView() }
+          else component.clearBoundPanelSession()
+        } })
+      cleanup.push(() => meterClient.close())
+      if (!editing) cleanup.push(this.$watch('boundAuthenticated', authenticated => {
+        meterClient.setAuth(authenticated ? { endpoint: component.__boundPanelConfig().endpoint,
+          csrf: component.__boundPanelSession.csrf, header: 'X-Room-CSRF' } : null)
+      }))
+    } catch (error) { console.error('ControlPanel meter initialization failed', error) }
+  }
   observer = new MutationObserver(() => {
     attachControls()
     updateBindingMarkers()
@@ -730,6 +795,7 @@ function initializeVisualBinding () {
     .cpv-binding-actions{display:flex;gap:6px;flex-shrink:0}
     body.cpv-editing [data-cpv-bound="true"]{outline:2px solid #b526f2 !important;outline-offset:3px;box-shadow:0 0 0 4px #b526f255 !important}
     body.cpv-editing [data-cp-auto]:hover{outline:2px solid #b526f2;outline-offset:2px}
+    [data-cpv-meter-valid="false"]{opacity:.45}
   `
   document.head.append(style)
   cleanup.push(() => style.remove())
@@ -737,7 +803,11 @@ function initializeVisualBinding () {
     document.body.classList.add('cpv-editing')
     cleanup.push(() => document.body.classList.remove('cpv-editing'))
     coverPage('Loading...', 'editor')
-    request('/session').then(session => { editSession = session; return loadEditor() })
+    request('/session', 'GET', undefined, 2500).then(session => {
+      if (disposed) return
+      editSession = session
+      return loadEditor()
+    })
       .then(closeLoginScreen).catch(() => loginView())
   } else {
     coverPage('Loading...', 'panel')
@@ -745,10 +815,13 @@ function initializeVisualBinding () {
       if (authenticated) closeLoginScreen()
       else if (!loginScreen) normalLoginView()
     }))
-    component.restoreBoundPanelSession().then(session => {
+    component.restoreBoundPanelSession(2500).then(session => {
+      if (disposed) return
       if (session || component.boundAuthenticated) closeLoginScreen()
       else normalLoginView()
-    }).catch(() => normalLoginView())
+    }).catch(() => {
+      normalLoginView()
+    })
   }
 }
 

package/panel-editor-auth.js

@@ -1,7 +1,7 @@
 const crypto = require('node:crypto')
 const { readJsonBody, replyJson: reply, sameOrigin } = require('./panel-http')
 
-function createPanelEditor ({ panelId, username, password, secureCookie, getConfig, getDevices, getTargets, apply, restoredSessions }) {
+function createPanelEditor ({ panelId, username, password, secureCookie, getConfig, getDevices, getTargets, apply, restoredSessions, onAuthenticatedRequest }) {
   if (!username || !password) return null
   const prefix = `/control-panel-edit/panels/${panelId}`
   const cookieName = `cp_edit_${panelId.replace(/[^a-zA-Z0-9]/g, '_')}`
@@ -71,6 +71,8 @@ function createPanelEditor ({ panelId, username, password, secureCookie, getConf
         reply(res, 403, { error: 'CSRF rejected' })
         return true
       }
+      if (onAuthenticatedRequest && await onAuthenticatedRequest(req, res,
+        { token, expiry: session.expiry })) return true
       if (path === prefix + '/session' && req.method === 'GET') {
         reply(res, 200, { csrf: session.csrf })
       } else if (path === prefix + '/logout' && req.method === 'POST') {
@@ -84,7 +86,7 @@ function createPanelEditor ({ panelId, username, password, secureCookie, getConf
         const device = new URL(req.url, 'http://localhost').searchParams.get('device')
         reply(res, 200, { targets: await getTargets(req, device) })
       } else if (path === prefix + '/apply' && req.method === 'POST') {
-        reply(res, 200, await apply(req, await readJsonBody(req, 65536)))
+        reply(res, 200, await apply(req, await readJsonBody(req, 524288)))
       } else {
         reply(res, 404, { error: 'Not found' })
       }
@@ -97,6 +99,7 @@ function createPanelEditor ({ panelId, username, password, secureCookie, getConf
 
   return {
     handler,
+    sessionActive: token => !closed && (sessions.get(token)?.expiry || 0) > Date.now(),
     sessionSnapshot () {
       return new Map([...sessions].filter(([, session]) => session.expiry > Date.now())
         .map(([token, session]) => [token, { ...session }]))

package/panel-flow-editor-sync.js

@@ -0,0 +1,53 @@
+(function (root, factory) {
+  if (typeof window === 'object') root.ControlPanelFlowEditorSync = factory()
+  else if (typeof module === 'object' && module.exports) module.exports = factory()
+})(typeof window === 'object' ? window : this, function () {
+  const topic = 'notification/runtime-deploy'
+
+  // Node-RED already owns the Flow-changed notification. This listener only
+  // reloads the editor page after a newer runtime revision is announced. It
+  // must never read, clear, import, or deploy Flow data.
+  function createController (hooks) {
+    let stopped = false
+    let reloading = false
+
+    function request (message) {
+      if (stopped || reloading || !message || typeof message.revision !== 'string') return
+      const current = hooks.version()
+      // A retained notification received during page startup describes the
+      // Flow that is already loaded. Ignore it instead of causing a reload.
+      if (typeof current !== 'string' || current === message.revision) return
+      reloading = true
+      hooks.reload()
+    }
+
+    return { request, stop: () => { stopped = true } }
+  }
+
+  function install (RED, $, host = window) {
+    if (RED.__controlPanelFlowSync) return RED.__controlPanelFlowSync
+    if (!RED.comms?.subscribe || !RED.nodes?.version || !host.location?.reload) {
+      RED.notify('ControlPanel Flow change listener is unavailable in this editor.', 'warning')
+      return
+    }
+
+    const controller = createController({
+      version: () => RED.nodes.version(),
+      reload: () => host.location.reload()
+    })
+    const changed = (_topic, message) => controller.request(message)
+    RED.comms.subscribe(topic, changed)
+    const instance = {
+      request: controller.request,
+      dispose () {
+        controller.stop()
+        RED.comms.unsubscribe(topic, changed)
+        delete RED.__controlPanelFlowSync
+      }
+    }
+    RED.__controlPanelFlowSync = instance
+    return instance
+  }
+
+  return { topic, createController, install }
+})

package/panel-http.js

@@ -56,14 +56,37 @@ async function readJsonBody (req, maxBytes) {
 }
 
 // Serialized into the Vue component, so keep this function browser-only and self-contained.
-async function fetchWithTimeout (url, options = {}, timeoutMs = 12000) {
+async function fetchWithTimeout (url, options = {}, timeoutMs = 12000, readResponse) {
   const controller = new AbortController()
-  const timer = setTimeout(() => controller.abort(), timeoutMs)
+  let timedOut = false
+  const timer = setTimeout(() => { timedOut = true; controller.abort() }, timeoutMs)
   try {
-    return await fetch(url, { ...options, signal: controller.signal })
+    const response = await fetch(url, { ...options, signal: controller.signal })
+    return readResponse ? await readResponse(response) : response
+  } catch (error) {
+    if (timedOut) throw new Error('Request timed out; your binding draft is still available')
+    throw error
   } finally {
     clearTimeout(timer)
   }
 }
 
-module.exports = { sameOrigin, replyJson, readJsonBody, fetchWithTimeout }
+// Keep the deadline active through JSON decoding, not just response headers.
+async function runtimeJsonRequest (url, options, { fetcher = fetch, timeoutMs, operation }) {
+  const controller = new AbortController()
+  let timedOut = false
+  const timer = setTimeout(() => { timedOut = true; controller.abort() }, timeoutMs)
+  try {
+    const response = await fetcher(url, { ...options, signal: controller.signal })
+    if (!response.ok) return { response, data: null }
+    return { response, data: await response.json() }
+  } catch (cause) {
+    const error = new Error(`${operation} ${timedOut ? 'timed out' : 'failed'}; ${timedOut ? 'the runtime did not respond in time' : cause.message}`, { cause })
+    error.status = 503
+    throw error
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
+module.exports = { sameOrigin, replyJson, readJsonBody, fetchWithTimeout, runtimeJsonRequest }