@yz-social/civildefense.io 4.5.9 → 4.5.21

package/public/javascripts/hashtags.js

@@ -5,6 +5,27 @@ import { showMessage } from './map.js';
 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",
+  "🎼 classical",
+  "🩷 community support",
+  "🤠 country",
+  "🎧 edm",
+  "🔥 fire",
+  "🌊 flood",
+  "${help}",
+  "🎤 hiphop",
+  "🧊 ice",
+  "🎷 jazz",
+  "🎙️ news",
+  "👁️ observer corps",
+  "🎵 pop",
+  "🧰 utility repairs"
+]`);
+
 // We subscribe to the cartesian product of the list of non-overlapping cells and all hashes.
 // We publish to just the first of these.
 export const Hashtags = {
@@ -25,8 +46,8 @@ export const Hashtags = {
   //     Later, we will allow a user to change what they see on their own device.)
   // 4. While an identicon is displayed, it is the same for all markers of this hashtag, regardless of whether the original posters
   //    were using the same emoji as each other.
-  hashtags: {},
-  canonical2extended: {},
+  hashtags: {}, // extended string => true/false/'pub'
+  canonical2extended: {}, // canonical string => extended string
   add(label, active = true, updateAlerts = true) { // Ensure label is a hashtag, initialized to active, and if existing, forcing it active.
     // Return our (possibly new) understanding of the extended hashtag.
     // Note that only startup-population of tags from persistence would ever specify active=false.
@@ -35,15 +56,16 @@ export const Hashtags = {
     // (We do not change the emoji of an existing extended.)
     const canonical = canonicalTag(label);                   // no emoji, lower case.
     const ourExtended = this.canonical2extended[canonical];  // our current version, if any
-    const oursHasEmoji = this.firstEmoji(ourExtended);
-    const extended = oursHasEmoji ? ourExtended : label;      // full emoji form to use
-    if (!oursHasEmoji) {
+    const replaceExisting = !this.firstEmoji(ourExtended);
+    const extended = replaceExisting ? label : ourExtended;      // full emoji form to use
+    if (replaceExisting) {
       active = this.hashtags[canonical] || active;
+      allKnownHashtags = allKnownHashtags.filter(tag => canonicalTag(tag) !== canonical);
       delete this.hashtags[ourExtended];
     }
     this.hashtags[extended] ||= active; // If it's 'pub', let it remain so.
     this.canonical2extended[canonical] = extended;
-    if (!oursHasEmoji) {
+    if (replaceExisting) {
       this.onchange({resetSubscriptions: false});
       if (updateAlerts) Alert.updateAlerts(canonical, extended);
     }
@@ -60,11 +82,22 @@ 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.
-    return this.getAll().find(key => this.isPublish(key));
+  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 && force) {
+      pub = this.backupPublisher || help;
+      this.setPublish(pub);
+      this.onchange({highlightPublish: true});
+    }
+    return pub;
   },  
   firstEmoji(tag) { // First emoji that appears in string, else falsy.
     // I would prefer that it take just the first emoji, but that doesn't grab double-wide ones
@@ -88,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.
@@ -99,9 +134,22 @@ 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>`;
   },
+
+  // Topic entry, with autocomplete.
+  // - When you click the input box, it shows all the topics we know about.
+  //   This includes topics you already have available, because you might not realize you have them.
+  // - As you type, it filters out entries that do not match:
+  //   - If you happen to start with an emoji and have not yet entered a separating space, it matches against those that use the same emoji.
+  //   - Otherwise, it matches text, ignoring the emoji, and it highlights the substring that matches.
+  // - up/down arrow or tab ==> highlights from among those shown and copies its text to the input box, but not yet accepting it.
+  //    - But if tab is used when something was already highlighted, then it is accepted (like enter).
+  // - click (regardless of highlighting) ==> what you click on is used.
+  // - enter:
+  //   - something highlighted ==> what is highlighted is used.
+  //   - otherwise => exact contents of input box is used.
   closeSelector() { // Close the autocomplete tag selector
     const { listbox, newtag } = this;
     listbox.classList.toggle('hidden', true);
@@ -115,7 +163,7 @@ export const Hashtags = {
     listbox.classList.toggle('hidden', false);
     newtag?.setAttribute('aria-expanded', 'true');
   },
-  setActive(index) {
+  setActive(index) { // Highlight the index among selectors, and copy it's value to newtag.
     const { listbox, newtag } = this;
     this.activeIndex = index;
     listbox.querySelectorAll('.combobox-option').forEach((option, optionIndex) => {
@@ -128,19 +176,28 @@ export const Hashtags = {
 	newtag.removeAttribute('aria-activedescendant');
       }
     });
+    newtag.value = this.selectors[this.activeIndex];
   },
-  selectValue(value) {
+  selectValue(value) { // Accept the specified string.
     this.newtag.value = value;
     this.acceptTag();
   },
   acceptTag() { // Add the new hashtag.
     resetInactivityTimer();
-    let tag = this.newtag?.value.trim()  // Get into standard form, but do not strip emoji or case into canonical yet.
+    let tag = this.newtag?.value  // Get into standard form, but do not strip emoji or case into canonical yet.
 	.replace(/^#/, '')       // No leading hash
 	.replace(/\s+/g, ' ')    // Replace multiple spaces with a single space
 	.normalize('NFD');        // Standardize different ways of making accents into decomposed form - but do not remove them.
     Alert.closePopup();
     if (!tag) return;
+    if (this.firstEmoji(tag)) { // Possibly REPLACE existing with the new tag.
+      const canonical = canonicalTag(tag);
+      const existingExtended = this.canonical2extended[canonical];
+      if (existingExtended !== tag) {
+	delete this.canonical2extended[canonical];
+	delete this.hashtags[existingExtended];
+      }
+    }
     tag = this.add(tag); // Might exist, in which case tag might now be extended.
     this.setPublish(tag);
     this.onchange({highlightPublish: true});
@@ -160,13 +217,17 @@ export const Hashtags = {
 
     // TODO: create the elements only when allKnownHashtags changes. Then hide/highlight here.
     listbox.innerHTML = '';
+    let matchString = canonicalTag(query);
     this.selectors = allKnownHashtags.filter(item =>
-      item.toLowerCase().includes(query.toLowerCase())
+      // Subtle: Starting with emoji will match all/only those tags that start with the same tag. Cool.
+      // But because of the way canonicalTag() works, once you type a space after an emoji, we match
+      // against only the non-emoji, non-space text.
+      item.toLowerCase().includes(matchString)
     );
 
-    if (this.selectors.length === 0) {
+    if (matchString) {
       const li = document.createElement('li');
-      li.className = 'combobox-empty';
+      li.className = 'combobox-empty combobox-option';
       li.textContent = `Create tag "${query}"`;
       li.onpointerdown = event => {
 	event.preventDefault();
@@ -174,34 +235,30 @@ export const Hashtags = {
 	this.acceptTag();
       };
       listbox.appendChild(li);
-    } else {
-      this.selectors.forEach((item, i) => {
-	const li = document.createElement('li');
-	li.className = 'combobox-option';
-	li.id = `tag-option-${i}`;
-	li.setAttribute('role', 'option');
-	li.innerHTML = this.formatPubtag(highlight(item, query), item);
-	li.onpointerdown = event => {
-          // pointerdown (not click) so it fires before the field's blur event
-          event.preventDefault();
-	  event.stopPropagation();
-          this.selectValue(item);
-	};
-	listbox.appendChild(li);
-      });
-      setTimeout(() => { // Needs a tick.
-	const width = listbox.clientWidth;
-	const max = Math.max(125, width);
-	newtag.style.width = max + 'px'; // Set newtag so that input box makes room for floating lis
-      }, 50);
     }
+    this.selectors.forEach((item, i) => {
+      const li = document.createElement('li');
+      li.className = 'combobox-option';
+      li.id = `tag-option-${i}`;
+      li.setAttribute('role', 'option');
+      li.innerHTML = this.formatPubtag(highlight(item, matchString), item);
+      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);
+      };
+      listbox.appendChild(li);
+    });
+    setTimeout(() => { // Needs a tick.
+      const width = listbox.clientWidth;
+      const max = Math.max(125, width);
+      newtag.style.width = max + 'px'; // Set newtag so that input box makes room for floating lis
+    }, 50);
 
     this.openSelector();
-    if (this.selectors.length === 1) {
-	this.setActive(0);
-      } else {
-	this.setActive(-1);
-      }
   },
   sort(tags) { // Sort list of tags in place without regard to leding emoji
     tags.sort((a, b) => stripLeadingEmoji(a).localeCompare(stripLeadingEmoji(b)));
@@ -243,13 +300,11 @@ export const Hashtags = {
 	else showMessage(Int`Turning off "${chip.label}" alerts in the map. You can delete the topic altogether with the X.`, 'instructions');
 	this.toggleChip(chip);
 	Alert.closePopup();
-	if (chip.selected) this.setPublish(chip.label);
 	this.onchange({redisplaySubscribers: false});
       });
     });
     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"
@@ -261,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();
@@ -275,20 +330,10 @@ export const Hashtags = {
       const optionCount = listbox.querySelectorAll('.combobox-option').length;
 
       switch (event.key) {
-      case 'ArrowDown':
-	event.preventDefault();
-        if (optionCount > 0) this.setActive((this.activeIndex + 1) % optionCount);
-        break;
-
-      case 'ArrowUp':
-	event.preventDefault();
-        if (optionCount > 0) this.setActive((this.activeIndex - 1 + optionCount) % optionCount);
-        break;
-
       case 'Enter':
 	event.preventDefault();
         if (this.activeIndex < 0) {
-	  this.acceptTag();
+	  this.acceptTag(); // As is, not from list.
         } else {
           this.selectValue(this.selectors[this.activeIndex]);
 	}
@@ -299,15 +344,27 @@ export const Hashtags = {
         this.closeSelector();
         break;
 
+      case 'ArrowDown':
+	event.preventDefault();
+        if (optionCount > 0) this.setActive((this.activeIndex + 1) % optionCount);
+        break;
+
+      case 'ArrowUp':
+	event.preventDefault();
+        if (optionCount > 0) this.setActive((this.activeIndex - 1 + optionCount) % optionCount);
+        break;
+
       case 'Tab':
 	event.preventDefault();
-	if (this.activeIndex < 0) this.setActive(0); // If nothing active, make the first line active.
+	if (this.activeIndex < 0) this.setActive(0);
 	else this.selectValue(this.selectors[this.activeIndex]); // Otherwise select what is active.
         break;
       }
     };
     newtag.oninput = () => this.renderSelector(newtag.value);
-    newtag.onblur = () => this.closeSelector();
+    // 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.
@@ -316,20 +373,31 @@ export const Hashtags = {
     this.onchange({redisplaySubscribers, resetSubscriptions: false});
   },
   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 backupPublisher
     const label = chip.label;
-    const isPub = label === this.getPublish();
-    let altPub;
-    if (isPub) { // Find the next alternative, if possible.
-      let subs = this.getSubscribe();
-      if (subs.length > 1) {
-	let pubIndex = subs.indexOf(label);
-	let index = (pubIndex + 1) % subs.length;
-	altPub = subs[index];
-      }
+
+    // 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;
+
+    // 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;
     }
-    if (altPub) this.setPublish(altPub);
-    else if (isPub && !chip.selected) { chip.selected = true; return; } // Don't allow deselecting the only pub tag.
-    this.hashtags[label] = chip.selected;
+    return this.hashtags[label] = false;
   },
   getChip(label) { // Handy for scripting, but not otherwise used in app.
     for (const chip of this.chipset.children) {
@@ -338,36 +406,24 @@ export const Hashtags = {
     return null;
   },
   setPublish(newTag) { // Make this topic be the one to be used when we next publish an alert.
-    const oldTag = this.getPublish();
-    this.hashtags[oldTag] = true;
+    // 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;
   }
 };
+globalThis.Hashtags = Hashtags; // for debugging
 
 // Populate hashtags data and display.
 // First the persisted/default data:
-const allKnownHashtags = JSON.parse(localStorage.getItem('allKnownHashtags') || `[
-  "🍰 cake",
-  "🎸 classic rock",
-  "🎼 classical",
-  "🩷 community support",
-  "🤠 country",
-  "🎧 edm",
-  "🔥 fire",
-  "🌊 flood",
-  "🆘 help",
-  "🎤 hiphop",
-  "🧊 ice",
-  "🎷 jazz",
-  "🎙️ news",
-  "👁️ observer corps",
-  "🎵 pop",
-  "🧰 utility repairs"
-]`);
-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

@@ -8,6 +8,7 @@ import { getPointInCell } from './s2.js';
 import { Alert, getShareableURL, share } from './alert.js';
 import { map, showMessage, updateLocation, recenterMap } from './map.js';
 import './service-manager.js'; // Comment this out and kill service-workers for reload-to-get-latest behavior during development.
+window.P2PWebNetwork = P2PWebNetwork;
 
 document.getElementById('appVersion').textContent = appVersion;
 document.getElementById('kernelVersion').textContent = P2PWebNetwork.kernelVersion;
@@ -123,6 +124,9 @@ export function openAbout(event) {
   openDisplay('aboutContainer', event);
   noteNotificationPermission(window.Notification?.permission);
 }
+export function closeAbout() {
+  document.getElementById('aboutContainer').classList.toggle('hidden', true);
+}
 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);
@@ -233,17 +237,17 @@ 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;
     resetInactivityTimer(false);
-    Alert.updateSubscriptions([]); // This was for a new node, so supply an empty oldSubscriptions.
+    Alert.updateSubscriptions({oldKeys: {}}); // This was for a new node, so supply an empty oldSubscriptions.
   };
   if (!geolocation) {
     showMessage(Int`Geolocation not supported. Using default location.`, 'error', 'fail');
@@ -254,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);
@@ -291,7 +295,7 @@ async function initialize(event) { // Ensure there is a network promise and map,
   checking = true;
   try {
     // Always close about display, because notification permissions and the like can change in the OS while we're hidden, and safari and mobile chrome don't issue change events for them.
-    document.getElementById('aboutContainer').classList.toggle('hidden', true);
+    closeAbout();
 
     // If networkPromise has not yet been set (or cleared by disconnect), we will be subscribing.
     const needsConnection = !networkPromise;

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,8 +1,7 @@
 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
+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', {
     value: function toBase64() { return Buffer.from(this.buffer, this.byteOffset, this.byteLength).toString('base64'); },
@@ -29,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}`);
@@ -50,7 +53,7 @@ export class P2PWebNetwork {
     });
     //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('warn', (string, data, ...rest) => (data?.why === 'not-seated') || network.info('WARNING', string, data, ...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.`);
@@ -58,10 +61,11 @@ export class P2PWebNetwork {
     return network;
   }
   
-  async disconnect() { // Politely close network connection.
+  async disconnect(debugLogger = this.debugLogger) { // Politely close network connection.
     const health = this.peer.health();
     await this.disconnector();
-    this.info(`disconnected with ${health.peers.length} connections and ${health.axonRoles.length} axons.`);
+    if (debugLogger) debugLogger(health);
+    else this.shortHealth(health);
     this.resetStatePromises();
   }
   async replicateStorage() { // Let the network know that we might go away without further notice.
@@ -99,7 +103,8 @@ export class P2PWebNetwork {
       img.src = URL.createObjectURL(file);
     });
   }
-  static  async downsampledBlob({blob, outputType = 'image/jpeg', maxDimension = 1024}) { // ONLY IN BROWSERS!
+  static  async downsampledBlob({blob, maxDimension = 1024, inputType = blob.type,
+				 outputType = inputType.startsWith('image/') ? 'image/jpeg' : inputType}) { // ONLY IN BROWSERS!
     // Promise a reasonably sized Blob (or File) for a given Blob of type image/*, else blob unchanged.
     if (!blob.type.startsWith('image/')) return blob;
 
@@ -175,6 +180,7 @@ export class P2PWebNetwork {
     await this.attachment;
     const topic = {region, name: eventName};
     if (owner) topic.owner = owner;
+    this.debug('subscribed', {topic, handler:!!handler});
     if (handler) {
       const callback = async envelope => {
 	const {message, deleted, msgId, signerPubkey, topic, ts} = envelope;
@@ -187,18 +193,18 @@ export class P2PWebNetwork {
       };
       await this.peer.sub(topic, callback, {since});
     } else {
-      this.peer.unsub(topic, {});
+      await this.peer.unsub(topic, {});
     }
   }
   static currentPublishIdentity = null;
-  async publish({eventName, region, owner, signWith = this.constructor.currentPublishIdentity, issuedTime = Date.now(), killTag, payload, ...rest}) {
+  async publish({eventName, region, owner, signWith = this.constructor.currentPublishIdentity, issuedTime = Date.now(), subject, killTag = subject, payload, ...rest}) {
     // Publish data to subscribers of eventName.
     if (killTag && payload) throw new Error(`Specify killTag (${killTag}) or payload ($(JSON.stringify(payload)}), but not both.`);
     await this.attachment; // Get connected.
     const topic = {region, name: eventName};
     if (owner) topic.owner = owner;
     const options = {signWith};
-    this.debug('published', {topic, killTag, payload, issuedTime, rest, signWith});
+    this.debug('published', {topic, killTag, payload, issuedTime, rest, signWith:signWith.authorId});
     if (payload) return await this.peer.pub(topic, {issuedTime, payload, ...rest}, options);
     // The next would not normally happen, but until since:'latest' works, we need a way to send a null payload and have the handler delete the entry.
     if (!killTag) return await this.peer.pub(topic, {issuedTime, payload, ...rest}, options);
@@ -215,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.
@@ -233,12 +239,31 @@ export class P2PWebNetwork {
     // E.g., a precise location gets anonymized to containing top-level cell center.
     return this.regionCenter(this.regionCode(lat, lng));
   }
-  // Todo: Integrate with AxonaPeer's complex logging.
   debug(...rest) { // Add debug logspam.
     this.debugLogger?.(this.nodeIdentity.id, ...rest);
   }
   info(...rest) { // Add debug logspam.
     (this.infoLogger || this.debugLogger)?.(this.nodeIdentity.id, ...rest);
   }
+  static short(tag) {
+    return tag.slice(0, 8);
+  }
+  shortHealth(health = this.peer.health()) { // Info-report a short form of health.
+    const roots = health.axonRoles.filter(r => r.isRoot);
+    this.info(`disconnected with connections ${health.peers.map(P2PWebNetwork.short)}\nand ${roots.length ? `roots ${roots.map(r => P2PWebNetwork.short(r.topic))}.` : 'no roots.'}`);
+  }
+  inRegionConnections(health = this.peer.health()) {
+    const region = this.nodeIdentity.id.slice(0, 2);
+    return health.peers.filter(tag => tag.startsWith(region));
+  }
+  ice(tags = this.peer.health().peers) {
+    const ice = {};
+    for (const nodeTag of tags) {
+      const meshTag = this.transport.webrtc.meshIdFor(BigInt('0x'+nodeTag));
+      const peer = this.transport.mesh._peers.get(meshTag);
+      ice[P2PWebNetwork.short(nodeTag)] = peer ? `${peer.localCand} => ${peer.remoteCand}` : 'no webrtc connection';
+    }
+    return ice;
+  }
 }
 export default P2PWebNetwork;