From 745f65db7b2fb4a71eb7e44bb560f439cff857d3 Mon Sep 17 00:00:00 2001
From: tv <tv@krebsco.de>
Date: Tue, 3 Nov 2026 00:07:37 +0100
Subject: dashboard: indicate console following

---
 docs/dashboard.md                |  3 ++-
 src/api/dashboard/dashboard.html | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/docs/dashboard.md b/docs/dashboard.md
index ca58235..9b1c9d7 100644
--- a/docs/dashboard.md
+++ b/docs/dashboard.md
@@ -240,7 +240,8 @@ The messages this node exchanged with its peers, one by one: when (on the 24-hou
 clock, to the millisecond), which way (`→` sent, `←` received, `↛` refused: the
 transport wouldn't send it), with whom, the type (`HELLO`, `SYNC`, `STATUS_REPLY`,
 `LINKS`, …, in its kind's colour, as on the map) and the size. The latest 500, the
-newest at the bottom; scrolled along while at the bottom. They arrive with every update
+newest at the bottom; scrolled along while at the bottom, which `following…` beside the
+title says. They arrive with every update
 (every 2 s). The PINGs the paths layer sends on its own, and the PONGs it answers
 PINGs with, are listed too: under the node at the address they went to, where it is
 known, else under the address. Not listed: WHO and ME, which stay in the layers
diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index f286615..8b62181 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -90,6 +90,10 @@
   section h2 .rates span { text-align: right; }
   section h2 .rates span.unit { text-align: left; }
   section.collapsed h2 .rates { display: none; }
+  /* After the console's filter: that it follows new messages (scrolled to the bottom). */
+  section h2 .following { font-size: 12px; text-transform: none; letter-spacing: 0;
+    margin-left: 1em; font-style: italic; }
+  section.collapsed h2 .following { display: none; }
   /* The right column dragged off to the side: the map takes the width. */
   @media (min-width: 901px) {
     main.right-hidden > section:not(#map) { display: none; }
@@ -273,7 +277,7 @@
   <div id="column-hint" class="note">Drag the space left of these boxes to the right to
     hide the column.</div>
   <section id="console-box">
-    <h2>Console <label class="choice" title="Only the messages with the node or over the link in focus (clicked on the map or in the peers); all while nothing is"><input type="checkbox" id="console-filter">filter selected</label><span id="console-rates" class="rates" title="Messages and bytes per second sent and received, as load averages are: over the last 1, 5 and 15 minutes (exponentially weighted), since the page was opened; with the filter, those with the node or over the link in focus"></span></h2>
+    <h2>Console <label class="choice" title="Only the messages with the node or over the link in focus (clicked on the map or in the peers); all while nothing is"><input type="checkbox" id="console-filter">filter selected</label><span id="console-following" class="following" title="Scrolled to the bottom: new messages are scrolled to as they come; scroll up to stop">following…</span><span id="console-rates" class="rates" title="Messages and bytes per second sent and received, as load averages are: over the last 1, 5 and 15 minutes (exponentially weighted), since the page was opened; with the filter, those with the node or over the link in focus"></span></h2>
     <div class="scroll" id="console-scroll"><div id="console" class="console"></div>
       <div id="console-none" class="note" hidden>No information available</div></div>
   </section>
@@ -2153,12 +2157,23 @@ function messagesArrived(messages) {
   while (log.childElementCount > CONSOLE_LINES) log.firstElementChild.remove();
   filterConsole();
   if (following) scroll.scrollTop = scroll.scrollHeight;
+  showFollowing();
 }
+// `following…` while the console is at its bottom: it scrolls to new messages then
+// (`messagesArrived`); scrolled up, it stays where it is.
+const consoleScroll = document.getElementById("console-scroll");
+function showFollowing() {
+  const scroll = consoleScroll;
+  document.getElementById("console-following").hidden =
+    scroll.scrollTop + scroll.clientHeight < scroll.scrollHeight - 4;
+}
+consoleScroll.addEventListener("scroll", showFollowing, { passive: true });
 function showConsole() {
   document.getElementById("console").replaceChildren(...consoleMessages.map(consoleLine));
   filterConsole();
   const scroll = document.getElementById("console-scroll");
   scroll.scrollTop = scroll.scrollHeight;
+  showFollowing();
 }
 function drawFlows() {
   flowFrame = null;
-- 
cgit v1.3.1