signalk-czone 0.3.0-beta.12 → 0.3.0-beta.14

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.3.0-beta.14
+
+- Adds bidirectional CZone links to Shelly Gen2+ switches and Victron GX outputs, with startup, confirmation and relay-function safeguards.
+- Restores Navico chartplotter compatibility with Chromium 69 syntax and flex-spacing fallbacks.
+
+## 0.3.0-beta.13
+
+- Adds a fullscreen icon beside the CZone / Boat Systems branding, with expand/collapse states and accessible labels.
+- Adds standalone tablet home-screen launch assets and safe-area spacing.
+- Documents signalk-ssl setup, trusted CA certificate installation and device reboot steps for HTTPS app launch.
+
 ## 0.3.0-beta.12
 
 - Keeps the connection indicator disconnected when circuit-list REST refreshes succeed but the live WebSocket is down; shows connecting/reconnecting status and the snapshot time.

package/README.md

@@ -195,6 +195,24 @@ Full detail is written on change (plus the last unchanged sample before a change
 - `GET /plugins/signalk-czone/trend?path=<Signal K path>&range=1h|24h|7d|31d|90d|1y`, or `&from=<ms>&to=<ms>` for a custom period. Answers `{ available, tier, start, end, gapMs, data, latest }`, where `data` rows are `[t, value]` (full detail) or `[t, avg, min, max]` (summaries, or full detail reduced to about 400 points), and `latest` is the live value while the circuit is reporting.
 - `GET /plugins/signalk-czone/trend/status` answers where trends are going, free space, and how many circuits are being recorded, or the reason trends are off.
 
+## Third-party switches
+
+Switch something that is not on the CZone network from a CZone display or keypad, with no switchbank: a Shelly, a GX relay, or any output in the Victron switch pane.
+
+1. In the CZone Configuration Tool, add a **virtual circuit** for it and put it on the display. Write the configuration and upload the new ZCF to the plugin.
+2. In the configuration panel, under **Third-party switches**, choose that circuit and link it to:
+   - **a Victron output (through the GX):** anything Venus OS lists as a switchable output: a Shelly added to the GX, the GX's own relays, a Node-RED virtual switch. Needs the plugin running on the GX (D-Bus; `dbus-native` is an optional dependency). A GX relay is offered only when its function is **Manual**; one used as an alarm relay, for a generator, a tank pump or temperature is listed greyed out with the reason and never switched. Set-points and dimmers are not offered as on/off switches.
+   - **a Shelly (directly, by IP address):** Shelly Gen2 or later, no password, through its local RPC API (`/rpc/Switch.Set`, `/rpc/Switch.GetStatus`). No GX needed. **Test** asks the Shelly for its state.
+
+The switch follows the CZone circuit, and the circuit follows the switch when it is switched from anywhere else (its app, the Victron pane, VRM); that needs **Enable CZone read/write control**. Rules, so the two never fight:
+
+- a side is acted on only when it changes, and only if the other side differs; the plugin's own change coming back is recognised;
+- **nothing is switched when the plugin starts**: if the two differ (a GX relay comes back off after a reboot), the link shows *out of step* until one side is switched;
+- a circuit set to **confirm before turning off (on)** is never turned off (on) by a link, unless other apps are allowed to; the link says why and does not retry;
+- a change one side could not take (unreachable, refused, sending disabled) is retried every 15 s; a switch that accepts a command but does not change is reported after 6 s.
+
+The switch is read every 2 s; a CZone change is acted on as its status message arrives. `GET /plugins/signalk-czone/bridge/status` shows each link; `/bridge/outputs` lists the GX's outputs; `/bridge/shelly?host=&channel=` asks a Shelly. Tested on a bench (Shelly PM1 both ways) and on a boat (GX relay 2 switched from a CZone display; the alarm relay refused).
+
 ## Installation
 
 The plugin installs the pinned `signalk-czone-zcf@0.1.0-beta.1` npm dependency automatically. No separate parser installation or Git checkout is required.
@@ -423,3 +441,34 @@ Only the installed path is stored in plugin configuration; the binary ZCF is not
 - **0.3.0-beta.5** — added explicit AC/DC source classification for downstream telemetry storage while retaining stable circuit-name paths and the diagnostics/status tooling.
 
 The beta is intended for extended real-world testing before a stable `0.3.0` release.
+
+## Fullscreen and tablet home-screen launch
+
+Open `/signalk-czone/` directly in your browser. The **fullscreen icon** beside
+the CZone / Boat Systems branding enters fullscreen; tap the icon again or use the browser's exit gesture
+(or Escape on desktop) to leave. It appears only when the browser exposes the
+fullscreen API. Embedded views may need permission from their parent page.
+
+For a home-screen launch, open the app over **trusted HTTPS**, then use your
+browser's **Install app** / **Add to Home Screen** option (Safari: Share → Add to
+Home Screen). Compatible browsers launch CZone in standalone mode without the
+usual address bar. Installation and fullscreen support vary by device/browser.
+The manifest uses relative URLs, so it follows your server's hostname and port;
+no boat IP address is hard-coded. Plain HTTP on a LAN IP may only offer a shortcut.
+
+### Set up HTTPS for a full-screen app
+
+To launch CZone from the tablet or device's home screen without the URL bar and
+browser controls, first set up trusted HTTPS on your Signal K server:
+
+1. Install and configure the **signalk-ssl** plugin.
+2. In Signal K **Server Settings**, turn on the **Use SSL** toggle and apply the settings. Restart Signal K if prompted.
+3. On each tablet or device, download the server's CA certificate (`ca.crt`). For example: [https://einstein.local:3443/signalk-ssl/ca.crt](https://einstein.local:3443/signalk-ssl/ca.crt). Replace `einstein.local` and port `3443` with your server's hostname and HTTPS port.
+4. Import/install `ca.crt` as a trusted CA certificate in the device's certificate settings. Enable trust for the certificate if the device requires a separate step.
+5. After the certificate installs successfully, you will most likely need to **reboot the tablet or device** before the browser recognises it.
+6. Open CZone over HTTPS, for example [https://einstein.local:3443/signalk-czone/](https://einstein.local:3443/signalk-czone/), and check that the browser trusts the connection. Use **Install app** / **Add to Home Screen**, then launch CZone from its new home-screen icon.
+
+Certificate installation and app installation menus vary by device and browser.
+
+The app still needs a live Signal K connection. No offline caching or service
+worker is installed, and installing it does not grant circuit-write permission.

package/index.js

@@ -9,6 +9,9 @@ const monitoring = require('./lib/monitoring')
 const { createTrends } = require('./lib/trends')
 const signalk = require('./lib/signalk')
 const confirmOffLib = require('./lib/confirm-off')
+const { createBridge, bridgeEntries } = require('./lib/bridge')
+const { createShellyDriver } = require('./lib/bridge/shelly')
+const { createVictronDriver } = require('./lib/bridge/victron')
 
 const MAX_UPLOAD_BYTES = 1024 * 1024
 const CZONE_CONFIG_BLOCK_HEADER = 23
@@ -104,6 +107,49 @@ module.exports = function (app) {
   let nmeaReadyAt = null
   let lastNmeaOutput = null
   let runtimeState = new Map()
+
+  // Third-party switches (lib/bridge): a CZone circuit, normally a virtual
+  // circuit added for the purpose, linked to a switch that is not on the CZone
+  // network: a Victron switchable output on the GX's D-Bus (a Shelly added to
+  // the GX, a GX relay set to Manual, a Node-RED virtual switch) or a Shelly
+  // reached directly by IP. lib/bridge holds the linking rules and the drivers
+  // and has no CZone or Signal K code in it.
+  let bridgeBus = null
+  function getBridgeBus () {
+    if (bridgeBus) return bridgeBus
+    let dbus
+    try { dbus = require('dbus-native') } catch (_) { throw new Error('D-Bus support is not installed (only available on a Victron GX)') }
+    bridgeBus = dbus.systemBus()
+    if (bridgeBus && bridgeBus.connection && typeof bridgeBus.connection.on === 'function') {
+      bridgeBus.connection.on('error', err => { log(`Bridge D-Bus: ${err.message}`); closeBridgeBus() })
+    }
+    return bridgeBus
+  }
+  function closeBridgeBus () {
+    if (!bridgeBus) return
+    try { if (bridgeBus.connection && typeof bridgeBus.connection.end === 'function') bridgeBus.connection.end() } catch (_) {}
+    bridgeBus = null
+  }
+  const bridgeDrivers = { victron: createVictronDriver({ getBus: getBridgeBus }), shelly: createShellyDriver() }
+  const bridge = createBridge({
+    log: m => log(m),
+    readCircuit: name => {
+      const st = runtimeState.get(name)
+      return st && st.statusObserved && (st.state === 'ON' || st.state === 'OFF') ? st.state === 'ON' : undefined
+    },
+    writeCircuit: (name, on) => {
+      const c = mapping && mapping.circuits.find(x => x.name === name)
+      if (!c) throw new Error(`no circuit "${name}" in the CZone configuration`)
+      // A link cannot ask "are you sure?": a circuit nominated to confirm is
+      // never switched that way by a link, unless other apps are allowed to.
+      // Refused for good (not retried); the link shows why.
+      const refuse = text => { const err = new Error(text); err.permanent = true; throw err }
+      if (!on && confirmOff.has(c.name) && settings.confirmOffAllowElsewhere !== true) refuse('not switched off: this circuit asks before turning off')
+      if (on && confirmOn.has(c.name) && settings.confirmOnAllowElsewhere !== true) refuse('not switched on: this circuit asks before turning on')
+      sendCircuitState(c, on)
+    },
+    drivers: bridgeDrivers
+  })
   let monitoringRuntime = null
   // Trend recording of circuit current (see lib/trends).
   let trends = null
@@ -718,6 +764,13 @@ module.exports = function (app) {
   // bitmap. The runtime module/bit mapping is decoded from the ZCF status
   // table; it is intentionally not inferred from the primary ZCF
   // module/channel identity.
+  function startBridge () {
+    const entries = bridgeEntries(settings.bridges)
+    const known = entries.filter(e => mapping && mapping.circuits.some(c => c.name === e.circuit))
+    for (const e of entries) if (!known.includes(e)) log(`Third-party switch: circuit "${e.circuit}" is not in the CZone configuration; link ignored`)
+    bridge.start(known)
+  }
+
   function decodeCzoneCircuitStatus (frame) {
     if (!frame || frame.pgn !== 65284 || !frame.data || frame.data.length !== 8) return
     const data = frame.data
@@ -763,6 +816,7 @@ module.exports = function (app) {
         }
       }
 
+      bridge.onCircuit(circuit.name, enabled) // a linked switch follows at once
       const stateSource = signalk.nmea2000Source(frame.source, frame.pgn)
       const observedState = enabled ? 'ON' : 'OFF'
       log(`CZone STATE: ${circuit.name} -> ${observedState} (runtime ${Number(circuit.statusModule).toString(16).padStart(2, '0')}:${Number(circuit.statusMask).toString(16).padStart(8, '0')}, src=${frame.source})`)
@@ -1221,6 +1275,23 @@ module.exports = function (app) {
           title: 'Let other apps turn those circuits off',
           default: false,
           description: 'Other Signal K apps switch with a PUT and cannot ask "are you sure?". Unticked, an off from them is refused with a message; the circuit can still be turned off from the webapp or a CZone keypad.'
+        },
+        bridges: {
+          type: 'array',
+          title: 'Third-party switches',
+          description: 'CZone circuits (normally virtual circuits added for the purpose) linked to a switch that is not on the CZone network. Set up in the configuration panel.',
+          default: [],
+          items: {
+            type: 'object',
+            properties: {
+              circuit: { type: 'string', title: 'CZone circuit' },
+              target: { type: 'string', title: 'Linked to', enum: ['victron', 'shelly'], enumNames: ['A Victron output (through the GX)', 'A Shelly (directly, by IP address)'] },
+              output: { type: 'string', title: 'Victron output (service#id)' },
+              label: { type: 'string', title: 'Name' },
+              host: { type: 'string', title: 'Shelly IP address' },
+              channel: { type: 'number', title: 'Shelly channel', default: 0 }
+            }
+          }
         }
       }
     }),
@@ -1245,6 +1316,7 @@ module.exports = function (app) {
         log
       })
       trends.start()
+      startBridge()
 
       const ready = (reason = 'nmea2000OutAvailable event') => {
         nmeaReady = true
@@ -1320,6 +1392,8 @@ module.exports = function (app) {
       monitoringRuntime = null
       if (trends) trends.stop()
       trends = null
+      bridge.stop()
+      closeBridgeBus()
       reassembler = null
       configFastPacket = null
       clearConfigTransfer()
@@ -1417,6 +1491,21 @@ module.exports = function (app) {
         })
       })
 
+      // Third-party switches: link status, the GX's outputs, a Shelly test.
+      router.get('/bridge/status', (_req, res) => res.json({ links: bridge.status() }))
+      router.get('/bridge/outputs', (_req, res) => {
+        bridgeDrivers.victron.list()
+          .then(outputs => res.json({ available: true, outputs }))
+          .catch(err => res.json({ available: false, outputs: [], detail: `No Victron GX found (${err.message})` }))
+      })
+      router.get('/bridge/shelly', (req, res) => {
+        const host = String((req.query && req.query.host) || '').trim()
+        if (!/^[\w.-]+(:\d{1,5})?$/.test(host)) return res.status(400).json({ ok: false, detail: 'Give the Shelly\'s IP address' })
+        bridgeDrivers.shelly.status({ host, channel: Number(req.query.channel) || 0 })
+          .then(st => res.json({ ok: typeof st.output === 'boolean', output: st.output, power: st.apower, voltage: st.voltage }))
+          .catch(err => res.json({ ok: false, detail: err.message }))
+      })
+
       router.get('/configuration', (_req, res) => {
         res.json({
           source: settings.configurationSource || 'installedZcf',
@@ -1427,7 +1516,10 @@ module.exports = function (app) {
           networkRead: lastNetworkConfig ? { ...lastNetworkConfig, blocks: undefined } : null,
           nmeaReady,
           // The circuits offered under "Confirm before turning off".
-          circuitNames: confirmOffLib.choices({}, mapping ? mapping.circuits : []).map(n => n.value)
+          circuitNames: confirmOffLib.choices({}, mapping ? mapping.circuits : []).map(n => n.value),
+          // Every circuit, for linking a third-party switch (a virtual circuit
+          // added for one may not be listed in the webapp).
+          allCircuitNames: mapping ? mapping.circuits.map(c => c.name).sort((a, b) => a.localeCompare(b)) : []
         })
       })
 
@@ -1592,5 +1684,7 @@ module.exports = function (app) {
     }
   }
 
+  // For tests: run one bridge poll now instead of waiting for its timer.
+  Object.defineProperty(plugin, '_bridgePoll', { value: () => bridge.poll(), enumerable: false })
   return plugin
 }

package/lib/bridge/index.js

@@ -0,0 +1,226 @@
+'use strict'
+
+// Third-party switches driven from CZone.
+//
+// A CZone circuit (normally a virtual circuit added in the CZone configuration
+// for the purpose, with no output of its own) is linked to a switch that is not
+// on the CZone network: a Victron switchable output (a Shelly added to the GX,
+// a GX relay, ...) or a Shelly reached directly on the network.
+//
+//   CZone circuit changes (display, keypad, webapp)  -> the switch follows
+//   the switch changes (Victron pane, VRM, its app)  -> the CZone circuit follows
+//
+// The CZone side needs nothing new: a virtual circuit is held by a CZone module
+// like any other circuit (on the bench, the Output Interface reports it as
+// channel 6 in its status message), and the plugin already reads that state and
+// can send it. Only the switch side differs, in a driver:
+//
+//   driver.read(entry)  -> Promise<true|false>
+//   driver.write(entry, on) -> Promise
+//
+// Rules, so the two sides never fight:
+//   - a side is only acted on when it changes, and only if the other side
+//     differs;
+//   - our own change coming back is recognised and not passed on again;
+//   - at start (or when a side is first seen) nothing is switched: if the two
+//     sides differ the link says "out of step" and waits for the next real
+//     change on either side. (It used to take the switch as right, but a GX
+//     relay comes back off after a reboot, and a link to Instruments then
+//     turned Instruments off: Compass Rose, 15 Oct 2026.);
+//   - a change the host refuses for good (err.permanent: a circuit that asks
+//     before turning off) is reported and not tried again;
+//   - a change one side could not take (switch unreachable or refusing,
+//     NMEA 2000 sending off or not ready yet) is kept and retried every
+//     RETRY_MS until it is taken or that side is changed some other way.
+//
+// Self-contained (no CZone or Signal K code here) so it can move to another
+// plugin as it is: give it readCircuit/writeCircuit and the drivers.
+
+const POLL_MS = 2000
+const SETTLE_MS = 6000
+const RETRY_MS = 15000
+const OUT_OF_STEP = 'Out of step at start: nothing switched; the next change on either side brings them together'
+
+function createBridge ({
+  log = () => {},
+  readCircuit = () => undefined, // name -> true | false | undefined (not known yet)
+  writeCircuit = () => { throw new Error('No CZone writer') }, // (name, on)
+  drivers = {},
+  now = () => Date.now(),
+  pollMs = POLL_MS,
+  settleMs = SETTLE_MS,
+  retryMs = RETRY_MS
+} = {}) {
+  let links = []
+  let timer = null
+  let polling = false
+
+  function describe (entry) {
+    const d = drivers[entry.target]
+    return d && typeof d.describe === 'function' ? d.describe(entry) : `${entry.target}`
+  }
+
+  function start (entries = []) {
+    stop()
+    links = entries
+      .filter(e => e && e.circuit && drivers[e.target])
+      .map(entry => ({ entry, driver: drivers[entry.target], cz: undefined, dev: undefined, want: undefined, wantCz: undefined, retryAt: 0, pending: null, error: null, last: null, at: null }))
+    if (!links.length) return
+    log(`Bridge: ${links.map(l => `"${l.entry.circuit}" <-> ${describe(l.entry)}`).join('; ')}`)
+    timer = setInterval(() => { poll().catch(() => {}) }, pollMs)
+    if (timer.unref) timer.unref()
+    poll().catch(() => {})
+  }
+
+  function stop () {
+    if (timer) clearInterval(timer)
+    timer = null
+    links = []
+  }
+
+  function note (link, text) {
+    link.last = text
+    link.at = now()
+    log(`Bridge "${link.entry.circuit}": ${text}`)
+  }
+
+  async function toDevice (link, on, why) {
+    link.pending = { side: 'device', value: on, until: now() + settleMs }
+    note(link, `${why}: switching ${describe(link.entry)} ${on ? 'ON' : 'OFF'}`)
+    try {
+      await link.driver.write(link.entry, on)
+      link.error = null
+    } catch (err) {
+      link.pending = null
+      link.retryAt = now() + retryMs // link.want is kept: tried again later
+      link.error = `Could not switch ${describe(link.entry)}: ${err.message}`
+      log(`Bridge "${link.entry.circuit}": ${link.error}`)
+    }
+  }
+
+  function toCzone (link, on, why) {
+    link.pending = { side: 'czone', value: on, until: now() + settleMs }
+    note(link, `${why}: switching CZone circuit ${on ? 'ON' : 'OFF'}`)
+    try {
+      writeCircuit(link.entry.circuit, on)
+      link.error = null
+    } catch (err) {
+      link.pending = null
+      link.wantCz = err && err.permanent ? undefined : on
+      link.retryAt = now() + retryMs
+      link.error = `Could not switch the CZone circuit: ${err.message}`
+      log(`Bridge "${link.entry.circuit}": ${link.error}`)
+    }
+  }
+
+  function seeCircuit (link, on) {
+    if (on !== true && on !== false) return
+    const before = link.cz
+    link.cz = on
+    if (before === undefined) {
+      if (link.dev !== undefined && link.dev !== on && link.want === undefined) note(link, OUT_OF_STEP)
+      return
+    }
+    if (before === on) return
+    if (link.pending && link.pending.side === 'czone' && link.pending.value === on) { link.pending = null; link.wantCz = undefined; return } // our own change
+    link.wantCz = undefined
+    link.want = on
+    link.retryAt = 0
+    if (link.dev === on) link.want = undefined
+    else if (link.dev !== undefined) toDevice(link, on, 'CZone circuit switched')
+    // switch not seen yet: taken when it is (see poll)
+  }
+
+  function seeDevice (link, on) {
+    if (on !== true && on !== false) return
+    const before = link.dev
+    link.dev = on
+    if (before === undefined) {
+      if (link.want === undefined && link.cz !== undefined && link.cz !== on) note(link, OUT_OF_STEP)
+      return
+    }
+    if (before === on) return
+    if (link.pending && link.pending.side === 'device' && link.pending.value === on) { link.pending = null; link.want = undefined; return } // our own change
+    link.want = undefined
+    if (link.cz !== undefined && link.cz !== on) toCzone(link, on, 'Switch changed elsewhere')
+  }
+
+  // From the plugin's CZone state decoding: called as each status arrives, so
+  // a display press reaches the switch without waiting for the next poll.
+  function onCircuit (name, on) {
+    for (const link of links) if (link.entry.circuit === name) seeCircuit(link, on)
+  }
+
+  async function poll () {
+    if (polling) return
+    polling = true
+    try {
+      for (const link of links) {
+        if (link.pending && now() > link.pending.until) {
+          note(link, `No confirmation from the ${link.pending.side === 'czone' ? 'CZone circuit' : 'switch'}`)
+          link.pending = null
+          link.retryAt = now() + retryMs // anything still wanted waits its turn
+        }
+        seeCircuit(link, readCircuit(link.entry.circuit))
+        // A switch change the CZone circuit has not taken yet.
+        if (link.wantCz !== undefined && !link.pending) {
+          if (link.cz === link.wantCz) link.wantCz = undefined
+          else if (now() >= link.retryAt) toCzone(link, link.wantCz, 'Switch changed (trying the CZone circuit again)')
+        }
+        try {
+          const on = await link.driver.read(link.entry)
+          if (link.error && /^Not reachable/.test(link.error)) link.error = null
+          seeDevice(link, on)
+          // A CZone change the switch has not taken yet.
+          if (link.want !== undefined && !link.pending) {
+            if (link.dev === link.want) link.want = undefined
+            else if (now() >= link.retryAt) await toDevice(link, link.want, 'CZone circuit switched (trying again)')
+          }
+        } catch (err) {
+          if (!link.error || /^Not reachable/.test(link.error)) link.error = `Not reachable: ${err.message}`
+        }
+      }
+    } finally {
+      polling = false
+    }
+  }
+
+  function status () {
+    return links.map(l => ({
+      circuit: l.entry.circuit,
+      target: describe(l.entry),
+      czone: l.cz === undefined ? null : l.cz,
+      device: l.dev === undefined ? null : l.dev,
+      inStep: l.cz !== undefined && l.dev !== undefined ? l.cz === l.dev : null,
+      pending: l.pending ? { side: l.pending.side, value: l.pending.value } : null,
+      error: l.error,
+      last: l.last,
+      at: l.at
+    }))
+  }
+
+  const circuits = () => new Set(links.map(l => l.entry.circuit))
+
+  return { start, stop, onCircuit, poll, status, circuits }
+}
+
+// Saved settings -> bridge entries. Bad or incomplete rows are dropped.
+//   { circuit, target: 'victron', output: '<service>#<id>' }
+//   { circuit, target: 'shelly', host: '192.168.1.204', channel: 0 }
+function bridgeEntries (list) {
+  const out = []
+  for (const row of Array.isArray(list) ? list : []) {
+    if (!row || typeof row.circuit !== 'string' || !row.circuit.trim()) continue
+    const circuit = row.circuit.trim()
+    if (row.target === 'victron' && typeof row.output === 'string' && /^com\.victronenergy\.[\w.]+#[\w-]+$/.test(row.output)) {
+      const [service, id] = row.output.split('#')
+      out.push({ circuit, target: 'victron', service, output: id, label: row.label || '' })
+    } else if (row.target === 'shelly' && typeof row.host === 'string' && /^[\w.-]+(:\d{1,5})?$/.test(row.host.trim())) {
+      const channel = Number.isInteger(Number(row.channel)) && Number(row.channel) >= 0 ? Number(row.channel) : 0
+      out.push({ circuit, target: 'shelly', host: row.host.trim(), channel, label: row.label || '' })
+    }
+  }
+  return out
+}
+
+module.exports = { createBridge, bridgeEntries, POLL_MS, SETTLE_MS, RETRY_MS }

package/lib/bridge/shelly.js

@@ -0,0 +1,58 @@
+'use strict'
+
+// A Shelly (Gen2 and later: Plus, Pro, PM Mini, 1PM, ...) reached directly on
+// the network, through its local RPC API. No GX needed. Tested on a Shelly PM1
+// on the test bench, 13 Oct 2026:
+//
+//   GET http://<host>/rpc/Switch.GetStatus?id=<channel>
+//     -> {"id":0,"output":true,"apower":0.0,"voltage":239.1,"current":0.000, ...}
+//   GET http://<host>/rpc/Switch.Set?id=<channel>&on=true|false
+//
+// A Shelly with a password set refuses with 401; that is reported, not
+// worked around (digest login is not supported yet).
+
+const http = require('http')
+
+const TIMEOUT_MS = 3000
+
+// host: '192.168.1.204', or 'host:port' (a Shelly always uses 80; the port is
+// for testing and for a Shelly behind a port forward).
+function get (hostAndPort, pathAndQuery, { timeoutMs = TIMEOUT_MS, port = 80 } = {}) {
+  const m = /^(.+?)(?::(\d+))?$/.exec(String(hostAndPort))
+  const host = m[1]
+  if (m[2]) port = Number(m[2])
+  return new Promise((resolve, reject) => {
+    const req = http.get({ host, port, path: pathAndQuery, timeout: timeoutMs }, res => {
+      let body = ''
+      res.setEncoding('utf8')
+      res.on('data', c => { if (body.length < 65536) body += c })
+      res.on('end', () => {
+        if (res.statusCode === 401) return reject(new Error('the Shelly has a password set'))
+        if (res.statusCode !== 200) return reject(new Error(`HTTP ${res.statusCode}`))
+        try { resolve(JSON.parse(body)) } catch (_) { reject(new Error('not a Shelly Gen2 reply')) }
+      })
+    })
+    req.on('timeout', () => req.destroy(new Error('no answer')))
+    req.on('error', reject)
+  })
+}
+
+function createShellyDriver ({ port = 80, timeoutMs = TIMEOUT_MS } = {}) {
+  const opts = { port, timeoutMs }
+  return {
+    describe: entry => `Shelly ${entry.host}${entry.channel ? ` channel ${entry.channel}` : ''}`,
+    async status (entry) {
+      return get(entry.host, `/rpc/Switch.GetStatus?id=${entry.channel || 0}`, opts)
+    },
+    async read (entry) {
+      const s = await get(entry.host, `/rpc/Switch.GetStatus?id=${entry.channel || 0}`, opts)
+      if (typeof s.output !== 'boolean') throw new Error('no switch on that channel')
+      return s.output
+    },
+    async write (entry, on) {
+      await get(entry.host, `/rpc/Switch.Set?id=${entry.channel || 0}&on=${on ? 'true' : 'false'}`, opts)
+    }
+  }
+}
+
+module.exports = { createShellyDriver }

package/lib/bridge/victron.js

@@ -0,0 +1,115 @@
+'use strict'
+
+// A Victron switchable output, on the GX's D-Bus: anything Venus OS lists in
+// its switch pane, whatever kind of service carries it. Tested on the bench,
+// 13 Oct 2026, with a Shelly PM1 added to the Cerbo, which appears as
+//
+//   com.victronenergy.acload.shelly_28372F37CD6C_0
+//     /CustomName                              'Power Board'
+//     /SwitchableOutput/0/State                1 (on) / 0 (off), writable
+//     /SwitchableOutput/0/Settings/CustomName  'Power Board'
+//     /SwitchableOutput/0/Settings/Type        1 (on/off)
+//
+// The service name carries the device's MAC address, so it does not change
+// when the output is renamed; the name is shown, the service is stored.
+//
+// The GX's own relays are switchable outputs of com.victronenergy.system
+// (Compass Rose, Venus OS 3.80, 15 Oct 2026):
+//
+//   /SwitchableOutput/0/Name               'GX internal relay 1'
+//   /SwitchableOutput/0/Settings/Function  0  (alarm relay)
+//   /SwitchableOutput/1/Name               'GX internal relay 2'
+//   /SwitchableOutput/1/Settings/Function  2  (manual)
+//
+// A relay the GX uses for something (alarm, generator, tank pump,
+// temperature) must not be switched by anyone else: an output with a function
+// is offered only when that function is Manual, and is never written
+// otherwise, even if it was linked before its function was changed. An I/O
+// extender's relays are expected to carry the same setting.
+
+const OWN_SERVICE = 'com.victronenergy.switch.czone_circuits' // this plugin's own switch pane
+const IFACE = 'com.victronenergy.BusItem'
+const MANUAL = 2
+const FUNCTIONS = { 0: 'alarm relay', 1: 'generator start/stop', 3: 'tank pump', 4: 'temperature relay' }
+const ON_OFF = 1 // Settings/Type of an on/off output
+const functionName = f => FUNCTIONS[f] || `function ${f}`
+
+function errText (err) {
+  return Array.isArray(err) ? err.join(' ') : String((err && err.message) || err)
+}
+
+// dbus-native hands a variant over as [[signature], [value]].
+function unwrap (v) {
+  if (Array.isArray(v) && v.length === 2 && Array.isArray(v[0]) && Array.isArray(v[1])) return v[1][0]
+  return v
+}
+
+function createVictronDriver ({ getBus } = {}) {
+  function call (msg) {
+    const bus = getBus()
+    return new Promise((resolve, reject) => {
+      bus.invoke(msg, (err, res) => err ? reject(new Error(errText(err))) : resolve(res))
+    })
+  }
+  const getValue = (service, path) => call({ destination: service, path, interface: IFACE, member: 'GetValue' }).then(unwrap)
+
+  const optional = (service, path) => getValue(service, path).then(v => (v === '' || v === null || v === undefined || Number.isNaN(Number(v)) ? undefined : Number(v)), () => undefined)
+  // Why an output may not be linked or switched, or null.
+  async function blocked (service, id) {
+    const f = await optional(service, `/SwitchableOutput/${id}/Settings/Function`)
+    if (f !== undefined && f !== MANUAL) return `used by the GX as ${functionName(f)}`
+    const t = await optional(service, `/SwitchableOutput/${id}/Settings/Type`)
+    if (t !== undefined && t !== ON_OFF) return 'not an on/off output'
+    return null
+  }
+
+  async function read (entry) {
+    const v = await getValue(entry.service, `/SwitchableOutput/${entry.output}/State`)
+    if (typeof v !== 'number') throw new Error('no switchable output there')
+    return v !== 0
+  }
+
+  async function write (entry, on) {
+    const why = await blocked(entry.service, entry.output)
+    if (why) throw new Error(`not switched: ${why} (set it to Manual on the GX to use it here)`)
+    const r = await call({ destination: entry.service, path: `/SwitchableOutput/${entry.output}/State`, interface: IFACE, member: 'SetValue', signature: 'v', body: [['i', on ? 1 : 0]] })
+    if (typeof r === 'number' && r !== 0) throw new Error(`the GX refused (${r})`)
+  }
+
+  // Every switchable output on the GX, for the settings page.
+  async function list () {
+    const names = await call({ destination: 'org.freedesktop.DBus', path: '/org/freedesktop/DBus', interface: 'org.freedesktop.DBus', member: 'ListNames' })
+    const services = (names || []).filter(n => /^com\.victronenergy\./.test(n) && n !== OWN_SERVICE && !/^com\.victronenergy\.(settings|logger|platform|modbustcp)$/.test(n))
+    const out = []
+    for (const service of services) {
+      let ids = []
+      try {
+        const items = await call({ destination: service, path: '/', interface: IFACE, member: 'GetItems' })
+        const paths = Array.isArray(items) ? items.map(i => i[0]) : Object.keys(items || {})
+        ids = [...new Set(paths.map(p => /^\/SwitchableOutput\/([^/]+)\/State$/.exec(p)).filter(Boolean).map(m => m[1]))]
+      } catch (_) {
+        // No GetItems: try the usual first channels.
+        for (const id of ['0', '1', '2', '3']) {
+          try { if (typeof await getValue(service, `/SwitchableOutput/${id}/State`) === 'number') ids.push(id) } catch (_) {}
+        }
+      }
+      for (const id of ids) {
+        const text = async p => { try { const v = await getValue(service, p); return typeof v === 'string' && v.trim() ? v.trim() : '' } catch (_) { return '' } }
+        const name = (await text(`/SwitchableOutput/${id}/Settings/CustomName`)) || (await text('/CustomName')) ||
+          [await text('/ProductName'), await text(`/SwitchableOutput/${id}/Name`)].filter(Boolean).join(' ') || service
+        const why = await blocked(service, id)
+        out.push({ value: `${service}#${id}`, label: name, service, output: id, available: !why, reason: why || undefined })
+      }
+    }
+    return out.sort((a, b) => a.label.localeCompare(b.label))
+  }
+
+  return {
+    describe: entry => (entry.label ? `${entry.label} (GX)` : `${entry.service} output ${entry.output}`),
+    read,
+    write,
+    list
+  }
+}
+
+module.exports = { createVictronDriver, OWN_SERVICE }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-czone",
-  "version": "0.3.0-beta.12",
+  "version": "0.3.0-beta.14",
   "description": "BETA: Signal K CZone monitoring and control using dynamically parsed ZCF configuration and NMEA 2000",
   "main": "index.js",
   "keywords": [
@@ -42,11 +42,14 @@
     "icon.png"
   ],
   "scripts": {
-    "test": "node test/zcf.test.js && node test/zcf-fixtures.test.js && node test/circuit-state.test.js && node test/czone.test.js && node test/nmea2000.test.js && node test/control-x-plus.test.js && node test/signalk.test.js && node test/write.test.js && node test/circuit-status.test.js && node test/status-mapping-regression.test.js && node test/state.test.js && node test/config-network.test.js && node test/config-namespace.test.js && node test/monitoring.test.js && node test/confirm-off.test.js && node test/webapp-current.test.js && node test/trends.test.js && node --require ./test/helpers/gx-low-space.cjs test/trends.test.js"
+    "test": "node test/zcf.test.js && node test/zcf-fixtures.test.js && node test/circuit-state.test.js && node test/czone.test.js && node test/nmea2000.test.js && node test/control-x-plus.test.js && node test/signalk.test.js && node test/write.test.js && node test/circuit-status.test.js && node test/status-mapping-regression.test.js && node test/state.test.js && node test/config-network.test.js && node test/config-namespace.test.js && node test/monitoring.test.js && node test/confirm-off.test.js && node test/webapp-current.test.js && node test/bridge.test.js && node test/trends.test.js && node --require ./test/helpers/gx-low-space.cjs test/trends.test.js"
   },
   "dependencies": {
     "signalk-czone-zcf": "github:mattsmitchell/signalk-czone-zcf#4991170ac20a3506bfcc1131b2c7dd025c4a983c"
   },
+  "optionalDependencies": {
+    "dbus-native": "^0.4.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mattsmitchell/signalk-czone.git"

package/public/fullscreen.js

@@ -0,0 +1,36 @@
+/* Fullscreen is optional: the ordinary page and home-screen launch work without it. */
+(() => {
+  const button = document.getElementById('fullscreenToggle');
+  const root = document.documentElement;
+  const request = root.requestFullscreen || root.webkitRequestFullscreen;
+  const exit = document.exitFullscreen || document.webkitExitFullscreen;
+  const enabled = document.fullscreenEnabled != null ? document.fullscreenEnabled : document.webkitFullscreenEnabled;
+  if (!button || !request || !exit || enabled === false) return;
+
+  const current = () => document.fullscreenElement || document.webkitFullscreenElement;
+  const update = () => {
+    const active = !!current();
+    const label = active ? 'Exit fullscreen' : 'Show CZone fullscreen';
+    button.setAttribute('aria-label', label);
+    button.setAttribute('aria-pressed', String(active));
+    button.title = label;
+  };
+  button.hidden = false;
+  update();
+  document.addEventListener('fullscreenchange', update);
+  document.addEventListener('webkitfullscreenchange', update);
+  button.addEventListener('click', async () => {
+    button.disabled = true;
+    try {
+      // Invoke directly in the tap handler; browsers require user activation.
+      if (current()) await exit.call(document);
+      else await request.call(root);
+    } catch (error) {
+      console.warn('[CZone UI] Fullscreen unavailable', error);
+      alert('Fullscreen is unavailable in this browser or embedded view. Try opening CZone directly in a browser, or adding it to your home screen.');
+    } finally {
+      button.disabled = false;
+      update();
+    }
+  });
+})();

package/public/index.html

@@ -5,7 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="theme-color" content="#071321">
   <link rel="icon" type="image/png" href="icon.png">
-  <link rel="apple-touch-icon" href="icon.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="icon-180.png">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-title" content="CZone">
   <title>CZone Circuits</title>
   <style>
     :root {
@@ -39,7 +42,16 @@
     .sidebar, .rightbar { background: rgba(5, 16, 29, .78); backdrop-filter: blur(18px); border-color: var(--line); }
     .sidebar { border-right: 1px solid var(--line); padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
     .rightbar { border-left: 1px solid var(--line); padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
-    .brand { display:flex; align-items:center; gap:11px; padding: 2px 10px 25px; }
+    .brand { display:flex; flex-wrap:nowrap; align-items:center; gap:11px; padding: 2px 10px 25px; }
+    .fullscreen-toggle { margin-left:auto; flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; padding:10px; border:1px solid rgba(56,169,255,.25); border-radius:12px; background:linear-gradient(145deg,rgba(24,213,232,.12),rgba(56,169,255,.05)); color:var(--cyan); cursor:pointer; transition:background .15s, border-color .15s; }
+    .fullscreen-toggle:hover { background:rgba(24,213,232,.18); border-color:var(--cyan); }
+    .fullscreen-toggle:disabled { opacity:.55; cursor:wait; }
+    .fullscreen-toggle svg { width:22px; height:22px; }
+    .fullscreen-toggle .fullscreen-collapse, .fullscreen-toggle[aria-pressed="true"] .fullscreen-expand { display:none; }
+    .fullscreen-toggle[aria-pressed="true"] .fullscreen-collapse { display:inline; }
+    .fullscreen-toggle[hidden] { display:none; }
+    .fullscreen-toggle:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
+    body { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
     .brand-mark { width:38px; height:38px; display:block; object-fit:contain; border-radius:10px; box-shadow: 0 8px 25px rgba(31,154,255,.24); }
     .brand strong { display:block; font-size:17px; letter-spacing:.2px; }
     .brand span { color:var(--muted); font-size:12px; }
@@ -219,13 +231,44 @@
       .mode-name > span:first-child { min-width:0; overflow-wrap:anywhere; }
       .mode-name > span:last-child { display:none; }
     }
+
+    /* Browsers without gap in flex layouts (before Chrome 84; a Navico
+       chartplotter is Chrome 69) get the same spacing from margins. */
+    .no-flexgap .brand > * + *, .no-flexgap .nav button > * + *, .no-flexgap .category-nav button > * + *, .no-flexgap .category-card > * + *, .no-flexgap .stat > * + * { margin-left:11px; }
+    .no-flexgap .section-head > * + * { margin-left:10px; }
+    .no-flexgap .status > * + *, .no-flexgap .connection > * + * { margin-left:7px; }
+    .no-flexgap .status-dot { margin-right:7px; }
+    .no-flexgap .nav-icon { margin-right:11px; }
+    .no-flexgap .control > * + * { margin-left:9px; }
+    .no-flexgap .range-wrap > * + *, .no-flexgap .mode-name > * + * { margin-left:8px; }
+    .no-flexgap .trend-custom label > * + * { margin-left:6px; }
+    .no-flexgap .tags > * { margin:0 4px 4px 0; }
+    .no-flexgap .trend-controls > *, .no-flexgap .trend-custom > * { margin:0 10px 10px 0; }
+    .no-flexgap .trend-stats > * { margin-right:28px; }
+    .no-flexgap .fullscreen-toggle, .no-flexgap button > .nav-count, .no-flexgap .section-head .search, .no-flexgap .trend-panel .section-head .trend-close { margin-left:auto; }
+    @media (max-width: 780px) { .no-flexgap .section-head .sort { margin-left:auto; } }
   </style>
+  <script>
+  (() => {
+    const d = document.createElement('div');
+    d.style.cssText = 'display:flex;flex-direction:column;gap:1px;position:absolute;visibility:hidden';
+    d.appendChild(document.createElement('div')); d.appendChild(document.createElement('div'));
+    document.documentElement.appendChild(d);
+    if (d.scrollHeight !== 1) document.documentElement.classList.add('no-flexgap');
+    d.remove();
+  })();
+  </script>
 </head>
 <body>
   <div class="app">
     <div class="leftwell">
     <aside class="sidebar">
-      <div class="brand"><img class="brand-mark" src="icon.png" alt="CZone" width="38" height="38"><div><strong>CZone</strong><span>Boat Systems</span></div></div>
+      <div class="brand"><img class="brand-mark" src="icon.png" alt="CZone" width="38" height="38"><div><strong>CZone</strong><span>Boat Systems</span></div><button id="fullscreenToggle" class="fullscreen-toggle" type="button" aria-label="Show CZone fullscreen" title="Show CZone fullscreen" aria-pressed="false" hidden>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <path class="fullscreen-expand" d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5"/>
+          <path class="fullscreen-collapse" d="M3 8h5V3m8 0v5h5M8 21v-5H3m18 0h-5v5"/>
+        </svg>
+      </button></div>
       <div class="nav" id="mainNav"></div>
       <div class="separator"></div>
       <div class="section-label">Categories</div>
@@ -260,6 +303,7 @@
     </main>
 
   </div>
+<script src="fullscreen.js"></script>
 <script>
 (() => {
   const API = '/plugins/signalk-czone';
@@ -304,7 +348,7 @@
   const favoritesKey = 'signalk-czone-circuits:favorites';
   let favorites = new Set(JSON.parse(localStorage.getItem(favoritesKey) || '[]'));
 
-  const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  const esc = s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
   const nameKey = c => c.slug || c.name;
   const stateOf = c => c.state && c.state.state === 'ON';
   const percentOf = c => c.state && Number.isFinite(c.state.percent) ? c.state.percent : null;
@@ -386,7 +430,7 @@
     const cats = subCategoryList(c).slice(0,3).map(x => `<span class="tag cat" role="img" tabindex="0" style="--cat:${color(x)}" title="${esc(x)}" aria-label="${esc(x)} category">${icon(x)}</span>`).join('');
     const disabled = p && p.kind === 'state';
     const toggle = `<button type="button" class="toggle ${on?'on':'off'} ${disabled?'pending':''}" data-circuit-slug="${esc(c.slug)}" ${disabled?'disabled':''} aria-busy="${disabled?'true':'false'}" aria-label="Turn ${on?'off':'on'} ${esc(c.name)}" onclick="toggleCircuit('${encodeURIComponent(c.name)}',${!on})">${disabled?'Sending…':(on && current ? current : (on?'ON':'OFF'))}</button>`;
-    const control = dim ? `<div class="control"><div class="range-wrap"><input aria-label="${esc(c.name)} brightness" type="range" min="1" max="100" value="${Math.max(1,Math.round(pct ?? 100))}" oninput="previewPercent(this)" onchange="setLevel('${encodeURIComponent(c.name)}',this.value)"><span class="percent">${pct == null ? '—' : Math.round(pct)+'%'}</span></div>${toggle}</div>` : `<div class="control">${toggle}</div>`;
+    const control = dim ? `<div class="control"><div class="range-wrap"><input aria-label="${esc(c.name)} brightness" type="range" min="1" max="100" value="${Math.max(1,Math.round(pct == null ? 100 : pct))}" oninput="previewPercent(this)" onchange="setLevel('${encodeURIComponent(c.name)}',this.value)"><span class="percent">${pct == null ? '—' : Math.round(pct)+'%'}</span></div>${toggle}</div>` : `<div class="control">${toggle}</div>`;
     const sending = p ? `<span class="sending">Sending…</span>` : '';
     return `<div class="circuit"><button class="fav ${fav?'on':''}" title="${fav?'Remove from':'Add to'} favorites" onclick="toggleFavorite('${esc(nameKey(c)).replace(/'/g,"\\'")}')">${fav?'★':'☆'}</button><div class="circuit-name"><strong>${esc(c.name)}${askMark(c)}</strong><small>${esc((categoryData(c).master || [])[0] || 'CZone')} · module ${Number(c.module).toString(16).padStart(2,'0').toUpperCase()} / ch ${c.channel}</small></div><div class="tags"><span class="tag">${esc(c.masterCategory || 'CZone')}</span>${cats}</div><div><div class="status ${on?'on':''}"><span class="status-dot"></span>${on?'ON':'OFF'} ${sending}</div>${control}</div>${status.trendsEnabled === true ? `<button type="button" class="arrow" title="Current trend" aria-label="Current trend for ${esc(c.name)}" onclick="openTrend('${encodeURIComponent(c.slug)}')">›</button>` : '<span class="arrow">›</span>'}</div>`;
   }

package/public/manifest.webmanifest

@@ -0,0 +1,25 @@
+{
+  "id": "./",
+  "name": "CZone Boat Systems",
+  "short_name": "CZone",
+  "description": "Monitor and control your boat\u2019s CZone electrical systems through Signal K.",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "background_color": "#06101d",
+  "theme_color": "#071321",
+  "icons": [
+    {
+      "src": "icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}

package/public/remoteEntry.js

@@ -35,6 +35,63 @@ var signalk_czone = (function () {
     var trend = trendState[0]
     var setTrend = trendState[1]
 
+    // Third-party switches (lib/bridge)
+    var bridgeKindState = React.useState('victron'); var bridgeKind = bridgeKindState[0]; var setBridgeKind = bridgeKindState[1]
+    var bridgeCircuitState = React.useState(''); var bridgeCircuit = bridgeCircuitState[0]; var setBridgeCircuit = bridgeCircuitState[1]
+    var bridgeOutputState = React.useState(''); var bridgeOutput = bridgeOutputState[0]; var setBridgeOutput = bridgeOutputState[1]
+    var bridgeHostState = React.useState(''); var bridgeHost = bridgeHostState[0]; var setBridgeHost = bridgeHostState[1]
+    var bridgeChannelState = React.useState('0'); var bridgeChannel = bridgeChannelState[0]; var setBridgeChannel = bridgeChannelState[1]
+    var outputsState = React.useState(null); var outputs = outputsState[0]; var setOutputs = outputsState[1]
+    var shellyTestState = React.useState(''); var shellyTest = shellyTestState[0]; var setShellyTest = shellyTestState[1]
+    var linkStatusState = React.useState([]); var linkStatus = linkStatusState[0]; var setLinkStatus = linkStatusState[1]
+
+    function bridgeList () {
+      return (Array.isArray(configuration.bridges) ? configuration.bridges : []).filter(function (b) { return b && b.circuit })
+    }
+    function loadOutputs () {
+      setOutputs({ loading: true, outputs: [] })
+      fetch('/plugins/signalk-czone/bridge/outputs', { credentials: 'same-origin', cache: 'no-store' })
+        .then(function (r) { return r.json() })
+        .then(function (v) { setOutputs(v) })
+        .catch(function (err) { setOutputs({ available: false, outputs: [], detail: err.message }) })
+    }
+    function loadLinkStatus () {
+      fetch('/plugins/signalk-czone/bridge/status', { credentials: 'same-origin', cache: 'no-store' })
+        .then(function (r) { return r.json() })
+        .then(function (v) { setLinkStatus(Array.isArray(v.links) ? v.links : []) })
+        .catch(function () {})
+    }
+    React.useEffect(function () {
+      loadOutputs(); loadLinkStatus()
+      var t = setInterval(loadLinkStatus, 3000)
+      return function () { clearInterval(t) }
+    }, [])
+    function testShelly () {
+      setShellyTest('Asking the Shelly…')
+      fetch('/plugins/signalk-czone/bridge/shelly?host=' + encodeURIComponent(bridgeHost.trim()) + '&channel=' + encodeURIComponent(bridgeChannel), { credentials: 'same-origin', cache: 'no-store' })
+        .then(function (r) { return r.json() })
+        .then(function (v) { setShellyTest(v.ok ? 'Found: switch is ' + (v.output ? 'ON' : 'OFF') + (typeof v.power === 'number' ? ' · ' + v.power + ' W' : '') : 'Not found: ' + (v.detail || 'no answer')) })
+        .catch(function (err) { setShellyTest('Not found: ' + err.message) })
+    }
+    function addBridge () {
+      var row
+      if (bridgeKind === 'victron') {
+        var o = (outputs && outputs.outputs || []).filter(function (x) { return x.value === bridgeOutput })[0]
+        if (!o) return
+        row = { circuit: bridgeCircuit, target: 'victron', output: o.value, label: o.label }
+      } else {
+        row = { circuit: bridgeCircuit, target: 'shelly', host: bridgeHost.trim(), channel: Number(bridgeChannel) || 0 }
+      }
+      persist({ bridges: bridgeList().concat([row]) })
+      setBridgeCircuit(''); setBridgeOutput(''); setShellyTest('')
+    }
+    function removeBridge (index) {
+      persist({ bridges: bridgeList().filter(function (_b, i) { return i !== index }) })
+    }
+    function bridgeTarget (b) {
+      return b.target === 'victron' ? (b.label || b.output) + ' (Victron output, through the GX)' : 'Shelly at ' + b.host + (b.channel ? ' channel ' + b.channel : '') + ' (directly)'
+    }
+
     function loadConfiguration () {
       return fetch('/plugins/signalk-czone/configuration', { credentials: 'same-origin', cache: 'no-store' })
         .then(function (r) { if (!r.ok) throw new Error('Could not load CZone configuration status'); return r.json() })
@@ -335,6 +392,61 @@ var signalk_czone = (function () {
         React.createElement('div', { style: { marginTop: 6, fontSize: 12 } }, 'Other Signal K apps switch with a PUT and cannot ask "are you sure?". Unticked, an off from them is refused with a message. The circuit can still be turned off from the webapp or a CZone keypad.')
       ),
 
+      React.createElement('div', { style: { marginBottom: 14, padding: 12, border: '1px solid #ccc', borderRadius: 6 } },
+        React.createElement('strong', null, 'Third-party switches'),
+        React.createElement('div', { style: { marginTop: 6, fontSize: 12 } }, 'Switch something that is not on the CZone network from a CZone display or keypad: a Shelly, a GX relay set to Manual, or any output in the Victron switch pane. In the CZone configuration add a virtual circuit for it and put it on the display, then link that circuit here. The switch follows the CZone circuit, and the circuit follows the switch when it is switched from anywhere else (that needs Enable CZone read/write control). Nothing is switched when the plugin starts: if the two differ, the link shows out of step until one is switched. A circuit set to confirm before turning on or off is never switched that way by a link.'),
+        bridgeList().map(function (b, i) {
+          var st = linkStatus.filter(function (l) { return l.circuit === b.circuit })[0]
+          var state = !st ? '' : st.error ? ' · ' + st.error : st.inStep === true ? ' · in step (' + (st.device ? 'ON' : 'OFF') + ')' : st.inStep === false ? ' · out of step' : ' · waiting for both sides'
+          return React.createElement('div', { key: b.circuit + ':' + i, style: { marginTop: 8 } },
+            React.createElement('span', { style: { fontWeight: 600 } }, b.circuit),
+            React.createElement('span', null, ' \u2194 ' + bridgeTarget(b)),
+            React.createElement('span', { style: { fontSize: 12, color: st && st.error ? '#b00' : '#555' } }, state + ' '),
+            React.createElement('button', { type: 'button', disabled: busy, onClick: function () { removeBridge(i) } }, 'Remove')
+          )
+        }),
+        React.createElement('div', { style: { marginTop: 12 } },
+          React.createElement('label', null, 'CZone circuit ',
+            React.createElement('select', { value: bridgeCircuit, disabled: busy, onChange: function (e) { setBridgeCircuit(e.target.value) } },
+              [React.createElement('option', { key: '', value: '' }, data && Array.isArray(data.allCircuitNames) && data.allCircuitNames.length ? 'Choose a circuit' : 'Load a CZone configuration first')].concat(
+                (data && Array.isArray(data.allCircuitNames) ? data.allCircuitNames : [])
+                  .filter(function (n) { return !bridgeList().some(function (b) { return b.circuit === n }) })
+                  .map(function (n) { return React.createElement('option', { key: n, value: n }, n) })
+              )
+            )
+          ),
+          React.createElement('label', { style: { marginLeft: 12 } }, 'linked to ',
+            React.createElement('select', { value: bridgeKind, disabled: busy, onChange: function (e) { setBridgeKind(e.target.value) } },
+              React.createElement('option', { value: 'victron' }, 'a Victron output (through the GX)'),
+              React.createElement('option', { value: 'shelly' }, 'a Shelly (directly, by IP address)')
+            )
+          )
+        ),
+        bridgeKind === 'victron'
+          ? React.createElement('div', { style: { marginTop: 8 } },
+              React.createElement('select', { value: bridgeOutput, disabled: busy || !outputs || outputs.loading || !(outputs.outputs || []).length, onChange: function (e) { setBridgeOutput(e.target.value) } },
+                [React.createElement('option', { key: '', value: '' }, !outputs || outputs.loading ? 'Looking for Victron outputs…' : (outputs.outputs || []).length ? 'Choose an output' : (outputs.detail || 'No switchable outputs found on the GX'))].concat(
+                  (outputs && outputs.outputs ? outputs.outputs : []).map(function (o) { return React.createElement('option', { key: o.value, value: o.value, disabled: o.available === false }, o.label + (o.available === false ? ' (' + o.reason + ')' : '')) })
+                )
+              ),
+              React.createElement('button', { type: 'button', style: { marginLeft: 8 }, disabled: busy, onClick: loadOutputs }, 'Look again')
+            )
+          : React.createElement('div', { style: { marginTop: 8 } },
+              React.createElement('label', null, 'IP address ',
+                React.createElement('input', { type: 'text', value: bridgeHost, placeholder: '192.168.1.204', disabled: busy, onChange: function (e) { setBridgeHost(e.target.value); setShellyTest('') }, style: { width: 140 } })
+              ),
+              React.createElement('label', { style: { marginLeft: 10 } }, 'channel ',
+                React.createElement('input', { type: 'number', min: 0, value: bridgeChannel, disabled: busy, onChange: function (e) { setBridgeChannel(e.target.value) }, style: { width: 50 } })
+              ),
+              React.createElement('button', { type: 'button', style: { marginLeft: 8 }, disabled: busy || !bridgeHost.trim(), onClick: testShelly }, 'Test'),
+              shellyTest ? React.createElement('span', { style: { marginLeft: 8, fontSize: 12 } }, shellyTest) : null,
+              React.createElement('div', { style: { marginTop: 4, fontSize: 12 } }, 'Shelly Gen2 or later, with no password. Reserve its address in the router so it does not change.')
+            ),
+        React.createElement('div', { style: { marginTop: 8 } },
+          React.createElement('button', { type: 'button', disabled: busy || !bridgeCircuit || (bridgeKind === 'victron' ? !bridgeOutput : !bridgeHost.trim()), onClick: addBridge }, 'Link')
+        )
+      ),
+
       React.createElement('div', { style: { marginBottom: 14, padding: 12, border: '1px solid #ccc', borderRadius: 6 } },
         React.createElement('strong', null, 'Trends'),
         React.createElement('div', { style: { marginTop: 6, fontSize: 12 } }, 'Off by default. Stores each circuit\'s current every 10 seconds as plain CSV files, for the trend charts in the webapp (the arrow at the end of a circuit row). Not needed if the data already goes to a database such as InfluxDB.'),