@yz-social/civildefense.io 4.5.9 → 4.5.21

package/index.js

@@ -1,4 +1,5 @@
 export { P2PWebNetwork } from "./public/javascripts/p2pWebNetwork.js";
-export { agentTopic, alertTopic, canonicalTag } from "./public/javascripts/versions.js";
+export { topicRegion, agentTopic, alertTopic, canonicalTag } from "./public/javascripts/versions.js";
 export { getContainingCells } from "./public/javascripts/s2.js";
 export { location } from "./server/getLocation.js";
+export { deriveTopicIdBig } from "@axona/protocol";

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.9",
+  "version": "4.5.21",
   "keywords": [
     "map",
     "browser",
@@ -10,14 +10,16 @@
   "scripts": {
     "start": "npm stop; node ./server/app.js",
     "stop": "pkill yz.social",
-    "postinstall": "touch server/location.json; chmod a+w server/location.json"
+    "postinstall": "touch server/location.json; chmod a+w server/location.json",
+    "prepack": "mv server/location.json server/location.save.json",
+    "postpack": "mv server/location.save.json server/location.json"
   },
   "type": "module",
   "exports": {
     ".": "./index.js"
   },
   "dependencies": {
-    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.48.0",
+    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.59.2",
     "cors": "^2.8.6",
     "express": "^4.22.1",
     "leaflet": "^1.9.4",
@@ -27,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

@@ -25,12 +25,11 @@
           "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"
+          "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"
         }
       }
     </script>
@@ -161,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,7 +1,6 @@
-const { localStorage } = globalThis;
+const { localStorage, URL } = globalThis;
 import { v4 as uuidv4 } from 'uuid';
 import { minidenticonSvg } from 'minidenticons';
-import { createAuthorIdentity }  from '@axona/protocol';
 import { agentTopic, agentPersistKey } from './versions.js';
 import { Int } from './translations.js';
 import { consume, openDisplay } from './display.js';
@@ -54,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')) {
@@ -79,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
@@ -94,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);
@@ -121,31 +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;
-    // TODO: set owner as well.
     const contact = await networkPromise;
-    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;
-      // }
-      return contact.publish({eventName, region, owner, payload});
+
+    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.trackedRegions[region][type];
+      if (killTag) await contact.publish({eventName, region, owner, killTag, payload: null});
+
+      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});
+      }
     }
-    // For now, until since:'latest' works, supply a null payload and no subject.
-    await contact.publish({eventName, region, owner, payload: null});
-    // const subject = this.publicMsgId[type];
-    // if (!subject) return null; // We have not published a value, so nothing to kill.
-    // await contact.publish({eventName, region, owner, subject, payload: null});
-    // return null;
   }
 
   // We represent handles and avatars by inserting stuff into given elements.
@@ -156,8 +173,9 @@ export class Agent {
     element.textContent = value || '(none)';
     element.value = value || ''; // Hack: handle input[type="text"] as well. Must be property assignment, not attribute.
   }
+  static spinner = 'images/loading.gif';
   static avatar(element, value) { // Update avatar element with value.
-    element.innerHTML = value === null ? '(none)' : (value.startsWith('data') ? this.makeImage(value) : Agent.makeIdenticon(value));
+    element.innerHTML = value === null ? '(none)' : (value === this.spinner || value.startsWith('data') ? this.makeImage(value) : Agent.makeIdenticon(value));
   }
   static downsampleResolution = 128; // max height or width
   static makeImage(url) {
@@ -237,11 +255,8 @@ export class Agent {
 	this.updateValue(null, 'private', 'avatar');
       };
       fileChooser.onchange = async event => {
-	consume(event);
-	if (!fileChooser.files.length) return;
-	const blob = await P2PWebNetwork.downsampledBlob({blob: fileChooser.files[0], maxDimension: Agent.downsampleResolution});
-	this.updateValue(await P2PWebNetwork.blob2dataURL(blob), 'private', 'avatar');
-	console.log('clearing avatar selection');
+	await this.fileEvent(fileChooser, event, 'private');
+	console.log('cleared avatar selection');
       };
       fileChooser.click();
     });
@@ -263,19 +278,31 @@ export class Agent {
       content.parentElement.classList.toggle('hidden', true);
     };
   }
+  async fileEvent(fileChooser, event, scope) { // Update value from fileChooser change event, return dataURL;
+    consume(event);
+    if (!fileChooser.files.length) return '';
+    const file = fileChooser.files[0];
+    const maxDimension = Agent.downsampleResolution;
+    const blob = await P2PWebNetwork.downsampledBlob({blob: file, maxDimension});
+    const dataURL = await P2PWebNetwork.blob2dataURL(blob);
+    await this.updateValue(dataURL, scope, 'avatar');
+    return dataURL;
+  }
   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 createAuthorIdentity({persistAs});
+    const myIdentity = await P2PWebNetwork.createAuthorIdentity({persistAs});
     if (tag !== persistAs) { // Fix up persistence by moving it to where it need to go.
       // WARNING: This relies on undocumented behavior of createAuthorIdentity().
       const realTag = myIdentity.authorId;
@@ -304,21 +331,18 @@ export class Agent {
       fileChooser.oncancel = event => {
 	consume(event);
 	console.log('cancel my avatar');
+	myAgent.updateValue(this.spinner, 'public', 'avatar', false);
 	myAgent.updateValue(null, 'public', 'avatar');
 	myAgent.persistPrivate(null, 'avatar'); // So that we'll have it next session.
 	console.log('clearing avatar selection');
       };
       fileChooser.onchange = async event => {
-	consume(event);
-	if (!fileChooser.files.length) return;
-	const blob = await P2PWebNetwork.downsampledBlob({blob: fileChooser.files[0], maxDimension: Agent.downsampleResolution});
-	const url = await P2PWebNetwork.blob2dataURL(blob);
+	myAgent.updateValue(this.spinner, 'public', 'avatar', false);
+	const url = await myAgent.fileEvent(fileChooser, event, 'public');
 	console.log('set my avatar', url.slice(0, 50));
-	myAgent.updateValue(url, 'public', 'avatar');
 	myAgent.persistPrivate(url, 'avatar'); // So that we'll have it next session.
       };
       fileChooser.click();
     });
   }
 }
-

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 } from './versions.js';
-import { getContainingCells, 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;
 
 
@@ -17,7 +17,7 @@ export function getShareableURL(tag = null, tags = Hashtags.getSubscribe()) { //
   const zoom = map.getZoom();
   const { lat, lng } = map.getCenter();
 
-  params.set('tags', tags.map(tag => encodeURIComponent(tag)).join(','));
+  if (tags.length) params.set('tags', tags.map(tag => encodeURIComponent(tag)).join(','));
   if (lat !== null) params.set('lat', lat);
   if (lng !== null) params.set('lng', lng);
   if (zoom !== null) params.set('z', zoom);
@@ -68,7 +68,7 @@ export function go({lat = null, lng = null, zoom = null, alert = null}) { // Go
   }
   openOnReceive = null;
   if (alert) {
-    Alert.openPopup(alert) || (openOnReceive = alert);
+    Alert.openPopup(alert);
   }
 }
 
@@ -94,62 +94,97 @@ class AlertReply extends Reply {
       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;
   }
+  update() { } // TODO: are we really getting multiple reply events for the same data?
 }
 
-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.
-let lastLevel9Cell; // S2 level 9 cells average a radius of about 10km ~ 6.5 miles.
-
-let last = []; // Last published lat, lng, tag
-const maxPublish = 5;
-let publishing = false;
-
+import { s2 } from 's2js';
 export class Alert extends Conversation { // A wrapper around L.marker
   // When we resubscribe to different cells covering the same place, we will get the same
   // sticky data. We don't want to change the marker. Fortunately, the publication to each
   // of the cells (at different scales) are all published with the same data.
-  static updateSubscriptions(oldKeys = subscriptions, newKeys) { // Update current subscriptions to the new map bounds.
-    // A value of [] passed for oldKeys is used to start things off fresh (i.e., without supressing subscription of any carry-overs).
-    if (!networkPromise) { console.warn("No network through which to subscribe."); return; } // Does this ever happen? Why?
-    let region;
-    if (!newKeys) { // None specified. Compute them.
-      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)
-      region = P2PWebNetwork.regionCode(center.lat, center.lng);
-      newKeys = newCells.flatMap(cell => Hashtags.getSubscribe().map(hash => alertTopic(cell, hash)));
-      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 !== lastLevel9Cell) localStorage.setItem('level9Cell', lastLevel9Cell = level9Cell);
-    }
-
-    const subscribe = (key, region, handler) =>
-	  networkPromise.then(async contact => contact.subscribe({eventName: key, region, handler}));
+  static subscriptions = {}; // maps currently active eventNames (<mumble>:<cellID>:<hashtag>) to count of event received for it.
+  // We do not record exactly where you were looking across sessions, but we do record the containing level 9 cell.
+  static lastLevel9Cell = null; // S2 level 9 cells average a radius of about 10km ~ 6.5 miles.
+  static subscriptionFromMap() { // Generate {eventName => count} for current map bounds.
+    const center = map.getCenter();
+    const bounds = map.getBounds();
+    const northEast = bounds.getNorthEast();
+    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 newKeys = {};
 
+    newCells.forEach(cell => Hashtags.getSubscribe().forEach(hash => {
+      const eventName = alertTopic(cell, hash);
+      newKeys[eventName] = this.subscriptions[eventName] || 0;
+    }));
+    // 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);
+    return newKeys;
+  }
+  static async updateSubscriptions({
+    oldKeys = this.subscriptions,
+    newKeys = this.subscriptionFromMap(),
+    throttleMS = 20
+  } = {}) { // Update current subscriptions.
+    // A value of {} passed for oldKeys is used to start things off fresh (i.e., without supressing subscription of any carry-overs).
+    if (!newKeys) return; // e.g., wacky computation. Don't change anything.
+    const contact = await networkPromise;
+    if (!contact) { console.warn("No network through which to subscribe."); return; } // Does this ever happen? Why?
+    this.subscriptions = newKeys; // Before subscribing.
+    const subscribe = async (key, handlerIn) => {
+      const handler = handlerIn && (properties => {
+	// When there are enough alerts within a topic, it rolls over and just reports the most recent number.
+	// When get near that count, we update the subscriptions such that the overloading topic is replaced
+	// with the topics for each of the four subcells that that make up the one with too many alerts.
+	// This repeats until we reach cells that are not rolling over.
+	const maxAlertsInCell = 900;
+	let count = ++newKeys[key];
+	handlerIn(properties);
+	if (count >= maxAlertsInCell) {
+	  let nextKeys = {};
+	  for (const old in newKeys) {
+	    if (old !== key) {
+	      nextKeys[old] = newKeys[old];
+	    } else {
+	      const cellTag = topicCell(key);
+	      const subdivisions = getSubdivision(cellTag);
+	      const topics = subdivisions.map(cellTag => alertTopic(cellTag, properties.hashtag));
+	      console.log('subdividing', key, 'into', topics);
+	      topics.forEach(topic => nextKeys[topic] = 0);
+	    }
+	  }
+	  this.updateSubscriptions({oldKeys: newKeys, newKeys: nextKeys, throttleMS});
+	}
+      });
+      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});
     // For each entry in the new subscription set that was not previously subscribed, subscribe now.
-    for (const key of newKeys) oldKeys.includes(key) || subscribe(key, region, data => Alert.ensure(data));
-
+    for (const key in newKeys) oldKeys.hasOwnProperty(key) || await subscribe(key, data => Alert.ensure(data));
     // For each existing subscription, if it does not appear in the new set then unsubscribe.
-    for (const key of oldKeys) newKeys.includes(key) || subscribe(key, subscriptionsRegion, null);
-    console.log('Subscribed', {newKeys, region, length: newKeys.length, oldKeys, subscriptionsRegion});
-
-    subscriptions = newKeys;
-    subscriptionsRegion = region;
+    for (const key in oldKeys) newKeys.hasOwnProperty(key) || await subscribe(key, null);
   }
+  static maxPublish = 5;
+  static publishing = false;
+  static lastPublished = []; // Last published lat, lng, tag
   // 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,
@@ -160,21 +195,21 @@ 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 overlapping publish'); return null; } // do not stack them up.
+    if (this.publishing) { console.log('skiping overlapping publish'); return null; } // do not stack them up.
     try {
-      publishing = true;
+      this.publishing = true;
 
       const contact = await networkPromise; // subtle: The rest of this all happens synchronously, with any null payloads definitely first.
       let oldCells = null, oldHash, oldSubject = null; // Recorded for logging, below.
       let lastFillIn;
       if (payload) {
 	lastFillIn = {lat, lng, hashtag, issuedTime};
-	last.push(lastFillIn); // Capture the added data.
-	const periodStart = Date.now() - (maxPublish * 60e3); // maxPublish minutes ago.
-	last = last.filter(past => past.issuedTime >= periodStart);
-	if (cancel === undefined && last.length > maxPublish) { // Unless specified otherwise, cancel oldest over maxPublish.
-	  showMessage(Int`Too many posts. (5 allowed every 5 minutes.) Removing oldest from this period.`);
-	  cancel = last.shift();
+	this.lastPublished.push(lastFillIn); // Capture the added data.
+	const periodStart = Date.now() - (this.maxPublish * 60e3); // maxPublish minutes ago.
+	this.lastPublished = this.lastPublished.filter(past => past.issuedTime >= periodStart);
+	if (cancel === undefined && this.lastPublished.length > this.maxPublish) { // Unless specified otherwise, cancel oldest over maxPublish.
+	  showMessage(Int`Too many posts. (5 allowed every 5 minutes.) Removing oldest from this period.`, 'instructions');
+	  cancel = this.lastPublished.shift();
 	}
       }
       if (cancel) {
@@ -195,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;
@@ -208,13 +246,13 @@ export class Alert extends Conversation { // A wrapper around L.marker
 	}
       }
       if (!payload) {
-	const index = last.findIndex(past => past.subject === subject);
-	if (index >= 0) last.splice(index, 1);
+	const index = this.lastPublished.findIndex(past => past.subject === subject);
+	if (index >= 0) this.lastPublished.splice(index, 1);
       }
       console.log('Published', {cells, n: cells.length, region, hashtag, subject, payload, oldCells, oldHash, oldSubject});
       return subject;
     } finally {
-      publishing = false;
+      this.publishing = false;
     }
   }
   
@@ -225,7 +263,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
   }
   static openPopup(alertTag) { // Open the marker specified by subject.
     const wrapper = this.getItem(alertTag);
-    wrapper?.openPopup();
+    wrapper?.openPopup() || (openOnReceive = alertTag);
   }
   async openPopup() { // Open this wrapper's popup, and resolve any waiting promise.
     const { resolveGo } = this; // A handy hook for scripting.
@@ -276,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);
@@ -444,9 +483,26 @@ export class Alert extends Conversation { // A wrapper around L.marker
   get itemKind() { // Answer class of reply items.
     return AlertReply;
   }
-  async ensure(data) { // Add or update reply for this marker.
+  async ensure(data) { // Add or update reply for this reply.
     data.subject = data.tag; //fixme
+    const remaining = data.issuedTime + ttl - Date.now();
+    if (remaining < 0) return null;
     const reply = await super.ensure(data);
+    if (reply) {
+      if (reply === this.items[0]) { // If first sorted reply, and there's a message, update the tooltip.
+	const message = reply.payload?.message || (!reply.payload.file && reply.payload);
+	const markerElement = message && this.marker.getElement();
+	if (markerElement) tooltip(markerElement, message);
+      }
+      if (reply === this.items[this.items.length - 1]) { // If last reply so far (even if first), show ring and update fader.
+	const ringElement = this.startFader('.alert-commented', remaining);
+	if (ringElement) {
+	  ringElement.style.display = 'block';
+	  // Restart the pulse animation by setting animationName to something it isn't.
+	  ringElement.style.animationName = ringElement.style.animationName === 'pulse2' ? 'pulse' : 'pulse2';
+	}
+      }
+    }
     this.needsRedisplay = true;
     this.ensureContent();
     return reply;
@@ -469,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();
@@ -499,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);
     });
@@ -512,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>`;
@@ -562,7 +622,9 @@ export class Alert extends Conversation { // A wrapper around L.marker
   }
   startFader(selector, remaining) { // Set up or update fader on the specified marker element, returning that element.
     const { marker } = this;
-    const element = marker.getElement().querySelector(selector);
+    const markerElement = marker.getElement();
+    if (!markerElement) return null; // removed (e.g., if expired).
+    const element = markerElement.querySelector(selector);
     const fraction = remaining / ttl; // Start at 1 and go to 0, but we may be some way along that.
     const endOpacity = 0.5; // Fully transparent is 0, but that's too hard to see. :-)
     const endGrayscale = 1; // Fully gray.
@@ -572,7 +634,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
     element.style.opacity = opacity;
     // I'd like to let css transitions do the work, but as we zoom, we make different subscriptions and thus start
     // the "same" marker over again. This initial setup clashes with zooming if done with a next-tick step opacity+filter value.
-    const interval = 2e3; // Milliseconds / step
+    const interval = 10e3; // Milliseconds / step
     const opacityFade = (endOpacity - opacity) *  interval / remaining; // change / step
     const grayscaleFade = (endGrayscale - grayscale) * interval / remaining;
     clearInterval(this[selector]);
@@ -593,3 +655,4 @@ export class Alert extends Conversation { // A wrapper around L.marker
     super.destroy();
   }
 }
+globalThis.Alert = Alert; // for debugging