Wat de eerste echte gebruiksdag opleverde: logging, geschiedenis, uitlijning

Drie dingen die vandaag misgingen of ontbraken, en die alle drie uit gebruik
kwamen en niet uit nadenken.

De allowlist logde niets als een bekende eigenaar terugkwam en niets als er een
geweigerd werd. Daardoor stond er een tweede eigenaar drieentwintig keer aan de
deur zonder dat het log er iets over zei; het stond alleen op de pagina. Nu is er
een regel per eigenaar per keer dat het proces draait, dus ook bij terugkomst en
bij weigering, met een bovengrens omdat een weigering een id bevat dat de ander
zelf verzint. Een geweigerde schrijfactie logt voortaan hoeveel bytes er gevraagd
werden en welke grens gold, met de naam van de variabele erbij.

Allow gooide de geschiedenis weg. Een eigenaar die je alsnog toeliet kreeg "first
seen" op het moment van de klik, terwijl hij al twintig minuten stond te
kloppen. Juist daar wil je zien sinds wanneer. Met een toets erop.

En de knoppen stonden niet recht: id, gegevens en knoppen stonden naast elkaar,
dus de lengte van de gegevensregel bepaalde of de rij afbrak. Een eigenaar met
een last seen duwde zijn knoppen naar de volgende regel en dus naar links.
Nu staan naam en gegevens onder elkaar in een kolom en worden de knoppen altijd
naar rechts geduwd.

Inhoudelijk het belangrijkste: "de eerste eigenaar wint" is te smal. Een enkele
app kan meer dan een eigenaar gebruiken, en de pagina adviseerde de deur te
sluiten zodra de eerste binnen was. Daarmee sluit je je eigen tweede eigenaar
buiten. De tekst zegt nu te wachten tot er een minuut niets nieuws meer bij komt.

Image naar 0.3.0. De digest van 0.2.0 is uit de compose gehaald in plaats van
blijven staan: die zou naar de vorige image wijzen terwijl de tag iets anders
belooft.

Tests: alle vier groen (34, 54, 39 en 61 goed, 0 fout).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

whatsnext-evolu-relay/index.html.template

@@ -184,15 +184,21 @@ button.action.danger { background: var(--neg-bg); border-color: var(--neg); colo
   flex-wrap: wrap;
 }
 .owner:first-of-type { border-top: none; }
+
+/* De naam en de gegevens staan onder elkaar in één kolom, en de knoppen worden
+   met margin-left naar rechts geduwd. Zo staan ze bij elke regel op dezelfde
+   plek. Eerder stonden id, meta en knoppen náást elkaar, en dan bepaalde de
+   lengte van de meta-regel of de rij afbrak: een eigenaar met een 'last seen'
+   duwde zijn knoppen naar de volgende regel en dus naar links, een eigenaar
+   zonder hield ze rechts. */
+.owner .who { flex: 1 1 240px; min-width: 0; }
 .owner .id {
   font-family: var(--font-mono);
   font-size: 0.8rem;
   overflow-wrap: anywhere;
-  flex: 1;
-  min-width: 220px;
 }
-.owner .meta { color: var(--text-ter); font-size: 0.75rem; }
-.owner .buttons { display: flex; gap: 8px; }
+.owner .meta { color: var(--text-ter); font-size: 0.75rem; margin-top: 2px; }
+.owner .buttons { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; }
 
 .empty { color: var(--text-ter); font-size: 0.88rem; font-style: italic; }
 
@@ -257,8 +263,7 @@ footer { color: var(--text-ter); font-size: 0.78rem; text-align: center; margin-
       <div class="grow">
         <div class="stat-val"><span class="pill unknown" id="learning-state">unknown</span></div>
         <p class="hint" id="learning-hint">
-          While this is open, the next device that connects is accepted and remembered. Close it once your
-          own devices are paired.
+          While this is open, owners that connect are accepted and remembered.
         </p>
       </div>
       <button class="action" id="learning-toggle" disabled>Loading</button>
@@ -369,11 +374,14 @@ footer { color: var(--text-ter); font-size: 0.78rem; text-align: center; margin-
     var row = document.createElement('div');
     row.className = 'owner';
 
+    var who = document.createElement('div');
+    who.className = 'who';
+
     var id = document.createElement('div');
     id.className = 'id';
     id.textContent = shorten(entry.id);
     id.title = entry.id;
-    row.appendChild(id);
+    who.appendChild(id);
 
     var meta = document.createElement('div');
     meta.className = 'meta';
@@ -382,7 +390,9 @@ footer { color: var(--text-ter); font-size: 0.78rem; text-align: center; margin-
     if (entry.lastSeen) parts.push('last seen ' + formatTime(entry.lastSeen));
     if (entry.attempts) parts.push(entry.attempts + ' attempts');
     meta.textContent = parts.join(' · ');
-    row.appendChild(meta);
+    who.appendChild(meta);
+
+    row.appendChild(who);
 
     var holder = document.createElement('div');
     holder.className = 'buttons';
@@ -433,8 +443,9 @@ footer { color: var(--text-ter); font-size: 0.78rem; text-align: center; margin-
         setPill(learningPill, 'open', 'ok');
         toggle.textContent = 'Close';
         toggle.disabled = false;
-        learningHint.textContent = 'The next device that connects is accepted and remembered. Close '
-          + 'this once your own devices are paired.';
+        learningHint.textContent = 'Any owner that connects is accepted and remembered. One app can '
+          + 'use more than one owner, so wait until nothing new appears for a minute before you close '
+          + 'this.';
       } else if (status.owners.learning === false) {
         setPill(learningPill, 'closed', 'unknown');
         toggle.textContent = 'Open';