node-red-contrib-room-tools 1.8.15 → 1.9.0

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
   }
@@ -102,25 +107,106 @@ function initializeVisualBinding () {
     }
     return String(node.value)
   }
+  function repeatMarkerFor (node, repeat) {
+    let current = node
+    while (current && current !== root) {
+      if (current.getAttribute?.('data-cp-repeat') === repeat?.locator) {
+        const key = current.getAttribute('data-cp-repeat-key')
+        return key == null ? null : String(key)
+      }
+      current = current.parentElement
+    }
+    return null
+  }
+  function bindingMatchesNode (node, binding) {
+    if (node.getAttribute('data-cp-auto') !== binding.locator) return false
+    if (!binding.repeat) return true
+    return repeatMarkerFor(node, binding.repeat) === String(binding.instanceKey)
+  }
+  function nodesForBinding (binding) {
+    return [...root.querySelectorAll('[data-cp-auto]')].filter(node => bindingMatchesNode(node, binding))
+  }
+  function nodeForBinding (binding) {
+    const matches = nodesForBinding(binding)
+    return matches.length === 1 ? matches[0] : null
+  }
+  function repeatItem (binding) {
+    const repeat = binding.repeat
+    const source = component[repeat.source]
+    if (!Array.isArray(source)) return undefined
+    if (repeat.kind === 'array') return source[Number(binding.instanceKey)]
+    const keyField = repeat.key.slice(repeat.value.length + 1)
+    return source.find(value => value && String(value[keyField]) === String(binding.instanceKey))
+  }
+  function readRepeatField (item, field) {
+    return field.split('.').reduce((value, name) => value == null ? undefined : value[name], item)
+  }
+  function writeRepeatField (item, field, value) {
+    const names = field.split('.')
+    const last = names.pop()
+    let target = item
+    for (const name of names) {
+      if (!target || typeof target !== 'object') return false
+      target = target[name]
+    }
+    if (!target || typeof target !== 'object') return false
+    if (!Object.is(target[last], value)) target[last] = value
+    return true
+  }
+  function repeatModelValue (binding) {
+    if (!binding.repeat || !binding.model) return binding.model ? component[binding.model] : undefined
+    const repeat = binding.repeat
+    const source = component[repeat.source]
+    if (!Array.isArray(source)) return undefined
+    const item = repeatItem(binding)
+    if (repeat.kind === 'array' && binding.model === `${repeat.source}[${repeat.index}]`) return item
+    const prefix = repeat.value + '.'
+    const indexedPrefix = repeat.index ? `${repeat.source}[${repeat.index}].` : ''
+    const field = binding.model.startsWith(prefix) ? binding.model.slice(prefix.length)
+      : indexedPrefix && binding.model.startsWith(indexedPrefix)
+        ? binding.model.slice(indexedPrefix.length) : ''
+    return item && field ? readRepeatField(item, field) : undefined
+  }
+  function setRepeatModel (binding, value) {
+    if (!binding.repeat || !binding.model) return false
+    const repeat = binding.repeat
+    const source = component[repeat.source]
+    if (!Array.isArray(source)) return false
+    const item = repeatItem(binding)
+    const prefix = repeat.value + '.'
+    const indexedPrefix = repeat.index ? `${repeat.source}[${repeat.index}].` : ''
+    const field = binding.model.startsWith(prefix) ? binding.model.slice(prefix.length)
+      : indexedPrefix && binding.model.startsWith(indexedPrefix)
+        ? binding.model.slice(indexedPrefix.length) : ''
+    if (field) {
+      return writeRepeatField(item, field, value)
+    }
+    if (repeat.kind !== 'array' || binding.model !== `${repeat.source}[${repeat.index}]`) return false
+    const index = Number(binding.instanceKey)
+    if (!Number.isInteger(index) || index < 0 || index >= source.length) return false
+    if (!Object.is(source[index], value)) source[index] = value
+    return true
+  }
   function showFeedback () {
     for (const [id, binding] of saved) {
-      if (binding.mode === 'write') continue
-      const matches = root.querySelectorAll('[data-cp-auto="' + binding.locator + '"]')
-      if (matches.length !== 1) continue
+      if (binding.mode === 'write' || binding.readMeta?.meter) continue
+      const node = nodeForBinding(binding)
+      if (!node) continue
       if (!Object.prototype.hasOwnProperty.call(component.boundState, id)) continue
       const value = component.boundDisplayValue(id, component.boundState[id])
-      const node = matches[0]
       const displayValue = ['range', 'meter'].includes(binding.adapter)
         ? mappedValue(Number(value), binding.readMeta || binding.writeMeta,
           numericRange(binding, node)) : value
       if (binding.model) {
         if (binding.component && binding.adapter === 'text-input' &&
           (pendingText.has(id) || node.contains?.(document.activeElement))) continue
-        if (binding.model in component && !component.$options?.computed?.[binding.model]) {
-          if (!Object.is(component[binding.model], displayValue)) {
+        const current = repeatModelValue(binding)
+        if (binding.repeat || (binding.model in component && !component.$options?.computed?.[binding.model])) {
+          if (!Object.is(current, displayValue)) {
             pendingText.delete(id)
             if (binding.component) feedbackModels.set(id, displayValue)
-            component[binding.model] = displayValue
+            if (binding.repeat) setRepeatModel(binding, displayValue)
+            else component[binding.model] = displayValue
             if (binding.component && component.$nextTick) {
               void component.$nextTick(() => {
                 if (Object.is(feedbackModels.get(id), displayValue)) feedbackModels.delete(id)
@@ -146,11 +232,12 @@ function initializeVisualBinding () {
   function attachControls () {
     for (const node of root.querySelectorAll('[data-cp-auto]')) {
       if (attached.has(node)) continue
-      attached.add(node)
       const locator = node.getAttribute('data-cp-auto')
-      const matched = [...saved].find(([, entry]) => entry.locator === locator)
+      const matched = [...saved].find(([, entry]) => bindingMatchesNode(node, entry))
       if (!matched) continue
       const [id, binding] = matched
+      if (nodeForBinding(binding) !== node) continue
+      attached.add(node)
       if (binding.mode === 'read') continue
       if (binding.component) {
         if (binding.adapter === 'text-input') {
@@ -192,8 +279,40 @@ function initializeVisualBinding () {
         })
       } else node.addEventListener('change', () => send(true))
     }
+    if (meterEntries.length) {
+      meterTargets.clear()
+      for (const [id, binding] of meterEntries) {
+        const node = nodeForBinding(binding)
+        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.repeat) setRepeatModel(binding, value)
+        else 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
@@ -230,7 +349,9 @@ function initializeVisualBinding () {
           console.error('ControlPanel binding command failed', error)
         }
       }
-      const unwatch = component.$watch(binding.model, value => {
+      const unwatch = component.$watch(
+        binding.repeat ? () => repeatModelValue(binding) : binding.model,
+        value => {
         if (feedbackModels.has(id)) {
           const feedbackValue = feedbackModels.get(id)
           feedbackModels.delete(id)
@@ -246,21 +367,25 @@ function initializeVisualBinding () {
           clearTimeout(finishTimer)
           finishTimer = setTimeout(() => send(value, true), 160)
         } else send(value, true)
-      })
+        })
       cleanup.push(() => { clearTimeout(finishTimer); unwatch() })
     }
   }
   function closeOverlay () { overlay?.remove(); overlay = null }
+  function sameBindingTarget (entry, candidate) {
+    return entry.locator === candidate.locator &&
+      (!candidate.repeat || String(entry.instanceKey) === String(candidate.instanceKey))
+  }
   function updateBindingMarkers () {
     for (const node of root.querySelectorAll('[data-cpv-bound="true"]')) {
       node.removeAttribute('data-cpv-bound')
       node.removeAttribute('data-cpv-binding-id')
     }
     if (!editing || !editSession) return
-    const bindings = new Map(draft.map(entry => [entry.locator, entry]))
     for (const node of root.querySelectorAll('[data-cp-auto]')) {
-      const entry = bindings.get(node.getAttribute('data-cp-auto'))
+      const entry = draft.find(item => bindingMatchesNode(node, item))
       if (!entry) continue
+      if (nodeForBinding(entry) !== node) continue
       node.setAttribute('data-cpv-bound', 'true')
       node.setAttribute('data-cpv-binding-id', entry.id)
     }
@@ -269,10 +394,10 @@ function initializeVisualBinding () {
     closeOverlay()
     overlay = element('div', null, 'cpv-menu')
     overlay.setAttribute('role', 'menu')
-    const existing = draft.find(entry => entry.locator === candidate.locator)
+    const existing = draft.find(entry => sameBindingTarget(entry, candidate))
     overlay.append(button(existing ? 'Edit binding' : 'Bind control', () => bindingDialog(candidate)))
     if (existing) overlay.append(button('Remove binding', () => {
-      draft = draft.filter(entry => entry.locator !== candidate.locator)
+      draft = draft.filter(entry => !sameBindingTarget(entry, candidate))
       updateBindingMarkers()
       closeOverlay()
       inform('Binding removed from draft')
@@ -330,6 +455,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 +479,7 @@ function initializeVisualBinding () {
       message.textContent = ''
       try {
         await login(user.value, password.value)
+        if (disposed) return
         closeLoginScreen()
       } catch (error) {
         message.textContent = error.message
@@ -366,13 +493,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 +509,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 +519,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')
@@ -411,14 +541,17 @@ function initializeVisualBinding () {
   }
   async function bindingDialog (candidate, options = {}) {
     const returnToBindings = options.returnToBindings === true
-    const existing = draft.find(entry => entry.locator === candidate.locator)
+    const existing = draft.find(entry => sameBindingTarget(entry, candidate))
     const dialog = showDialog(existing ? 'Edit binding' : 'Bind control')
     const form = element('form')
     const name = field(form, 'Name', element('input'))
-    name.value = existing?.label || candidate.label
+    name.value = existing?.label || (candidate.repeat ? `${candidate.label} [${candidate.instanceKey}]` : candidate.label)
     name.maxLength = 80
     const id = field(form, 'Control ID', element('input'))
-    id.value = existing?.id || 'control.' + candidate.locator.slice(-12)
+    const instanceSuffix = candidate.repeat
+      ? '.' + String(candidate.instanceKey).replace(/[^A-Za-z0-9._/-]/g, '-').slice(0, 48)
+      : ''
+    id.value = existing?.id || 'control.' + candidate.locator.slice(-12) + instanceSuffix
     const modeOptions = ['meter', 'text-display'].includes(candidate.adapter)
       ? ['read'] : ['both', 'write', 'read']
     const mode = field(form, 'Mode', choose('Mode', modeOptions.map(value => ({ value, text: value })), existing?.mode || modeOptions[0]))
@@ -486,7 +619,7 @@ function initializeVisualBinding () {
     const actions = element('div', null, 'cpv-actions')
     actions.append(button('Cancel', () => finishBindingEdit(returnToBindings)))
     if (existing) actions.append(button('Remove', () => {
-      draft = draft.filter(entry => entry.locator !== candidate.locator)
+      draft = draft.filter(entry => !sameBindingTarget(entry, candidate))
       finishBindingEdit(returnToBindings)
       inform('Binding removed from draft')
     }))
@@ -497,7 +630,7 @@ function initializeVisualBinding () {
     form.addEventListener('submit', event => {
       event.preventDefault()
       if (!/^[A-Za-z][A-Za-z0-9._/-]{0,127}$/.test(id.value) ||
-        draft.some(entry => entry.id === id.value && entry.locator !== candidate.locator)) {
+        draft.some(entry => entry.id === id.value && !sameBindingTarget(entry, candidate))) {
         message.textContent = 'Control ID must be unique and valid'; return
       }
       if (!name.value.trim() || !device.value || (mode.value !== 'read' && !write.value) ||
@@ -507,12 +640,13 @@ function initializeVisualBinding () {
       const entry = {
         id: id.value, locator: candidate.locator, adapter: candidate.adapter,
         ...(candidate.model ? { model: candidate.model } : {}),
+        ...(candidate.repeat ? { repeat: candidate.repeat, instanceKey: String(candidate.instanceKey) } : {}),
         label: name.value.trim(), mode: mode.value, device: device.value,
         writePath: mode.value === 'read' ? '' : write.value,
         readPath: mode.value === 'write' ? '' : read.value,
         onebased: numbering.value === 'true'
       }
-      draft = draft.filter(item => item.locator !== candidate.locator)
+      draft = draft.filter(item => !sameBindingTarget(item, candidate))
       draft.push(entry)
       updateBindingMarkers()
       finishBindingEdit(returnToBindings)
@@ -566,6 +700,8 @@ function initializeVisualBinding () {
       const position = (order.get(a.locator) ?? Number.MAX_SAFE_INTEGER) -
         (order.get(b.locator) ?? Number.MAX_SAFE_INTEGER)
       if (position) return position
+      const instancePosition = String(a.instanceKey || '').localeCompare(String(b.instanceKey || ''))
+      if (instancePosition) return instancePosition
       return String(a.id).localeCompare(String(b.id))
     })
   }
@@ -580,10 +716,11 @@ function initializeVisualBinding () {
         details.append(element('span', path, 'cpv-binding-path'))
         row.append(details)
         const actions = element('div', null, 'cpv-binding-actions')
-        const candidate = snapshot.candidates.find(item => item.locator === entry.locator && item.supported)
+        const baseCandidate = snapshot.candidates.find(item => item.locator === entry.locator && item.supported)
+        const candidate = baseCandidate?.repeat ? { ...baseCandidate, instanceKey: entry.instanceKey } : baseCandidate
         const edit = button('Edit', () => bindingDialog(candidate, { returnToBindings: true }))
-        edit.disabled = !candidate
-        if (!candidate) edit.title = 'This control is no longer available on the page'
+        edit.disabled = !candidate || !nodeForBinding(entry)
+        if (edit.disabled) edit.title = 'This control is no longer available on the page'
         actions.append(edit)
         actions.append(button('Remove', () => {
           draft = draft.filter(item => item.id !== entry.id)
@@ -604,9 +741,17 @@ function initializeVisualBinding () {
   function candidateFromEvent (event) {
     const node = event.target?.closest?.('[data-cp-auto]')
     if (!node || !root.contains(node) || !snapshot) return null
-    const candidate = snapshot.candidates.find(item => item.locator === node.getAttribute('data-cp-auto'))
-    if (!candidate?.component || !candidate.model) return candidate
-    const value = component[candidate.model]
+    const baseCandidate = snapshot.candidates.find(item => item.locator === node.getAttribute('data-cp-auto'))
+    if (!baseCandidate) return null
+    const instanceKey = baseCandidate.repeat ? repeatMarkerFor(node, baseCandidate.repeat) : undefined
+    const candidate = baseCandidate.repeat
+      ? { ...baseCandidate, ...(instanceKey == null ? {} : { instanceKey }) }
+      : baseCandidate
+    if (candidate.repeat && instanceKey == null) {
+      return { ...candidate, supported: false, reason: 'Repeated control instance key is unavailable' }
+    }
+    if (!candidate.component || !candidate.model) return candidate
+    const value = candidate.repeat ? repeatModelValue(candidate) : component[candidate.model]
     if (value == null) return candidate
     if (candidate.adapter === 'switch' && typeof value !== 'boolean') {
       return { ...candidate, supported: false, reason: 'This Vuetify switch needs a boolean v-model field' }
@@ -658,6 +803,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 +894,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 +902,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 +914,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-http.js

@@ -56,12 +56,13 @@ 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()
   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

package/panel-meter-client.js

@@ -0,0 +1,84 @@
+// Self-contained: serialized as a Vue method, with factories supplied by the node.
+function createPanelMeterClient ({ socket, panelId, room, ids, request, createReceiver,
+  createRenderer, apply, invalidate, onUnauthorized }) {
+  if (!socket) throw Error('Dashboard socket is unavailable for meter telemetry')
+  let auth = null, renderer = null, generation = 0, disposed = false
+  let retry = null, stale = null, connecting = false, delay = 500
+  const stopRendering = () => {
+    renderer?.close(); renderer = null
+    clearTimeout(stale); stale = null
+    invalidate()
+  }
+  const pause = () => {
+    generation++
+    connecting = false
+    clearTimeout(retry); retry = null
+    if (socket.connected) socket.emit('control-panel:meter-unsubscribe', panelId)
+    stopRendering()
+  }
+  const connect = async () => {
+    if (disposed || !auth || document.hidden || !socket.connected || connecting) return
+    clearTimeout(retry); retry = null
+    connecting = true
+    const expected = generation
+    try {
+      const { response, result } = await request(auth.endpoint + '/meter-ticket', {
+        method: 'POST', credentials: 'same-origin',
+        headers: { 'Content-Type': 'application/json', [auth.header]: auth.csrf },
+        body: JSON.stringify({ room, socketId: socket.id })
+      }, 5000, async response => ({ response, result: await response.json() }))
+      if (disposed || expected !== generation || document.hidden) return
+      if (response.status === 401) { pause(); auth = null; onUnauthorized(); return }
+      if (!response.ok) throw Error(result.error || 'Meter subscription failed')
+      delay = 500
+      socket.emit('control-panel:meter-subscribe', panelId, result.ticket)
+    } catch (_) {
+      if (!disposed && expected === generation && auth) {
+        retry = setTimeout(connect, delay)
+        delay = Math.min(delay * 2, 5000)
+      }
+    } finally { if (expected === generation) connecting = false }
+  }
+  const ready = layout => {
+    if (disposed || !auth || document.hidden || layout?.panelId !== panelId || layout.room !== room ||
+      !Array.isArray(layout.ids) || JSON.stringify(layout.ids) !== JSON.stringify(ids)) return
+    stopRendering()
+    try {
+      renderer = createRenderer({ receiver: createReceiver(layout),
+        requestFrame: callback => requestAnimationFrame(callback), cancelFrame: cancelAnimationFrame,
+        apply: frame => { apply(frame, ids) } })
+    } catch (_) { stopRendering() }
+  }
+  const frame = message => {
+    if (message?.panelId !== panelId || !auth || document.hidden || !renderer?.receive(message)) return
+    clearTimeout(stale)
+    stale = setTimeout(invalidate, 1500)
+  }
+  const ended = message => {
+    if (message?.panelId !== panelId) return
+    stopRendering()
+    if (auth && !disposed && !retry) retry = setTimeout(connect, 500)
+  }
+  const disconnected = () => { generation++; connecting = false; stopRendering() }
+  const visibility = () => { if (document.hidden) pause(); else void connect() }
+  socket.on('control-panel:meter-ready', ready)
+  socket.on('control-panel:meter-frame', frame)
+  socket.on('control-panel:meter-ended', ended)
+  socket.on('connect', connect)
+  socket.on('disconnect', disconnected)
+  document.addEventListener('visibilitychange', visibility)
+  return {
+    setAuth (next) { pause(); auth = next; delay = 500; if (auth) void connect() },
+    close () {
+      disposed = true; pause(); auth = null
+      socket.off('control-panel:meter-ready', ready)
+      socket.off('control-panel:meter-frame', frame)
+      socket.off('control-panel:meter-ended', ended)
+      socket.off('connect', connect)
+      socket.off('disconnect', disconnected)
+      document.removeEventListener('visibilitychange', visibility)
+    }
+  }
+}
+
+module.exports = { createPanelMeterClient }