swarm-ui: key message rows on an arrival id and follow the tail on it

At the 2000-message cap the count stops changing, so the page stopped
following the newest message, and every row's index key shifted on each
arrival, remounting all of them. Each message now gets an id when it
arrives; the rows key on it and the scroll follows the newest id. Rows
are memoised on the message, and the events of one frame join the list
in a single update.

frontend/packages/swarm-ui/test/messages.test.mjs

@@ -10,6 +10,7 @@ import {
   messageRow,
   messagesUrl,
   newest,
+  numbered,
   snippet,
 } from "../src/pages/messages/messages.ts";
 
@@ -56,6 +57,46 @@ test("the cap keeps the newest messages and leaves a short list alone", () => {
   assert.equal(newest(all, 10), all);
 });
 
+test("arrivals are numbered in order from the id given", () => {
+  const batch = numbered([msg("a", "b", "x"), msg("c", "d", "y")], 7);
+  assert.deepEqual(
+    batch.map((m) => [m.id, m.body]),
+    [
+      [7, "x"],
+      [8, "y"],
+    ],
+  );
+  assert.deepEqual(numbered([], 3), []);
+});
+
+test("in a full list the newest id still changes with every arrival", () => {
+  // The page follows the tail on the newest id, because the count stops
+  // moving once the cap drops one message per arrival.
+  let list = numbered(
+    [1, 2, 3].map((n) => msg("a", "b", String(n))),
+    0,
+  );
+  const seen = new Set();
+  for (let id = 3; id < 8; id++) {
+    list = newest([...list, ...numbered([msg("a", "b", "n")], id)], 3);
+    assert.equal(list.length, 3);
+    seen.add(list[list.length - 1].id);
+  }
+  assert.equal(seen.size, 5);
+});
+
+test("a number-tagged message keeps its id through the filter and the cap", () => {
+  const all = numbered([msg("atlas", "iris"), msg("a", "b")], 40);
+  assert.deepEqual(
+    filterMessages(all, "atlas").map((m) => m.id),
+    [40],
+  );
+  assert.deepEqual(
+    newest(all, 1).map((m) => m.id),
+    [41],
+  );
+});
+
 test("a snippet is the first non-blank line, cut with an ellipsis", () => {
   assert.equal(snippet("\n\n  hello there \nsecond", 80), "hello there");
   assert.equal(snippet("abcdefghij", 5), "abcd…");