@yz-social/civildefense.io 4.5.23 → 4.5.28

package/README.md

@@ -6,7 +6,7 @@ CivilDefense.io lets you report an immediate concern to the public by tapping it
 The locations are shared over anonymous p2p with other users in your area, then fade away over 24 hours.
 There is no login and no global tracking of your Internet address or physical location.
 
-See [here](https://civildefense.io/about/TheCivilDefenseApp.html).
+See [Overview](https://civildefense.io/about/en.html), [Functional Spec](https://docs.google.com/document/d/1Y621bToMLHyyx6gp4YK8C17jSejMoqpkNQ-R1EZdrEA/edit?usp=sharing), and [Roadmap](https://docs.google.com/document/d/1vwS_oQ6pYw-dn05nsaXi-bda1j-wVVqRdqr7IHnIaf4/edit?usp=sharing).
 
 
 ## The Implementation

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.23",
+  "version": "4.5.28",
   "keywords": [
     "map",
     "browser",

package/public/about/en.html

@@ -42,18 +42,25 @@
         </div>
 
         <div class="carousel-slide">
-          <img src="flood-fire-ice.png" alt="Map view showing alert markers scattered across a neighborhood">
+          <a href="/?tags=%F0%9F%A9%B7%20community%20%20DEMO,%F0%9F%91%81%EF%B8%8F%20observer%20DEMO,%F0%9F%A7%B0%20utility%20DEMO&lat=44.942473404432015&lng=-93.26251878766926&z=14" target="civildefense"><img src="streets-of-minneapolis.jpg" alt="Map view showing alert markers scattered across a neighborhood"></a>
           <div class="carousel-caption">Like Twitter, you create the topics.<br>But you only get alerts based on your current map.<br>Like Snapchat, alerts fade away after 24 hours.</div>
         </div>
 
         <div class="carousel-slide">
-          <img src="conversation-and-image.png" alt="Map with an open alert popup showing a photo and comment thread">
-          <div class="carousel-caption">Click a marker to read and add comments and attachments.</div>
+          <a href="/?tags=%F0%9F%91%81%EF%B8%8F%20observer%20DEMO&lat=44.95924556664652&lng=-93.24730055745023&z=16" target="civildefense"><img src="checkpoint.jpg" alt="Map with an open alert popup showing a photo and comment thread"></a>
+          <div class="carousel-caption">
+	    <span>Click a marker to read and add comments and attachments.</span>
+	    <a href="/?tags=%F0%9F%91%81%EF%B8%8F%20observer%20DEMO&lat=44.95924556664652&lng=-93.24730055745023&z=16" target="civildefense">Show me!</a>
+	  </div>
         </div>
 
         <div class="carousel-slide">
-          <img src="streaming-radio.png" alt="North America map with playable streaming radio station markers">
-          <div class="carousel-caption">People control the topics, and they do not have to be about safety. Here are playable streaming radio stations by category.</div>
+          <a href="/?tags=%F0%9F%8E%BC%20classical,%F0%9F%8E%A7%20edm,%F0%9F%8E%A4%20hiphop,%F0%9F%8E%99%EF%B8%8F%20news,%F0%9F%8E%B5%20pop&lat=47.51951505778901&lng=1.6779639902073742&z=6" target="civildefense"><img src="radio-europe.jpg" alt="Map of Western Europe with playable streaming radio station markers"></a>
+          <div class="carousel-caption">
+	    <span>People control the topics, and they do not have to be about safety.</span>
+	    <span>Here are playable streaming radio stations by category.</span>
+	    <a href="/?tags=%F0%9F%8E%BC%20classical,%F0%9F%8E%A7%20edm,%F0%9F%8E%A4%20hiphop,%F0%9F%8E%99%EF%B8%8F%20news,%F0%9F%8E%B5%20pop&lat=47.51951505778901&lng=1.6779639902073742&z=6" target="civildefense">Show me!</a>
+	  </div>
         </div>
 
         <div class="carousel-slide">
@@ -94,7 +101,7 @@
     <!-- <li>Alerts disappear after 24 hours—this is not an archive or long-term storage system. (This Winter, users will be able to download tamper-evident reports for use in other systems.)</li> -->
   </ul>
 
-  <a href="/?lang=en" class="launch-btn" target="civildefense">
+  <a href="/?tags=%F0%9F%8E%B8%20classic%20rock,%F0%9F%8E%BC%20classical,%F0%9F%A4%A0%20country,%F0%9F%8E%B7%20jazz,%F0%9F%8E%99%EF%B8%8F%20news,%F0%9F%8E%B5%20pop&z=5&lang=en" class="launch-btn" target="civildefense">
     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
     Try it!
   </a>

package/public/about/es.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>La Aplicación de Defensa Civil</title>
+  <title>La App de Civil Defense</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
@@ -15,8 +15,10 @@
 <!-- ── HERO ──────────────────────────────────────────────────── -->
 <header class="hero">
   <div class="hero-inner">
-    <img class="hero-logo" src="civil-defense.png" alt="Logo de Defensa Civil">
-    <h1>La Aplicación de <span>Defensa Civil</span></h1>
+    <img class="hero-logo" src="civil-defense.png" alt="Logotipo de Civil Defense">
+    <h1>La App de <span>Civil Defense</span></h1>
+  <!--   <div class="hero-divider"></div> -->
+  <!--   <p class="hero-tagline">Realtime crowdmapping that is resistant to tracking, censorship, and takedown</p> -->
   </div>
   <div class="language-selector">
     <label for="language">Idioma:</label>
@@ -28,7 +30,7 @@
 </header>
 
 <!-- ── CAROUSEL ──────────────────────────────────────────────── -->
-<section class="carousel-section" aria-label="Capturas de pantalla de la aplicación">
+<section class="carousel-section" aria-label="Capturas de pantalla de la app">
 
   <div class="carousel-wrap">
     <div class="carousel-track-outer">
@@ -36,34 +38,50 @@
 
         <div class="carousel-slide">
           <img src="broadcast.png" alt="Una aplicación móvil mostrando alertas">
-          <div class="carousel-caption">Mapeo colaborativo en tiempo real resistente al rastreo, la censura y el bloqueo.</div>
+          <div class="carousel-caption">Mapeo colectivo en tiempo real, resistente al rastreo, la censura y la eliminación.</div>
         </div>
 
         <div class="carousel-slide">
-          <img src="flood-fire-ice.png" alt="Vista del mapa con marcadores de alerta dispersos por un vecindario">
+          <a href="/?tags=%F0%9F%A9%B7%20community%20%20DEMO,%F0%9F%91%81%EF%B8%8F%20observer%20DEMO,%F0%9F%A7%B0%20utility%20DEMO&lat=44.942473404432015&lng=-93.26251878766926&z=14" target="civildefense"><img src="streets-of-minneapolis.jpg" alt="Vista de mapa que muestra marcadores de alerta dispersos por un vecindario"></a>
           <div class="carousel-caption">Como en Twitter, tú creas los temas.<br>Pero solo recibes alertas según tu mapa actual.<br>Como en Snapchat, las alertas desaparecen después de 24 horas.</div>
         </div>
 
         <div class="carousel-slide">
-          <img src="conversation-and-image.png" alt="Mapa con una ventana emergente de alerta abierta mostrando una foto y comentarios">
-          <div class="carousel-caption">Haz clic en un marcador para leer y añadir comentarios y archivos adjuntos.</div>
+          <a href="/?tags=%F0%9F%91%81%EF%B8%8F%20observer%20DEMO&lat=44.95924556664652&lng=-93.24730055745023&z=16" target="civildefense"><img src="checkpoint.jpg" alt="Mapa con una ventana de alerta abierta que muestra una foto y un hilo de comentarios"></a>
+          <div class="carousel-caption">
+	    <span>Haz clic en un marcador para leer y agregar comentarios y archivos adjuntos.</span>
+	    <a href="/?tags=%F0%9F%91%81%EF%B8%8F%20observer%20DEMO&lat=44.95924556664652&lng=-93.24730055745023&z=16" target="civildefense">Muéstrame!</a>
+	  </div>
         </div>
 
         <div class="carousel-slide">
-          <img src="streaming-radio.png" alt="Mapa de Norteamérica con marcadores de estaciones de radio en streaming reproducibles">
-          <div class="carousel-caption">Las personas controlan los temas, y no tienen que ser sobre seguridad. Aquí hay estaciones de radio en streaming reproducibles por categoría.</div>
+          <a href="/?tags=%F0%9F%8E%BC%20classical,%F0%9F%8E%A7%20edm,%F0%9F%8E%A4%20hiphop,%F0%9F%8E%99%EF%B8%8F%20news,%F0%9F%8E%B5%20pop&lat=47.51951505778901&lng=1.6779639902073742&z=6" target="civildefense"><img src="radio-europe.jpg" alt="Mapa de Europa Occidental con marcadores de estaciones de radio en streaming reproducibles"></a>
+          <div class="carousel-caption">
+	    <span>Las personas controlan los temas, y no tienen que tratar sobre seguridad.</span>
+	    <span>Aquí hay estaciones de radio en streaming reproducibles por categoría.</span>
+	    <a href="/?tags=%F0%9F%8E%BC%20classical,%F0%9F%8E%A7%20edm,%F0%9F%8E%A4%20hiphop,%F0%9F%8E%99%EF%B8%8F%20news,%F0%9F%8E%B5%20pop&lat=47.51951505778901&lng=1.6779639902073742&z=6" target="civildefense">Muéstrame!</a>
+	  </div>
         </div>
 
         <div class="carousel-slide">
           <video controls src="CivilDefense.mp4"></video>
-          <div class="carousel-caption">Un video de presentación de 30 segundos generado con IA. (En Inglés.)</div>
+          <div class="carousel-caption">Un video de 30 segundos con ambientación generada por IA.</div>
         </div>
 
+        <!-- <div class="carousel-slide"> -->
+        <!--   <img src="hero.png" alt="One man with shoping bags in Tiananmen Square, facing an enormous column of tanks."> -->
+        <!--   <div class="carousel-caption">Bear witness.</div> -->
+        <!-- </div> -->
+
+        <!-- <div class="carousel-slide"> -->
+        <!--   <img src="nazis.png" alt="WWII-style poster exhorting the public to use Civil Defense in case of Nazi attack."> -->
+        <!-- </div> -->
+
       </div>
     </div>
 
     <button class="carousel-btn prev" id="prevBtn" aria-label="Diapositiva anterior">&#8249;</button>
-    <button class="carousel-btn next" id="nextBtn" aria-label="Diapositiva siguiente">&#8250;</button>
+    <button class="carousel-btn next" id="nextBtn" aria-label="Siguiente diapositiva">&#8250;</button>
 
     <div class="carousel-dots" id="carouselDots" role="tablist" aria-label="Posición del carrusel"></div>
   </div>
@@ -75,67 +93,71 @@
   <h1>Qué Puedes Hacer Con Ella</h1>
 
   <ul>
-    <li>Advertir a otros sobre peligros tocando el mapa.</li>
-    <li>Añadir comentarios, fotos, videos u otros archivos adjuntos.</li>
-    <li>Recibir notificaciones de nuevas alertas cerca de ti o en tu mapa actual.</li>
-    <li>Compartir en redes sociales, por mensaje de texto o correo electrónico.</li>
-    <li>Discutir una alerta mediante videoconferencia segura. (Disponible este invierno.)</li>
+    <li>Advierte a otros sobre un peligro tocando el mapa.</li>
+    <li>Agrega comentarios, fotos, videos u otros archivos adjuntos.</li>
+    <li>Recibe notificaciones de nuevas alertas cerca de ti o en tu mapa actual.</li>
+    <li>Comparte en redes sociales, mensaje de texto o correo electrónico.</li>
+    <li>Discute una alerta mediante videoconferencia segura. (Disponible este otoño.)</li>
+    <!-- <li>Alerts disappear after 24 hours—this is not an archive or long-term storage system. (This Winter, users will be able to download tamper-evident reports for use in other systems.)</li> -->
   </ul>
 
-  <a href="/?lang=es" class="launch-btn" target="civildefense">
+  <a href="/?tags=%F0%9F%8E%B8%20classic%20rock,%F0%9F%8E%BC%20classical,%F0%9F%A4%A0%20country,%F0%9F%8E%B7%20jazz,%F0%9F%8E%99%EF%B8%8F%20news,%F0%9F%8E%B5%20pop&z=5&lang=es" class="launch-btn" target="civildefense">
     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
     ¡Pruébala!
   </a>
 
-  <h1>Transmite con Seguridad</h1>
+  <!-- <hr class="rule"> -->
+
+  <h1>Difunde de Forma Segura</h1>
 
   <h2>Resiste el Rastreo</h2>
   <ul>
-    <li>No puedes ser identificado como persona porque no hay inicio de sesión, registro ni cuentas. No se utiliza número de teléfono ni correo electrónico. No hay tienda de aplicaciones que registre las descargas. Los usuarios pueden optar por permitir que otros los reconozcan en múltiples interacciones, sin revelar su identidad real.</li>
-    <li>Es extremadamente difícil identificar tu dirección IP o los patrones de red, porque las alertas se distribuyen de teléfono a teléfono a través de una red entre pares.</li>
-    <li>Las notificaciones se envían directamente a través de la aplicación en primer plano en tu teléfono, sin pasar por el servicio de mensajería de Apple o Google. (Las notificaciones con la aplicación en segundo plano estarán disponibles este invierno.)</li>
-    <li>Cada alerta desaparece de toda la red después de 24 horas. No se recopilan registros de mensajes, comentarios ni temas solicitados, y este no es un sistema de archivo ni de almacenamiento a largo plazo.</li>
+    <li>No puedes ser identificado como persona porque no hay inicio de sesión, registro ni cuentas. No se usa ningún número de teléfono ni correo electrónico. Ninguna tienda de aplicaciones registra las descargas. Los usuarios pueden optar por dejar que otros los reconozcan en múltiples interacciones — sin revelar su identidad real.</li>
+    <li>Es extremadamente difícil identificar tu dirección IP o tus patrones de red, porque las alertas se distribuyen de teléfono a teléfono a través de una red entre pares (peer-to-peer).</li>
+    <li>Las notificaciones se envían directamente a través de la app en primer plano en tu teléfono, sin pasar por el servicio de mensajería de Apple o Google. (Las notificaciones en segundo plano estarán disponibles este invierno.)</li>
+    <li>Cada alerta desaparece de toda la red después de 24 horas. No se recopilan registros de mensajes, comentarios o temas solicitados, y este no es un sistema de archivo ni de almacenamiento a largo plazo.</li>
   </ul>
 
   <h2>Resiste la Censura</h2>
   <ul>
-    <li>Ningún usuario puede ser censurado porque no hay cuentas. Nadie puede robar la información de tu cuenta porque no existe.</li>
-    <li>Ningún contenido puede ser censurado; no hay una organización central que controle la red o tenga poder para modificar el contenido.</li>
+    <li>Ningún usuario puede ser censurado porque no existen cuentas. Nadie puede robar la información de tu cuenta porque no la hay.</li>
+    <li>Ningún contenido puede ser censurado; no existe una organización central que controle la red o tenga poder para alterar el contenido.</li>
   </ul>
 
-  <h2>Resiste el Bloqueo</h2>
+  <h2>Resiste el Cierre</h2>
   <ul>
-    <li>Ninguna tienda de aplicaciones puede bloquear Defensa Civil: la aplicación es simplemente una página web.</li>
-    <li>Bloquear servidores web o nombres de dominio no puede impedir el acceso a quienes ya la tienen, porque la aplicación guarda en caché todo lo que necesita en el primer uso. El <a href="https://github.com/yz-social/civildefense.io" target="yz.other" rel="noopener">código fuente abierto</a> está disponible para que cualquiera pueda alojar un espejo alternativo.</li>
-    <li>No hay servidor de back-end ni centro de datos que bloquear. Todos los datos de alertas son completamente entre pares. Todos los espejos comparten esta red: una publicación en <a href="https://civildefense.io" target="civildefense">civildefense.io</a> aparece en el espejo de <a href="https://ki1r0y.com" target="ki1r0y" rel="noopener">ki1r0y.com</a> y viceversa.</li>
-    <li>Bloquear el tráfico de red es extremadamente difícil porque los datos de bajo nivel son idénticos al tráfico de videoconferencia.</li>
-    <li>Defensa Civil es muy resistente a los ataques de denegación de servicio. Sin embargo, requiere una conexión a Internet funcional y, por sí sola, no ofrece protección contra un corte completo de Internet.</li>
+    <li>Ninguna tienda de aplicaciones puede bloquear Civil Defense — la app es solo una página web.</li>
+    <li>Cerrar servidores web o nombres de dominio no puede bloquear el acceso de quienes ya lo tienen, porque la app almacena en caché todo lo que necesita desde el primer uso. El <a href="https://github.com/yz-social/civildefense.io" target="yz.other" rel="noopener">código de código abierto</a> está disponible para que cualquiera pueda alojar un espejo alternativo.</li>
+    <li>No existe un servidor backend ni un centro de datos que se pueda derribar. Todos los datos de las alertas son completamente peer-to-peer. Todos los espejos comparten esta red: una publicación en <a href="https://civildefense.io" target="civildefense">civildefense.io</a> aparece en el espejo <a href="https://ki1r0y.com" target="ki1r0y" rel="noopener">ki1r0y.com</a>, y viceversa.</li>
+    <li>Bloquear el tráfico de la red es extremadamente difícil, porque los datos de bajo nivel son idénticos al tráfico de videoconferencias.</li>
+    <li>Civil Defense es altamente resistente a los ataques de denegación de servicio (DoS). Sin embargo, sí requiere una conexión a Internet funcional, y por sí sola no ofrece ninguna protección contra un cierre total de Internet.</li>
   </ul>
+  <!-- <hr class="rule"> -->
 
   <h1>El Panorama General</h1>
-  <p>La Defensa Civil opera en la <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">red Axona</a>. Ambos son gratuitos y de código abierto.</p>
-  <p>Axona es un descendiente moderno de las antiguas <a href="https://en.wikipedia.org/wiki/Peer-to-peer" target="yz.other" rel="noopener">redes entre pares</a> como <a href="https://en.wikipedia.org/wiki/Napster">Napster</a>. Tiene un mecanismo único de enrutamiento autocurativo que utiliza técnicas de aprendizaje neuronal para encontrar la mejor manera de distribuir alertas. Es análogo a <a href="https://en.wikipedia.org/wiki/Tor_(network)" target="yz.other" rel="noopener">TOR</a> (The Onion Router), pero diseñado desde cero para funcionar en navegadores móviles y de escritorio.</p>
-  <p>También estamos desarrollando un sistema integral de criptografía preparado para la era cuántica que añadirá grupos privados para Defensa Civil y cualquier software en la red. Creemos que hay muchas aplicaciones en las que los desarrolladores, los usuarios y el público en general se benefician del software abierto y las redes seguras y descentralizadas, sin tiendas de aplicaciones, servidores ni centros de datos. Más allá de Defensa Civil, también estamos desarrollando <a href="https://en.wikipedia.org/wiki/Distributed_computing" target="yz.other" rel="noopener">colaboración multiusuario a gran escala</a> y <a href="https://poverty-action.org/inclusive-instant-payment-systems-evidence-based-approach-design-impact" target="yz.other" rel="noopener">Sistemas de Pago Instantáneo Inclusivos</a>.</p>
+  <p>Civil Defense funciona sobre la red <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">Axona</a>. Ambos son gratuitos y de código abierto.</p>
+  <p>Axona es un descendiente moderno de las antiguas <a href="https://en.wikipedia.org/wiki/Peer-to-peer" target="yz.other" rel="noopener">redes peer-to-peer</a>, como <a href="https://en.wikipedia.org/wiki/Napster">Napster</a>. Cuenta con un mecanismo único de enrutamiento autorreparable que utiliza técnicas de aprendizaje neuronal para encontrar la mejor forma de distribuir las alertas. Es análogo a <a href="https://en.wikipedia.org/wiki/Tor_(network)" target="yz.other" rel="noopener">TOR</a> (The Onion Router), pero diseñado desde cero para funcionar en navegadores móviles y de escritorio.</p>
+  <p>También estamos desarrollando un completo sistema de criptografía preparado para la era cuántica, que añadirá grupos privados para Civil Defense y para cualquier software de la red. Creemos que existen muchas aplicaciones en las que los desarrolladores, los usuarios y el público en general se benefician de un software abierto y de redes descentralizadas y seguras — sin tiendas de aplicaciones, servidores ni centros de datos. Más allá de Civil Defense, también estamos desarrollando <a href="https://en.wikipedia.org/wiki/Distributed_computing" target="yz.other" rel="noopener">colaboración multiusuario</a> a gran escala y <a href="https://poverty-action.org/inclusive-instant-payment-systems-evidence-based-approach-design-impact" target="yz.other" rel="noopener">Sistemas de Pago Instantáneo Inclusivos</a>.</p>
+
 
 <div class="centered">
-  <img src="serving-you.jpg" alt="Cartel de la Semana de la Defensa Civil: A su servicio en caso de emergencia">
+  <img src="serving-you.jpg" alt="Cartel de la Semana de la Defensa Civil - Sirviéndote en tiempos de emergencia">
 </div>
 
 <div class="centered">
-  <img src="prevail.jpg" alt="Póster de Defensa Civil de la Guerra Fría: Preparar, proteger, prevalecer">
+  <img src="prevail.jpg" alt="Cartel de Defensa Civil de la Guerra Fría - Prepárate, Protege, Prevalece">
 </div>
 
 <div class="centered">
-  <img src="nazis.png" alt="Póster de estilo de la Segunda Guerra Mundial que exhorta al público a usar Defensa Civil en caso de ataque nazi.">
+  <img src="nazis.png" alt="Cartel estilo Segunda Guerra Mundial que exhorta al público a usar la Defensa Civil en caso de ataque nazi.">
 </div>
 
 </main>
 
-
 <!-- ── FOOTER ─────────────────────────────────────────────────── -->
 <footer>
-  <p><a href="/?lang=es" target="civildefense">civildefense.io</a> &mdash; Mapeo colaborativo seguro y gratuito para poblaciones vulnerables.<br>
-  Usamos con gratitud software abierto de:
+  <p><a href="/?lang=es" target="civildefense">civildefense.io</a> &mdash; Mapeo colectivo seguro y gratuito para poblaciones vulnerables.<br>
+  Agradecemos el uso de software abierto de:
             <a href="https://leafletjs.com/" target="yz.other" rel="noopener">Leaflet</a>,
             <a href="https://www.openstreetmap.org/" target="yz.other" rel="noopener">OpenStreetMap</a>,
             <a href="http://s2geometry.io" target="yz.other" rel="noopener">S2Geometry</a>,

package/public/about/style.css

@@ -155,6 +155,7 @@ a:hover { color: var(--red); }
     border-top: 2px solid var(--red);
     min-height: 3.4rem;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
 }

package/public/index.html

@@ -161,6 +161,17 @@
 
       <md-menu positioning="popover" id="popoverMenu"></md-menu>
       <ul class="combobox-listbox hidden" id="knownTagsListbox" role="listbox"></ul>
+
+      <section class="firstConversation">
+	<div class="teach share"></div>
+	<div class="teach correspondent"></div>
+	<div class="teach attach"></div>
+      </section>
+      <section class="firstPublish">
+	<div class="teach correspondent"></div>
+	<div class="teach changeHashtag"></div>
+      </section>
+
     </section>
     <script type="module" src="javascripts/main.js"></script>
   </body>

package/public/javascripts/alert.js

@@ -2,17 +2,20 @@ import * as L from 'leaflet';
 import { P2PWebNetwork } from './p2pWebNetwork.js';
 import { Int } from './translations.js';
 import { map, trackMap, showMessage } from './map.js';
-import { networkPromise, resetInactivityTimer, notificationsAllowed, tooltip, clickTip, openAbout, delay, osName } from './main.js';
+import { networkPromise, resetInactivityTimer, notificationsAllowed, tooltip, clickTip, getText, openAbout, delay, osName } from './main.js';
 import { consume } from './display.js';
 import { Hashtags } from './hashtags.js';
 import { Agent } from './agent.js';
 import { Conversation, Reply } from './conversation.js';
-import { alertTopic, topicRegion, cellHex, topicCell } from './versions.js';
+import { alertTopic, topicRegion, cellHex, topicCell, topicTag } from './versions.js';
 import { getContainingCells, getSmallestCellId, getSubdivision, findCoverCellsByMinMaxLatLng, cellContains, pointFromLatLng, cellFromCellID } from './s2.js';
 const { localStorage, getComputedStyle, URL, URLSearchParams, domtoimage } = globalThis;
 
 
 export function getShareableURL(tag = null, tags = Hashtags.getSubscribe()) { // Answer a url that reflects application state.
+  // Regardless of whether an alert tag is given, the receiving user is always given a lat/lng:
+  // - To position their map with the same coverage as the sender
+  // - In case the alert has expired, rolled over, or included in an aggregate.
   const params = new URLSearchParams(location.search);
   const zoom = map.getZoom();
   const { lat, lng } = map.getCenter();
@@ -118,20 +121,22 @@ export class Alert extends Conversation { // A wrapper around L.marker
   // Conversation.ensure is the subscription handler, and it keeps track of the instances by tag, initializing a new one if needed.
   initialize({topic, payload, hashtag, tag, agent, issuedTime, ...rest}) { // Make appropriate instance for a new individual tag, or update aggregate.
 
+    const eventName = topic.name;
+    const subscriptions = this.constructor.subscriptions;
     if (!Hashtags.isSubscribed(hashtag)) return null; // A subscribed event may have been in flight while unsubscribing. Caller destroys instance.
+    if (!subscriptions.hasOwnProperty(eventName)) return null; // An event may have been in flight while zooming or panning.
     const now = Date.now(),
 	  expiration = issuedTime + ttl,
           remaining = expiration - now;
     if (remaining < 0) return null;  // Network shouldn't send us expired, but if it does, let its instance be destroyed.
 
-    const eventName = topic.name;
     let keep = this; // Instance to be kept as marker.
     let aggregate = this.constructor.getAggregate(eventName); // If we already have one for this eventName
 
     // Each new initialization gets counted, which may be more than the network rollover.
     // We do not "back up" for deletions and expirations - i.e., subtract and possibly go back to individual alerts.
     // Note that initialize() will not be called for an event handler that has a tag (msgId) the same as one we have already seen for a different cell scale.
-    this.constructor.subscriptions[eventName]++;
+    subscriptions[eventName]++;
     
     if (aggregate) {
       keep = null; // This new instance is superfluous. Tell ensure() to destroy it...
@@ -215,20 +220,16 @@ export class Alert extends Conversation { // A wrapper around L.marker
       console.log('updating subscriptions', {added, dropped, newKeys, oldKeys});
 
       // Before subscribing, as that that may bring in an alert with the same tag as one being cleared.
-      if (this.aggregateLimit) this.transferOrClearEventMarkers(added, dropped, newKeys, oldKeys); 
+      if (this.aggregateLimit) {
+	// TODO: more efficient way?
+	new Set(added.map(topicTag)).forEach(tag => {
+	  const hasTag = topicName => topicTag(topicName) === tag;
+	  this.transferOrClearEventMarkers(added.filter(hasTag), dropped.filter(hasTag), newKeys, oldKeys);
+	});
+      }
 
       for (const key of added) await subscribe(key, data => Alert.ensure(data));
       for (const key of dropped) await subscribe(key, null);
-
-      // for (const alert of this.items) { // fixme remove
-      // 	if (this.subscriptions[alert.eventName] == undefined) {
-      // 	  let kind = added.includes(alert.eventName) && 'added';
-      // 	  kind ||= dropped.includes(alert.eventName) && 'dropped';
-      // 	  kind ||= Object.keys(newKeys).includes(alert.eventName) && 'new';
-      // 	  kind ||= Object.keys(oldKeys).includes(alert.eventName) && 'old';
-      // 	  throw new Error(`${kind} ${alert.eventName} has no count after subscription update.`);
-      // 	}
-      // }
     });
   }
 
@@ -237,15 +238,16 @@ export class Alert extends Conversation { // A wrapper around L.marker
   // newKeys/oldKeys are a map of the currently subscribed eventName and the count of events for that cell+hashtag
   static subscriptions = {}; // maps currently active eventNames (<mumble>:<cellID>:<hashtag>) to count of event received for it.
   static aggregateLimit = parseInt(new URLSearchParams(location.search).get('max') || 100);  // How many individuals are allowed before we aggregate.
+  static MAX_MAP_ZOOM = 19; // If the map is already zoomed to this, there's no place else to go.
   static cellCountOverLimit(eventName, countsDictionary = this.subscriptions) { // Have we received enough that we must show an aggregate?
-    return countsDictionary[eventName] >= this.aggregateLimit;
+    return (countsDictionary[eventName] >= this.aggregateLimit) && (map.getZoom() < this.MAX_MAP_ZOOM);
   }
   static getAggregate(eventName) { // Answer the existing aggregate for this cell, if any.
     return this.getItem(eventName); // While individual Alerts are stored in items/conversations by tag, the tag for aggregate is the eventName.
   }
   logAlert(label = '') { // For debugging, when an individual or aggregate marker is clicked, show the alert, cell, and count in console.
-    const {lat, lng, eventName} = this;
-    console.warn(`${label} lat: ${lat}, lng: ${lng}, ${eventName}: ${this.constructor.subscriptions[eventName]}`);
+    const {lat, lng, tag, eventName} = this;
+    console.warn(`${label} lat: ${lat}, lng: ${lng}, ${eventName}: ${this.constructor.subscriptions[eventName]}, ${tag}`);
   }
   noteEventName(eventName) { // Be a part of the specified grouping.
     if (this.eventName === eventName) return;
@@ -259,9 +261,10 @@ export class Alert extends Conversation { // A wrapper around L.marker
       const latLng = s2.LatLng.fromPoint(point);
       return [latLng.lat * radiansToDegrees, latLng.lng * radiansToDegrees];
     });
-    const border = this.cellBorder = L.polygon(corners, {color: 'red'});
+    const border = this.cellBorder = L.polygon(corners, {color: this.constructor.md_sys_color_secondary, fillOpacity: 0.1});
     border.addTo(map);
   }
+  static md_sys_color_secondary = '#BD2E2F';
   static forEachAlertOf(eventName, callback, alerts = this.items) { // Apply callback to each of alerts matching eventName.
     // TODO? Record a cell's Alert's more efficiently, so that we don't have to cycle through everything.
     alerts.forEach((alert, index, alerts) => (alert.eventName === eventName) && callback(alert, index, alerts));
@@ -293,8 +296,11 @@ export class Alert extends Conversation { // A wrapper around L.marker
     setTimeout(() => pin.classList.toggle('starting', false), 100);
     marker.unbindPopup();
     marker.off('click');
-    marker.on('click', event => this.logAlert('FIXME go down one level'));
-    tooltip(element, Int`Zoom in on multiple ${hashtag} alerts.`); // fixme Int.
+    marker.on('click', event => {
+      this.logAlert();
+      this.constructor.zoomOn(this.lat, this.lng, hashtag);
+    });
+    tooltip(element, Int`Zoom in on multiple alerts in this area.`);
     this.noteEventName(this.tag = eventName);
     if (tag !== eventName) {
       networkPromise.then(async contact => contact.subscribe({eventName: tag, region, handler: null})); // Unsubscribe from replies.
@@ -441,6 +447,13 @@ export class Alert extends Conversation { // A wrapper around L.marker
     if (this.publishing) { console.log('skiping overlapping publish'); return null; } // do not stack them up.
     try {
       this.publishing = true;
+      const cells = getContainingCells(lat, lng);
+      const eventNames = cells.map(cell => alertTopic(cell, hashtag));
+      if (payload && eventNames.some(eventName => this.getAggregate(eventName))) { // Attemtpt to publish where we are showing an aggregate.
+	// There could already be an alert there, so zoom instead.
+	this.zoomOn(lat, lng, hashtag);
+	return null;
+      }
 
       const contact = await networkPromise; // subtle: The rest of this all happens synchronously, with any null payloads definitely first.
       let oldCells = null, oldHash, oldTag = null; // Recorded for logging, below.
@@ -468,10 +481,8 @@ export class Alert extends Conversation { // A wrapper around L.marker
 	}
       }
 
-      const cells = getContainingCells(lat, lng);
       const region = P2PWebNetwork.regionCode(lat, lng);
-      for (const cell of cells) {
-	const eventName = alertTopic(cell, hashtag);
+      for (const eventName of eventNames) {
 	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,
@@ -498,6 +509,10 @@ export class Alert extends Conversation { // A wrapper around L.marker
       this.publishing = false;
     }
   }
+  static zoomOn(lat, lng, hashtag = '', zoom = map.getZoom() + 1) {
+    if (hashtag) showMessage(Int`There are already at least ${this.aggregateLimit} alerts of type "${hashtag}" in the colored region. Zooming in to get a better look.`);
+    map.setZoomAround([lat, lng], zoom);
+  }
   
   static noMessage = Int`No additional information.`;
   static closePopup() { // Close any open popup.
@@ -547,6 +562,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
 
   needsRedisplay = true;
   ensureContent(popup = this.marker.getPopup()) { // Set content and handlers in popup if/as needed.
+    if (!popup) return;
     if (!popup.isOpen()) return;
     this.logAlert();
     if (!this.needsRedisplay) {
@@ -562,8 +578,15 @@ export class Alert extends Conversation { // A wrapper around L.marker
     delay(100).then(() => {
       this.marker.getPopup().update();
       this.initializeHandlers(popup);
+      this.teach('firstConversation');
+      if (Agent.isMine(this.agent)) this.teach('firstPublish');
     });
   }
+  teach(classname) {
+    if (localStorage.getItem(classname)) return;
+    localStorage.setItem(classname, '1');
+    document.body.classList.toggle(classname, true);
+  }
   clearAvatars(popup = this.marker?.getPopup()) {
     popup?.getElement()?.querySelectorAll('.correspondent[data-tag]')
       .forEach(element => Agent.ensure({tag: element.dataset.tag}).removeElement(element, 'mixed', element.classList.contains('avatar') ? 'avatar' : 'handle'));
@@ -574,6 +597,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
     const replyButton = replyInput.querySelector('md-filled-icon-button');
     const replyAttachButton = replyInput.querySelector('md-tonal-icon-button');
     const fileChooser = popupElement.querySelector('input[type="file"]');
+    replyInput.onfocus = event => resetInactivityTimer();
     replyInput.oninput = event => {
       replyButton.removeAttribute('disabled');
       const input = event.currentTarget;
@@ -582,7 +606,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
       input.rows = internalHighWater;
     };
     clickTip(replyButton, Int`Post your reply.`, event => this.postReply(event));
-    clickTip(replyAttachButton, Int`Attach a file to your reply.`, event => { resetInactivityTimer(); fileChooser.click(); });
+    clickTip(replyAttachButton, getText('.teach.attach'), event => { resetInactivityTimer(); fileChooser.click(); });
     fileChooser.onchange = event => {
       resetInactivityTimer();
       replyButton.removeAttribute('disabled');
@@ -597,9 +621,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
       const isAvatar = correspondent.classList.contains('avatar');
       if (agent.addElement(correspondent, 'mixed', isAvatar ? 'avatar' : 'handle')) {
 	const isMine = Agent.isMine(tag);
-	clickTip(correspondent, isMine ?
-		 Int`Control how others see me.` :
-		 Int`Control how this person is labeled on my device.`,
+	clickTip(correspondent, getText((isMine ? '.firstPublish' : '.firstConversation') + ' .teach.correspondent'),
 		 event => {
 		   if (isMine) openAbout(event);
 		   else agent.describe(event);
@@ -618,14 +640,14 @@ export class Alert extends Conversation { // A wrapper around L.marker
     const shareable = popupElement.querySelectorAll('.share');
     for (const element of shareable) clickTip(element, element.closest('.reply') ?
 					      Int`Share though ${osName()} the text and attachments of this reply, with a link to open this alert.` :
-					      Int`Share through ${osName()} a link to open this alert.`, event => this.share(event));
+					      getText('.teach.share'), event => this.share(event));
   }
   initChangeHashtag(someParent) { // Init handler on the menu button, if any, as (re-) init of menu for open popup
     const changeHashtag = someParent.querySelector('.changeHashtag');
     if (!changeHashtag) return;
     const menu = document.getElementById('popoverMenu');
     menu.anchorElement = changeHashtag;
-    clickTip(changeHashtag, Int`Change the topic or delete your alert.`, event => {
+    clickTip(changeHashtag, getText('.teach.changeHashtag'), event => {
       consume(event);
       menu.open = !menu.open;
       menu.onclick = consume; // Must be onlick rather than addEventListener.

package/public/javascripts/hashtags.js

@@ -76,16 +76,18 @@ export const Hashtags = {
     }
     return extended;
   },
-  getAll() { // List of all the user's hashtags.
+  getAll() { // List of all the user's extended hashtags.
     return Object.keys(this.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];
+  isSubscribed(key) { // Is this user subscribed to some form of this key.
+    const canonical = canonicalTag(key);                   // no emoji, lower case.
+    const ourExtended = this.canonical2extended[canonical];  // our current version, if any
+    return this.hashtags[ourExtended];
   },
-  isPublish(key) {
+  isPublish(key) { // Is this extended tag (in the user's preferred presentation) the user's current publishing tag?
     return this.hashtags[key] === 'pub';
   },
   backupPublisher: false,
@@ -123,7 +125,7 @@ export const Hashtags = {
     if (resetSubscriptions) {
       // 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.items.forEach(wrapper => this.isSubscribed(wrapper.hashtag) || wrapper.destroy());
       Alert.updateSubscriptions();
     }
   },
@@ -158,6 +160,7 @@ export const Hashtags = {
     newtag.removeAttribute('aria-activedescendant');
     newtag.value = '';
     this.activeIndex = -1;
+    this.selectors = [];
   },
   openSelector() { // Open the autocomplete tag selector
     const { listbox, newtag } = this;
@@ -186,8 +189,9 @@ export const Hashtags = {
   acceptTag() { // Add the new hashtag.
     resetInactivityTimer();
     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
+	.replace(/^#/, '')        // No leading hash
+	.replace(':', '.')        // Replace colon with some other separator.
+	.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;
@@ -226,16 +230,8 @@ export const Hashtags = {
       item.toLowerCase().includes(matchString)
     );
 
-    if (matchString) {
-      const li = document.createElement('li');
-      li.className = 'combobox-empty combobox-option';
-      li.textContent = `Create tag "${query}"`;
-      li.onpointerdown = event => {
-	event.preventDefault();
-	event.stopPropagation();
-	this.acceptTag();
-      };
-      listbox.appendChild(li);
+    if (matchString && !this.selectors.includes(query)) {
+      this.selectors.unshift(query);
     }
     this.selectors.forEach((item, i) => {
       const li = document.createElement('li');
@@ -321,6 +317,7 @@ export const Hashtags = {
     clickTip(newtag, Int`Add a new topic for which the map should show any alerts.`, event => { // Focusing "add topic".
       event.stopPropagation();
       Alert.closePopup();
+      resetInactivityTimer();
       this.renderSelector('');
       if (navigator.maxTouchPoints <= 1) { // Only when no multi-touch. On-screen keyboard makes it shoot off the top.
 	showMessage(Int`Type a new topic name to see any alerts on the map with this topic.`, 'instructions');
@@ -360,13 +357,14 @@ export const Hashtags = {
 	if (this.activeIndex < 0) this.setActive(0);
 	else this.selectValue(this.selectors[this.activeIndex]); // Otherwise select what is active.
         break;
+      default:
+	this.activeIndex = -1;
       }
     };
     newtag.oninput = () => this.renderSelector(newtag.value);
     // 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];

package/public/javascripts/main.js

@@ -24,6 +24,8 @@ var inactivityTimer = null, reconnectCountdown, networkPromise = null;
 export { networkPromise };
 export async function resetInactivityTimer(clearMessage = true) { // if !network, initialize(false), else disconnect after INACTIVITY_SECONDSif not restarted
   //console.log('resetInactivityTimer, networkPromise:', networkPromise);
+  document.body.classList.toggle('firstConversation', false);
+  document.body.classList.toggle('firstPublish', false);
   if (clearMessage) showMessage('');
   clearTimeout(inactivityTimer);
   clearInterval(reconnectCountdown);
@@ -46,6 +48,11 @@ export function clickTip(elementOrQuerySelector, text, clickHandler) { // toolti
   tooltip(element, text);
   element.onclick = clickHandler;
 }
+export function getText(querySelector) {
+  const element = document.querySelector(querySelector);
+  if (!element) throw new Error(`No element found for getText('${querySelector}').`);
+  return element.textContent;
+}
 
 function isWebView() { return /CriOS|(WebView|wv|(iPhone|iPod|iPad)(?!.*Safari))/.test(navigator.userAgent); }
 function isApple() { return navigator.platform.startsWith('Mac') || ['iPhone', 'iPad'].includes(navigator.platform); }
@@ -392,6 +399,11 @@ initText('#describePublic');
 initText('#describeSystem');
 initText('#pickLabels');
 initText('#wipe');
+initText('.firstConversation .teach.correspondent');
+initText('.firstPublish .teach.correspondent');
+initText('.teach.share');
+initText('.teach.attach');
+initText('.teach.changeHashtag');
 
 tooltip('#learnMore', Int`Click to see more information in another tab about what you can do with this app and how it is resistant to tracking, censorship, and takedown.`);
 tooltip('#aboutAnyone2', Int`Click to see the source code and documentation for serving copies of this app in another tab.`);

package/public/javascripts/p2pWebNetwork.js

@@ -45,6 +45,8 @@ export class P2PWebNetwork {
       onDisconnect: network.detached,
       author: false
     });
+    infoLogger ||= null;
+    debugLogger ||= null;
     Object.assign(network, {infoLogger, debugLogger, disconnector: disconnect, transport, nodeIdentity, peer});
 
     network.info(`Created network node for kernel ${this.kernelVersion} region 0x${this.regionCode(location.lat, location.lng).toString(16)}.`);
@@ -65,7 +67,7 @@ export class P2PWebNetwork {
   async disconnect(debugLogger = this.debugLogger) { // Politely close network connection.
     const health = this.peer.health();
     await this.disconnector();
-    if (debugLogger) debugLogger(health);
+    if (debugLogger) this.debug('health at disconnect', health);
     else this.shortHealth(health);
     this.resetStatePromises();
   }

package/public/javascripts/protocol.js

@@ -97,9 +97,9 @@ if (dht < 1) {
 	  const subHandler = handlers[tag];
 	  const inFlightResolver = inFlight[tag];
 
-	  if ((!subHandler && !inFlightResolver) || // debug
-	      ((typeof(subHandler) !== 'function') && (typeof(inFlightResolver) !== 'function')))
-	    console.warn('no handler or request', {tag, rest, subHandler, inFlightResolver, handlers, inFlight});
+	  // if ((!subHandler && !inFlightResolver) || // debug
+	  //     ((typeof(subHandler) !== 'function') && (typeof(inFlightResolver) !== 'function')))
+	  //   console.warn('no handler or request', {tag, rest, subHandler, inFlightResolver, handlers, inFlight});
 
 	  if (subHandler) return subHandler(...rest);
 	  delete inFlight[tag];

package/public/javascripts/pubsub.js

@@ -69,7 +69,7 @@ async function pauseInvoke(...rest) {
   await new Promise(resolve => setTimeout(resolve, throttleMS));
 }
 
-export async function subscribe(topicName, nodeTag, {since = 'all'}) {
+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();
@@ -77,24 +77,25 @@ export async function subscribe(topicName, nodeTag, {since = 'all'}) {
   expire('sub', topicId, id, () => deleteSub(topicId, id), SUBSCRIPTION_TIMEOUT);
   setBucket(data, 'sub', topicId, nodeTag, id);
   if (since) { // invoke handler on any sticky data, but only after we have told client the subscription id.
-    await delay(100);
-    let lastEnvelope = null, lastTime = 0;
-    for (const envelope of getDataValues('pub', topicId)) {
-      switch (since) {
-      case 'all':
-	await pauseInvoke(nodeTag, id, envelope);
-	break;
-      case 'latest':
-	if (envelope.ts > lastTime) {
-	  lastTime = envelope.ts;
-	  lastEnvelope = envelope;
+    setTimeout(async () => {
+      let lastEnvelope = null, lastTime = 0;
+      for (const envelope of getDataValues('pub', topicId)) {
+	switch (since) {
+	case 'all':
+	  await pauseInvoke(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) await pauseInvoke(nodeTag, id, envelope);
 	}
-	break;
-      default: // Must be a timestamp
-	if (envelope.ts === since) await pauseInvoke(nodeTag, id, envelope);
       }
-    }
-    if (lastEnvelope) invoke(nodeTag, id, lastEnvelope);
+      if (lastEnvelope) invoke(nodeTag, id, lastEnvelope);
+    }, 100);
   }
   return {topicName, topicId, id};
 }

package/public/javascripts/translations.js

@@ -77,6 +77,13 @@ const translations = {
   ['#downloadDefer']: {en: "no, not yet", es: "No, todavía no."},
   ['No update at']: {es: "No hay actualizaciones a las"},
   ['is available']: {es: "está disponible"},
+  ['>Zoom in on multiple alerts in this area.']: {es: "Amplía la vista sobre varias alertas en esta zona."},
+
+  ['.firstConversation .teach.correspondent']: {en: "Change how you label this correspondent.", es: "Cambia la forma en que etiquetas a este corresponsal."},
+  ['.firstPublish .teach.correspondent']: {en: "Change how you label yourself.", es: "Cambia la forma en que te etiquetas."},
+  ['.teach.attach']: {en: "Attach a file to your reply.", es: "Adjunta un archivo a tu respuesta."},
+  ['.teach.share']: {en: "Share this alert through other programs.", es: "Comparte esta alerta a través de otros programas."},
+  ['.teach.changeHashtag']: {en: "Delete your alert or change its topic.", es: "Elimina tu alerta o cambia su tema."},
 
   ['#describePrivate1']: {en: "Here are your private labels for", es: "Aquí están sus etiquetas privadas para"},
   ['#describePrivate2']: {en: "to help you recognize posts from them:", es: "Para ayudarte a reconocer publicaciones de ellas:"},
@@ -114,17 +121,11 @@ const translations = {
   [' share a link to this map and topics, with picture of map.']: {es: " comparte un enlace a este mapa y a los temas, junto con una imagen del mapa."},
   ['Recenter the map to where you are in the world.']: {es: "Vuelve a centrar el mapa en tu ubicación actual."},
   ['Post your reply.']: {es: "Publica tu respuesta."},
-  ['Attach a file to your reply.']: {es: "Adjunta un archivo a tu respuesta."},
   ['Delete your reply.']: {es: "Elimina tu respuesta."},
-  ['Change the topic or delete your alert.']: {es: "Cambia el tema o elimina tu alerta."},
   ['Check to see if a new version of the app is available.']: {es: "Comprueba si hay una nueva versión de la aplicación disponible."},
   ['Update to a new version of this app.']: {es: "Actualiza a una nueva versión de esta aplicación."},
-  ['Share though .']: {es: "Comparte a través de "},
   [' the text and attachments of this reply, with a link to open this alert.']: {es: " el texto y los archivos adjuntos de esta respuesta, junto con un enlace para abrir esta alerta."},
-  ['Share through ']: {es: "Comparte un enlace a través de "},
   [' a link to open this alert.']: {es: " para abrir esta alerta."},
-  ['Control how others see me.']: {es: "Controla cómo me ven los demás."},
-  ['Control how this person is labeled on my device.']: {es: "Controla cómo se etiqueta a esta persona en mi dispositivo."},
   ['Choose the label you want to appear for alerts and replies by this user.']: {es: "Selecciona la etiqueta que quieras que aparezca para las alertas y respuestas de este usuario."},
   ["Capture this unique text so that even if the user changes what they share, you'll still see this text for alerts and replies by this user."]: {es: "Captura este texto único para que, aunque el usuario cambie lo que comparte, sigas viendo este texto en las alertas y respuestas de dicho usuario."},
   ["Capture this name they are currently sharing, so that even if the user changes what they share, you'll still see this text for alerts and replies by this user."]: {es: "Guarda el nombre que están compartiendo actualmente, de modo que, aunque el usuario cambie lo que comparte, sigas viendo este texto en las alertas y respuestas de dicho usuario."},
@@ -132,7 +133,10 @@ const translations = {
   ["Capture this image they are currently sharing, so that even if the user changes what they share, you'll still see this image for alerts and replies by this user."]: {es: "Guarda esta imagen que están compartiendo actualmente, de modo que, aunque el usuario cambie lo que comparte, sigas viendo esta imagen en las alertas y respuestas de dicho usuario."},
   ['Choose the picture you want to appear for alerts and replies by this user.']: {es: "Elige la imagen que quieras que aparezca para las alertas y respuestas de este usuario."},
   ['Enable local ']: {es: "Habilita notificaciones locales de "},
-  [' notifcations for map alerts, without going through any servers. Requires that the app be running.']: {es: " para alertas del mapa, sin pasar por ningún servidor. Requiere que la aplicación esté en ejecución."},  
+  [' notifcations for map alerts, without going through any servers. Requires that the app be running.']: {es: " para alertas del mapa, sin pasar por ningún servidor. Requiere que la aplicación esté en ejecución."},
+  ['There are already at least ']: {es: "Ya hay al menos "},
+  [' alerts of type "']: {es: ' alertas de tipo "'},
+  ['" in the colored region. Zooming in to get a better look.']: {es: '" en la región coloreada. Ampliando la imagen para verla mejor.'},
 
 
   ['Too many posts. (5 allowed every 5 minutes.) Removing oldest from this period.']: {es: "Demasiadas publicaciones. (Se permiten 5 cada 5 minutos). Eliminando las más antiguas de este período."},

package/public/javascripts/versions.js

@@ -25,8 +25,11 @@ export function cellHex(cellid) { // Convert cellid BigInt to properly padded he
 export function alertTopic(cellid, tag) { // Return topic name for public info about specified tag in cellid.
   return `civildefense.io:${dataVersion}:${cellHex(cellid)}:${canonicalTag(tag)}`;
 }
+export function topicTag(topicName) { // Return the hashtag.
+  return topicName.slice(topicName.lastIndexOf(':') + 1); // Currently, colon is not allowed in hashtags.
+}
 export function topicCellHex(topicName) { // Return the hex string cell that is baked in to the topic.
-  // Note that canonicalTag(tag) may contain a colon, but dataVersion must not.
+  // dataVersion cannot contain a colon.
   return topicName.match(/civildefense.io:[^:]+:([a-z0-9]+):/)[1];
 }
 export function topicCell(topicName) { // Return the BigInt cell that is baked in to the topic.

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.23';
+const serviceVersion = '4.5.28';
 
 const cacheList = [ // The files we need.
   "/",
@@ -129,7 +129,8 @@ async function cacheFirst({request, event}) {
     // Put clone of response in cache (so that original can be returned.
     // Tell event to keep worker open while we put it, even though we return response immediately.
     const cache = await caches.open(serviceVersion);
-    event.waitUntil(cache.put(request, responseFromNetwork.clone()));
+    event.waitUntil(cache.put(request, responseFromNetwork.clone())
+		    .catch(error => console.error(request.url, mime, error)));
     return responseFromNetwork;
   } catch (error) {
     console.error(request.url, error);

package/public/stylesheets/style.css

@@ -273,16 +273,16 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
     text-align: center;
 }
 .aggregate.alert-pin {
-    font-size: 60px;
-    line-height: 60px;
-    top: -10px;
-    left: -10px;
+    font-size: 40px;
+    line-height: 40px;
+    top: 0px;
+    left: 0px;
     transition: font-size 0.8s;
 }
-.aggregate.alert-pin:after {
+.aggregate.alert-pin:before {
     content: "";
-    width: 70px;
-    height: 70px;
+    width: 50px;
+    height: 50px;
     position: absolute;
     top: -5px;
     left: -5px;
@@ -434,9 +434,93 @@ md-menu {
     display: flex;
     align-items: center;
 }
+
+.teach {
+    position: absolute;
+    z-index: 1000;
+    background: linear-gradient(color-mix(in srgb, var(--md-sys-color-primary), white 40%), var(--md-sys-color-primary));
+    color: white;
+    padding: 10px;
+    border-radius: 12px;
+}
+.changeHashtag {
+    anchor-name: --changeHashtag;
+}
+.correspondent.avatar {
+    anchor-name: --correspondentAvatar;
+}
+.attribution > .share {
+    anchor-name: --share;
+}
+.reply-input [slot="leading-icon"] {
+    anchor-name: --attach;
+}
+md-filter-chip[label="🆘 help"], md-filter-chip[label="🆘 ayuda"] {
+    anchor-name: --topicToggle;
+}
+.leaflet-popup-content-wrapper {
+    anchor-name: --popup;
+}
+body.firstPublish.firstConversation .firstConversation .correspondent,
+body:not(.firstPublish) .firstPublish,
+body:not(.firstConversation) .firstConversation {
+    display: none;
+}
+.teach.share {
+    position-anchor: --share;
+    bottom: calc(anchor(top) + 60px);
+    left: anchor(--popup left);
+    max-width: min(45vw, 310px);
+}
+.teach.correspondent {
+    position-anchor: --correspondentAvatar;
+    bottom: calc(anchor(top) + 15px);
+    left: anchor(left);
+}
+.teach.changeHashtag {
+    position-anchor: --changeHashtag;
+    bottom: calc(anchor(top) + 60px);
+    right: anchor(--popup right);
+    width: min(45vw, 310px);
+}
+.teach.attach {
+    position-anchor: --attach;
+    top: calc(anchor(bottom) + 15px);
+    left: anchor(--popup left);
+    background: linear-gradient(var(--md-sys-color-primary), color-mix(in srgb, var(--md-sys-color-primary), white 40%));
+}
+.teach:after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 0;
+    border-style: solid;
+    border-color: var(--md-sys-color-primary) transparent;
+}
+.teach.share:after {
+    bottom: -60px;
+    left: 30px;
+    border-width: 60px 15px 0;
+}
+.teach.correspondent:after {
+    bottom: -13px;
+    left: 6px;
+    border-width: 15px 15px 0;
+}
+.teach.changeHashtag:after {
+    bottom: -60px;
+    right: 45px;
+    border-width: 60px 15px 0;
+}
+.teach.attach:after {
+    top: -15px;
+    left: 32px;
+    border-width: 0 15px 15px;
+}
 md-outlined-button {
     padding: 10px;
 }
+
 /* .attribution > div:last-child > span { */
 /*     text-wrap: nowrap; */
 /* } */

package/server/location.save.json

@@ -1,4 +1,4 @@
-{
+ {
   "uswest/80": "37,-122",
   "useast/89": "40,-75",
   "uscentle/88": "35,-83",

package/server/websocket.js

@@ -5,7 +5,7 @@ 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]));
+  socket?.send(JSON.stringify([id, envelope]));
 });
 
 function heartbeat() {
@@ -22,7 +22,7 @@ export function configureWebsocket(server) {
     ws.on('message', async message => {
       const [id, methodName, ...rest] = JSON.parse(message);
       const result = await operator[methodName](...rest);
-      ws.send(JSON.stringify([id, result]));
+      if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify([id, result]));
     });
 
     ws.isAlive = true;
@@ -39,8 +39,10 @@ export function configureWebsocket(server) {
   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();
+      if (ws.readyState == WebSocket.OPEN) {
+	ws.isAlive = false;
+	ws.ping();
+      }
       return null;
     });
   }, 20e3);