wip schema: arrows between containers

Adds the logical diagram of the project (PNG and its editable Excalidraw
source in docs/) and an Architecture section after the introduction,
with a short description of the data flows.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

README.md

@@ -10,6 +10,22 @@ devices ──514 udp/tcp──▶ logstream (Go) ──HTTP batches──▶ Vi
                               └──── API / UI ◀─────────┘
 ```
 
+## Architecture
+
+![Schéma logique de Logstream](docs/logstream-schema-logique.png)
+
+- **Ingestion**: syslog (UDP/TCP) and Docker container logs both go through `sink()` (reverse DNS
+  on IP hosts), then the `Store` queue, which sends them in batches to VictoriaLogs.
+- **Live view**: `sink()` also publishes each message to the `Hub`, which streams it to the
+  browsers over SSE.
+- **Search**: the HTTP API turns the UI filters into LogsQL queries sent to VictoriaLogs.
+- **State**: tags and source settings live in `/data` (`logstream-data` volume); the logs
+  themselves in the `vlogs-data` volume.
+
+The editable source of the diagram is
+[`docs/logstream-schema-logique.excalidraw`](docs/logstream-schema-logique.excalidraw)
+(open it on [excalidraw.com](https://excalidraw.com)).
+
 ## Getting started
 
 ```bash

web/app.js

@@ -126,6 +126,7 @@ const I18N = {
     hDivision: (s) => `interval ${s}`, hCapped: 'enlarged',
     hCappedTitle: 'The chosen division would exceed 300 intervals over this range: it has been enlarged.',
     hUnzoom: '× Reset zoom', unitDay: 'd',
+    toTop: 'Back to top',
     colRcv: 'Received', colMt: 'Message time', colSev: 'Severity', colHost: 'Host', colApp: 'App', colMsg: 'Message',
     colGrip: 'Drag to resize, double-click for the automatic width',
     resetCols: 'Reset column widths', colsReset: 'Column widths reset',
@@ -254,6 +255,7 @@ const I18N = {
     hDivision: (s) => `intervalle ${s}`, hCapped: 'élargi',
     hCappedTitle: 'La division choisie dépasserait 300 intervalles sur cette plage : elle a été élargie.',
     hUnzoom: '× Annuler le zoom', unitDay: 'j',
+    toTop: 'Revenir en haut',
     colRcv: 'Réception', colMt: 'Heure message', colSev: 'Sévérité', colHost: 'Hôte', colApp: 'App', colMsg: 'Message',
     colGrip: 'Glisser pour redimensionner, double-clic pour la largeur automatique',
     resetCols: 'Réinitialiser les colonnes', colsReset: 'Largeurs de colonnes réinitialisées',
@@ -1517,6 +1519,15 @@ $('#newPill').addEventListener('click', () => {
 });
 window.addEventListener('scroll', debounce(() => { if (window.scrollY <= 80) flushPending(); }, 150), { passive: true });
 
+// "Back to top" button, shown once the page has scrolled a little.
+const syncToTop = () => { $('#toTop').hidden = window.scrollY < 400; };
+window.addEventListener('scroll', syncToTop, { passive: true });
+$('#toTop').addEventListener('click', () => {
+  const smooth = !matchMedia('(prefers-reduced-motion: reduce)').matches;
+  window.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
+});
+syncToTop();
+
 $('#live').addEventListener('click', () => {
   state.live = !state.live;
   store.set('live', state.live ? '1' : '0');

web/index.html

@@ -115,6 +115,9 @@
   <footer class="status">
     <span id="conn" class="conn"></span>
     <span id="stats" class="muted"></span>
+    <button id="toTop" class="icon-btn to-top" type="button" data-i18n-title="toTop" data-i18n-aria="toTop" hidden>
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+    </button>
   </footer>
 
   <dialog id="settingsDlg" class="settings" aria-labelledby="settingsTitle">

web/style.css

@@ -425,6 +425,10 @@ mark.hit { background: var(--hit); color: inherit; border-radius: 3px; padding:
 .conn.ok::before { color: var(--sev-info); }
 .conn.ko::before { color: var(--sev-err); }
 #stats .bad { color: var(--sev-err); }
+/* "Back to top", at the right end of the status bar: never over a log row */
+.to-top { width: 24px; height: 24px; margin: -5px -6px -5px auto; flex: none; } /* no taller bar */
+.to-top svg { width: 16px; height: 16px; }
+.to-top[hidden] { display: none; }
 
 .toast {
   position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%); z-index: 50;