@yz-social/civildefense.io 4.5.16 → 4.5.21

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.16",
+  "version": "4.5.21",
   "keywords": [
     "map",
     "browser",
@@ -29,6 +29,7 @@
     "pica": "^9.0.1",
     "s2js": "^1.44.0",
     "uuid": "^14.0.0",
+    "ws": "^8.21.3",
     "yargs": "^18.0.0"
   },
   "overrides": {

package/public/index.html

@@ -160,6 +160,7 @@
       </div>
 
       <md-menu positioning="popover" id="popoverMenu"></md-menu>
+      <ul class="combobox-listbox hidden" id="knownTagsListbox" role="listbox"></ul>
     </section>
     <script type="module" src="javascripts/main.js"></script>
   </body>

package/public/javascripts/agent.js

@@ -1,4 +1,4 @@
-const { localStorage } = globalThis;
+const { localStorage, URL } = globalThis;
 import { v4 as uuidv4 } from 'uuid';
 import { minidenticonSvg } from 'minidenticons';
 import { agentTopic, agentPersistKey } from './versions.js';
@@ -53,23 +53,30 @@ export class Agent {
     const value = localStorage.getItem(this.localPersistKey(type, tag));
     this.updateValue(value, scope, type, false); // Don't publish until we post.
   }
-  trackedRegions = {};
-  currentRegion = null;
-  trackPublicChanges(region) {
-    this.currentRegion = region;
-    if (this.trackedRegions[region]) return;
-    if (Agent.isMine(this.tag)) this.persistPublicMetadata(region);
+
+  // A map may show multiple regions, and we want to show consistent attribution metadata for alerts in each.
+  // Thus we have to keep track of each region where we have activity, and subscribe to changes in each such region for
+  // each mentioned avatar instance. See trackPublicChanges.
+  //
+  // For our agent(s), we also need to keep track of the current msgId so that we can kill it properly when we change value.
+  // This will be different in each tracked region.
+  //
+  trackedRegions = {}; // region code => {avatar, handle} last msgIds for this agent as known.
+  trackPublicChanges(region) { // Subscribe to changes for this agent instance's metdata in this region.
+    // We do this for for each Agent.ensure that appears for an alert or reply.
+    // and also for our own Agent.current when subscribing to a topic, so that we have the right killTag even if we have not published THIS session.
+    if (this.trackedRegions[region]) return; // Already subscribed.
     networkPromise.then(contact => {
-      this.trackedRegions[region] = true;
+      this.trackedRegions[region] = {};
       const owner = this.tag;
       ['handle', 'avatar'].forEach(type => {
 	const eventName = this.networkPersistKey(type);
-	contact.subscribe({eventName, region, owner, since: 'latest', handler: data => this.setPublicData({...data, type})});
+	contact.subscribe({eventName, region, owner, since: 'latest', handler: data => this.setPublicData({...data, type, region})});
       });
     });
   }
-  async setPublicData(data) { // Subscription to public data has fired. Update value, but do not not re-publish.
-    let {payload, tag, type, topic, ts} = data; // fixme remove topic and ts
+  async setPublicData(data) { // Subscription to public data has fired. Update value, but do not not re-publish (e.g., if our agent).
+    let {payload, tag, type, region, topic, ts} = data;
     // WARNING: IF we chunkify avatars, and we use since:'all', then we need lock out asynchronous
     // decoding of later timestamps, or of null payloads.
     // if (payload && (type === 'avatar')) {
@@ -78,7 +85,8 @@ export class Agent {
     //   payload = dataURL;
     // }
     this.updateValue(payload, 'public', type, false);
-    if (tag) this.publicMsgId[type] = tag;
+    if (payload) this.trackedRegions[region][type] = tag;
+    else delete this.trackedRegions[region][type];
   }
   
   static agents = {}; // tag => Agent
@@ -93,12 +101,12 @@ export class Agent {
     handle: {system: null, public: null, private: null, mixed: null},    
     avatar: {system: null, public: null, private: null, mixed: null}
   };
-  publicMsgId = {}; // maps type => msgId for saved public data of this Agent instance.
   getValue(scope, type) {
     return this.values[type][scope];
   }
   updateValue(value, scope, type, pushPublic = true) { // Updates dependent elements, and if necessary, the mixed values/elements as well.
-    if (this.values[type][scope] === value) return;
+    const match = this.values[type][scope] === value;
+    if (match) return null;
 
     // Persist if private. For public, update locally but do not publish until this agent publishes an alert or reply.
     if (scope === 'private') this.persistPrivate(value, type);
@@ -120,33 +128,41 @@ export class Agent {
     if (value === null) localStorage.removeItem(key);
     else localStorage.setItem(key, value);
   }
-  async persistPublicMetadata(region) { // Publish handle and avatar.
-    this.currentRegion = region;
+  async persistPublicMetadata() { // Publish handle and avatar.
+    // Used by Agent.current when we post an alert or reply.
+    // There could already be such a publication active, but republishing ensures that it is as fresh as
+    // the alert/reply (e.g., with respect to expirations).
     await Promise.all(['handle', 'avatar'].map(type => this.persistPublic(this.getValue('public', type) || null, type)));
   }
   async persistPublic(value, type) { // Publish (and we will act on subscription).
+    // We persist to ALL our tracked regions, so that anyone in those regions will get the latest metadata.
+    // Note that we might be tracking regions A and B, while someone else is tracking B and C.
+    // The other user will get the new value through B, and that will be THE value displayed on their machine.
+    // BUT... if the other user tracks B and gets the new value, and then moves into region C and gets a
+    // stale value, they will see the stale value in both regions going forward in that session until we update in that region.
     const eventName = this.networkPersistKey(type);
-    const region = this.currentRegion;
     const owner = this.tag;
     const contact = await networkPromise;
 
-    // First kill previous, if any.
-    // Publish doesn't know whether subscribers will be since all or latest, so it must retain all unkilled.
-    // Thus if we only kill the last one when there is no value,
-    // a subscribe since:latest will produce the PREVIOUS value -- the last unkilled one.
+    for (let region in this.trackedRegions) {
+      // First kill previous, if any.
+      // Publish doesn't know whether subscribers will be 'since' all or 'latest', so it must retain all unkilled.
+      // Thus if we only kill the last one when there is no value,
+      // a subscribe since:latest will produce the PREVIOUS value -- the last unkilled one.
 
-    const killTag = this.publicMsgId[type];
-    console.log('persist', {type, killTag, value: value && value.slice(0, 15)});
-    if (killTag) await contact.publish({eventName, region, owner, killTag, payload: null});
+      const killTag = this.trackedRegions[region][type];
+      if (killTag) await contact.publish({eventName, region, owner, killTag, payload: null});
 
-    if (!value) return null;
-    let payload = value;
-    // Our downsampling is such that we do not need to chunkify.
-    // if (type === 'avatar') {
-    // 	const blob = await P2PWebNetwork.dataURL2blob(value);
-    // 	payload = (await contact.chunkifyBlob({blob, region})).topic;
-    // }
-    return contact.publish({eventName, region, owner, payload});
+      if (value) {
+	let payload = value;
+	// Our downsampling is such that we do not need to chunkify.
+	// if (type === 'avatar') {
+	// 	const blob = await P2PWebNetwork.dataURL2blob(value);
+	// 	payload = (await contact.chunkifyBlob({blob, region})).topic;
+	// }
+	contact.publish({eventName, region, owner, payload});
+      }
+    }
   }
 
   // We represent handles and avatars by inserting stuff into given elements.
@@ -275,14 +291,16 @@ export class Agent {
   static current = null;
   static tag = null;
   static identity = null;
+  // Keep user separate between dht=1 or empty (Axona) vs dht=0 or -1 (no Axona, for testing).
+  static usertagKey = `usertag${parseInt(new URL(location).searchParams.get('dht')) < 1 ? '0' : ''}`;
   static switchUser(tag, identity) { // Set/persist/ensure the current user, return Agent
     this.tag = tag; // Before the ensure().
     this.identity = P2PWebNetwork.currentPublishIdentity = identity;
-    localStorage.setItem('usertag', this.tag);
+    localStorage.setItem(this.usertagKey, this.tag);
     return this.current = this.ensure({tag, identity});
   }
   static async initialize() { // Initialize what the agent needs from the about screen
-    let tag = localStorage.getItem('usertag');
+    let tag = localStorage.getItem(this.usertagKey);
     const persistAs = tag || uuidv4(); // Give it SOMETHING to persistAs.
     const myIdentity = await P2PWebNetwork.createAuthorIdentity({persistAs});
     if (tag !== persistAs) { // Fix up persistence by moving it to where it need to go.
@@ -328,4 +346,3 @@ export class Agent {
     });
   }
 }
-

package/public/javascripts/alert.js

@@ -7,8 +7,8 @@ import { consume } from './display.js';
 import { Hashtags } from './hashtags.js';
 import { Agent } from './agent.js';
 import { Conversation, Reply } from './conversation.js';
-import { alertTopic, topicRegion, topicCell } from './versions.js';
-import { getContainingCells, getSubdivision, findCoverCellsByCenterAndPoint } from './s2.js';
+import { alertTopic, topicRegion, topicCell, cellHex } from './versions.js';
+import { getContainingCells, getSubdivision, findCoverCellsByMinMaxLatLng } from './s2.js';
 const { localStorage, getComputedStyle, URL, URLSearchParams, domtoimage } = globalThis;
 
 
@@ -112,15 +112,22 @@ export class Alert extends Conversation { // A wrapper around L.marker
     const center = map.getCenter();
     const bounds = map.getBounds();
     const northEast = bounds.getNorthEast();
-    const newCells = findCoverCellsByCenterAndPoint(center.lat, center.lng, northEast.lat, northEast.lng); // array of cell IDs (BigInts)
+    const southWest = bounds.getSouthWest();
+    const zoom = map.getZoom();
+    const newCells = findCoverCellsByMinMaxLatLng({
+      full: zoom <= map.options.minZoom,
+      minLat: southWest.lat,
+      maxLat: northEast.lat,
+      minLng: southWest.lng,
+      maxLng: northEast.lng
+    });
     if (!newCells) return null;
-    const region = P2PWebNetwork.regionCode(center.lat, center.lng);
     const newKeys = {};
+
     newCells.forEach(cell => Hashtags.getSubscribe().forEach(hash => {
       const eventName = alertTopic(cell, hash);
       newKeys[eventName] = this.subscriptions[eventName] || 0;
     }));
-    Agent.current?.trackPublicChanges(region);
     // Record a zoomed-out cell id in case next session does not have geolocation services.
     let level9Cell = getContainingCells(center.lat, center.lng)[9];
     if (level9Cell !== this.lastLevel9Cell) localStorage.setItem('level9Cell', this.lastLevel9Cell = level9Cell);
@@ -162,6 +169,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
 	}
       });
       const region = topicRegion(key);
+      Agent.current?.trackPublicChanges(region); // Background. No need to await.
       await contact.subscribe({eventName: key, region, handler}).then(() => throttleMS && P2PWebNetwork.delay(throttleMS));
     };
     console.log('updating subscriptions', {newKeys, oldKeys});
@@ -176,7 +184,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
   // Publish an alert to all applicable eventNames, canceling as required. Promises tag (msgId).
   static async publish({lat, lng,
 			originalPosting = undefined,
-			hashtag = Hashtags.getPublish(),
+			hashtag = Hashtags.getPublish(true),
 			payload = {lat, lng, originalPosting}, // If payload is null (cancels subject), lat & lng are still used to generate eventNames.
 			cancel = undefined, // First unpublish the specified data, if any. Complicated default.
 			issuedTime = Date.now(), subject,
@@ -222,6 +230,9 @@ export class Alert extends Conversation { // A wrapper around L.marker
       for (const cell of cells) {
 	const eventName = alertTopic(cell, hashtag);
 	if (payload) {
+	  // The Axona message will be {hashtag, issuedTime, payload:{lat, lng, originalPosting}}
+	  // and when combined with the publisher's authorId will be unique to this user/time/hashtag,
+	  // and yet the same for each of the individual publications at the different s2 scales.
 	  const msgId = await contact.publish({eventName, region, payload, issuedTime, hashtag, ...rest});
 	  if (subject && subject !== msgId) throw new Error(`msgId is drifting: ${subject} => ${msgId}`);
 	  subject = msgId;
@@ -303,6 +314,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
   }
   initialize({payload, hashtag, subject, agent, issuedTime, ...rest}) { // Set up the marker for a newly received alert.
     if (!payload) return null; // Do not cache. E.g., Received a delete event without the initial creation.
+    if (!Hashtags.isSubscribed(hashtag)) return null; // A subscribed event may have been in flight while unsubscribing.
     const icon = this.constructor.makeIcon(hashtag);
     const {lat, lng, originalPosting} = payload;
     const marker = this.marker = L.marker([lat, lng], {icon, autoPan: false}).addTo(map);
@@ -513,7 +525,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
       payload = {message: payload, file};
     }
     await contact.publish({eventName: subject, region, payload}); // Publish the new reply.
-    Agent.current.persistPublicMetadata(region);
+    Agent.current.persistPublicMetadata();
   }
   deleteReply(replyElement) {
     resetInactivityTimer();
@@ -543,7 +555,11 @@ export class Alert extends Conversation { // A wrapper around L.marker
       const icon = new URL('./images/civil-defense-192.png', location.href).href;
       const url = getShareableURL(alert, [hashtag]).href; // For opening page when it has been closed.
       const data = {lat, lng, url};
-      const options = {icon, timestamp, tag: alert, body, data};
+      // It appears that on 8/14/26:
+      // Safari ignores tag/renotify, and ALWAYS tells the user and displays each notification separately, without consolidating by tag.
+      // Chrome ignores renotify, and ALWAYS consolidates by tag, replacing old body with new, and NEVER renotifies the user (for the same tag).
+      // So... we could get uniform behavior by skipping the tag, but for now we'll try using it as intended, in case the browsers ever start to comply.
+      const options = {icon, timestamp, tag: alert, body, data, renotify: true};
       console.log('showNotification', hashtag, options);
       registration.showNotification(hashtag, options);
     });
@@ -556,8 +572,8 @@ export class Alert extends Conversation { // A wrapper around L.marker
     const formatReply = ({subject, payload, ...rest}) => {
       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+\.(mp3|aac|ogg|oga|opus|m4a|m3u8|m3u|mpu|mpd)$/ig, url => `<audio controls src="${url}" crossorigin="anonymous"></audio>`) // show audio urls as players
+	  .replace(/https?:\/\/\S+\.(mp4|mov|webm)$/ig, url => `<video controls src="${url}" crossorigin="anonymous"></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>`;

package/public/javascripts/hashtags.js

@@ -6,6 +6,7 @@ import { Alert } from './alert.js';
 import { resetInactivityTimer, clickTip } from './main.js';
 
 
+const help = `🆘 ${Int`help`}`;
 let allKnownHashtags = JSON.parse(localStorage.getItem('allKnownHashtags') || `[
   "🍰 cake",
   "🎸 classic rock",
@@ -15,7 +16,7 @@ let allKnownHashtags = JSON.parse(localStorage.getItem('allKnownHashtags') || `[
   "🎧 edm",
   "🔥 fire",
   "🌊 flood",
-  "🆘 help",
+  "${help}",
   "🎤 hiphop",
   "🧊 ice",
   "🎷 jazz",
@@ -81,14 +82,19 @@ export const Hashtags = {
   getSubscribe() { // Return a list of the hashtags to which the user intendeds to subscribe.
     return this.getAll().filter(tag => this.hashtags[tag]);
   },
+  isSubscribed(key) {
+    return this.hashtags[key];
+  },
   isPublish(key) {
     return this.hashtags[key] === 'pub';
   },
-  getPublish() { // Return the one hashtag to which the user intends to publish.
+  backupPublisher: false,
+  getPublish(force = false) { // Return the one hashtag to which the user intends to publish.
+    // If force and no publisher, setPublisher to backup and return it.
     let pub = this.getAll().find(key => this.isPublish(key));
-    if (!pub) {
-      pub = this.lastRemainingPublisher || "🆘 help";
-      this.hashtags[pub] = 'pub';
+    if (!pub && force) {
+      pub = this.backupPublisher || help;
+      this.setPublish(pub);
       this.onchange({highlightPublish: true});
     }
     return pub;
@@ -115,8 +121,10 @@ export const Hashtags = {
     if (redisplaySubscribers) this.resetSubscriberDisplay();
     localStorage.setItem('hashtags', JSON.stringify(this.hashtags));
     if (resetSubscriptions) {
-      Alert.updateSubscriptions();
+      // We destroy unsubscribed markers right away, because we don't want the user to have to wait and wonder why they're still displayed.
+      // If there are alerts in flight, they will be rejected by Alert initialize because we will have already turned off the sub.
       Object.values(Alert.items).forEach(wrapper => this.hashtags[wrapper.hashtag] || wrapper.destroy());
+      Alert.updateSubscriptions();
     }
   },
   chipset: document.body.querySelector('.watching-hashtags'), // Element containing the user's chips.
@@ -126,7 +134,7 @@ export const Hashtags = {
         ${active === 'pub' ? 'class="pub"' : ''}
         ${active ? ' selected' : ''}
       >${this.firstEmoji(label) ? '' : this.identicon(label, 'selected-icon')}
-        <md-icon-button slot="remove-trailing-icon" title="fixme help"><md-icon class="material-icons"></md-icon></md-icon-button>
+        <md-icon-button slot="remove-trailing-icon"><md-icon class="material-icons"></md-icon></md-icon-button>
       </md-filter-chip>`;
   },
 
@@ -234,8 +242,10 @@ export const Hashtags = {
       li.id = `tag-option-${i}`;
       li.setAttribute('role', 'option');
       li.innerHTML = this.formatPubtag(highlight(item, matchString), item);
-      li.onpointerdown = event => {
-        // pointerdown (not click) so it fires before the field's blur event
+      li.onclick = event => {
+	// pointerdown would fire before the text field's blur event,
+	// so we would not have to delay that. But then we would not
+	// scroll properly by touch drag.
         event.preventDefault();
 	event.stopPropagation();
         this.selectValue(item);
@@ -295,7 +305,6 @@ export const Hashtags = {
     });
     this.chipset.insertAdjacentHTML("afterbegin",  // Chip to add a new hashtag.
 				    `<div class="combobox">
-  <ul class="combobox-listbox hidden" id="knownTagsListbox" role="listbox"></ul>
   <md-filled-text-field class="newtag"
      aria-expanded="false"
      aria-controls="knownTagsListbox"
@@ -307,7 +316,7 @@ export const Hashtags = {
     // I've tried also supplying a datalist, e.g., to supply the mobile keyboard completions, but
     // I have not been able to get it to work.
     const newtag = this.newtag = this.chipset.querySelector('.newtag');
-    const listbox = this.listbox = this.chipset.querySelector('.combobox-listbox');
+    const listbox = this.listbox = document.querySelector('.combobox-listbox');
     clickTip(newtag, Int`Add a new topic for which the map should show any alerts.`, event => { // Focusing "add topic".
       event.stopPropagation();
       Alert.closePopup();
@@ -353,8 +362,10 @@ export const Hashtags = {
       }
     };
     newtag.oninput = () => this.renderSelector(newtag.value);
-    newtag.onblur = () => this.closeSelector();
-    //newtag.onchange = () => this.acceptTag();
+    // When we click on the listbox, the browser will first blur newtag, and then
+    // we would not get the click! So here we delay closing a bit.
+    newtag.onblur = () => setTimeout(() => this.closeSelector(), 200);
+    newtag.onchange = () => this.acceptTag();
   },
   remove(chip, redisplaySubscribers = false) { // Remove this topic, persistently.
     delete this.hashtags[chip.label];
@@ -364,25 +375,28 @@ export const Hashtags = {
   toggleChip(chip) { // Switch whether the topic is or is not subscribed.
     // Now selected => hashtags[label] becomes 'pub' (selected and the publisher) and clear old pub
     // NOT now selected => hashtags[label] becomes false (through mechanism as follows)
-    //    but if publisher => set alt publisher if possible, else remember as lastActivePublisher
+    //    but if publisher => set alt publisher if possible, else remember as backupPublisher
     const label = chip.label;
 
     // chip.selected is new state, after clicking.
     if (chip.selected) return this.setPublish(label);  // Become publisher, clearing old publisher.
 
+    // Not selected:
+
     // If we're not publisher, just clear. But don't go through getPublish, as that can have side effects.
     if (this.hashtags[label] !== 'pub') return this.hashtags[label] = false;
 
-    // Find an alternative publisher if possible.
-    let subs = this.getSubscribe();
-    if (subs.length > 1) {
-      let pubIndex = subs.indexOf(label);
-      let index = (pubIndex + 1) % subs.length;
-      return this.setPublish(subs[index], false);
+    // Also clear, but...
+    const subs = this.getSubscribe();
+    if (subs.length > 1) {  // Find and set alternative publisher if possible.
+      const pubIndex = subs.indexOf(label);
+      const index = (pubIndex + 1) % subs.length;
+      this.setPublish(subs[index]);
+    } else {
+      // No alternative available. Clear it, but remember for use by getPublish.
+      // It will stay .pub styled while toggled, until anything toggles on.
+      this.backupPublisher = label;
     }
-
-    // No alternative. Clear it, but remember for use by getPublish.
-    this.lastRemainingPublisher = label;
     return this.hashtags[label] = false;
   },
   getChip(label) { // Handy for scripting, but not otherwise used in app.
@@ -391,13 +405,18 @@ export const Hashtags = {
     }
     return null;
   },
-  setPublish(newTag, isOldTagNowSubscribed = true) { // Make this topic be the one to be used when we next publish an alert.
-    const oldTag = this.getPublish();
-    if (oldTag) this.hashtags[oldTag] = isOldTagNowSubscribed;
+  setPublish(newTag) { // Make this topic be the one to be used when we next publish an alert.
+    // newTag will be marked for publishing (in this.hashtags and element style)
+    // Old publish tag (if any) will be set back to merely be subscribed (in same)
+    let oldTag = this.getPublish();
+    const backup = this.backupPublisher;
+    if (oldTag) this.hashtags[oldTag] = true; // true (instead of 'pub')
+    else if (backup) oldTag = backup;
+    this.backupPublisher = false;
     this.hashtags[newTag] = 'pub';
     for (const chip of this.chipset.children) {
-      if (chip.label === oldTag) chip.classList.remove('pub');
-      else if (chip.label === newTag) chip.classList.add('pub');
+      if (chip.label === newTag) chip.classList.add('pub');
+      else if (chip.label === oldTag) chip.classList.remove('pub');
     }
     return oldTag;
   }
@@ -406,5 +425,5 @@ globalThis.Hashtags = Hashtags; // for debugging
 
 // Populate hashtags data and display.
 // First the persisted/default data:
-const persisted = JSON.parse(localStorage.getItem('hashtags') || `{"🍰 ${Int`cake`}": true, "🆘 ${Int`help`}": "pub"}`);
+const persisted = JSON.parse(localStorage.getItem('hashtags') || `{"🍰 ${Int`cake`}": true, "${help}": "pub"}`);
 Object.entries(persisted).forEach(([tag, active]) => Hashtags.add(tag, active, false));

package/public/javascripts/main.js

@@ -237,12 +237,12 @@ function initializeGeolocation(subscribe = false) { // Arrange to constantly upd
       if (level9Cell) { // Zoomed out near where we last where, but not too exact for security.
 	zoom = 12;
 	[lat, lng] = getPointInCell(BigInt(level9Cell));
-      } else {
+      } else { // If the user doesn't want to turn on geolocation, we whould certainly not use ipinfo.io or the like.
 	zoom = 13;
 	[lat, lng] = [37.7749, -122.4194]; // San Fransisco
       }
     }
-    console.log('initializeGeolocation updateLocation');
+    //console.log('initializeGeolocation updateLocation');
     updateLocation(lat, lng, zoom, positionLabel);
     if (!subscribeOneShot) return;
     subscribeOneShot = false;
@@ -258,7 +258,7 @@ function initializeGeolocation(subscribe = false) { // Arrange to constantly upd
   positionWatch = geolocation.watchPosition(
     position => {
       const {latitude, longitude} = position.coords;
-      console.log('Location update.', map ? 'Map exists.' : 'Will create map.', subscribeOneShot ? 'Will subscribe fresh.' : 'Has subscriptions.');
+      //console.log('Location update.', map ? 'Map exists.' : 'Will create map.', subscribeOneShot ? 'Will subscribe fresh.' : 'Has subscriptions.');
       initMap(latitude, longitude);
     }, error => {
       geolocation.clearWatch(positionWatch);

package/public/javascripts/map.js

@@ -153,7 +153,7 @@ export function initMap(lat, lng, zoom, positionLabel) { // Set up appropriate z
     if (document.getElementById('map').querySelector('.leaflet-popup')) return; // Ignore clicks with popup open.
     const { lat, lng } = e.latlng;
     Alert.openPopup(await Alert.publish({lat, lng}));
-    Agent.current.persistPublicMetadata(P2PWebNetwork.regionCode(lat, lng));
+    Agent.current.persistPublicMetadata();
   });
   if (document.querySelector('.leaflet-control-zoom')) { // Not present in mobile
     tooltip('.leaflet-control-zoom-in', Int`Zoom in to show more detail in the map.`);

package/public/javascripts/p2pWebNetwork.js

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
-import { connect, createNodeIdentity, createAuthorIdentity, geoCellId, geoCellCenter, WIRE_VERSION, KERNEL_VERSION } from '@axona/protocol';
-import { stringToBytes, bytesToString, publishChunkedBytes, receiveChunkedBytes } from '@axona/protocol/std';
+import { connect, createAuthorIdentity, geoCellId, geoCellCenter, WIRE_VERSION, KERNEL_VERSION } from './protocol.js';
+import { stringToBytes, bytesToString, publishChunkedBytes, receiveChunkedBytes } from './protocol.js';
 
 if (!Uint8Array.prototype.toBase64) { // NodeJS < 24
   Object.defineProperty(Uint8Array.prototype, 'toBase64', {
@@ -28,20 +28,24 @@ export class P2PWebNetwork {
 		       region = this.sessionRegion,
 		       bridgeUrl = (globalThis.location && new URL(globalThis.location).searchParams.get('bridge')) ||
 		       globalThis.process?.env.BRIDGE_URL ||
+		       (parseInt(new URL(globalThis.location || 'file://').searchParams.get('dht')) <= 0 && // fixme remove when we host bridges
+			globalThis.location?.origin.replace(/^http/, 'ws')) ||
 		       'wss://bridge.axona.net',
 		      } = {}) {
     // Promise a ready-to-use network peer.
     region = await region;
 
+    const network = new this();
+    network.resetStatePromises();
+
     const { peer, nodeIdentity, transport, status, disconnect } = await connect({
       bridge: bridgeUrl,
       location: region,
+      onDisconnect: network.detached,
       author: false
     });
-
-    const network = new this();
     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}`);
@@ -189,7 +193,7 @@ export class P2PWebNetwork {
       };
       await this.peer.sub(topic, callback, {since});
     } else {
-      this.peer.unsub(topic, {});
+      await this.peer.unsub(topic, {});
     }
   }
   static currentPublishIdentity = null;
@@ -217,7 +221,7 @@ export class P2PWebNetwork {
   static regionCode(lat, lng) { // Answer containing region code.
     return geoCellId(lat, lng);
   }
-  static regionCenter(regionCode) {
+  static regionCenter(regionCode) { // {lat, lng} of center of regionCode
     return geoCellCenter(regionCode);
   }
   static delay(ms, result) { // Promise result after ms milliseconds.

package/public/javascripts/protocol.js

@@ -0,0 +1,168 @@
+// If ?dht=0, use a websocket to the server instead of Axona.
+const { TextEncoder, TextDecoder, BigInt, URL, WebSocket, Buffer } = globalThis;
+
+let connect, createAuthorIdentity, geoCellId, geoCellCenter, WIRE_VERSION, KERNEL_VERSION, stringToBytes, bytesToString, publishChunkedBytes, receiveChunkedBytes;
+
+// dht 1  -> Axona (default)
+// dht 0  -> server
+// dht -1 -> in-memory on client only
+const dht = parseInt(globalThis.process ? globalThis.process.env.DHT : new URL(globalThis.location).searchParams.get('dht'));
+
+if (dht < 1) {
+
+  const { v4:uuidv4 } = await import('uuid');
+  const { getContainingCells, getPointInCell } = await import('./s2.js');
+  const { cellHex } = await import('./versions.js');
+  const operator = await import('./pubsub.js');
+
+  WIRE_VERSION = 'SERVER';
+  KERNEL_VERSION = `${WIRE_VERSION}.1.0`;
+  createAuthorIdentity = ({
+    persistAs, store = {
+      get: (key) => globalThis.localStorage.getItem(key),
+      set: (key, value) => globalThis.localStorage.setItem(key, value)
+    }}) => {
+      let tag;
+      if (persistAs) {
+	tag = store.get(persistAs);
+	if (!tag) {
+	  tag = uuidv4();
+	  store.set(persistAs, tag);
+	} else if (tag.includes('pubkey')) {
+	  tag = JSON.parse(tag).pubkey; // if it is a real dump, as for alert-bot.
+	}
+      }
+      return {authorId: tag};
+    };
+  geoCellId = (lat, lng) => {
+    const cells = getContainingCells(lat, lng);
+    const hex = cellHex(cells[0]);
+    const sliced = hex.slice(0, 2);
+    return parseInt(sliced, 16); // The worst way to do this.
+  };
+  geoCellCenter = regionCode => { // Not right. See getPointInCell comments.
+    const expanded = regionCode.toString(16).padStart(2, '0').padEnd(16, '0');
+    const cellid = BigInt('0x' + expanded);
+    const [lat, lng] = getPointInCell(cellid);
+    return {lat, lng};
+  };
+
+  bytesToString = u8 => {
+    return new TextDecoder().decode(u8);
+  };
+  stringToBytes = (str) => {
+    return new TextEncoder().encode(str);
+  };
+  const hasBuffer = typeof Buffer !== 'undefined';
+  function bytesToB64(u8) {
+    if (hasBuffer) return Buffer.from(u8).toString('base64');
+    let s = ''; const CH = 0x8000;
+    for (let i = 0; i < u8.length; i += CH) s += String.fromCharCode.apply(null, u8.subarray(i, i + CH));
+    return btoa(s);
+  }
+  function b64ToBytes(b64) {
+    if (hasBuffer) return new Uint8Array(Buffer.from(b64, 'base64'));
+    const s = atob(b64); const u8 = new Uint8Array(s.length);
+    for (let i = 0; i < s.length; i++) u8[i] = s.charCodeAt(i);
+    return u8;
+  }
+  publishChunkedBytes = (peer, u8, {name, mime}) => {
+    const str = bytesToB64(u8);
+    return {topic: {name, mime, str}};
+  };
+  receiveChunkedBytes = (peer, {name, mime, str}, options) => {
+    const u8 = b64ToBytes(str);
+    return {bytes: u8, name, mime, msgIds: []};
+  };
+
+  connect = async ({bridge, location, onDisconnect}) => {
+    // We always call location as {lat, lng}
+    // We always call it with author:false
+    const {lat, lng} = location;
+    const region = geoCellId(lat, lng);
+    const nodeTag = region.toString(16).padStart(2, '0') + uuidv4();
+    const nodeIdentity = {id: nodeTag};
+    const handlers = {}; // guid => handler tag
+    const inFlight = {};
+    let disconnect, transport; // But do not call P2PWebNetwork.ice!!!
+    const send = await new Promise(resolve => {
+      if (dht === 0) {
+	const url = `${bridge}/${nodeTag}`;
+	const socket = transport = new WebSocket(url);
+	socket.onmessage = event => {
+	  const [tag, ...rest] = JSON.parse(event.data);
+	  const subHandler = handlers[tag];
+	  const inFlightResolver = inFlight[tag];
+	  if ((!subHandler && !inFlightResolver) ||
+	      ((typeof(subHandler) !== 'function') && (typeof(inFlightResolver) !== 'function')))
+	    console.log({tag, rest, subHandler, inFlightResolver, handlers, inFlight});
+	  if (subHandler) return subHandler(...rest);
+	  delete inFlight[tag];
+	  return inFlightResolver?.(...rest);
+	};
+	socket.onopen = () => {
+	  if (socket.readyState !== WebSocket.OPEN) return; // You would think that can't happen, but...
+	  resolve((...rest) => { // send()
+	    const tag = uuidv4();
+	    const {promise, resolve} = Promise.withResolvers();
+	    inFlight[tag] = resolve;
+	    socket.send(JSON.stringify([tag, ...rest]));
+	    return promise;
+	  });
+	};
+	// onerror is of no help, as the event is generic.
+	socket.onclose = event => {
+	  console.warn('websocket close', event.code, event.wasClean, event.reason);
+	  onDisconnect();
+	};
+	disconnect = () => socket.close();
+      } else {
+	disconnect = () => null;
+	operator.setReceiver((nodeTag, id, ...rest) => handlers[id](...rest));
+	resolve((methodName, ...rest) => operator[methodName](...rest)); // send()
+      }
+    });
+
+    const peer = {
+      onError() {},
+      onLog() {},
+      health() {
+	return {peers: [], axonRoles: []};
+      },
+      async leave() {
+	await send('deleteSubscriber', nodeTag);
+	disconnect();
+      },
+      async sub(topic, handler, options) {
+	const result = await send('subscribe', topic, nodeTag, options);
+	handlers[result.id] = handler;
+	return result;
+      },
+      async unsub(topic, options) {
+	const result = await send('unsubscribe', topic, nodeTag, options);
+	delete handlers[result.id];
+	return result;
+      },
+      async pub(topic, message, options) {
+	return send('publish', topic, message, options);
+      },
+      kill(topic, msgId, options) {
+	return send('unpublish', topic, msgId, options);
+      },
+      host() {},
+      unhost() {}
+    };
+    const status = {peers: 0, ms: 0}; // fixme ms
+    return { peer, nodeIdentity, transport, status, disconnect };
+  };
+
+} else {
+  const protocol = await import('@axona/protocol');
+  const std = await import('@axona/protocol/std');
+  ({ connect, createAuthorIdentity, geoCellId, geoCellCenter, WIRE_VERSION, KERNEL_VERSION }  = protocol);
+  ({ stringToBytes, bytesToString, publishChunkedBytes, receiveChunkedBytes } = std);
+}
+
+export { connect, createAuthorIdentity, geoCellId, geoCellCenter, WIRE_VERSION, KERNEL_VERSION };
+export { stringToBytes, bytesToString, publishChunkedBytes, receiveChunkedBytes }
+

package/public/javascripts/pubsub.js

@@ -0,0 +1,124 @@
+// In memory pubsub, for either client-only testing, or server-websocket testing
+const { v4:uuidv4 } = await import('uuid');
+const { TextEncoder, crypto, Buffer } = globalThis;
+
+function setBucket(collection, type, topicId, subject, value) { // Set value in the collection.
+  const bucket = collection[type][topicId] ||= {};
+  bucket[subject] = value;
+}
+function removeBucket(collection, type, topicId, subject) { // Return the value and stop storing it.
+  const bucket = collection[type][topicId];
+  if (!bucket) return null;
+  const value = bucket[subject];
+  delete bucket[subject];
+  if (!Object.keys(bucket).length) delete collection[type][topicId];
+  return value;
+}
+
+const SUBSCRIPTION_TIMEOUT = 0; // No need, because we run deleteSubscriber on disconnect.
+const PUBLISH_TIMEOUT = 24 * 60 * 60e3;      // Delete after 24 hours.
+const timeouts = {pub: {}, sub: {}};
+function expire(type, topicId, subject, remover, timeout) { // Cancellably schedule remover() to fire at timeout.
+  if (!timeout) return;
+  setBucket(timeouts, type, topicId, subject, setTimeout(remover, timeout));
+}
+function cancel(type, topicId, subject) { // Cancel a sheduled expiration.
+  clearTimeout(removeBucket(timeouts, type, topicId, subject));
+}
+
+// pub maps eventName => {[subject]: storageItem, ...}, where subject is the message id. Entries purged after PUBLISH_TIMEOUT.
+// sub maps  eventName => {[subject]: ws, ...}, where subject is the subscriber id. Entries purged after SUBSCRIPTION_TIMEOUT.
+const data = {pub: {}, sub: {}};
+function getDataValues(type, topicId) { // For all subjects
+  return Object.values(data[type][topicId] || {});
+}
+function getDataEntries(type, topicId) {
+  return Object.entries(data[type][topicId] || {});
+}
+
+function deleteSub(topicId, subject) {
+  return removeBucket(data, 'sub', topicId, subject);
+}
+function normalizeTopic({name, region, owner, write = 'open'} = {}) {
+  if (typeof(region) === 'string') region = parseInt(region);;
+  return {name, region, owner, write};
+}
+function deriveTopicId(topic) {
+  return JSON.stringify(normalizeTopic(topic)); // No need to hash in this implementation.
+}
+
+let invoke;
+export function setReceiver(receiver) {
+  invoke = receiver;
+}
+
+export function subscribe(topicName, nodeTag, {since = 'all'}) {
+  // Axona allows multiple handlers on the same topic, but we don't use that in civildefense, and do not implement it here.
+  const topicId = deriveTopicId(topicName);
+  const id = uuidv4();
+  cancel('sub', topicId, id);
+  expire('sub', topicId, id, () => deleteSub(topicId, id), SUBSCRIPTION_TIMEOUT);
+  setBucket(data, 'sub', topicId, nodeTag, id);
+  if (since) setTimeout(() => { // invoke handler on any sticky data, but only after we have told client the subscription id.
+    let lastEnvelope = null, lastTime = 0;
+    for (const envelope of getDataValues('pub', topicId)) {
+      switch (since) {
+      case 'all':
+	invoke(nodeTag, id, envelope);
+	break;
+      case 'latest':
+	if (envelope.ts > lastTime) {
+	  lastTime = envelope.ts;
+	  lastEnvelope = envelope;
+	}
+	break;
+      default: // Must be a timestamp
+	if (envelope.ts === since) invoke(nodeTag, id, envelope);
+      }
+    }
+    if (lastEnvelope) invoke(nodeTag, id, lastEnvelope);
+  }, 100);
+  return {topicName, topicId, id};
+}
+
+export function unsubscribe(topic, nodeTag, options) {
+  const topicId = deriveTopicId(topic);
+  cancel('sub', topicId, nodeTag);
+  const id = deleteSub(topicId, nodeTag);
+  return {ok: true, id}; // Axona doesn't return the id(s) of the subscription(s), but it is convenient for us to do so.
+}
+
+export function deleteSubscriber(nodeTag) {
+  for (const topicId in data.sub)  {
+    const keySubs = data.sub[topicId];
+    for (const [subject, value] of Object.entries(keySubs)) {
+      if (nodeTag === subject) deleteSub(topicId, subject, keySubs);
+    }
+  }
+}
+
+const hasBuffer = typeof Buffer !== 'undefined';
+let toHex = hasBuffer ? u8 => Buffer.from(u8).toString('hex') : u8 => u8.toHex();
+export async function publish(topic, message, {signWith}) {
+  const topicId = deriveTopicId(topic);
+  const signerPubkey = signWith?.authorId || undefined;
+  const payload = JSON.stringify({message, publisher: signerPubkey});
+  const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(payload));
+  const msgId = toHex(new Uint8Array(hash));
+  const envelope = {msgId, topic, ts: Date.now(), message, signerPubkey};
+  for (const [nodeTag, id] of getDataEntries('sub', topicId)) invoke(nodeTag, id, envelope);
+  setBucket(data, 'pub', topicId, msgId, envelope);
+  expire('pub', topicId, msgId, () => removeBucket(data, 'pub', topicId, msgId), PUBLISH_TIMEOUT);
+  return msgId;
+}
+
+export function unpublish(topic, msgId, {signWith}) {
+  const topicId = deriveTopicId(topic);  
+  cancel('pub', topicId, msgId);
+  const envelope = removeBucket(data, 'pub', topicId, msgId);
+  if (!envelope) return {ok: false}; // we didn't have it.
+  envelope.deleted = true;
+  envelope.message = null;
+  for (const [nodeTag, id] of getDataEntries('sub', topicId)) invoke(nodeTag, id, envelope);
+  return {ok: true};
+}

package/public/javascripts/s2.js

@@ -1,4 +1,4 @@
-import { s2 } from 's2js';
+import { s2, s1, r1 } from 's2js';
 const { cellid, LatLng, Point, Cell, Cap, RegionCoverer } = s2;
 import { cellHex } from './versions.js';
 const { BigInt } = globalThis;
@@ -12,22 +12,30 @@ const { BigInt } = globalThis;
 // Meanwhile as the user changes the area being shown, we subscribe to whatever cells we need in order to cover the display
 // area without overlapping cells.
 
-export const MIN_LEVEL = 2; // Corresponds to the top level Axona regions.
+export const MIN_LEVEL = 3; // Corresponds to the top level Axona regions.
 const MAX_S2_LEVEL = 30; // The leaf level that Cell.fromPoint operates at.
 const MAX_MAP_LEVEL = 17; // The max level that findCoverCellsByCenterAndRadius will use on our maps.
 
 const EARTH_RADIUS_METERS = 6371e3;
 
 export function getPointInCell(cellId) { // answer [lat, lng] in degrees from a BigInt
-  let {lat, lng} = s2.cellid.latLng(cellId);
-  const degrees = 180 / Math.PI;
-  lat *= degrees;
-  lng *= degrees;
-  return [lat, lng];
+  // CAUTION: This is intended for s2 level 3 or finer, and won't always work symmetrically for our top-level regions.
+  // e.g. getContainingCells(...getPointInCell( cell for 0x47 )][0] is 0x46!
+  let center = s2.cellid.latLng(cellId);
+  return [s1.angle.degrees(center.lat), s1.angle.degrees(center.lng)];
 }
 
+function getCellSubdivision(cell) {
+  return cellid.children(cell);
+}
+function getCellLevel(cell) {
+  return cellid.level(cell);
+}
+function getFace(cell) {
+  return cellid.face(cell);
+}
 export function getSubdivision(hexString) {
-  return cellid.children(BigInt('0x' + hexString)).map(childCell => cellHex(childCell));
+  return getCellSubdivision(BigInt('0x' + hexString)).map(childCell => cellHex(childCell));
 }
 
 // Return a list of the cell ids that contain the point.
@@ -43,39 +51,22 @@ export function getContainingCells(lat, lng) {
   return cells.slice(MIN_LEVEL, MAX_MAP_LEVEL + 1); // We can only make use between Axona region size and the smallest region our maps subscribe to.
 }
 
-// Return a list of cell ids that covers a circle specified by a center and a point on that circle, without overlapped cells.
-export function findCoverCellsByCenterAndPoint(centerLat, centerLng, pointLat, pointLng) {
-  // TODO: Does it make sense to do this by the actual borders shown, rather than by the length of the half-diagonal?
-  const center = Point.fromLatLng(LatLng.fromDegrees(centerLat, centerLng));
-  const point = Point.fromLatLng(LatLng.fromDegrees(pointLat, pointLng));
-  const distanceAngle = center.distance(point);
-  const interestRadiusMeters = distanceAngle * EARTH_RADIUS_METERS;
-  return findCoverCellsByCenterAndRadius(centerLat, centerLng, interestRadiusMeters);
-}
+export function findCoverCellsByMinMaxLatLng({minLat, maxLat, minLng, maxLng, full = false,
+					      options:{minLevel = MIN_LEVEL, maxLevel = MAX_MAP_LEVEL, maxCells = 12} = {}}) {
+  // Return a list-like object of cell ids that cover the specified range.
+  // The lat/lng won't work well for the full map, so an exact full map can be requested, overriding that lat/lng.
 
-// Return a list of cell ids that covers interestRadiusMeters around latitude/longitude, without overlapped cells.
-export function findCoverCellsByCenterAndRadius(lat, lng, interestRadiusMeters) {
-  const point = Point.fromLatLng(LatLng.fromDegrees(lat, lng));
+  // There are a lot of ways that seem like they do this, but it is very easy to find something that works for a few cases,
+  // but misses cells in some circumstances, so be wary about rewriting this.
+  const lo = s2.LatLng.fromDegrees(minLat, Math.max(minLng, -180));
+  const hi = s2.LatLng.fromDegrees(maxLat, Math.max(maxLng, 190));
 
-  // replicating key parts of Cap.cellUnionBound():
-  // Find the maximum (i.e., finest-grained) level such that the cap contains at
-  // most [ael: at least??] one cell vertex and such that CellID.AppendVertexNeighbors() can be called.
-  const findLevel = radius => {
-    let levelForRadius = MAX_S2_LEVEL;
-    const radiusAngle = radius / EARTH_RADIUS_METERS;
-    if (radiusAngle > 0) {
-      const deriv = 2 * Math.SQRT2 / 3;
-      levelForRadius = Math.floor(Math.log2(deriv / radiusAngle));
-      if (levelForRadius > MAX_S2_LEVEL) levelForRadius = MAX_S2_LEVEL;
-      if (levelForRadius < 0) levelForRadius = 0;
-    }
-    return levelForRadius;
-  };
-  const levelForRadius = findLevel(interestRadiusMeters); // - 1; // as seen in cellUnionBound: go one level bigger
+  const rect = full ? s2.Rect.fullRect() : new s2.Rect(
+    new r1.Interval(lo.lat, hi.lat),
+    new r1.Interval(lo.lng, hi.lng)
+  );
 
-  const minLevel = Math.max(MIN_LEVEL, levelForRadius - 1);
-  const maxLevel = Math.max(MIN_LEVEL, levelForRadius + 2);
-  const rc = new RegionCoverer({ minLevel, maxLevel, maxCells: 9 }); // Will exceed maxCells as needed to obey minLevel.
-  const r = Cap.fromCenterAngle(point, interestRadiusMeters / EARTH_RADIUS_METERS);
-  return rc.covering(r);
+  const coverer = new RegionCoverer({minLevel, maxLevel, maxCells});
+  return coverer.covering(rect); // a CellUnion — array-like of bigint cell IDs, already normalized/minimal
 }
+

package/public/service-worker.js

@@ -1,6 +1,6 @@
 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.16';
+const serviceVersion = '4.5.21';
 
 const cacheList = [ // The files we need.
   "/",
@@ -21,6 +21,8 @@ const cacheList = [ // The files we need.
   "javascripts/translations.js",
   "javascripts/service-manager.js",
   "javascripts/p2pWebNetwork.js",
+  "javascripts/protocol.js",
+  "javascripts/pubsub.js",
 
   "stylesheets/style.css",
 
@@ -34,6 +36,7 @@ const cacheList = [ // The files we need.
 
   "axona-protocol/src/index.js",
   "axona-protocol/src/errors.js",
+  "axona-protocol/src/connect.js",
   "axona-protocol/src/bridgeDirectory.js",
   "axona-protocol/src/contracts/Transport.js",
   "axona-protocol/src/contracts/DHT.js",
@@ -49,6 +52,18 @@ const cacheList = [ // The files we need.
   "axona-protocol/src/dht/Subscription.js",
   "axona-protocol/src/pubsub/AxonaManager.js",
   "axona-protocol/src/pubsub/authorClass.js",
+  "axona-protocol/src/pubsub/ids.js",
+  "axona-protocol/src/pubsub/dispatch.js",
+  "axona-protocol/src/pubsub/durability.js",
+  "axona-protocol/src/pubsub/rootClaim.js",
+  "axona-protocol/src/pubsub/constants.js",
+  "axona-protocol/src/pubsub/topicStore.js",
+  "axona-protocol/src/pubsub/rootElection.js",
+  "axona-protocol/src/pubsub/syncEngine.js",
+  "axona-protocol/src/pubsub/repairPlane.js",
+  "axona-protocol/src/pubsub/wireHandlers.js",
+  "axona-protocol/src/pubsub/writeFlight.js",
+  "axona-protocol/src/pubsub/ackProof.js",
   "axona-protocol/src/pubsub/kill.js",
   "axona-protocol/src/pubsub/touch.js",
   "axona-protocol/src/pubsub/post.js",
@@ -166,20 +181,20 @@ 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);
-  // 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(cacheList.map(file => cache.add(file)
+				  .catch(error => console.error(file + ' ' + error.message))));
 
   await Promise.all([
     // These are referenced within material web, but missing. Turns out we don't need them,
     // but let's cache empty responses to keep the console cleaner.
-    "https://esm.run/npm/lit@3.3.3/+esm",
     "https://esm.run/npm/tslib@2.8.1/+esm",
+    "https://esm.run/npm/lit@3.3.3/+esm",
     "https://esm.run/npm/lit@3.3.3/static-html.js/+esm",
     "https://esm.run/npm/lit@3.3.3/decorators.js/+esm",
     "https://esm.run/npm/lit@3.3.3/directives/style-map.js/+esm",
     "https://esm.run/npm/lit@3.3.3/directives/class-map.js/+esm",
     "https://esm.run/npm/lit@3.3.3/directives/when.js/+esm",
-    "https://esm.run/npm/lit@3.3.1/directives/live.js/+esm",
+    "https://esm.run/npm/lit@3.3.3/directives/live.js/+esm",
   ].map(url => cache.put(new Request(url),
                          new Response("", {headers: { "Content-Type": "text/javascript" }}))));
   return version;

package/public/stylesheets/style.css

@@ -16,6 +16,7 @@
     --md-sys-shape-corner-full: 12px;
 
     --about-image-size: 80px;
+    --combobox-minWidth: 125px;
 
     /* --md-sys-color-tertiary-container: blue; */
     /* --md-sys-color-background: yellow; */
@@ -196,22 +197,26 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
 .combobox {
     position: relative;
     --textFieldHeight: 34px;
-    --minWidth: 125px;
 }
 .combobox-listbox {
     padding: 5px;
     position: absolute;
-    bottom: calc(var(--textFieldHeight) + 2px);
-    left: 0;
-    max-height: 50dvh; /* leaving room for portrait keyboard. landscape keyboard has no room at all */
-    width: fit-content;
-    min-width: var(--minWidth);
+    right: 5px;
+    bottom: 55px;
+    max-height: 45dvh; /* leaving room for portrait keyboard. landscape keyboard has no room at all *\/ */
     overflow-y: auto;
-    z-index: 9999;
+    width: fit-content;
+    min-width: var(--combobox-minWidth);
+    z-index: 1000;
     background: rgba(255, 255, 255, 0.95);
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
 }
+@media (orientation: landscape) and (pointer: coarse) {
+    .combobox-listbox {
+	display: none !important;
+    }
+}
 .combobox-option {
     font-size: 0.95rem;
     color: var(--md-sys-color-primary);
@@ -238,12 +243,13 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
     background:  #B8C2D7;
 }
 .watching-hashtags md-filled-text-field.newtag {
+    anchor-name: --combobox-newtag;
     --md-filled-field-top-space: 0px;
     --md-filled-field-bottom-space: 0px;
     --md-filled-text-field-leading-space: 8px;
     --md-filled-text-field-trailing-space: 0px;
-    height: var(--textFieldHeight);
-    width: var(--minWidth);
+    height: 34px;
+    width: var(--combobox-minWidth);
 }
 .alert-marker {
     text-shadow: 8px -3px 10px rgb(0 0 0 / 60%);

package/server/app.js

@@ -1,11 +1,7 @@
 #!/usr/bin/env node
 import process from 'node:process';
-import { exec } from 'node:child_process';
 import {cpus, availableParallelism } from 'node:os';
 import cluster from 'node:cluster';
-import http from 'node:http';
-import express from 'express';
-import logger from 'morgan';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
 import { resolve } from './dirname.js';
@@ -60,10 +56,17 @@ const debug = argv.verbose && ((...rest) => console.log(new Date(), ...rest));
 function delay(ms = argv.spacing * 1e3) { return new Promise(resolve => setTimeout(resolve, ms)); }
 
 if (cluster.isPrimary) { // Parent process with portal webserver through which clienta can bootstrap
+  const http = await import('node:http');
+  const express = (await import('express')).default;
+  const logger = (await import('morgan')).default;
+  const { configureWebsocket } = await import('./websocket.js');
+
   const port = parseInt((new URL(argv.baseURL)).port || '80');
   process.title = 'yz.social';
   const app = express();
   app.use(logger(':date[iso] :status :method :url :res[content-length] - :response-time ms'));
+  const server = http.createServer(app);
+  configureWebsocket(server);
 
   // if (argv.announce) { // The default is to not announce.
   //   let announce = null;
@@ -98,7 +101,7 @@ if (cluster.isPrimary) { // Parent process with portal webserver through which c
     extensions: ['js'] // Some dependencies refer to .js files as relative pathnames, with the .js missing.
   }));
 
-  app.listen(port);
+  server.listen(port);
   log(`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();

package/server/websocket.js

@@ -0,0 +1,46 @@
+// Offer a websocket connection for testing, that skips the DHT entirely, and accepts publishing by pushing to subscribers over the websocket.
+import { WebSocketServer } from 'ws';
+import * as operator from '../public/javascripts/pubsub.js';
+
+const sockets = {};
+operator.setReceiver((nodeId, id, envelope) => {
+  const socket = sockets[nodeId];
+  socket.send(JSON.stringify([id, envelope]));
+});
+
+function heartbeat() {
+  this.isAlive = true;
+}
+
+export function configureWebsocket(server) {
+  const wss = new WebSocketServer({ server });
+  wss.on('connection', (ws, req) => {
+    const nodeTag = req.url.slice(1);
+    console.log('Connected', nodeTag);
+    sockets[nodeTag] = ws;
+
+    ws.on('message', async message => {
+      const [id, methodName, ...rest] = JSON.parse(message);
+      const result = await operator[methodName](...rest);
+      ws.send(JSON.stringify([id, result]));
+    });
+
+    ws.isAlive = true;
+    ws.on('pong', heartbeat);
+
+    ws.on('error', console.error);
+    ws.on('close', () => {
+      console.log('Disconnected', nodeTag);
+      operator.deleteSubscriber(nodeTag);
+    });
+  });
+
+  const interval = setInterval(function ping() { // Keep-alive ping/pong on interval
+    wss.clients.forEach(function each(ws) {
+      if (!ws.isAlive) return ws.terminate();
+      ws.isAlive = false;
+      ws.ping();
+      return null;
+    });
+  }, 30e3);
+}