@yz-social/civildefense.io 4.5.6 → 4.5.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yz-social/civildefense.io",
   "description": "Browser app to safely share live sightings on a map.",
-  "version": "4.5.6",
+  "version": "4.5.8",
   "keywords": [
     "map",
     "browser",
@@ -17,7 +17,7 @@
     ".": "./index.js"
   },
   "dependencies": {
-    "@axona/protocol": "github:axona-net/axona-protocol#5bf6f888cbbb5a58b9700c11582a4b6ca4c3141e",
+    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.29.0",
     "cors": "^2.8.6",
     "express": "^4.22.1",
     "leaflet": "^1.9.4",

package/public/about/en.html

@@ -132,12 +132,21 @@
   <p>Axona is a modern descendant of the old <a href="https://en.wikipedia.org/wiki/Peer-to-peer" target="yz.other" rel="noopener">peer-to-peer networks</a> such as <a href="https://en.wikipedia.org/wiki/Napster">Napster</a>. It has a unique self-healing routing mechanism that uses neuron learning techniques to find the best way to distribute alerts. It is analogous to <a href="https://en.wikipedia.org/wiki/Tor_(network)" target="yz.other" rel="noopener">TOR</a> (The Onion Router), but designed from the ground up to run in mobile and desktop browsers.</p>
   <p>We are also developing a comprehensive quantum-ready cryptography system that will add private-groups for Civil Defense and any software on the network. We believe there are many applications where developers, users, and the public all benefit from open software and secure, decentralized networks — without app stores, servers, or data centers. Beyond Civil Defense, we are also developing large-scale <a href="https://en.wikipedia.org/wiki/Distributed_computing" target="yz.other" rel="noopener">multiuser collaboration</a> and <a href="https://poverty-action.org/inclusive-instant-payment-systems-evidence-based-approach-design-impact" target="yz.other" rel="noopener">Inclusive Instant Payment Systems</a>.</p>
 
-</main>
+
+<div class="centered">
+  <img src="serving-you.jpg" alt="Civil Defense Week poster - Serving you in time of emergency">
+</div>
+
+<div class="centered">
+  <img src="prevail.jpg" alt="Cold-War Civil Defense poster - Prepare, Protect, Prevail">
+</div>
 
 <div class="centered">
   <img src="nazis.png" alt="WWII-style poster exhorting the public to use Civil Defense in case of Nazi attack.">
 </div>
 
+</main>
+
 <!-- ── FOOTER ─────────────────────────────────────────────────── -->
 <footer>
   <p><a href="/?lang=en" target="civildefense">civildefense.io</a> &mdash; Safe and free crowdmapping for vulnerable populations.<br>

package/public/about/es.html

@@ -117,12 +117,21 @@
   <p>Axona es un descendiente moderno de las antiguas <a href="https://en.wikipedia.org/wiki/Peer-to-peer" target="yz.other" rel="noopener">redes entre pares</a> como <a href="https://en.wikipedia.org/wiki/Napster">Napster</a>. Tiene un mecanismo único de enrutamiento autocurativo que utiliza técnicas de aprendizaje neuronal para encontrar la mejor manera de distribuir alertas. Es análogo a <a href="https://en.wikipedia.org/wiki/Tor_(network)" target="yz.other" rel="noopener">TOR</a> (The Onion Router), pero diseñado desde cero para funcionar en navegadores móviles y de escritorio.</p>
   <p>También estamos desarrollando un sistema integral de criptografía preparado para la era cuántica que añadirá grupos privados para Defensa Civil y cualquier software en la red. Creemos que hay muchas aplicaciones en las que los desarrolladores, los usuarios y el público en general se benefician del software abierto y las redes seguras y descentralizadas, sin tiendas de aplicaciones, servidores ni centros de datos. Más allá de Defensa Civil, también estamos desarrollando <a href="https://en.wikipedia.org/wiki/Distributed_computing" target="yz.other" rel="noopener">colaboración multiusuario a gran escala</a> y <a href="https://poverty-action.org/inclusive-instant-payment-systems-evidence-based-approach-design-impact" target="yz.other" rel="noopener">Sistemas de Pago Instantáneo Inclusivos</a>.</p>
 
-</main>
+<div class="centered">
+  <img src="serving-you.jpg" alt="Cartel de la Semana de la Defensa Civil: A su servicio en caso de emergencia">
+</div>
+
+<div class="centered">
+  <img src="prevail.jpg" alt="Póster de Defensa Civil de la Guerra Fría: Preparar, proteger, prevalecer">
+</div>
 
 <div class="centered">
   <img src="nazis.png" alt="Póster de estilo de la Segunda Guerra Mundial que exhorta al público a usar Defensa Civil en caso de ataque nazi.">
 </div>
 
+</main>
+
+
 <!-- ── FOOTER ─────────────────────────────────────────────────── -->
 <footer>
   <p><a href="/?lang=es" target="civildefense">civildefense.io</a> &mdash; Mapeo colaborativo seguro y gratuito para poblaciones vulnerables.<br>

package/public/javascripts/alert.js

@@ -6,7 +6,7 @@ import { networkPromise, resetInactivityTimer, notificationsAllowed, tooltip, cl
 import { consume } from './display.js';
 import { Hashtags } from './hashtags.js';
 import { Agent } from './agent.js';
-import { Conversation } from './conversation.js';
+import { Conversation, Reply } from './conversation.js';
 import { alertTopic } from './versions.js';
 import { getContainingCells, findCoverCellsByCenterAndPoint } from './s2.js';
 const { localStorage, getComputedStyle, URL, URLSearchParams, domtoimage } = globalThis;
@@ -72,6 +72,37 @@ export function go({lat = null, lng = null, zoom = null, alert = null}) { // Go
   }
 }
 
+class AlertReply extends Reply {
+  async initialize(properties) { // Set properties of this AlertReply.
+    // Currently, this waits for any attachment to be fetched. (Conversation.ensure() will wait as long as we need.)
+    // This means that the alert will not show up until we have the attachments, and then it shows up all at once with the text,
+    // attribution, and attachment. (There's no img or video "loading" period because the attachment comes through as a complete
+    // data url.)  This is convenient for the formatReply function, because until the chunked attachment is re-assembled, we won't
+    // know which kind of player to use, and we won't be able to assign the containing A[href].
+    //
+    // Alternatively, we could in the future choose to have the attributions and text appear right away, with a "spinner"
+    // placeholder that turns into the appropriate A/player when the attachment resolves. To do that, we would need to record here
+    // a promise to reassemble the attachment, have formatReply create a findable placeholder to later replace with the A element
+    // and contents, and then have ensureContent() arrange in its delayed followup to replace the placeholder when the promise
+    // resolves.
+    super.initialize(properties);
+    const {container, agent, issuedTime, payload} = properties;
+    const {file:attachmentTopic} = payload;
+    if (attachmentTopic) {
+      const contact = await networkPromise;
+      // Before pushing data on to replies.
+      const {dataURL:file, name, msgIds} = await contact.assembleChunkedDataURL(attachmentTopic);
+      Object.assign(payload, {file, name, attachmentTopic, msgIds});
+    }
+    const element = container.startFader('.alert-commented', issuedTime + ttl - Date.now());
+    element.style.display = 'block';
+    // Restart the pulse animation by setting animationName to something it isn't.
+    element.style.animationName = element.style.animationName === 'pulse2' ? 'pulse' : 'pulse2';
+    container.showNotification({agent, issuedTime, body: payload.message || payload.name || payload});
+    return this;
+  }
+}
+
 let subscriptions = []; // array of stringy keys <mumble>:<cellID>:<hashtag>
 let subscriptionsRegion;
 // We do not record exactly where you were looking across sessions, but we do record the containing level 9 cell.
@@ -129,7 +160,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
     // However, the 'unpublishing' (if any) is invoked first.
     // To do this, we must hash the eventName ourselves.
     //console.log('publish', {lat, lng, hashtag, payload, cancel, subject, issuedTime, rest});
-    if (publishing) { console.log('skiping overlappying publish'); return null; } // do not stack them up.
+    if (publishing) { console.log('skiping overlapping publish'); return null; } // do not stack them up.
     try {
       publishing = true;
 
@@ -230,8 +261,8 @@ export class Alert extends Conversation { // A wrapper around L.marker
       wrapper.initChangeHashtag(popupAttribution);
     });
   }
-  static ensure({tag, topic, ts, issuedTime, ...rest}) { // Add marker at position with appropriate fade if not already present.
-    const alert = super.ensure({tag, subject: tag, issuedTime, ...rest}); // Does not include topic or ts. fixme: get rid of subject. fixme: why is ts different?
+  static async ensure({tag, topic, ts, issuedTime, ...rest}) { // Add marker at position with appropriate fade if not already present.
+    const alert = await super.ensure({tag, subject: tag, issuedTime, ...rest}); // Does not include topic or ts. fixme: get rid of subject. fixme: why is ts different?
     if (!alert) return null;
     // Regardless of initialize vs update, reset fader.
     const now = Date.now(),
@@ -312,7 +343,8 @@ export class Alert extends Conversation { // A wrapper around L.marker
     this.initChangeHashtag(popupElement);
     for (const correspondent of popupElement.querySelectorAll('.correspondent')) {
       const tag = correspondent.dataset.tag;
-      const agent = Agent.ensure({tag, region: this.region});
+      const region = P2PWebNetwork.regionCode(this.lat, this.lng);
+      const agent = Agent.ensure({tag, region: region});
       const isAvatar = correspondent.classList.contains('avatar');
       if (agent.addElement(correspondent, 'mixed', isAvatar ? 'avatar' : 'handle')) {
 	const isMine = Agent.isMine(tag);
@@ -408,28 +440,15 @@ export class Alert extends Conversation { // A wrapper around L.marker
   }
 
   // Each reply is separately published by its author, and only they can modify/unpublish it.
+  get itemKind() { // Answer class of reply items.
+    return AlertReply;
+  }
   async ensure(data) { // Add or update reply for this marker.
     data.subject = data.tag; //fixme
-    const reply = super.ensure(data);
-    if (reply) { // TODO? Move to AlertReply.initialize()?
-      const {agent, issuedTime, payload} = data;
-      const {file} = payload;
-      if (file) {
-	data.fileTopic = file;
-	const contact = await networkPromise;
-	// Before pushing data on to replies.
-	const {dataURL, name} = await contact.assembleChunkedDataURL(file);
-	payload.file = dataURL;
-	payload.name = name;
-      }
-      const element = this.startFader('.alert-commented', issuedTime + ttl - Date.now());
-      element.style.display = 'block';
-      // Restart the pulse animation by setting animationName to something it isn't.
-      element.style.animationName = element.style.animationName === 'pulse2' ? 'pulse' : 'pulse2';
-      this.showNotification({agent, issuedTime, body: payload.message || payload.name || payload});
-    }
+    const reply = await super.ensure(data);
     this.needsRedisplay = true;
     this.ensureContent();
+    return reply;
   }
   async postReply(event) { // Post a reply to this marker's subject, in response to a text-field change event.
     resetInactivityTimer();
@@ -437,14 +456,15 @@ export class Alert extends Conversation { // A wrapper around L.marker
     const button = event.target;
     const inputElement = button.parentElement;
     let payload = inputElement.value.trim();
-    const {subject, hashtag, region} = this;
+    const {subject, hashtag, lat, lng} = this;
+    const region = P2PWebNetwork.regionCode(lat, lng);
     const files = inputElement.parentElement.querySelector('input[type="file"]').files;
     if (!payload && !files.length) return;
     inputElement.value = '';
     inputElement.querySelector('md-filled-icon-button').toggleAttribute('disabled', true);
     const contact = await networkPromise;
     if (files.length) {
-      const {topic:file} = await contact.chunkifyBlob({blob: files[0], region});
+      const {topic:file, msgIds} = await contact.chunkifyBlob({blob: files[0], region});
       payload = {message: payload, file};
     }
     await contact.publish({eventName: subject, region, payload}); // Publish the new reply.
@@ -452,8 +472,22 @@ export class Alert extends Conversation { // A wrapper around L.marker
   }
   deleteReply(replyElement) {
     resetInactivityTimer();
-    const {region} = this;
-    networkPromise.then(async contact => contact.publish({eventName: this.subject, region, killTag: replyElement.dataset.subject, payload: null}));
+    const {lat, lng} = this;
+    const region = P2PWebNetwork.regionCode(lat, lng);
+    const killTag = replyElement.dataset.subject;
+    networkPromise.then(async contact => {
+      // We won't be here unless we are the signer.
+      await contact.publish({eventName: this.subject, region, killTag, payload: null});
+      // IFF there's an attachment AND we're given msgIds by receiveChunkedBytes, then delete the attachment.
+      const reply = this.getItem(killTag);
+      const {attachmentTopic, msgIds = []} = reply?.payload || {};
+      if (msgIds.length) {
+	const {name, owner, region} = attachmentTopic;
+	for (const killTag of msgIds) {
+	  await contact.publish({eventName: name, region, owner, killTag, payload: null});
+	}
+      }
+    });
   }
   showNotification({issuedTime = this.issuedTime, body = '', agent = this.agent, alert = this.subject, lat = this.lat, lng = this.lng, hashtag = this.hashtag}) {
     // Give OS notification that comes back to here, unless act is us.
@@ -469,18 +503,21 @@ export class Alert extends Conversation { // A wrapper around L.marker
       registration.showNotification(hashtag, options);
     });
   }
+  // Each reply element is a DIV.reply with data-subject and data-text attributes that are used in sharing.
+  // It contains an attribution header with controls, zero or one attachments, and then the message text.
+  // If present the attachment will be an A element with download attribute, surrounding either an IMG, A/V player, or an attachment icon followed by the file name.
   formatReplies() { // Answer HTML for the replies and input box.
     const { items, agent, originalPosting } = this;
     const formatReply = ({subject, payload, ...rest}) => {
-      const {message = payload, file, name} = payload;
+      const {message = payload, file, name} = payload || {}; // Message text converts recognized urls to A/V players or links.
       let text = message
 	  .replace(/https?:\/\/\S+\.(mp3|aac|ogg|oga|opus|m4a|m3u8|m3u|mpu|mpd)$/ig, url => `<audio controls src="${url}"></audio>`) // show audio urls as players
 	  .replace(/https?:\/\/\S+\.(mp4|mov|webm)$/ig, url => `<video controls src="${url}"></video>`) // show video urls as players
 	  .replace(/(?<!")https?:\/\/\S+/g, url => `<a href="${url}" target="yz.sidebar">${url}</a>`); // show urls as links
       let attachment = '';
-      if (file?.startsWith('data:image')) attachment = `<a href="${file}" download="${name}"><img class="attachment" src="${file}"></img></a>`;
-      else if (file?.startsWith('data:audio')) attachment = `<a href="${file}" download="${name}"><audio controls class="attachment" src="${file}"></audio></a>`;
-      else if (file?.startsWith('data:video')) attachment = `<a href="${file}" download="${name}"><video controls class="attachment" src="${file}"></video></a>`;
+      if (file?.startsWith?.('data:image')) attachment = `<a href="${file}" download="${name}"><img class="attachment" src="${file}"></img></a>`;
+      else if (file?.startsWith?.('data:audio')) attachment = `<a href="${file}" download="${name}"><audio controls class="attachment" src="${file}"></audio></a>`;
+      else if (file?.startsWith?.('data:video')) attachment = `<a href="${file}" download="${name}"><video controls class="attachment" src="${file}"></video></a>`;
       else if (file) attachment = `
 <div class="attachment file">
   <a href="${file}" download="${name}">

package/public/javascripts/conversation.js

@@ -29,12 +29,12 @@ export class Tagged { // Maintains cached existence within a (possibly instance-
     return null; 
   }
 
-  static ensureIn(data, container, kind = container.itemKind) { // update() or initialize() item and remember what those answer. (Falsy is deleted).
+  static async ensureIn(data, container, kind = container.itemKind) { // update() or initialize() item and remember what those answer. (Falsy is deleted).
     const {tag, payload, ...rest} = data;
     let item = container.getItem(tag);
     if (!payload) return item && container.removeItem(tag)?.destroy();
-    if (item) item = item.update(data);
-    else item = new kind().initialize(data);
+    if (item) item = await item.update(data);
+    else item = await (new kind().initialize({...data, container}));
 
     if (!item) return container.removeItem(tag)?.destroy();
     return container.setItem(tag, item);

package/public/javascripts/main.js

@@ -123,7 +123,7 @@ export function openAbout(event) {
   openDisplay('aboutContainer', event);
   noteNotificationPermission(window.Notification?.permission);
 }
-clickTip('#aboutButton', Int`Information about this app, and options to change how you appear to others.`, event => { // open about
+clickTip('#aboutButton', Int`Information about this app, and options to change notifications or how you appear to others.`, event => { // open about
   Alert.closePopup();
   openAbout(event);
 });

package/public/javascripts/map.js

@@ -43,18 +43,17 @@ export function updateLocation(lat, lng, zoom, positionLabel) { // initMap if ne
   if (!map) {
     initMap(lat, lng, zoom, positionLabel);
 
-    const params = new URL(location).searchParams;
+    const url = new URL(location);
+    const params = url.searchParams;
     const tags = params.get('tags');
     const tagsArray = tags?.split(',') || [];
     tagsArray.forEach(tag => Hashtags.add(decodeURIComponent(tag)));
     Hashtags.onchange({resetSubscriptions: false}); // Too early to subscribe, but will be done during initialization.
     go({lat: params.get('lat'), lng: params.get('lng'), zoom: params.get('z'), alert: params.get('alert')});
     // We don't need the query parameters now. Get rid of them. They're annoying.
-    const copy = new URL(location);
-    const dht = copy.searchParams.get('dht');
-    if (copy.searchParams.size > 0) {
-      copy.search = '';
-      history.replaceState(null, '', copy);
+    if (params.size > 0) {
+      ['tags', 'lat', 'lng', 'z', 'alert'].forEach(key => params.delete(key));
+      history.replaceState(null, '', url);
     }
 
     return;

package/public/javascripts/p2pWebNetwork.js

@@ -2,6 +2,13 @@ import { v4 as uuidv4 } from 'uuid';
 import { createNodeIdentity, createAuthorIdentity, geoCellId, geoCellCenter, WIRE_VERSION, KERNEL_VERSION } from '@axona/protocol';
 import { stringToBytes, bytesToString, publishChunkedBytes, receiveChunkedBytes } from '@axona/protocol/std';
 import { connect } from '@axona/protocol/connect.js';
+globalThis.RTCPeerConnection ||= await import('node-datachannel/polyfill').then(ndc => ndc.RTCPeerConnection); // To support @axona/protocol < 4.26
+if (!Uint8Array.prototype.toBase64) { // NodeJS < 24
+  Object.defineProperty(Uint8Array.prototype, 'toBase64', {
+    value: function toBase64() { return Buffer.from(this.buffer, this.byteOffset, this.byteLength).toString('base64'); },
+    writable: true, configurable: true,
+  });
+}
 const { BigInt, URL, File, pica } = globalThis;
 
 /* Example:
@@ -20,7 +27,9 @@ export class P2PWebNetwork {
   static sessionRegion = sessionRegionPromise;
   static async create({infoLogger = console.log, debugLogger,
 		       region = this.sessionRegion,
-		       bridgeUrl = globalThis.process?.env.BRIDGE_URL || 'wss://bridge.axona.net',
+		       bridgeUrl = (globalThis.location && new URL(globalThis.location).searchParams.get('bridge')) ||
+		       globalThis.process?.env.BRIDGE_URL ||
+		       'wss://bridge.axona.net',
 		      } = {}) {
     // Promise a ready-to-use network peer.
     region = await region;
@@ -35,6 +44,14 @@ export class P2PWebNetwork {
     Object.assign(network, {infoLogger, debugLogger, disconnector: disconnect, transport, nodeIdentity, peer});
     network.resetStatePromises();
     network.info(`Created network node for kernel ${this.kernelVersion} region 0x${this.regionCode(region.lat, region.lng).toString(16)}.`);
+    peer.onError(error => {
+      network.info(`error: ${error.message || error}`);
+      throw error;
+    });
+    //peer.onLog('debug', (...rest) => network.debug('DEBUG', ...rest));
+    //peer.onLog('info', (...rest) => network.debug('INFO', ...rest));
+    peer.onLog('warn', (...rest) => network.info('WARNING', ...rest));
+    peer.onLog('error', (...rest) => network.info('ERROR', ...rest));
     const { peers, ms } = status;
     network.info(`Connected ${peers} connections through ${bridgeUrl} in ${ms.toLocaleString()} ms.`);
     network.attached(network);

package/public/javascripts/translations.js

@@ -106,7 +106,7 @@ const translations = {
   ['Change the image shown for you in the conversation for your alerts and replies.']: {es: "Cambia la imagen que se muestra en la conversación para tus alertas y respuestas."},
   ['Toggle whether alerts for this topic shown on the map. Separately, a radio button is shown when selected and sets this as the initial topic of the next alert you make, while an x button is shown when deselected and removes the topic.']: {es: "Alterna la visualización en el mapa de las alertas relacionadas con este tema. Por otro lado, al seleccionar el tema aparece un botón de opción que lo establece como el tema inicial de la próxima alerta que crees; al deseleccionarlo, aparece un botón con una «x» que elimina dicho tema."},
   ['Add a new topic for which the map should show any alerts.']: {es: "Añada un nuevo tema para el cual el mapa deba mostrar alertas."},
-  ['Information about this app, and options to change how you appear to others.']: {es: "Información sobre esta aplicación y opciones para cambiar cómo apareces ante los demás."},
+  ['Information about this app, and options to change notifications or how you appear to others.']: {es: "Información sobre esta aplicación y opciones para modificar las notificaciones o cómo apareces ante los demás."},
   ['Wipe from ']: {es: "Elimina de "},
   [' all personal data and source files for this app.']: {es: " todos los datos personales y archivos fuente de esta aplicación."},  
   ['Display QR code that can be scanned by a friend to show the same map on their device.']: {es: "Muestra un código QR que un amigo puede escanear para ver el mismo mapa en su dispositivo."},

package/public/junk.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Material Web Autocomplete Combo Box</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "uuid": "https://unpkg.com/uuid@13.0.0/dist/index.js",
+          "@material/web/": "https://esm.run/@material/web/",
+          "s2js": "./s2js/s2js.esm.js",
+	  "bigfloat": "./bigfloat/esm/index.js",
+	  "leaflet": "./leaflet/leaflet-src.esm.js",
+	  "minidenticons": "./minidenticons/minidenticons.min.js",
+	  "@axona/protocol": "./axona-protocol/src/index.js",
+          "@axona/protocol/std": "./axona-protocol/std/index.js",
+	  "@axona/protocol/connect.js": "./axona-protocol/src/connect.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import '@material/web/all.js';
+      import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
+      document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
+    </script>
+  <!-- Load Material Web Components via CDN -->
+  <!-- <script type="module"> -->
+  <!--   import '@material/web/textfield/filled-text-field.js'; -->
+  <!--   import '@material/web/menu/menu.js'; -->
+  <!--   import '@material/web/menu/menu-item.js'; -->
+  <!-- </script> -->
+  <style>
+    .combo-box-container {
+      position: relative;
+      display: inline-block;
+      width: 300px;
+      margin: 40px;
+    }
+    md-filled-text-field {
+      width: 100%;
+    }
+    md-menu {
+      /* Match the width of the textfield anchor */
+      --md-menu-container-width: 300px; 
+    }
+  </style>
+</head>
+<body>
+
+  <div class="combo-box-container">
+    <!-- The editable text input acting as the anchor -->
+    <md-filled-text-field 
+      id="combo-input" 
+      label="Choose a fruit" 
+      placeholder="Type to search..."
+      autocomplete="off">
+    </md-filled-text-field>
+
+    <!-- The dropdown menu containing autocomplete suggestions -->
+    <md-menu id="combo-menu" anchor="combo-input" stay-open-on-outside-click>
+      <!-- Populated dynamically via JavaScript -->
+    </md-menu>
+  </div>
+
+  <script>
+    const input = document.getElementById('combo-input');
+    const menu = document.getElementById('combo-menu');
+
+    // Dataset for autocomplete
+    const itemsList = [
+      'Apple', 'Banana', 'Blueberry', 'Cherry', 'Grape', 
+      'Lemon', 'Mango', 'Orange', 'Peach', 'Strawberry'
+    ];
+
+    // Build and filter menu items based on input value
+    function updateMenu(filterText = '') {
+      const normalizedFilter = filterText.toLowerCase().trim();
+      
+      // Filter list items
+      const filtered = itemsList.filter(item => 
+        item.toLowerCase().includes(normalizedFilter)
+      );
+
+      // Clear existing menu items
+      menu.innerHTML = '';
+
+      if (filtered.length === 0) {
+        // Show a disabled helper item if no match found
+        const noResult = document.createElement('md-menu-item');
+        noResult.disabled = true;
+        //noResult.headline = 'No matches found';
+	noResult.textContent  = 'No matches found';
+        menu.appendChild(noResult);
+        return;
+      }
+
+      // Append matched options
+      filtered.forEach(item => {
+        const menuItem = document.createElement('md-menu-item');
+        //menuItem.headline = item;
+	menuItem.textContent = item;
+        // Store raw value on the element for extraction during selection
+        menuItem.dataset.value = item; 
+        menu.appendChild(menuItem);
+      });
+    }
+
+    // Filter list and open menu as user types
+    input.addEventListener('input', (e) => {
+      updateMenu(e.target.value);
+      if (!menu.open) {
+        menu.open = true;
+      }
+    });
+
+    // Re-open full menu list when user clicks or focuses inside the input
+    input.addEventListener('focus', () => {
+      updateMenu(input.value);
+      menu.open = true;
+    });
+
+    // Handle selection event from the Material menu
+    menu.addEventListener('close-menu', (e) => {
+      // e.detail.item holds the clicked md-menu-item instance
+      const selectedItem = e.detail.item;
+      if (selectedItem && selectedItem.dataset.value) {
+        input.value = selectedItem.dataset.value;
+        // Optionally trigger a change event for form tracking
+        input.dispatchEvent(new Event('change'));
+      }
+    });
+
+    // Close the dropdown cleanly if the user hits "Escape" or "Enter" inside input
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' || e.key === 'Enter') {
+        menu.open = false;
+        if(e.key === 'Enter') input.blur();
+      }
+    });
+
+    // Initial population of the menu
+    updateMenu();
+  </script>
+</body>
+</html>

package/public/service-worker.js

@@ -1,6 +1,100 @@
 const { Request, Response, URL, clients} = self;
 // Little point in trying to automatically pull this through package.json, as we need a byte change in THIS file to trigger a new worker.
-const serviceVersion = '4.5.4';
+const serviceVersion = '4.5.8';
+
+const cacheList = [ // The files we need.
+  "/",
+  "/index.html", // Just in case anyone is specifying that.
+  "favicon.ico",
+  "manifest.json",
+  "package.json",
+
+  "javascripts/versions.js",
+  "javascripts/main.js",
+  "javascripts/display.js",
+  "javascripts/conversation.js",
+  "javascripts/alert.js",
+  "javascripts/map.js",
+  "javascripts/hashtags.js",
+  "javascripts/s2.js",
+  "javascripts/agent.js",
+  "javascripts/translations.js",
+  "javascripts/service-manager.js",
+  "javascripts/p2pWebNetwork.js",
+
+  "stylesheets/style.css",
+
+  "images/qr-scan.svg",
+  "images/share.svg",
+  "images/recenter.svg",
+  "images/civil-defense-122.png",
+  "images/civil-defense-192.png",
+  "images/civil-defense-240.png",
+  "images/civil-defense-512.png",
+
+  "axona-protocol/src/index.js",
+  "axona-protocol/src/errors.js",
+  "axona-protocol/src/bridgeDirectory.js",
+  "axona-protocol/src/contracts/Transport.js",
+  "axona-protocol/src/contracts/DHT.js",
+  "axona-protocol/src/contracts/BootstrapService.js",
+  "axona-protocol/src/identity/index.js",
+  "axona-protocol/src/identity/nodeid.js",
+  "axona-protocol/src/pow/pow.js",
+  "axona-protocol/src/dht/AxonaPeer.js",
+  "axona-protocol/src/dht/AxonaDomain.js",
+  "axona-protocol/src/dht/DHTNode.js",
+  "axona-protocol/src/dht/NeuronNode.js",
+  "axona-protocol/src/dht/Synapse.js",
+  "axona-protocol/src/dht/Subscription.js",
+  "axona-protocol/src/pubsub/AxonaManager.js",
+  "axona-protocol/src/pubsub/authorClass.js",
+  "axona-protocol/src/pubsub/kill.js",
+  "axona-protocol/src/pubsub/touch.js",
+  "axona-protocol/src/pubsub/post.js",
+  "axona-protocol/src/pubsub/unpub.js",
+  "axona-protocol/src/pubsub/envelope.js",
+  "axona-protocol/src/pubsub/ed25519.js",
+  "axona-protocol/src/pubsub/metrics.js",
+  "axona-protocol/src/utils/region-names.js",
+  "axona-protocol/src/utils/geo.js",
+  "axona-protocol/src/utils/s2.js",
+  "axona-protocol/src/utils/hexid.js",
+  "axona-protocol/src/transport/handshake.js",
+  "axona-protocol/src/transport/handshake-auth.js",
+  "axona-protocol/src/transport/wire.js",
+  "axona-protocol/src/transport/web/index.js",
+  "axona-protocol/src/transport/web/mesh.js",
+  "axona-protocol/src/transport/web/mesh-auth.js",
+  "axona-protocol/src/transport/web/webrtc.js",
+  "axona-protocol/src/transport/web/bridge.js",
+  "axona-protocol/src/transport/web/composite.js",
+  "axona-protocol/src/transport/sim/index.js",
+  "axona-protocol/src/transport/sim/network.js",
+  "axona-protocol/src/transport/sim/transport.js",
+  "axona-protocol/src/persistence/interface.js",
+  "axona-protocol/src/crypto/noble-ed25519.js",
+  "axona-protocol/std/index.js",
+  "axona-protocol/std/chunk.js",
+
+  "leaflet/leaflet.css",
+  "leaflet/leaflet-src.esm.js",
+  "leaflet/images/marker-icon.png",
+  "leaflet/images/marker-icon-2x.png",
+  "leaflet/images/marker-shadow.png",
+
+  "pica/pica.min.js",
+  "minidenticons/minidenticons.min.js",
+  "s2js/s2js.esm.js",
+  "bigfloat/esm/index.js",
+  "bigfloat/esm/BigFloat32",
+  "bigfloat/esm/BigFloat53",
+  "bigfloat/esm/BigComplex",
+  "bigfloat/esm/BaseInfo32",
+  "bigfloat/esm/util",
+
+  // TODO: the libraries
+];
 
 async function cacheFirst({request, event}) {
   // Handle request from any cache, else fetch and store it in serviceCache.
@@ -72,99 +166,8 @@ self.addEventListener('fetch', event => {
 async function cacheSource(version, event) { // Cache source in the given version.
   console.log(`service-worker ${serviceVersion} is caching source in cache ${version}.`);
   const cache = await caches.open(version);
-  await cache.addAll([
-    "/",
-    "/index.html", // Just in case anyone is specifying that.
-    "favicon.ico",
-    "manifest.json",
-    "package.json",
-
-    "javascripts/versions.js",
-    "javascripts/main.js",
-    "javascripts/display.js",
-    "javascripts/conversation.js",
-    "javascripts/alert.js",    
-    "javascripts/map.js",    
-    "javascripts/hashtags.js",
-    "javascripts/s2.js",
-    "javascripts/agent.js",
-    "javascripts/translations.js",
-    "javascripts/service-manager.js",
-    "javascripts/p2pWebNetwork.js",
-
-    "stylesheets/style.css",
-
-    "images/qr-scan.svg",
-    "images/share.svg",
-    "images/recenter.svg",
-    "images/civil-defense-122.png",
-    "images/civil-defense-192.png",
-    "images/civil-defense-240.png",
-    "images/civil-defense-512.png",
-
-    "axona-protocol/src/index.js",
-    "axona-protocol/src/errors.js",
-    "axona-protocol/src/bridgeDirectory.js",
-    "axona-protocol/src/contracts/Transport.js",
-    "axona-protocol/src/contracts/DHT.js",
-    "axona-protocol/src/contracts/BootstrapService.js",
-    "axona-protocol/src/identity/index.js",
-    "axona-protocol/src/identity/nodeid.js",
-    "axona-protocol/src/pow/pow.js",
-    "axona-protocol/src/dht/AxonaPeer.js",
-    "axona-protocol/src/dht/AxonaDomain.js",
-    "axona-protocol/src/dht/DHTNode.js",
-    "axona-protocol/src/dht/NeuronNode.js",
-    "axona-protocol/src/dht/Synapse.js",
-    "axona-protocol/src/dht/Subscription.js",
-    "axona-protocol/src/pubsub/AxonaManager.js",
-    "axona-protocol/src/pubsub/authorClass.js",
-    "axona-protocol/src/pubsub/kill.js",
-    "axona-protocol/src/pubsub/touch.js",
-    "axona-protocol/src/pubsub/post.js",
-    "axona-protocol/src/pubsub/unpub.js",
-    "axona-protocol/src/pubsub/envelope.js",
-    "axona-protocol/src/pubsub/ed25519.js",
-    "axona-protocol/src/pubsub/metrics.js",
-    "axona-protocol/src/utils/region-names.js",
-    "axona-protocol/src/utils/geo.js",
-    "axona-protocol/src/utils/s2.js",
-    "axona-protocol/src/utils/hexid.js",
-    "axona-protocol/src/transport/handshake.js",
-    "axona-protocol/src/transport/handshake-auth.js",
-    "axona-protocol/src/transport/wire.js",
-    "axona-protocol/src/transport/web/index.js",
-    "axona-protocol/src/transport/web/mesh.js",
-    "axona-protocol/src/transport/web/mesh-auth.js",
-    "axona-protocol/src/transport/web/webrtc.js",
-    "axona-protocol/src/transport/web/bridge.js",
-    "axona-protocol/src/transport/web/composite.js",
-    "axona-protocol/src/transport/sim/index.js",
-    "axona-protocol/src/transport/sim/network.js",
-    "axona-protocol/src/transport/sim/transport.js",
-    "axona-protocol/src/persistence/interface.js",
-    "axona-protocol/src/crypto/noble-ed25519.js",
-    "axona-protocol/std/index.js",
-    "axona-protocol/std/chunk.js",
-
-    "leaflet/leaflet.css",
-    "leaflet/leaflet-src.esm.js",
-    "leaflet/images/marker-icon.png",
-    "leaflet/images/marker-icon-2x.png",
-    "leaflet/images/marker-shadow.png",
-
-    "pica/pica.min.js",
-    "minidenticons/minidenticons.min.js",
-    "s2js/s2js.esm.js",
-    "bigfloat/esm/index.js",
-    "bigfloat/esm/BigFloat32",
-    "bigfloat/esm/BigFloat53",
-    "bigfloat/esm/BigComplex",
-    "bigfloat/esm/BaseInfo32",
-    "bigfloat/esm/util",
-
-    // TODO: the libraries
-  ].map(name => new Request(name, {cache: 'no-store'}))); // Might not be necessary, but if any browsers insist on their own caching...
+  // for (const file of cacheList) cache.add(new Request(file, {cache: 'no-store'})).catch(error => console.error(file + ' ' + error.message)); // dev testing for changed file tree
+  await cache.addAll(cacheList.map(name => new Request(name, {cache: 'no-store'}))); // Might not be necessary to specify no-store, but if any browsers insist on their own caching...
 
   await Promise.all([
     // These are referenced within material web, but missing. Turns out we don't need them,

package/server/app.js

@@ -46,6 +46,12 @@ const argv = yargs(hideBin(process.argv))
 	default: 5,
 	description: "Additional variable seconds (+/- variableSpacing/2) to add to fixedSpacing between each portal."
       })
+      .option('info', {
+	alias: 'i',
+	type: 'boolean',
+	default: true,
+	description: "Run with info logging."
+      })
       .option('verbose', {
 	alias: 'v',
 	type: 'boolean',
@@ -94,20 +100,28 @@ if (cluster.isPrimary) { // Parent process with portal webserver through which c
   }));
 
   app.listen(port);
-  console.log('Listening on', port, 'and starting', argv.nPortals, 'nodes.');
+  console.log(new Date(), `Listening on ${port} and starting ${argv.nPortals} nodes on ${logicalCores} ${cpus()[0].model} logical cores.`);
   for (let i = 0; i < argv.nPortals; i++) {
     cluster.fork();
-    await new Promise(resolve => setTimeout(resolve, 1e3));
+    await new Promise(resolve => setTimeout(resolve, 2e3)); // Number chosen to give an unspikey rise in packets/s.
   }
 } else {
   process.title = 'axona-starting';
   const { P2PWebNetwork, location } = await import('../index.js');
-  const network = await P2PWebNetwork.create({region: location});
+  const network = await P2PWebNetwork.create({
+    region: location,
+    infoLogger: (...rest) => argv.info && console.log(new Date(), ...rest),
+    debugLogger: (...rest) => argv.verbose && console.log(new Date(), ...rest)
+  });
   process.title = 'axona-' + network.nodeIdentity.id;
-  //let update = setInterval(() => network.info(network.peer.health().axonRoles.length, 'axons'), 10e3);
+  let update = setInterval(() => {
+    const roles = network.peer.health().axonRoles;
+    network.debug(roles.length, 'axons',
+		  roles.reduce((total, role) => total + (role.isRoot ? 1 : 0), 0), 'roots');
+  }, 10e3);
   process.on('SIGINT', async () => { // Leave the network politely.
     console.log(process.title, 'Shutdown for Ctrl+C');
-    //clearInterval(update)
+    clearInterval(update)
     await network.disconnect();
     process.exit(0);
 });

package/spec/conversationSpec.js

@@ -1,4 +1,4 @@
-const { describe, it, expect, beforeAll, afterAll, BigInt } = globalThis;
+const { describe, it, expect, expectAsync, beforeAll, afterAll, BigInt } = globalThis;
 import { Conversation } from '../public/javascripts/conversation.js';
 
 describe("Conversation", function () {
@@ -6,23 +6,26 @@ describe("Conversation", function () {
   let conversation;
   const tag = '123';
   const payload = 'cake';
-  beforeAll(function () {
+  beforeAll(async function () {
     agent = {handle: 'alice'};
-    conversation = Conversation.ensure({tag, payload, agent});
+    conversation = await Conversation.ensure({tag, payload, agent});
   });
   describe("creation", function () {
     it("initializes properties.", function () {
       expect(conversation.agent).toBe(agent);
       expect(conversation.payload).toBe(payload);
     });
-    it("remembers conversations with the same tag.", function () {
-      expect(Conversation.ensure({tag, payload, agent})).toBe(conversation);
+    it("remembers conversations with the same tag.", async function () {
+      expect(await Conversation.ensure({tag, payload, agent})).toBe(conversation);
     });
-    it("Properties can be ommitted for existing tag.", function () {
-      expect(Conversation.ensure({tag, payload})).toBe(conversation);
+    it("Properties can be ommitted for existing tag.", async function () {
+      expect(await Conversation.ensure({tag, payload})).toBe(conversation);
     });
-    it("rejects changes by default.", function () {
-      expect(() => Conversation.ensure({tag, payload: 'other', agent})).toThrow();
+    it("rejects changes by default.", async function () {
+      await expectAsync(Conversation.ensure({tag, payload: 'other', agent})).toBeRejected();
+    });
+    it("knows container is constructor.", function () {
+      expect(conversation.container).toBe(Conversation);
     });
     describe("caching", function () {
       let keep = true;
@@ -31,68 +34,68 @@ describe("Conversation", function () {
 	update() { return keep && this; }
 	initialize() { return keep && this; }
       }
-      it("ends with explicit removal.", function () {
-	let initial = Conversation.ensure({tag, agent, payload});
+      it("ends with explicit removal.", async function () {
+	let initial = await Conversation.ensure({tag, agent, payload});
 	expect(initial).toBeTruthy();
 	expect(Conversation.getItem(tag)).toBe(initial);
 	expect(Conversation.removeItem(tag)).toBe(initial);
 	expect(Conversation.getItem(tag)).toBeFalsy();
       });
       describe("deleting data", function () {
-	it("keeps new if not deleting.", function () {
+	it("keeps new if not deleting.", async function () {
 	  tag = 'keep';
-	  let initial = Conversation.ensure({tag, agent, payload});
+	  let initial = await Conversation.ensure({tag, agent, payload});
 	  expect(initial).toBeTruthy();
-	  expect(Conversation.ensure({tag, agent, payload})).toBe(initial);
+	  expect(await Conversation.ensure({tag, agent, payload})).toBe(initial);
 	  expect(Conversation.getItem(tag)).toBe(initial);
 	});
-	it("is skipped if delete data.", function () {
+	it("is skipped if delete data.", async function () {
 	  tag = 'skip';	  
-	  let initial = Conversation.ensure({tag, agent});
+	  let initial = await Conversation.ensure({tag, agent});
 	  expect(initial).toBeFalsy();
 	  expect(Conversation.getItem(tag)).toBeFalsy();
 	});
-	it("is removed if delete data.", function () {
+	it("is removed if delete data.", async function () {
 	  tag = 'skip';	  
-	  let initial = Conversation.ensure({tag, agent, payload});
+	  let initial = await Conversation.ensure({tag, agent, payload});
 	  expect(initial).toBeTruthy();
 	  expect(Conversation.getItem(tag)).toBeTruthy();
-	  Conversation.ensure({tag, agent});
+	  await Conversation.ensure({tag, agent});
 	  expect(Conversation.getItem(tag)).toBeFalsy();
 	});
       });
       describe("null/item caching convention", function () {
 	// Do we really need/want this convetion?
-	it("keeps if initialize answers conversation.", function () {
+	it("keeps if initialize answers conversation.", async function () {
 	  keep = true;
 	  tag = 'keepA';
-	  let initial = CacheConversation.ensure({tag, agent, payload});
+	  let initial = await CacheConversation.ensure({tag, agent, payload});
 	  expect(initial).toBeTruthy();
-	  expect(CacheConversation.ensure({tag, agent, payload})).toBe(initial);
+	  expect(await CacheConversation.ensure({tag, agent, payload})).toBe(initial);
 	  expect(CacheConversation.getItem(tag)).toBe(initial);
 	});
-	it("is skipped if initialize answers falsy.", function () {
+	it("is skipped if initialize answers falsy.", async function () {
 	  keep = false;
 	  tag = 'skipA';	  
-	  let initial = CacheConversation.ensure({tag, agent, payload});
+	  let initial = await CacheConversation.ensure({tag, agent, payload});
 	  expect(initial).toBeFalsy();
 	  expect(CacheConversation.getItem(tag)).toBeFalsy();
 	});
-	it("keeps existing if update answers conversation.", function () {
+	it("keeps existing if update answers conversation.", async function () {
 	  keep = true;
 	  tag = 'keepB';
-	  let initial = CacheConversation.ensure({tag, agent, payload});
-	  expect(CacheConversation.ensure({tag, agent, payload})).toBe(initial);
-	  expect(CacheConversation.ensure({tag, agent, payload})).toBe(initial);
-	  expect(CacheConversation.getItem(tag)).toBe(initial);
+	  let initial = await CacheConversation.ensure({tag, agent, payload});
+	  expect(await CacheConversation.ensure({tag, agent, payload})).toBe(initial);
+	  expect(await CacheConversation.ensure({tag, agent, payload})).toBe(initial);
+	  expect(await CacheConversation.getItem(tag)).toBe(initial);
 	});
-	it("destroys existing if update answers falsy.", function () {
+	it("destroys existing if update answers falsy.", async function () {
 	  keep = true;
 	  tag = 'skipB';
-	  let initial = CacheConversation.ensure({tag, agent, payload});
-	  expect(CacheConversation.ensure({tag, agent, payload})).toBe(initial);
+	  let initial = await CacheConversation.ensure({tag, agent, payload});
+	  expect(await CacheConversation.ensure({tag, agent, payload})).toBe(initial);
 	  keep = false;
-	  expect(CacheConversation.ensure({tag, agent, payload})).toBeFalsy();
+	  expect(await CacheConversation.ensure({tag, agent, payload})).toBeFalsy();
 	  expect(CacheConversation.getItem(tag)).toBeFalsy();
 	});
       });
@@ -100,11 +103,11 @@ describe("Conversation", function () {
   });
 
   describe("replies", function () {
-    beforeAll(function () {
-      conversation.ensure({payload: "second", issuedTime: 3, tag: 'z'});
-      conversation.ensure({payload: "deleted", issuedTime: 2, tag: 'y'});
-      conversation.ensure({payload: "first", issuedTime: 1, tag: 'x'});
-      conversation.ensure({payload: null, issuedTime: 4, tag: 'y'});
+    beforeAll(async function () {
+      await conversation.ensure({payload: "second", issuedTime: 3, tag: 'z'});
+      await conversation.ensure({payload: "deleted", issuedTime: 2, tag: 'y'});
+      await conversation.ensure({payload: "first", issuedTime: 1, tag: 'x'});
+      await conversation.ensure({payload: null, issuedTime: 4, tag: 'y'});
     });
     it("adds replies in timestamp order.", function () {
       expect(conversation.items.map(reply => reply.payload)).toEqual(["first", "second"]);
@@ -112,5 +115,8 @@ describe("Conversation", function () {
     it("removes deleted replies.", function () { // fixme eachReply
       expect(conversation.items.find(reply => !reply.payload)).toBeFalsy();
     });
+    it("knows container is conversation.", function () {
+      expect(conversation.items[0].container).toBe(conversation);
+    });
   });
 });