frugal-iot-client 1.3.15 → 2.0.0

package/CLAUDE.md

@@ -14,24 +14,32 @@ it loadable on its own, and it is maintained by reaching the display elements **
 | `widgets.js` | core | `mqtt-bar`, `mqtt-text`, `mqtt-toggle`, `mqtt-gauge`, `mqtt-slider`, `mqtt-color`, `mqtt-choosetopic` — all shadow DOM |
 | `graph.js` | core, widgets | `mqtt-graph`, `mqtt-graphdataset` — pulls Chart.js |
 | `cards.js` | core | the card UI: `mqtt-devicecard`, `mqtt-devicegrid`, `mqtt-projectback`, `mqtt-dashboard`, the layout store |
-| `nodeview.js` | core, widgets | the old node/group UI — **retires with `index-old.html`**; nothing new belongs here |
 | `flash.js` | core | `mqtt-flash` — pulls esptool-js |
-| `admin.js` | core | `mqtt-admin`, `tabbed-display` |
+| `admin.js` | core | `mqtt-admin` — one admin section, rendered per card by `cards.js` |
 | `login.js` | core | `mqtt-login` — sign in, register, forgot/reset password; light DOM |
 
-Entry points: `index.html` → `dashboard.js` (the card UI, everything but `nodeview.js`);
-`index-old.html` → `webcomponents.js` (everything, and the only remaining user of it);
-`login.html` → `login.js`, which imports only `core.js` — that is why `mqtt-login` is not in
-`admin.js`; `index-embedded.html` needs only `core.js` + `widgets.js` and must keep working.
+Every page loads the modules it needs; there is no file that loads everything.
+
+| Page | Loads |
+|---|---|
+| `index.html` | `dashboard.js` — the card UI |
+| `login.html` | `login.js`, which imports only `core.js` — that is why `mqtt-login` is not in `admin.js` |
+| `index-embedded.html`, `dashboard_example.html` | `core.js` + `widgets.js` + `graph.js` |
+
+Retired with the pre-cards UI: `index-old.html`, `index-project.html`, `nodeview.js` and
+`webcomponents.js` (the shim that loaded everything), `mqtt-admin`'s tab strip, and the wrapper's
+`headless` attribute — the data tree is all it builds now. `mqtt-admin` renders one section, chosen
+by its `section` attribute; the cards on a project's back make one per card.
 
 Dashboards (e.g. `dashboard_example.html`) are thin HTML pages importing selectively.
 
 ## Design documents
 
-`CARDS_UX.md` is the design for the card UI — every decision is numbered (D-n) with its reasoning,
-deferred work is L-n, and it is the place to argue with a choice rather than re-deciding it in code.
-`CARDS_PLAN.md` is how it was built, including the bugs found on the way. `FLASH_PLAN.md` and
-`HEADLESS_PLAN.md` cover their own areas.
+`docs/CARDS_UX.md` is the design for the card UI — every decision is numbered (D-n) with its
+reasoning, deferred work is L-n, and it is the place to argue with a choice rather than re-deciding
+it in code. `docs/CARDS_PLAN.md` is how it was built, including the bugs found on the way.
+`docs/FLASH_PLAN.md` and `HEADLESS_PLAN.md` cover their own areas. Comments throughout the code cite
+these by bare filename (`see CARDS_UX.md 4.7`); they all live in `docs/` except `HEADLESS_PLAN.md`.
 
 ## Code style
 
@@ -283,9 +291,9 @@ Each of these cost real time. They are not obvious from reading the code.
   `innerHTML`, `action`) as properties. **Any other function is silently put in `el.state`** and
   never wired up: `el({onpointerdown: fn})` does nothing at all. Use `addEventListener`.
 - **`@media (max-width: 1001px)` in `frugaliot.css`** inflates fonts and icons for the node/group UI,
-  where a node is one wide block. Inside a card it makes everything wider than the card. Those rules
-  read `var(--fi-chrome-font, …)`; the card page sets it to `1rem`. Anything new that is not
-  `nodeview.js` should opt out the same way. Replace them properly when `nodeview.js` goes.
+  which is now retired — so these rules have no page they were drawn for. The card page opts out by
+  setting `--fi-chrome-font: 1rem`, which the rules read. They still reach the login page and the
+  embedded examples, so removing them is a visual change to those and wants looking at on a phone.
 - **`:host-context(details[open]) div { display: block }`** near the top of `frugaliot.css` has
   specificity (0,2,2) and overrides most rules for any div in a shadow root inside an open
   `<details>` — which is every widget in the old UI.
@@ -340,9 +348,9 @@ regress unnoticed; regenerate deliberately with `npm run test:update` and read t
 
 ## Internationalisation
 
-The master language table is `const languages` in `webcomponents.js`. Dashboard-specific strings are added via `addVocabulary(yamlString)` in the dashboard's `<script>`.
+The master language table is `const languages` in `core.js`. Dashboard-specific strings are added via `addVocabulary(yamlString)` in the dashboard's `<script>`.
 
-Every `addVocabulary` block must include **all four** language sections (EN, FR, HI, ID). Strings absent from `webcomponents.js` must be explicitly added in the dashboard block — do not assume the core file covers them.
+Every `addVocabulary` block must include **all four** language sections (EN, FR, HI, ID). Strings absent from `core.js` must be explicitly added in the dashboard block — do not assume the core file covers them.
 
 ### How a string gets translated
 

package/admin.js

@@ -1,74 +1,14 @@
 /*
- * Frugal IoT client - the tab strip, and the admin panel: OTA, permissions, projects, nodes
- * and the API tools. The login page moved to login.js, so that it does not have to load this.
+ * Frugal IoT client - the admin sections: OTA, permissions, projects, nodes and the API tools.
+ *
+ * One <mqtt-admin section="..."> renders one of them, and cards.js makes one per card on a
+ * project's back. The login page is in login.js, so that it does not have to load this.
  */
 
 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, POST, XXX, configSet, el, getString, hasCapability, mqttTempConnect, retainedPattern, locationParameterChange, mqtt_client, preferedLanguageSet, preferedLanguages, redirectToLogin, server_config } from './core.js';
+import { CssUrl, DELETE, POST, XXX, configSet, el, getString, hasCapability, mqttTempConnect, retainedPattern, locationParameterChange, mqtt_client, preferedLanguageSet, preferedLanguages, redirectToLogin, server_config } from './core.js';
 
-class TabbedDisplay extends HTMLElementExtended {
-  constructor() {
-    super();
-    this.state = {tab: 0};
-    this.tabs = [];
-  }
-  static get observedAttributes() { return ['tab']; }
-  static get integerAttributes() { return ['tab']; }
-
-  tabSelect(tab) {
-    this.changeAttribute('tab', tab);
-    this.renderAndReplace();
-    // Let a parent lazily load a tab's data only once it's actually selected, rather than eagerly
-    // for every tab whenever e.g. the organization changes - see MqttAdmin.onTabChange.
-    const title = this.children[tab] && this.children[tab].getAttribute('title');
-    this.dispatchEvent(new CustomEvent('tabchange', {detail: {tab, title}}));
-  }
-  updateActive(value) {
-    // Note this may get called before children added, so careful not to change 'tab'
-    if (this.children.length && this.tabs.length) {
-      if (value < 0) value = 0;
-      if (value >= this.children.length) value = this.children.length - 1;
-      for (let i = 0; i < this.children.length; i++) {
-        //if (this.children[i].tagName.toLowerCase() === 'section') {
-        if (i === value) {
-          // TODO could do this more easily with classList, but need to edit CSS
-          this.children[i].className = "tabbed-section active";
-          this.tabs[i].className = "tab active";
-        } else {
-          this.children[i].className = "tabbed-section inactive";
-          this.tabs[i].className = "tab inactive";
-        }
-        //}
-      }
-    }
-  }
-  changeAttribute(name, value) {
-    super.changeAttribute(name, value); // will set this.state.tab if name is "tab"
-    if (name === "tab") {
-      this.updateActive(this.state.tab);
-    }
-  }
-  render() {
-    //let contents = [];
-    let i = 0;
-    this.tabs = Array.from(this.children).map((c, i) =>
-      el('button', {
-        onclick: this.tabSelect.bind(this, i),
-        textContent: c.getAttribute('title') })
-    );
-    this.updateActive(this.state.tab); // sets active/inactive on children and tabs
-    this.classList.toggle('solo', this.tabs.length <= 1); // light-DOM class so CSS can suppress border
-    return [
-      el('link', {rel: 'stylesheet', href: CssUrl}),
-      el('div', {class: 'tabbed-display'}, [
-        this.tabs.length > 1 ? el('section', {class: 'tabs'}, this.tabs) : null,
-        el('slot',{}), // Children are the sections i.e. each tabs content
-      ]),
-    ];
-  }
-}
-customElements.define('tabbed-display', TabbedDisplay);
 
 // ---------- USB flashing over WebSerial ----------
 // The .bin files the OTA tab handles are application images. An ESP32 also needs a bootloader,
@@ -78,10 +18,10 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
     super(props);
     this.state = {register: false, ota_files: [], people_list: [], projects_list: [], platforms_list: [], farms_list: [], farm_nodes_list: [],
       selected_platform_id: null, selected_farm_id: null, selected_farm_node: null, device_schema: null, selected_action: null,
-      // Default tab is "Dashboard" (index 0 in render()) - tabsNeedingLoad tracks which of the other,
-      // network-backed tabs (OTA/Admin/API) still need their data (re-)fetched for the current
-      // organization; see setOrganization and onTabChange.
-      activeTabTitle: 'Dashboard', tabsNeedingLoad: new Set()};
+      // Which section this card is, and whether its data has been fetched for the current
+      // organization - the sections that need a server round trip only make it once. The section is
+      // set from the attribute (see changeAttribute); 'Dashboard' is the do-nothing default.
+      activeSectionTitle: 'Dashboard', sectionsNeedingLoad: new Set()};
     this.state.elements = {};
   }
   static get observedAttributes() { return ['register','message','url','lang','org','section']; }
@@ -137,12 +77,12 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
     //super.connectedCallback(); // Not doing as finishes with a re-render.
   }
   changeAttribute(name, value) {
-    // Rendering a single section means there is no tab strip and so no tabchange event ever fires.
-    // activeTabTitle would stay at its default of "Dashboard", setOrganization would load that
-    // tab's data (there is none), and the section would sit there empty with no request made.
+    // Which section this is decides which data setOrganization goes on to fetch. Without this it
+    // would stay at the do-nothing default of "Dashboard" and the card would sit there empty with
+    // no request ever made.
     if (name === "section") {
       const section = this.adminSections().find((x) => x.key === value);
-      if (section) this.state.activeTabTitle = section.title;
+      if (section) this.state.activeSectionTitle = section.title;
     }
     if (name === "lang") {
       if (value.includes(',')) {
@@ -171,8 +111,17 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
 
   // Content behind an organization dropdown (OTA/Admin/Nodes/API tabs) should not show until an
   // organization is selected. contentFn is a MqttAdmin method, called with `this` bound.
-  gatedContent(contentFn) {
-    return this.state.org ? contentFn.call(this) : el('p', {textContent: "Select an organization to continue."});
+  // A tab's content, or why there is none: no organization chosen, or one this tab is not about -
+  // the OTA tab needs OTAUPDATE and the others ADMIN, and the shared dropdown offers both.
+  gatedContent(section) {
+    if (!this.state.org) return el('p', {textContent: "Select an organization to continue."});
+    if (!this[section.orgs].some(([oid]) => oid === this.state.org)) {
+      // A colon and the name, so the translated part is a whole sentence in every language rather
+      // than a fragment that only reads correctly with English word order.
+      return el('p', {i8n: false, textContent:
+        `${getString("You do not have permission for this organization")}: ${this.state.org}`});
+    }
+    return section.content.call(this);
   }
   // An "Add X" button that expands into buildForm() once clicked, and stays expanded - used for the
   // "Add Project", "Add Platform" and "Add Farm" forms so they don't clutter the tab until the admin wants to add one.
@@ -247,6 +196,148 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
       }
     });
   }
+  // Which nodes have enrolled, and forgetting one so it can enrol again.
+  /*
+   * The organization's enrolment secrets (SECURITY.md S10).
+   *
+   * Its own request, not part of /config.json, which is served to every logged-in user. Fetched
+   * only when the admin asks to see them, so an open Nodes card does not put a secret on screen.
+   */
+  getEnrolmentSecrets() {
+    if (!this.state.org) return;
+    GET(`/enrolment_secret/${this.state.org}`, {}, (err, json) => {
+      if (err) { this.message(err.message); return; }
+      this.state.enrolment = json;   // {org, secrets, enrol_url}
+      this.replaceElement("enrolment_secrets", this.enrolmentSecretsList());
+    });
+  }
+  onEnrolmentSecretAdd() {
+    POST(`/enrolment_secret/${this.state.org}`, {}, (err, json) => {
+      this.message(err ? err.message : (json && json.message) || getString("Added"), false);
+      this.getEnrolmentSecrets();
+    });
+  }
+  onEnrolmentSecretDelete(secret) {
+    // Irreversible for any node still holding it, and those nodes cannot be told - they are the
+    // ones not yet enrolled, so nothing on the server knows they exist.
+    if (!window.confirm(
+      `Withdraw this enrolment secret?\n\n` +
+      `Any node flashed with it that has not enrolled yet will be refused and will need ` +
+      `reflashing. Nodes that have already enrolled are unaffected - they never present it again.`)) return;
+    DELETE(`/enrolment_secret/${this.state.org}`, {secret}, (err, json) => {
+      this.message(err ? err.message : (json && json.message) || getString("Withdrawn"), false);
+      this.getEnrolmentSecrets();
+    });
+  }
+  enrolmentSecretsList() {
+    const e = this.state.enrolment;
+    if (!e) {
+      return el('p', {}, [
+        el('span', {class: 'pseudolink', textContent: "Show enrolment secrets",
+          onclick: this.getEnrolmentSecrets.bind(this)}),
+      ]);
+    }
+    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:
+        "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() {
+    if (!this.state.org) return;
+    GET(`/nodes_list/${this.state.org}`, {}, (err, json) => {
+      if (err) { this.message(err.message); return; }
+      this.state.enrolled_nodes = json; // [{ project, nodeid, lora, enrolled_at }]
+      this.replaceElement("enrolled_nodes", this.enrolledNodesList());
+    });
+  }
+  onNodeReset(project, nodeid) {
+    // Destructive and not obvious: forgetting a node that is running is safe (it notices its
+    // credential being refused and enrols again) but it does cost that node a few minutes offline.
+    // Worth asking, unlike the OTA deletes beside it where the file can simply be uploaded again.
+    if (!window.confirm(
+      `Forget ${project}/${nodeid}?\n\n` +
+      `It will be issued a new broker credential the next time it asks. A node that is running ` +
+      `will be offline for a minute or two while it notices; a node whose filesystem was erased ` +
+      `needs this before it can rejoin at all.`)) return;
+    POST(`/node_reset/${this.state.org}`, { project, nodeid }, (err, json) => {
+      this.message(err ? err.message : (json && json.message) || "Forgotten");
+      this.getEnrolledNodes();
+    });
+  }
+  /*
+   * What each state means, what clicking it does next, and how it reads.
+   *
+   * A node id cannot be discovered from the server, so a node that keeps asking and being refused
+   * is how an admin learns it exists - which is why "failed" is a state here rather than an error
+   * somewhere in a log. Those rows are untrusted: anyone can make an id appear by attempting
+   * enrolment, so the row shows when it asked and from where, for the admin to recognise.
+   */
+  nodeStates() {
+    return {
+      enrolled: { label: "Yes",      next: 'denied',   hint: "Has its own broker credential. Click to deny it." },
+      failed:   { label: "Failed",   next: 'approved', hint: "Asked and was refused. Click to let it enrol." },
+      approved: { label: "Approved", next: 'denied',   hint: "Its next request will be accepted. Click to deny it." },
+      denied:   { label: "Denied",   next: 'cleared',  hint: "Stopped, and its credential removed. Click to clear." },
+    };
+  }
+  onNodeState(project, nodeid, state) {
+    if (state === 'denied' && !window.confirm(
+      `Deny ${nodeid}?\n\n` +
+      `Its broker account is deleted, so it stops being able to publish or subscribe, and it ` +
+      `cannot enrol again until you clear this. Use it for a node sending bad readings.`)) return;
+    POST(`/node_state/${this.state.org}`, {project, nodeid, state}, (err, json) => {
+      this.message(err ? err.message : (json && json.message) || getString("Done"), false);
+      this.getEnrolledNodes();
+    });
+  }
+  enrolledNodesList() {
+    const nodes = this.state.enrolled_nodes;
+    if (!nodes || !nodes.length) {
+      return el('p', {textContent:
+        "No nodes have enrolled yet. A node enrols itself the first time it connects."});
+    }
+    const states = this.nodeStates();
+    return el('table', {class: 'nodestates'}, [
+      el('tr', {}, [
+        el('th', {textContent: "Project"}), el('th', {textContent: "Node"}),
+        el('th', {textContent: "Enrolled"}), el('th', {textContent: "Last asked"}),
+        el('th', {textContent: "Forget"}),
+      ]),
+      ...nodes.map((n) => {
+        const st = states[n.state] || states.failed;
+        return el('tr', {}, [
+          el('td', {i8n: false, textContent: n.project || ''}),
+          el('td', {i8n: false, textContent: `${n.nodeid}${n.lora ? ' (LoRa)' : ''}`}),
+          el('td', {}, [
+            el('span', {class: 'pseudolink', title: getString(st.hint), textContent: st.label,
+              onclick: this.onNodeState.bind(this, n.project, n.nodeid, st.next)}),
+          ]),
+          // Untrusted, and shown as such: an address and a time for the admin to recognise
+          el('td', {i8n: false, textContent: n.asked_at
+            ? `${this.formatLastSeen(new Date(n.asked_at).toISOString())} from ${n.asked_from || '?'}` +
+              `${n.asked_count > 1 ? ` (${n.asked_count}x)` : ''}`
+            : (n.enrolled_at ? new Date(n.enrolled_at).toISOString().slice(0, 10) : '')}),
+          el('td', {}, [
+            n.enrolled_at
+              ? el('span', {class: 'pseudolink', textContent: ' 🗑 ',
+                  title: getString("Forget this node, so it is issued a new credential"),
+                  onclick: this.onNodeReset.bind(this, n.project, n.nodeid)})
+              : el('span', {}),
+          ]),
+        ]);
+      }),
+    ]);
+  }
   getPeopleList() {
     if (this.state.org) {
       this.getOrChangeAdminPeople(`/people_list/${this.state.org}`);
@@ -565,6 +656,7 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
     const projectIds = this.selectedFarmProjectIds();
     if (!org || projectIds.length === 0) {
       this.state.farm_nodes_list = [];
+    this.state.enrolled_nodes = null;
       this.replaceElement("farm_nodes_table", this.farmNodesTable());
       return;
     }
@@ -834,22 +926,19 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
     this.state.farms_list = [];
     this.state.farm_nodes_list = [];
     // Rebuild the gated content of each tab first, since it re-creates the elements (e.g. ota_files,
-    // people_perms_list, platforms_list_display) that loadTabData() below then asynchronously replaces.
-    this.adminSections().forEach((section) => this.replaceElement(section.rest, this.gatedContent(section.content)));
-    // Only OTA/Admin/API tabs do their own network fetch (Nodes reads server_config, already loaded,
-    // and Dashboard is handled by mqtt-wrapper) - mark them all as needing a refetch for the new
-    // organization, but only actually fetch whichever tab is currently active; the rest load lazily
-    // if/when the user switches to them (see onTabChange), to avoid a server-side fetch per tab on
-    // every organization change.
-    this.state.tabsNeedingLoad = new Set(['OTA', 'Admin', 'Projects', 'API']);
-    this.loadTabIfNeeded(this.state.activeTabTitle);
-    // Note both these dropdowns are fine if this.state.org is undefined
+    // people_perms_list, platforms_list_display) that loadSectionData() below then asynchronously replaces.
+    this.adminSections().forEach((section) => this.replaceElement(section.rest, this.gatedContent(section)));
+    // Which tabs do their own network fetch, and so need one again for a new organization. Only
+    // Dashboard does not (mqtt-wrapper handles it). "Nodes" is in the list because it now fetches
+    // the enrolled-node list as well as reading server_config - leaving it out was why that section
+    // always said "No nodes have enrolled yet": loadSectionIfNeeded returns early for a tab that is not
+    // in this set, so the fetch never happened.
+    this.state.sectionsNeedingLoad = new Set(['OTA', 'Admin', 'Projects', 'Nodes', 'API']);
+    this.loadSectionIfNeeded(this.state.activeSectionTitle);
+    // Only a card created without an organization has a dropdown of its own; replaceElement does
+    // nothing for an element this rendering never made. Fine too if this.state.org is undefined.
     this.adminSections().forEach((section) =>
       this.replaceElement(section.dropdown, this.orgDropdown(this.state.org, this[section.orgs], `${section.key}organizations`)));
-    // Keep the Dashboard tab's own organization in sync with the shared dropdown above.
-    if (this.state.elements.mqttWrapper) {
-      this.state.elements.mqttWrapper.setOrganization(org);
-    }
   }
   setDefaultOrganization() {
     let org = this.state.org;
@@ -867,25 +956,21 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
   onOrganization(e) {
     this.setOrganization(e.target.value);
   }
-  // Fired by tabbed-display's 'tabchange' event (see TabbedDisplay.tabSelect) whenever the user
-  // switches tabs - lazily loads that tab's data if it hasn't been fetched yet for the current org.
-  onTabChange({title}) {
-    this.state.activeTabTitle = title;
-    this.loadTabIfNeeded(title);
-  }
-  loadTabIfNeeded(title) {
-    if (!this.state.tabsNeedingLoad.has(title)) { return; }
-    this.state.tabsNeedingLoad.delete(title);
-    this.loadTabData(title);
+  loadSectionIfNeeded(title) {
+    if (!this.state.sectionsNeedingLoad.has(title)) { return; }
+    this.state.sectionsNeedingLoad.delete(title);
+    this.loadSectionData(title);
   }
-  // Only OTA/Admin/API have their own server round trip - Nodes and Dashboard need nothing here.
-  loadTabData(title) {
+  // OTA/Admin/Projects/Nodes/API each have their own server round trip; Dashboard needs nothing.
+  loadSectionData(title) {
     if (title === 'OTA') {
       this.getOtaFiles();
     } else if (title === 'Admin') {
       this.getPeopleList();
     } else if (title === 'Projects') {
       this.getProjectsList();
+    } else if (title === 'Nodes') {
+      this.getEnrolledNodes();
     } else if (title === 'API') {
       this.getPlatformsList();
       this.getFarmsList();
@@ -1139,7 +1224,7 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
      return el('div', {class: 'retained'}, [
        el('div', {class: 'formgroup'}, [
          el('label', {for: 'retained_pattern', textContent: "Pattern"}),
-         el('span', {i8n: false, textContent: `${this.state.org}/`}),
+         el('span', {class: 'retained__prefix', i8n: false, textContent: `${this.state.org}/`}),
          this.state.elements.retained_pattern = el('input', {id: 'retained_pattern', type: 'text',
            value: r.pattern, placeholder: 'lotus/+/sht30/#'}),
          el('button', {class: 'submit', type: 'button', textContent: "List",
@@ -1171,7 +1256,7 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
    onRetainedList() {
      const pattern = retainedPattern(this.state.org, this.state.elements.retained_pattern.value);
      this.state.retained.pattern = this.state.elements.retained_pattern.value;
-     const client = mqttTempConnect(this.state.org);
+     const client = mqttTempConnect();
      if (!client) { this.retainedShow("No broker credentials for this organization"); return; }
      this.retainedShow(`Listening on ${pattern} ...`);
      const found = new Map();
@@ -1196,21 +1281,24 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
    onRetainedDelete() {
      const r = this.state.retained;
      if (!r.confirming) { this.retainedShow(null, r.topics, true); return; }
-     const topics = r.topics;
-     const client = mqttTempConnect(this.state.org);
-     if (!client) { this.retainedShow("No broker credentials for this organization"); return; }
+     const topics = r.topics.map((t) => t.topic);
      this.retainedShow(`Deleting ${topics.length} ...`);
-     client.on('connect', () => {
-       // An empty retained message is how MQTT spells "forget this topic"
-       let left = topics.length;
-       topics.forEach((t) => client.publish(t.topic, '', {retain: true, qos: 1}, () => {
-         if (--left === 0) {
-           client.end();
-           this.retainedShow(`Deleted ${topics.length}. If one comes back, a node is still publishing it.`);
-         }
-       }));
+     /*
+      * The server does the publishing, not this browser.
+      *
+      * A retained topic is removed by publishing an empty payload to it, and this used to do that
+      * directly. It cannot any more: a user's broker credential may publish to "set/" topics only,
+      * so that a dashboard cannot invent a reading. Worse, it failed with no sign of failing - the
+      * broker acknowledges a QoS 1 publish before deciding whether it is allowed - which is how
+      * "Deleted 23" came to be printed while all 23 were still there.
+      */
+     POST(`/retained_delete/${this.state.org}`, {topics}, (err, json) => {
+       if (err) { this.retainedShow(`Could not delete: ${err.message}`); return; }
+       const failed = (json && json.failed) || 0;
+       this.retainedShow(
+         `Deleted ${(json && json.deleted) || 0}${failed ? `, ${failed} failed` : ''}. ` +
+         `If one comes back, a node is still publishing it.`);
      });
-     client.on('error', (e) => { this.retainedShow(`Could not connect: ${e.message}`); client.end(true); });
    }
    projectsRestContent() {
      return el('div', {}, [
@@ -1262,6 +1350,23 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
      return el('div', {}, [
        el('h3', {textContent: "Nodes in Organization"}),
        this.state.elements.nodes_table = this.nodesTable(),
+       el('section', {}, [
+         el('h3', {textContent: "Enrolled nodes"}),
+         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 " +
+           "filesystem has been erased, because it can then no longer prove which node it is."}),
+         this.state.elements.enrolled_nodes = this.enrolledNodesList(),
+       ]),
+       el('section', {}, [
+         el('h3', {textContent: "Enrolment secret"}),
+         el('p', {textContent:
+           "Compiled into a node's firmware, this is what lets it ask this server for its own " +
+           "broker credential. It grants nothing else - no reading and no publishing. Add a second " +
+           "one to change it: both are accepted, so nodes already flashed keep working until you " +
+           "withdraw the old one."}),
+         this.state.elements.enrolment_secrets = this.enrolmentSecretsList(),
+       ]),
      ]);
    }
    // Content of the API tab below the organization dropdown - only rendered once an org is selected
@@ -1292,8 +1397,8 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
        ]),
      ]);
    }
-   // The admin functions, described once. The tabbed view below shows them all; the project back
-   // (CARDS_UX.md 11) puts each in its own card, by setting section="ota" and so on.
+   // The admin functions, described once. The project back (CARDS_UX.md 11) puts each in its own
+   // card, by setting section="ota" and so on.
    adminSections() {
      return [
        { key: 'ota',   title: "OTA",   orgs: 'otaOrgs',   dropdown: 'otaorgsdropdown',   rest: 'ota_rest',   content: this.otaRestContent },
@@ -1306,45 +1411,38 @@ class MqttAdmin extends HTMLElementExtended { // TODO-89 may depend on organizat
      ];
    }
    // Just one section, with no tab strip around it - what an admin card holds
+   /*
+    * One section on its own, which is how the project's back shows each admin card (cards.js).
+    *
+    * No organization dropdown when the card was given one. The page's own selector - in the wrapper
+    * above the cards - has already decided, and cards.js passes it as the `org` attribute, so a
+    * dropdown here would be a second control for a choice already made. It is still offered when
+    * the element was created without an org, the only case where the card could not otherwise be
+    * used at all; `el` omits an undefined attribute, so the two cases are distinguishable.
+    */
    renderSection(key) {
      if (key === 'flash') return el('div', {class: 'mqtt-admin'}, [el('mqtt-flash', {})]);
      const section = this.adminSections().find((s) => s.key === key);
      if (!section) { XXX(["No such admin section", key]); return null; }
      if (!this[section.orgs].length) return null; // no permission for it
      return el('div', {class: 'mqtt-admin'}, [
-       this.state.elements[section.dropdown] = el('span', {textContent: "Waiting"}),
-       this.state.elements[section.rest] = this.gatedContent(section.content),
+       this.state.org ? null
+         : (this.state.elements[section.dropdown] = el('span', {textContent: "Waiting"})),
+       this.state.elements[section.rest] = this.gatedContent(section),
      ]);
    }
 
-   render() { //TODO-89 needs styles
-     if (this.state.section) {
-       return [el('link', {rel: 'stylesheet', href: CssUrl}), this.renderSection(this.state.section)];
+   /*
+    * One admin section, always. This element is created by cards.js, once per card on the project's
+    * back, with a `section` attribute saying which - there is no longer a tabbed page that shows
+    * them all at once.
+    */
+   render() {
+     if (!this.state.section) {
+       XXX(["mqtt-admin needs a section attribute - it renders one admin card, not a page"]);
+       return null;
      }
-     const tabbedDisplay = el('tabbed-display', {tab: 0}, [
-           el('section', {title: "Dashboard"}, [
-             this.state.elements.mqttWrapper = el('mqtt-wrapper'),
-           ]),
-           // From adminSections, so a section added for the cards gets a tab here too
-           ...this.adminSections().map((section) => (!this[section.orgs].length ? null :
-             el('section', {title: section.title}, [
-               this.state.elements[section.dropdown] = el('span', { textContent: "Waiting"}),
-               this.state.elements[section.rest] = this.gatedContent(section.content),
-             ]))),
-     ]);
-     // Lazily load a tab's data only once the user actually switches to it - see onTabChange.
-     tabbedDisplay.addEventListener('tabchange', (e) => this.onTabChange(e.detail));
-     return [
-       el('link', {rel: 'stylesheet', href: CssUrl}),
-       el('div', {class: 'mqtt-admin'},[
-         // This is a top bar, holds message and language picker
-         el('div',{class: 'message'},[
-           this.state.elements.message = el('span', {textContent: this.state.message}),
-           el('language-picker'),
-         ]),
-         tabbedDisplay,
-       ]),
-     ];
+     return [el('link', {rel: 'stylesheet', href: CssUrl}), this.renderSection(this.state.section)];
    }
 }
 customElements.define('mqtt-admin', MqttAdmin);