frugal-iot-client 2.0.0 → 2.0.1

package/CLAUDE.md

@@ -48,6 +48,10 @@ these by bare filename (`see CARDS_UX.md 4.7`); they all live in `docs/` except
 - **Comments**: explain WHY, not WHAT. One short line is enough; do not restate what the code clearly shows. No multi-line docstrings.
   - Good: `// topicSetPath throws when this.node is null — guard before calling`
   - Bad: `// Check if topic starts with the set path`
+- **A comment says what is true now, not what used to break.** When fixing a bug, state the
+  constraint that still holds; the diagnosis — what it threw, where, why one deployment differed —
+  belongs in the pull request or the chat, not in the source, where it buries the one line that
+  still matters.
 - **No trailing summaries** — do not add a comment block or prose after a method explaining what it does.
 - **Getters**: prefer `get foo()` over plain property access whenever a value is derived or retrieved by traversing connected objects (e.g. `this.node.project`, `this.parentElement`, `this.mt.node.groups[this.group]`). Getters make the dependency chain explicit and let callers read `thing.project` naturally.
 - **Dashboard functionality**: prefer adding reusable behaviour to the shared modules over implementing it inside a custom dashboard file. If a dashboard needs to traverse the topic tree, compute a list, or fire an event, that logic belongs on the relevant class as a getter or method.

package/admin.js

@@ -7,7 +7,7 @@
 
 import {EL, GET, HTMLElementExtended} from '/node_modules/html-element-extended/htmlelementextended.js';
 import mqtt from '/node_modules/mqtt/dist/mqtt.esm.js'; // https://www.npmjs.com/package/mqtt
-import { CssUrl, DELETE, POST, XXX, configSet, el, getString, hasCapability, mqttTempConnect, retainedPattern, locationParameterChange, mqtt_client, preferedLanguageSet, preferedLanguages, redirectToLogin, server_config } from './core.js';
+import { CssUrl, DELETE, POST, XXX, brokerHost, configSet, el, getString, hasCapability, mqttTempConnect, retainedPattern, locationParameterChange, mqtt_client, preferedLanguageSet, preferedLanguages, redirectToLogin, server_config } from './core.js';
 
 
 // ---------- USB flashing over WebSerial ----------
@@ -36,10 +36,22 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
     }
     //this.append(el('div', {class: 'message', textContent: msg}));
   }
+  // Only organizations server_config holds: a permission row can name one this server does not
+  // serve, and no card could act on it. Keyed by id so an organization-wide and a project-scoped
+  // row for the same capability list it once.
   orgsByPerm(capability) {
-    return server_config.user.permissions
+    const orgs = new Map();
+    server_config.user.permissions
       .filter(o => o.capability === capability)
-      .map(o => [ o.org, server_config.organizations[o.org].name ])
+      .forEach(o => {
+        const org = server_config.organizations[o.org];
+        if (org) orgs.set(o.org, org.name);
+      });
+    return [...orgs];
+  }
+  // An organization gains its projects block only once one exists, so this is not always there.
+  projectsOf(org) {
+    return (server_config.organizations[org] || {}).projects || {};
   }
   get adminOrgs() {
     return this.orgsByPerm("ADMIN");
@@ -102,7 +114,7 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
     return el('select', {id: 'projects', name: 'project' /*onchange: this.onOrganization.bind(this)*/}, [
       //el('option', {value: "", textContent: "Not selected", selected: !this.state.value}),
       el('option', {value: "+", textContent: "All", selected: true}),
-      Object.entries(server_config.organizations[org].projects)
+      Object.entries(this.projectsOf(org))
         .map(([pid, p]) => [ pid, p.name ])
         .map(([pid, name]) =>
           el('option', {value: pid, textContent: `${pid}: ${name}`, selected: false}))
@@ -238,18 +250,37 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
       ]);
     }
     return el('div', {}, [
-      ...(e.secrets.length ? e.secrets.map((secret, i) => el('p', {}, [
-        el('span', {class: 'pseudolink', textContent: ' 🗑 ',
-          onclick: this.onEnrolmentSecretDelete.bind(this, secret)}),
-        // The line to paste into a sketch, so nobody has to work out the argument order
-        el('code', {i8n: false, class: 'enrolment__line', textContent:
-          `frugal_iot.configure_mqtt_enrolled("${(server_config.mqtt && server_config.mqtt.broker) || ''}", "${secret}");`}),
-      ])) : [el('p', {textContent:
+      ...(e.secrets.length ? [
+        el('p', {textContent: "Put this in platformio-secrets-local.ini, which is not committed:"}),
+        ...e.secrets.map((secret) => el('p', {}, [
+          el('span', {class: 'pseudolink', textContent: ' 🗑 ',
+            onclick: this.onEnrolmentSecretDelete.bind(this, secret)}),
+          el('code', {i8n: false, class: 'enrolment__line', textContent:
+            `'-D SYSTEM_MQTT_ENROL_SECRET="${secret}"'`}),
+        ])),
+        /*
+         * The host, and this server's own enrolment URL, for anyone building against something
+         * other than the production server the firmware defaults to.
+         *
+         * SYSTEM_MQTT_HOST is a HOST, derived from the broker URL rather than being it: that URL is
+         * the WebSocket address a browser uses through the reverse proxy, while the firmware
+         * resolves this string as a DNS name and connects to 1883. Handing over the URL gives
+         * "DNS Failed ... -54" on a node that has already enrolled, so it reads as an enrolment
+         * fault and is not one.
+         */
+        el('p', {textContent:
+          "And these two, if you are not building against the production server:"}),
+        el('p', {}, [
+          el('code', {i8n: false, class: 'enrolment__line', textContent:
+            `'-D SYSTEM_MQTT_HOST="${brokerHost(server_config.mqtt && server_config.mqtt.broker)}"'`}),
+          el('br', {}),
+          el('code', {i8n: false, class: 'enrolment__line', textContent:
+            `'-D SYSTEM_MQTT_ENROL_URL="${e.enrol_url}"'`}),
+        ]),
+      ] : [el('p', {textContent:
         "This organization has no enrolment secret, so no new node can enrol. Add one."})]),
       el('button', {class: 'submit', type: 'button', textContent: "Add another enrolment secret",
         onclick: this.onEnrolmentSecretAdd.bind(this)}),
-      el('p', {i8n: false, class: 'retained__help', textContent:
-        `${getString("Enrol URL")}: ${e.enrol_url}`}),
     ]);
   }
   getEnrolledNodes() {
@@ -911,6 +942,24 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
     }
     return this.state.elements[name];
   }
+  // Each of these lists is the result of one fetch made when the card opened - nothing pushes a
+  // change, so the heading carries the way to ask again.
+  refreshableHeading(title, refreshFn) {
+    return el('h3', {}, [
+      el('span', {textContent: title}),
+      el('span', {class: 'pseudolink refresh', i8n: false, title: getString("Refresh"),
+        textContent: ' \u27f3', onclick: refreshFn.bind(this)}),
+    ]);
+  }
+  // The organization's nodes are read out of server_config, so refreshing this table means fetching
+  // /config.json again rather than re-rendering what is already here.
+  refreshNodesTable() {
+    GET("/config.json", {}, (err, json) => {
+      if (err) { this.message(err.message); return; }
+      configSet(json);
+      this.replaceElement("nodes_table", this.nodesTable());
+    });
+  }
   setOrganization(org) {
     this.state.org =  org;
     this.state.selected_platform_id = null;
@@ -1004,12 +1053,12 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
 
    // Flattens server_config's nodes-by-project data for one org into the row shape nodesTableFor() renders.
    nodesForOrg(org) {
-     const projects = (server_config.organizations[org] || {}).projects || {};
+     const projects = this.projectsOf(org);
      return this.nodesForProjects(org, Object.keys(projects));
    }
    // Same, but restricted to a specific set of project ids (e.g. those api_farms maps to a farm).
    nodesForProjects(org, projectIds) {
-     const projects = (server_config.organizations[org] || {}).projects || {};
+     const projects = this.projectsOf(org);
      let nodes = [];
      projectIds.forEach(projectId => {
        const project = projects[projectId];
@@ -1109,7 +1158,7 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
       // Create dropdown for selecting a different project for a node
       if (!org) { return el('span', {textContent: "No organization"}); }
       return el('select', {name: 'project'}, [
-        Object.entries(server_config.organizations[org].projects)
+        Object.entries(this.projectsOf(org))
           .map(([pid, p]) => [ pid, p.name ])
           .map(([pid, name]) =>
             el('option', {value: pid, textContent: `${pid}: ${name}`, selected: pid === currentProjectId}))
@@ -1188,7 +1237,7 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
          el('button', {class: "submit", type: "submit", textContent: 'Upload'}),
        ]), //form
        el('section', {}, [
-         el('h3', {textContent: "Existing OTA Files"}),
+         this.refreshableHeading("Existing OTA Files", this.getOtaFiles),
          this.state.elements.ota_files = this.otaFilesList(),
        ]), // section ota
        el('section', {}, [
@@ -1200,7 +1249,7 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
    adminRestContent() {
      return el('div', {}, [
        el('section', {}, [
-             el('h3', {textContent: "Permissions"}),
+             this.refreshableHeading("Permissions", this.getPeopleList),
              // List of people and their permissions, with option to delete,
              this.state.elements.people_perms_list = this.peoplePermList(), // This gets replaced when actions taken
              // and form to add (dropdown of people and permissions)
@@ -1303,7 +1352,7 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
    projectsRestContent() {
      return el('div', {}, [
        el('section', {}, [
-             el('h3', {textContent: "Projects"}),
+             this.refreshableHeading("Projects", this.getProjectsList),
              // List of existing projects for this organization,
              this.state.elements.projects_display_list = this.projectsDisplayList(),
              // and, once expanded, a form to add a new project (id and name)
@@ -1348,10 +1397,10 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
    // Content of the Nodes tab below the organization dropdown - only rendered once an org is selected
    nodesRestContent() {
      return el('div', {}, [
-       el('h3', {textContent: "Nodes in Organization"}),
+       this.refreshableHeading("Nodes in Organization", this.refreshNodesTable),
        this.state.elements.nodes_table = this.nodesTable(),
        el('section', {}, [
-         el('h3', {textContent: "Enrolled nodes"}),
+         this.refreshableHeading("Enrolled nodes", this.getEnrolledNodes),
          el('p', {textContent:
            "Each node has its own broker credential, which it collects from this server the first " +
            "time it connects. Forget one to have it issued a new credential - needed if its " +
@@ -1373,25 +1422,25 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
    apiRestContent() {
      return el('div', {}, [
        el('section', {}, [
-         el('h3', {textContent: "Registered Platforms"}),
+         this.refreshableHeading("Registered Platforms", this.getPlatformsList),
          this.state.elements.platforms_list_display = this.platformsListDisplay(),
        ]),
        el('section', {}, [
          this.state.elements.add_platform = this.collapsibleArea('add_platform', "Add Platform", this.platformRegisterForm),
        ]),
        el('section', {}, [
-         el('h3', {textContent: "Farms"}),
+         this.refreshableHeading("Farms", this.getFarmsList),
          this.state.elements.farms_list_display = this.farmsListDisplay(),
        ]),
        el('section', {}, [
          this.state.elements.add_farm = this.collapsibleArea('add_farm', "Add Farm", this.farmRegisterForm),
        ]),
        el('section', {}, [
-         el('h3', {textContent: "Nodes in Farm"}),
+         this.refreshableHeading("Nodes in Farm", this.getFarmNodesList),
          this.state.elements.farm_nodes_table = this.farmNodesTable(),
        ]),
        el('section', {}, [
-         el('h3', {textContent: "Node Actions"}),
+         this.refreshableHeading("Node Actions", this.getDeviceActionSchema),
          this.state.elements.farm_node_actions = this.farmNodeActions(),
          this.state.elements.action_section = this.actionSection(),
        ]),

package/core.js

@@ -159,13 +159,29 @@ function retainedPattern(org, relative) {
   return `${org}/${rest || '#'}`;
 }
 
+/*
+ * The broker's host name, out of the URL a browser connects with.
+ *
+ * They are not the same thing and a node needs the host. A browser is given something like
+ * "wss://frugaliot.naturalinnovation.org/wss" - a WebSocket URL, through the reverse proxy - while
+ * firmware opens a plain TCP connection to the host on 1883 and resolves that string as a DNS name.
+ * Handing the URL to configure_mqtt_enrolled() gets "DNS Failed ... error -54" and a node that
+ * enrols and then never connects, which is how this was found.
+ */
+function brokerHost(url) {
+  return String(url || '')
+    .replace(/^[a-z][a-z0-9+.-]*:\/\//i, '')   // scheme
+    .replace(/\/.*$/, '')                      // path
+    .replace(/:\d+$/, '');                     // port
+}
+
 // Route a received message to every matching subscription.
 // Separate from the client's on('message') so a test or mock can inject messages with no broker.
-function mqtt_deliver(topic, msg) {
+function mqtt_deliver(topic, msg, retained) {
   // The subscriptions are all going to be MqttNode which will then look at rest of topic
   for (let o of mqtt_subscriptions) {
     if (topicMatches(o.topic, topic)) { // Matches trailing wildcards, but not middle ones
-      o.cb(topic, msg);
+      o.cb(topic, msg, retained);
     }
   }
 }
@@ -352,6 +368,7 @@ EN:
   Advanced: Advanced
   All: All
   Already have an account?: Already have an account?
+  "And these two, if you are not building against the production server:": "And these two, if you are not building against the production server:"
   API: API
   Approved: Approved
   AQI: AQI
@@ -524,12 +541,14 @@ EN:
   Provision instead (erases config): Provision instead (erases config)
   Publish Message: Publish Message
   "Published to ": "Published to "
+  "Put this in platformio-secrets-local.ini, which is not committed:": "Put this in platformio-secrets-local.ini, which is not committed:"
   QoS: QoS
   reconnect: reconnect
   Reconnect the board to flash again: Reconnect the board to flash again
   Register: Register
   Register a platform above before adding a farm.: Register a platform above before adding a farm.
   Register Farm: Register Farm
+  Refresh: Refresh
   Register Platform: Register Platform
   Registered Platforms: Registered Platforms
   Registration failed: Registration failed
@@ -624,6 +643,7 @@ FR:
   Advanced: Avancé
   All: Tous
   Already have an account?: Vous avez déjà un compte ?
+  "And these two, if you are not building against the production server:": "Et ces deux-ci, si vous ne compilez pas pour le serveur de production :"
   API: API
   Approved: Approuvé
   AQI: IQA  
@@ -798,12 +818,14 @@ FR:
   Provision instead (erases config): Provisionner plutôt (effacer la configuration)
   Publish Message: Publier un message
   "Published to ": "Publié sur "
+  "Put this in platformio-secrets-local.ini, which is not committed:": "Mettez ceci dans platformio-secrets-local.ini, qui n'est pas commité :"
   QoS: QoS
   reconnect: reconnecter
   Reconnect the board to flash again: Reconnectez la carte pour flasher à nouveau
   Register: Registre
   Register a platform above before adding a farm.: Enregistrez une plateforme ci-dessus avant d'ajouter une ferme.
   Register Farm: Enregistrer la ferme
+  Refresh: Actualiser
   Register Platform: Enregistrer la plateforme
   Registered Platforms: Plateformes enregistrées
   Registration failed: L'inscription a échoué
@@ -898,6 +920,7 @@ HI:
   Advanced: उन्नत
   All: सभी
   Already have an account?: पहले से खाता है?
+  "And these two, if you are not building against the production server:": "और ये दो, यदि आप उत्पादन सर्वर के लिए बिल्ड नहीं कर रहे हैं:"
   API: एपीआई
   Approved: स्वीकृत
   AQI: वायु गुणवत्ता सूचकांक  
@@ -1072,12 +1095,14 @@ HI:
   Provision instead (erases config): इसके बजाय प्रोविजन करें (कॉन्फ़िगरेशन मिटेगी)
   Publish Message: संदेश प्रकाशित करें
   "Published to ": "पर प्रकाशित किया गया "
+  "Put this in platformio-secrets-local.ini, which is not committed:": "इसे platformio-secrets-local.ini में रखें, जो कमिट नहीं किया जाता:"
   QoS: QoS
   reconnect: पुनः कनेक्ट करें
   Reconnect the board to flash again: फिर से फ्लैश करने के लिए बोर्ड को दोबारा कनेक्ट करें
   Register: पंजीकरण करें
   Register a platform above before adding a farm.: फार्म जोड़ने से पहले ऊपर एक प्लेटफ़ॉर्म पंजीकृत करें।
   Register Farm: फार्म पंजीकृत करें
+  Refresh: ताज़ा करें
   Register Platform: प्लेटफ़ॉर्म पंजीकृत करें
   Registered Platforms: पंजीकृत प्लेटफ़ॉर्म
   Registration failed: पंजीकरण विफल
@@ -1172,6 +1197,7 @@ ID:
   Advanced: Lanjutan
   All: Semua
   Already have an account?: Sudah punya akun?
+  "And these two, if you are not building against the production server:": "Dan dua ini, jika Anda tidak membangun untuk server produksi:"
   API: API
   Approved: Disetujui
   AQI: Indeks Kualitas Udara  
@@ -1346,12 +1372,14 @@ ID:
   Provision instead (erases config): Provisioning saja (menghapus konfigurasi)
   Publish Message: Publikasikan Pesan
   "Published to ": "Dipublikasikan ke "
+  "Put this in platformio-secrets-local.ini, which is not committed:": "Letakkan ini di platformio-secrets-local.ini, yang tidak di-commit:"
   QoS: QoS
   reconnect: sambungkan kembali
   Reconnect the board to flash again: Hubungkan kembali papan untuk flash lagi
   Register: Daftar
   Register a platform above before adding a farm.: Daftarkan platform di atas sebelum menambahkan farm.
   Register Farm: Daftarkan Farm
+  Refresh: Segarkan
   Register Platform: Daftarkan Platform
   Registered Platforms: Platform Terdaftar
   Registration failed: Pendaftaran gagal
@@ -2028,7 +2056,7 @@ class MqttTopic {
       display: this.type !== 'bool',
       title: {
         // noinspection JSUnresolvedReference
-        color: this.color,  // May need to vary so not all e.g. humidity same color
+        color: this.color,  // The family colour; the per-line variation happens in MqttGraph.addDataset
         // noinspection JSUnresolvedReference
         text: getString(this.name.replace(/[0-9]+$/,'')),
       },
@@ -2064,7 +2092,6 @@ class MqttTopic {
     
     // Create a graphdataset to put in the chart
     if (!this.graphdataset) {
-      let nodename = this.node ? this.node.usableName : "";
       // noinspection JSUnresolvedReference
       this.graphdataset = el('mqtt-graphdataset', {
         // noinspection JSUnresolvedReference
@@ -2076,7 +2103,9 @@ class MqttTopic {
         min: this.min,
         max: this.max,
         yaxisid: yaxisid,
-        label: `${nodename}:${this.name}`
+        // fullName, not name - the legend has to say which device a reading came from, and it goes
+        // through nodeMt because this.node (the MqttNode element) is absent on a headless page.
+        label: this.fullName,
       });
       this.graphdataset.mt = this;
     }
@@ -2367,9 +2396,18 @@ class MqttTopicProject extends MqttTopic {
 // Always created by MqttTopicProject.addNode. In normal mode MqttProject.addNode then adds the paired
 // MqttNode element (this.element) and replaces _groups with elNode.topicGroups.
 class MqttTopicNode extends MqttTopic {
-  // Route directly on the data-tree object rather than through the element.
-  message_received(topicPath, message) {
-    this.noteMessage();
+  /*
+   * Route directly on the data-tree object rather than through the element.
+   *
+   * A RETAINED delivery updates the values but does not count as having heard from the node. Nodes
+   * publish almost everything retained, so subscribing produces a flood of last-known values
+   * whatever state the node is in - and treating those as "just seen" made a device that died
+   * weeks ago read as live, on any server whose logger had restarted since. The honest answer for
+   * such a node is that we do not know when it last spoke, which is what an unset lastMessageAt
+   * already says ("never"); config.json's lastseen fills it in where the logger does know.
+   */
+  message_received(topicPath, message, retained) {
+    if (!retained) this.noteMessage();
     this.topicValueSet(topicPath, message);
     if (this.graphdataset) this.graphdataset.dataChanged();
   }
@@ -2803,12 +2841,16 @@ class MqttClient extends HTMLElementExtended {
         this.setStatus("Error:" + error.message);
       }.bind(this));
       // Message received, iterate over mqtt_subscriptions and call cb of subscription if matches
-      mqtt_client.on('message', (topic, message) => {
+      mqtt_client.on('message', (topic, message, packet) => {
         // message is Buffer
         // TODO - check whether topic is string or buffer.
         let msg = message.toString();
         console.log("Received", topic, " ", msg);
-        mqtt_deliver(topic, msg);
+        // packet.retain distinguishes the broker replaying its retained store, on subscribe, from
+        // the node actually publishing. MQTT 3.1.1 requires the flag be cleared on a delivery to an
+        // already-established subscription, so it is exactly "this arrived because we just
+        // subscribed" - see MqttTopicNode.message_received for why that matters.
+        mqtt_deliver(topic, msg, !!(packet && packet.retain));
       });
     } else {
       // console.log("XXX already started connection") // We expect this, probably one time
@@ -3131,6 +3173,7 @@ export {
   hasCapability,
   redirectToLogin,
   relativeTime,
+  brokerHost,
   retainedPattern,
   SUMMARY_CHIP_LIMIT,
   SUMMARY_READINGS_PER_MODULE,

package/frugaliot.css

@@ -200,6 +200,8 @@ div.mqtt-text {
             text-decoration: underline;
             cursor: pointer;
         }
+        /* The \27f3 beside a heading: still a link, but underlining a glyph reads as a typo. */
+        .refresh { text-decoration: none; }
         .message {margin: 0.5em; font-weight: bold; font-size: x-large; }
         /* An enrolment secret is a long unbroken string; without this it runs off a phone. */
         .enrolment__line { word-break: break-all; }

package/graph.js

@@ -273,9 +273,21 @@ class MqttGraph extends MqttElement {
     this.chart.update();
   }
   addDataset(chartdataset) {
+    this.assignColor(chartdataset);
     this.datasets.push(chartdataset);
     this.makeChart();
   }
+  // Only the graph knows what is already drawn, so it is the graph that decides how far a line has
+  // to move off its schema colour. Lowest free variant, so removing a line frees its colour again.
+  assignColor(chartdataset) {
+    const base = chartdataset.baseColor;
+    const used = this.datasets.filter(d => d.baseColor === base).map(d => d.colorVariant);
+    let n = 0;
+    while (used.includes(n)) n++;
+    chartdataset.colorVariant = n;
+    chartdataset.borderColor = variantColor(base, n); // also sets colour of point
+    chartdataset.backgroundColor = addAlpha(chartdataset.borderColor, 0.3); // 30% opacity
+  }
   removeDataset(chartdataset) {
     // Removes a single chartjs dataset object from this graph and redraws.
     const idx = this.datasets.indexOf(chartdataset);
@@ -302,8 +314,75 @@ class MqttGraph extends MqttElement {
   }
 }
 customElements.define('mqtt-graph', MqttGraph);
-let lightenablecolors =  ['coral','salmon','pink','salmon','yellow','goldenrodyellow',
-  'green','seagreen','cyan','steelblue','blue','skyblue','gray','slategray'];
+
+/* ===== Colour helpers ==========
+   The schema gives one colour per kind of reading, so two humidities on the same graph arrive the
+   same blue. variantColor spreads them apart while keeping them recognisably the same family. */
+
+// Only the names likely to appear in a schema; anything else falls through and is used unchanged.
+const namedColors = {
+  black: [0, 0, 0], gray: [128, 128, 128], grey: [128, 128, 128], white: [255, 255, 255],
+  red: [255, 0, 0], green: [0, 128, 0], blue: [0, 0, 255], purple: [128, 0, 128],
+  brown: [165, 42, 42], orange: [255, 165, 0], yellow: [255, 255, 0], pink: [255, 192, 203],
+  cyan: [0, 255, 255], magenta: [255, 0, 255],
+};
+
+function colorToRgb(color) {
+  if (!color) return null;
+  const c = color.toLowerCase().trim();
+  if (c.startsWith('#')) {
+    const hex = c.length === 4 ? c[1] + c[1] + c[2] + c[2] + c[3] + c[3] : c.slice(1, 7);
+    if (hex.length !== 6) return null;
+    return [0, 2, 4].map(i => parseInt(hex.slice(i, i + 2), 16));
+  }
+  if (c.startsWith('rgb')) {
+    const parts = c.match(/[\d.]+/g);
+    return parts && parts.length >= 3 ? parts.slice(0, 3).map(Number) : null;
+  }
+  return namedColors[c] || null;
+}
+
+function addAlpha(color, alpha) {
+  if (!color) return color;
+  if (color.startsWith('rgba')) return color.replace(/[\d.]+\)$/, alpha + ')');
+  const rgb = colorToRgb(color);
+  return rgb ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})` : color;
+}
+
+function rgbToHsl([r, g, b]) {
+  r /= 255; g /= 255; b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b), l = (max + min) / 2;
+  if (max === min) return [0, 0, l];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  const h = (max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4) * 60;
+  return [h, s, l];
+}
+
+function hslToRgb([h, s, l]) {
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+  const [r, g, b] = h < 60 ? [c, x, 0] : h < 120 ? [x, c, 0] : h < 180 ? [0, c, x]
+    : h < 240 ? [0, x, c] : h < 300 ? [x, 0, c] : [c, 0, x];
+  return [r, g, b].map(v => Math.round((v + m) * 255));
+}
+
+// n is how many lines already share this base colour: 0 keeps it, later ones step alternately either
+// side in hue and lightness, so neighbours differ but all stay within a recognisable band.
+function variantColor(baseColor, n) {
+  const rgb = n && colorToRgb(baseColor);
+  if (!rgb) return baseColor;
+  let [h, s, l] = rgbToHsl(rgb);
+  const step = (n % 2 ? 1 : -1) * Math.ceil(n / 2); // 1, -1, 2, -2 ...
+  if (s < 0.15) s = 0.45;       // black and grey have no hue to rotate, so give the variants one
+  if (l < 0.2 || l > 0.8) l = 0.45; // and no room to move either, so start them mid-range
+  h = (h + step * 28 + 360) % 360;
+  l = Math.min(0.75, Math.max(0.25, l + step * 0.08));
+  const [vr, vg, vb] = hslToRgb([h, s, l]);
+  return `rgb(${vr}, ${vg}, ${vb})`;
+}
+
 class MqttGraphDataset extends MqttElement {
   /*
   chartdataset: { data[{value, time}], parsing: { xAixKey: 'time', yAxisKey: 'value' }
@@ -349,50 +428,14 @@ class MqttGraphDataset extends MqttElement {
       };
     }
     // Things that are changed by attributes
-    this.chartdataset.label = this.state.label; // TODO-80 Needs device name
-    this.chartdataset.borderColor = this.state.color; // also sets color of point
-    this.chartdataset.backgroundColor = this.addAlpha(this.state.color, 0.3); // 30% opacity
+    this.chartdataset.label = this.state.label;
+    // Only the schema colour is recorded here; MqttGraph.addDataset sets the line and fill colours,
+    // varying this one against whatever is already on the graph.
+    this.chartdataset.baseColor = this.state.color;
     this.chartdataset.yAxisID = this.state.yaxisid;
     // Should override display and position and grid of each axis used
   }
 
-  // Helper method to add alpha transparency to a color
-  addAlpha(color, alpha) {
-    // Named color map for common colors
-    const namedColors = {
-      'purple': 'rgb(128, 0, 128)',
-      'brown': 'rgb(165, 42, 42)',
-      'red': 'rgb(255, 0, 0)',
-      'pink': 'rgb(255, 192, 203)',
-      'green': 'rgb(0, 128, 0)',
-      'blue': 'rgb(0, 0, 255)',
-      'black': 'rgb(0, 0, 0)'
-    };
-
-    // If it's already an rgba color, modify the alpha
-    if (color.startsWith('rgba')) {
-      return color.replace(/[\d.]+\)$/, alpha + ')');
-    }
-    // Convert hex or named color to rgba
-    if (color.startsWith('#')) {
-      const r = parseInt(color.slice(1, 3), 16);
-      const g = parseInt(color.slice(3, 5), 16);
-      const b = parseInt(color.slice(5, 7), 16);
-      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-    }
-    // If it's rgb, convert to rgba
-    if (color.startsWith('rgb')) {
-      return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`);
-    }
-    // Check for named colors
-    const lowerColor = color.toLowerCase().trim();
-    if (namedColors[lowerColor]) {
-      return namedColors[lowerColor].replace('rgb', 'rgba').replace(')', `, ${alpha})`);
-    }
-    // For unknown colors, return as-is
-    return color;
-  }
-
   // Normally the MqttTopic creates the MqttGraphDataset,
   // However, in an embedded case, just the GraphDataset is created and has to create the topic.
   makeTopic() {

package/package.json

@@ -38,5 +38,5 @@
     "unlink:hee": "rm -f node_modules/html-element-extended && npm install html-element-extended"
   },
   "type": "module",
-  "version": "2.0.0"
+  "version": "2.0.1"
 }

package/test/cards.test.js

@@ -75,6 +75,27 @@ describe('formatting a value', () => {
   });
 });
 
+describe('the broker host a node is told to use', () => {
+  // A node resolves this as a DNS name and opens a plain connection to 1883. The browser's own
+  // broker address is a WebSocket URL through the reverse proxy, and pasting that into a sketch
+  // produced a node that enrolled and then reported "DNS Failed ... -54" for ever.
+  test('the host comes out of the websocket URL a browser is given', () => {
+    assert.equal(core.brokerHost('wss://frugaliot.naturalinnovation.org/wss'),
+      'frugaliot.naturalinnovation.org');
+  });
+
+  test('a port is not part of a host name', () => {
+    assert.equal(core.brokerHost('ws://frugaliot.local:9012'), 'frugaliot.local');
+    assert.equal(core.brokerHost('mqtt://192.168.1.107:1883'), '192.168.1.107');
+  });
+
+  test('a bare host is left alone, and nothing is not a crash', () => {
+    assert.equal(core.brokerHost('frugaliot.local'), 'frugaliot.local');
+    assert.equal(core.brokerHost(undefined), '');
+    assert.equal(core.brokerHost(null), '');
+  });
+});
+
 describe('retained message patterns', () => {
   test('a pattern is written relative to the organization', () => {
     // "lotus/+/sht30" on org dev means dev/lotus/+/sht30 - nobody should have to type the org

package/test/datatree.test.js

@@ -16,6 +16,54 @@ before(async () => {
   mock.loadConfig(config);
 });
 
+/*
+ * What counts as having heard from a node.
+ *
+ * Nodes publish almost everything retained, so subscribing replays every last-known value whatever
+ * state the node is in. Counting that as contact made a device that died weeks ago read as "live"
+ * on any server whose logger had restarted since - the logger only learns lastseen from the
+ * non-retained discovery heartbeat, so the nodes with no lastseen are exactly the dead ones.
+ */
+describe('a retained message is the broker talking, not the node', () => {
+  const scenario = () => {
+    const { projectMt } = mock.runScenario('one-device');
+    return projectMt.nodes['esp8266-fb94bb'];
+  };
+
+  test('a replayed value does not make a silent node look live', () => {
+    const node = scenario();
+    node.lastMessageAt = undefined;          // as it is before anything has been heard
+    core.mqtt_deliver('dev/lotus/esp8266-fb94bb/sht/temperature', '21.5', true);
+    assert.equal(node.age, null, 'age is unknown, not zero');
+    assert.equal(node.status, 'never');
+  });
+
+  test('but its value still arrives - the reading is current, the timestamp is not', () => {
+    const node = scenario();
+    node.lastMessageAt = undefined;
+    core.mqtt_deliver('dev/lotus/esp8266-fb94bb/sht/temperature', '23.5', true);
+    assert.equal(node.groups.sht.topics.temperature.state.value, 23.5);
+  });
+
+  test('a live publish does count', () => {
+    // The flag is clear on any delivery to an already-established subscription, so this is what a
+    // node actually reporting looks like
+    const node = scenario();
+    node.lastMessageAt = undefined;
+    core.mqtt_deliver('dev/lotus/esp8266-fb94bb/sht/temperature', '21.5', false);
+    assert.ok(node.age !== null && node.age < 1000);
+    assert.equal(node.status, 'live');
+  });
+
+  test('config.json lastseen is what fills the gap for a node we have not heard', () => {
+    // The wrapper seeds it from the server's own record, which comes from the discovery heartbeat
+    const node = scenario();
+    node.lastMessageAt = Date.now() - 60 * 60 * 1000;
+    core.mqtt_deliver('dev/lotus/esp8266-fb94bb/sht/temperature', '21.5', true);
+    assert.ok(node.age > 59 * 60 * 1000, 'a replay must not reset it to now');
+  });
+});
+
 describe('discovery', () => {
   test('a node id on the project topic creates a node', () => {
     const { projectMt } = mock.runScenario('one-device');
@@ -246,3 +294,58 @@ describe('two temperature sources', () => {
     assert.equal(nodeMt.groups.ds18b20.state.name, 'Soil Temperature');
   });
 });
+
+/*
+ * Seeding "last seen" from config.json.
+ *
+ * The server knows when it last saw each node - from the non-retained discovery heartbeat - and
+ * puts it in config.json. The wrapper uses that as its starting point, which is the only thing
+ * that tells a browser anything about a node that has not spoken since the page loaded. Load
+ * bearing since a retained delivery stopped counting as contact, and previously easy to lose: the
+ * seed is skipped if anything has already been heard, so a retained flood arriving first would
+ * silently replace an hour-old timestamp with "now".
+ *
+ * appender() is called directly rather than by appending the element: connectedCallback fetches
+ * /config.json unconditionally and there is no server here. Everything below it is the real path.
+ */
+describe('last seen, taken from config.json', () => {
+  const AN_HOUR = 60 * 60 * 1000;
+
+  const wrapperFor = (isoSeen) => {
+    const cfg = JSON.parse(JSON.stringify(config));
+    cfg.organizations.dev.projects.lotus.nodes = { 'esp8266-fb94bb': { lastseen: isoSeen } };
+    core.configSet(cfg);
+    core.mqtt_unsubscribe_organization('dev');   // module-level, so it leaks between tests
+    const w = document.createElement('mqtt-wrapper');
+    w.setAttribute('organization', 'dev');
+    w.setAttribute('project', 'lotus');
+    w.appender();
+    return w;
+  };
+  const tidy = () => { core.mqtt_unsubscribe_organization('dev'); core.configSet(config); };
+
+  test('a node nobody has heard from still shows when the server last saw it', () => {
+    const w = wrapperFor(new Date(Date.now() - AN_HOUR).toISOString());
+    const node = w.projectMt && w.projectMt.nodes['esp8266-fb94bb'];
+    assert.ok(node, 'the node should exist from the config alone');
+    assert.ok(node.age >= AN_HOUR - 5000 && node.age <= AN_HOUR + 5000, `age was ${node.age}`);
+    assert.equal(node.status, 'offline');   // an hour with nothing heard, not "live"
+    tidy();
+  });
+
+  test('and a replayed retained value does not overwrite it', () => {
+    const w = wrapperFor(new Date(Date.now() - AN_HOUR).toISOString());
+    core.mqtt_deliver('dev/lotus/esp8266-fb94bb/sht/temperature', '21.5', true);
+    const node = w.projectMt.nodes['esp8266-fb94bb'];
+    assert.ok(node.age > AN_HOUR - 5000, `a replay reset it to ${node.age}`);
+    assert.equal(node.groups.sht.topics.temperature.state.value, 21.5, 'the value still arrives');
+    tidy();
+  });
+
+  test('a live publish does replace it, because that is real contact', () => {
+    const w = wrapperFor(new Date(Date.now() - AN_HOUR).toISOString());
+    core.mqtt_deliver('dev/lotus/esp8266-fb94bb/sht/temperature', '21.5', false);
+    assert.ok(w.projectMt.nodes['esp8266-fb94bb'].age < 5000);
+    tidy();
+  });
+});

package/test/graph.test.js

@@ -0,0 +1,69 @@
+// What a graph line is called and what colour it is drawn in. Chart.js cannot draw in jsdom (no
+// canvas), so these test the two decisions made before the chart is built.
+import '../test/setup.js';
+import { test, describe, before } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+
+const config = JSON.parse(readFileSync(new URL('./fixtures/config.json', import.meta.url), 'utf8'));
+let mock;
+
+before(async () => {
+  mock = await import('./mock.js');
+  await import('../core.js');
+  await import('../graph.js');
+  mock.loadConfig(config);
+});
+
+describe('a legend entry names the device', () => {
+  test('the label a graphdataset is given says which node the reading came from', () => {
+    const { projectMt } = mock.runScenario('one-device');
+    const mt = projectMt.nodes['esp8266-fb94bb'].groups.sht.topics.temperature;
+    // The label createGraph passes; it went through node (the element), absent on the card UI
+    assert.equal(mt.fullName, 'Greenhouse North:SHT:Temperature');
+  });
+});
+
+describe('lines sharing a schema colour are told apart', () => {
+  const graph = () => new (customElements.get('mqtt-graph'))();
+  const added = (g, baseColor) => {
+    const ds = { baseColor };
+    g.assignColor(ds);
+    g.datasets.push(ds);
+    return ds;
+  };
+
+  test('the first line keeps its colour, later ones differ from it and each other', () => {
+    const g = graph();
+    const colors = [0, 1, 2].map(() => added(g, '#008000').borderColor);
+    assert.equal(colors[0], '#008000');
+    assert.equal(new Set(colors).size, 3);
+  });
+
+  test('a different base colour is unaffected by how many share the first', () => {
+    const g = graph();
+    added(g, '#008000');
+    added(g, '#008000');
+    assert.equal(added(g, '#0000ff').borderColor, '#0000ff');
+  });
+
+  test('removing a line frees its colour for the next one', () => {
+    const g = graph();
+    added(g, 'brown');
+    const second = added(g, 'brown');
+    g.datasets.splice(g.datasets.indexOf(second), 1);
+    assert.equal(added(g, 'brown').borderColor, second.borderColor);
+  });
+
+  test('a fill is the line colour at 30%', () => {
+    const g = graph();
+    assert.equal(added(g, '#008000').backgroundColor, 'rgba(0, 128, 0, 0.3)');
+    assert.match(added(g, '#008000').backgroundColor, /^rgba\(\d+, \d+, \d+, 0\.3\)$/);
+  });
+
+  test('black has no hue to rotate, so its variants still differ', () => {
+    const g = graph();
+    const colors = [0, 1, 2].map(() => added(g, '#000000').borderColor);
+    assert.equal(new Set(colors).size, 3);
+  });
+});

package/test/page.test.js

@@ -26,6 +26,50 @@ before(async () => {
 });
 beforeEach(() => { withCapabilities('READ'); try { localStorage.clear(); } catch (e) { /* none */ } });
 
+// The permissions table outlives config.d - an organization dropped from it, or hosted on another
+// server, keeps its rows, and buildConfigFor serves only the organizations the config has.
+describe('a permission naming an organization that is not in the config', () => {
+  const withStaleOrg = () => mock.loadConfig({ ...base, user: { id: 2, name: 'test', permissions: [
+    { org: 'dev', capability: 'ADMIN' },
+    { org: 'dev', capability: 'OTAUPDATE' },
+    { org: 'gone', capability: 'ADMIN' },      // no such organization in this config
+    { org: 'gone', capability: 'OTAUPDATE' },
+  ] } });
+
+  test('does not stop the section rendering', () => {
+    withStaleOrg();
+    const admin = document.createElement('mqtt-admin');
+    admin.setAttribute('section', 'admin');
+    document.body.append(admin);    // connectedCallback used to throw here
+    assert.ok(admin.shadowRoot.querySelector('.mqtt-admin'), 'the section rendered nothing');
+    admin.remove();
+  });
+
+  test('is left out, rather than offered and then failing on every card it opens', () => {
+    withStaleOrg();
+    const admin = document.createElement('mqtt-admin');
+    admin.setAttribute('section', 'admin');
+    document.body.append(admin);
+    assert.deepEqual(admin.adminOrgs, [['dev', 'Development']]);
+    assert.deepEqual(admin.otaOrgs, [['dev', 'Development']]);
+    // Only one left, so it is chosen without asking - which is the point of dropping the other
+    assert.equal(admin.state.org, 'dev');
+    admin.remove();
+  });
+
+  test('an organization-wide and a project-scoped row list it once', () => {
+    mock.loadConfig({ ...base, user: { id: 2, name: 'test', permissions: [
+      { org: 'dev', capability: 'ADMIN' },
+      { org: 'dev', capability: 'ADMIN', project: 'lotus' },
+    ] } });
+    const admin = document.createElement('mqtt-admin');
+    admin.setAttribute('section', 'admin');
+    document.body.append(admin);
+    assert.deepEqual(admin.adminOrgs, [['dev', 'Development']]);
+    admin.remove();
+  });
+});
+
 describe('which admin cards a user gets', () => {
   test('a reader gets Info and nothing else', () => {
     // Info needs no capability: connection details are reference information, and having one card
@@ -143,8 +187,9 @@ describe('the project back', () => {
     // Reach into the shadow root: the card's own textContent does not see the section's headings
     const headings = (key) => {
       back.state.elements[key].querySelector('.fi-admincard__head').click();
+      // The heading's first span is its title - the one beside it is the refresh control
       return [...back.state.elements[key].querySelector('mqtt-admin')
-        .shadowRoot.querySelectorAll('h3')].map((h) => h.textContent);
+        .shadowRoot.querySelectorAll('h3')].map((h) => (h.querySelector('span') || h).textContent);
     };
     assert.deepEqual(headings('admin'), ['Permissions'], 'people only');
     assert.deepEqual(headings('projects'), ['Projects']);