signalk-chiplog 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -6,6 +6,27 @@ All notable changes to Chiplog are documented here. The format follows
 
 ## [Unreleased]
 
+## [2.11.0] - 2026-10-24
+
+### Added
+
+- **Alarms can be left out of the log.** **Log Signal K alarms** turns them off altogether, and **Alarms left out of the
+  log** lists the ones never to record, `*` standing for any characters: `notifications.chartplotter.unknown*` silences
+  a chart plotter raising `unknown114`, `unknown115` and so on. An alarm already in the log is still closed when it
+  clears.
+- **Reconnecting after the server drops out.** When the Signal K server stops answering, or your login expires, the
+  webapp says which in a banner at the bottom of the screen, seen wherever you are on the page, and offers **Reconnect**
+  (with **Sign in** for an expired login, in another tab); once the server answers, pages reload on their own and the
+  banner says when a failed correction can be done again. On the tablet, **Not connected** gets a **Reconnect** button
+  that sends waiting entries at once, and corrections or crew changes that fail offline say so with the same button.
+
+### Changed
+
+- **The online backup sends only what the boat's plan keeps.** When the service says its plan keeps the passages from a
+  date on (Ti Bord's free plan: the last 30 days), older closed passages stay on board and are not sent, and the
+  passages counted for the backup's progress are those of that window. A passage under way is always sent; once the boat
+  is subscribed, everything is sent again, newest first.
+
 ## [2.10.0] - 2026-10-20
 
 ### Added
@@ -462,7 +483,8 @@ First release.
 - REST API under `/plugins/signalk-chiplog/api`, documented in [docs/API.md](docs/API.md).
 - Single SQLite database through Node's built-in `node:sqlite`: no native module to build.
 
-[Unreleased]: https://github.com/ricard33/signalk-chiplog/compare/v2.10.0...HEAD
+[Unreleased]: https://github.com/ricard33/signalk-chiplog/compare/v2.11.0...HEAD
+[2.11.0]: https://github.com/ricard33/signalk-chiplog/compare/v2.10.0...v2.11.0
 [2.10.0]: https://github.com/ricard33/signalk-chiplog/compare/v2.9.0...v2.10.0
 [2.9.0]: https://github.com/ricard33/signalk-chiplog/compare/v2.8.0...v2.9.0
 [2.8.0]: https://github.com/ricard33/signalk-chiplog/compare/v2.7.0...v2.8.0

package/README.md

@@ -128,7 +128,8 @@ an old value.
 Added to the timeline without anyone touching anything:
 
 - **Alarms** — any Signal K notification reaching `alarm` or `emergency` (man overboard, engine alarm, anchor watch…),
-  and when it clears.
+  and when it clears. They can be turned off altogether, or some left out by name: `notifications.chartplotter.unknown*`
+  skips `unknown114`, `unknown115` and every other path starting that way.
 - **Autopilot** — engaged, disengaged, mode changes.
 - **Wind** — true wind, averaged over 2 minutes, rising above 20 and 30 knots and falling back below them
   (configurable).
@@ -260,6 +261,12 @@ shortcuts beside it; where any date is allowed, the calendar has an _Any date_ b
 
 **Helm entry** in the top bar opens the tablet entry app.
 
+**When the server drops out** — Wi-Fi gone, Signal K restarting — a banner at the bottom of the screen says the server
+does not answer and offers **Reconnect**, wherever you are on the page. Once it answers again, pages reload what they
+were showing, and the banner says when a correction that failed can be done again. If your Signal K login has expired
+instead, the message says so, with **Sign in** opening the admin in another tab: sign in there, come back, and the page
+picks up where you left it.
+
 ### Your own boat in the 3D animation ⛵
 
 The 3D view draws a cartoon sailboat. To see yours instead, use **Boat → Use my own boat…** under the animation and pick
@@ -407,6 +414,10 @@ Keep logging. The header shows **Not connected** and how many entries are waitin
 the time it was made, and sent in order as soon as the server answers again, with the position the track recorded at
 that time. An entry sent just before the connection dropped is never logged twice.
 
+The app tries again by itself every few seconds; **Reconnect** beside **Not connected** tries at once, and sends what is
+waiting if the server answers. A correction or a crew change cannot wait like an entry: if it fails for want of a
+connection, it says so with a **Reconnect** button, to do again once connected.
+
 If the server refuses a waiting entry when it comes back — typically nothing to attach it to — it is shown in red in the
 latest entries, to discard.
 
@@ -459,6 +470,8 @@ In the Signal K admin, **Apps & Plugins → Configuration → Chiplog**.
 | Map tiles for the summary                                        | `https://tile.openstreetmap.org/{z}/{x}/{y}.png` | The tiles the summary map is drawn over, e.g. a self-hosted server. Empty draws the track on a plain background.                                                                                             |
 | Logbook language (PDF and summary emails)                        | en                                               | Language of the PDF logbooks on the USB drive and of the summary emails (English or French).                                                                                                                 |
 | Ship's time zone (PDF and summary emails)                        | the server's                                     | Time zone of the PDF logbooks on the USB drive and of the summary emails, e.g. `Europe/Paris`.                                                                                                               |
+| Log Signal K alarms                                              | on                                               | Turn off to leave every alarm out of the log.                                                                                                                                                                |
+| Alarms left out of the log                                       | —                                                | Notification paths never logged; `*` stands for any characters, and the leading `notifications.` may be omitted.                                                                                             |
 | Wind speed thresholds                                            | 20, 30 kn                                        | Logged when the 2-minute average true wind crosses them.                                                                                                                                                     |
 | Barometric drop warning                                          | 4 hPa / 3 h                                      | 0 turns it off.                                                                                                                                                                                              |
 | Log heading changes                                              | on                                               | Turn off to leave heading changes out of the log.                                                                                                                                                            |

package/index.js

@@ -314,6 +314,21 @@ module.exports = function (app) {
         description:
           'IANA time zone the PDF logbook on the USB drive and the passage summary emails are kept in, e.g. Europe/Paris. Empty uses the server’s time zone; downloads from the webapp use the browser’s'
       },
+      alarmsEnabled: {
+        type: 'boolean',
+        title: 'Log Signal K alarms',
+        description:
+          'Records every notification reaching alarm or emergency, when raised and when cleared; turn off to leave alarms out of the log',
+        default: EVENT_DEFAULTS.alarmsEnabled
+      },
+      ignoredAlarms: {
+        type: 'array',
+        title: 'Alarms left out of the log',
+        description:
+          'Notification paths never logged, * standing for any characters: notifications.chartplotter.unknown* leaves out unknown114, unknown115 and so on. The leading notifications. may be omitted',
+        items: { type: 'string' },
+        default: EVENT_DEFAULTS.ignoredAlarms
+      },
       windSpeedThresholds: {
         type: 'array',
         title: 'Wind speed thresholds (knots)',
@@ -647,6 +662,10 @@ module.exports = function (app) {
           ? config.logbookLanguage
           : 'en',
         logbookTimeZone: config.logbookTimeZone || null,
+        alarmsEnabled: config.alarmsEnabled ?? EVENT_DEFAULTS.alarmsEnabled,
+        ignoredAlarms: Array.isArray(config.ignoredAlarms)
+          ? config.ignoredAlarms
+          : EVENT_DEFAULTS.ignoredAlarms,
         windSpeedThresholds: config.windSpeedThresholds ?? EVENT_DEFAULTS.windSpeedThresholds,
         pressureDropThreshold: config.pressureDropThreshold ?? EVENT_DEFAULTS.pressureDropThreshold,
         headingChangeEnabled: config.headingChangeEnabled ?? EVENT_DEFAULTS.headingChangeEnabled,

package/lib/cloud-sync.js

@@ -160,6 +160,9 @@ function createCloudSync({
   let progress = null;
   // Set by a backup asked for by hand: the next run sends everything in full, costly link or not.
   let fullRequested = false;
+  // The first moment of the logbook the boat's plan keeps on the service, as its sync state last
+  // said (`historyFrom`); null for all of it, and before the service has said anything.
+  let historyFrom = null;
 
   const iso = (ms) => new Date(ms).toISOString();
   const base = () => `${settings.cloudSyncUrl.replace(/\/+$/, '')}/v1/logbooks/${getLogbookId(db)}`;
@@ -260,15 +263,27 @@ function createCloudSync({
     }
   }
 
+  // A passage the service's plan keeps: begun from `historyFrom`, or still under way. The others
+  // stay on board and are not sent; the service keeps no more of them than their hashes anyway.
+  const kept = (row) =>
+    historyFrom === null || row.end_time === null || Date.parse(row.start_time) >= historyFrom;
+
   async function synchronise(costly) {
-    const rows = db.prepare('SELECT * FROM log_entries ORDER BY start_time DESC, id DESC').all();
-    // How many passages are on board: the service tells its owner how far the backup is.
+    const onBoardRows = db
+      .prepare('SELECT * FROM log_entries ORDER BY start_time DESC, id DESC')
+      .all();
+    // How many passages are on board for the service to keep: it tells its owner how far the
+    // backup is. Counted by the window it last gave, the first run by none.
     const state = await call('GET', '/sync-state', undefined, {
-      'x-chiplog-passages': String(rows.length)
+      'x-chiplog-passages': String(onBoardRows.filter(kept).length)
     });
+    const from = typeof state.historyFrom === 'string' ? Date.parse(state.historyFrom) : NaN;
+    historyFrom = Number.isNaN(from) ? null : from;
+    const rows = onBoardRows.filter(kept);
     const remote = state.passages;
     const held = new Map(remote.map((item) => [item.originId, item]));
-    const onBoard = new Set(rows.map((row) => row.id));
+    // Passages left out by the plan are still on board: the service is not told to delete them.
+    const onBoard = new Set(onBoardRows.map((row) => row.id));
     for (const id of cache.keys()) {
       if (!onBoard.has(id)) {
         cache.delete(id);

package/lib/event-watcher.js

@@ -5,6 +5,8 @@ const { CRITICAL_STATES } = require('./events');
 const METRES_PER_SECOND_PER_KNOT = 1852 / 3600;
 
 const EVENT_DEFAULTS = {
+  alarmsEnabled: true,
+  ignoredAlarms: [],
   windSpeedThresholds: [20, 30],
   pressureDropThreshold: 4,
   headingChangeEnabled: true,
@@ -88,8 +90,30 @@ function collectNotifications(node, path, found, depth = 0) {
   }
 }
 
+// A pattern names a notification path, `*` standing for any run of
+// characters (dots included); the leading `notifications.` may be left out.
+function compileAlarmPattern(pattern) {
+  const trimmed = String(pattern).trim();
+  if (trimmed === '') {
+    return null;
+  }
+  const full = trimmed.startsWith('notifications.') ? trimmed : `notifications.${trimmed}`;
+  const source = full
+    .split('*')
+    .map((part) => part.replace(/[.+?^${}()|[\]\\]/g, '\\$&'))
+    .join('.*');
+  return new RegExp(`^${source}$`);
+}
+
+function createAlarmFilter(patterns) {
+  const compiled = (patterns ?? []).map(compileAlarmPattern).filter(Boolean);
+  return (path) => compiled.some((pattern) => pattern.test(path));
+}
+
 function createEventWatcher({ db, readSelfPath, settings, observe, clock = Date.now }) {
   const readFresh = createFreshnessTracker(readSelfPath);
+  const alarmsEnabled = settings.alarmsEnabled ?? EVENT_DEFAULTS.alarmsEnabled;
+  const isIgnoredAlarm = createAlarmFilter(settings.ignoredAlarms);
 
   const seenNotifications = new Map();
   const loggedNotifications = new Map();
@@ -173,6 +197,12 @@ function createEventWatcher({ db, readSelfPath, settings, observe, clock = Date.
 
       const logged = lastLoggedState(path);
       const critical = CRITICAL_STATES.has(state);
+      // Alarms turned off, or this one left out, are not raised in the log;
+      // one already logged is still closed when it clears, so no raise is
+      // left without its end.
+      if (critical && (!alarmsEnabled || isIgnoredAlarm(path))) {
+        continue;
+      }
       // Log a critical state not yet logged, or the end of one that was; a
       // clearing whose alarm never made it into the log is not news.
       const worthLogging = critical ? logged !== state : CRITICAL_STATES.has(logged);
@@ -467,4 +497,4 @@ function createEventWatcher({ db, readSelfPath, settings, observe, clock = Date.
   };
 }
 
-module.exports = { createEventWatcher, EVENT_DEFAULTS, CHECK_INTERVAL_MS };
+module.exports = { createEventWatcher, createAlarmFilter, EVENT_DEFAULTS, CHECK_INTERVAL_MS };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-chiplog",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Nautical logbook for Signal K: automatic entries, handwritten notes",
   "main": "index.js",
   "files": [

package/public/app.css

@@ -251,6 +251,51 @@ main {
   border-color: transparent;
 }
 
+.notice-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+/* Above the map's controls, wherever the page is scrolled. */
+.connection-toast {
+  position: fixed;
+  left: 50%;
+  bottom: 1rem;
+  z-index: 1100;
+  transform: translateX(-50%);
+  width: min(40rem, calc(100% - 2rem));
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem 1rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  background: var(--error-bg);
+  color: var(--text);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
+}
+
+.connection-toast p {
+  margin: 0;
+}
+
+.connection-toast-ok {
+  background: var(--ok-bg);
+}
+
+.connection-toast .toast-close {
+  border: none;
+  background: none;
+  color: inherit;
+  font-size: 1.4rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
 .notice-ok {
   background: var(--ok-bg);
   border-color: transparent;

package/public/entry/js/components/Dialogs.mjs

@@ -67,7 +67,7 @@ export function EventDialog({ title, event, bounds, onSave, onCancel }) {
 // say the entry is in, a countdown shows the banner will go on its own, and the
 // two follow-ups are secondary next to it — undoing is the destructive one, and
 // says what it undoes, since on its own "undo" reads as dismissing the banner.
-export function Toast({ toast, timeoutMs, onUndo, onComment, onClose }) {
+export function Toast({ toast, timeoutMs, onUndo, onComment, onClose, onReconnect }) {
   const { t, format } = useLocale();
   if (!toast) {
     return null;
@@ -85,6 +85,14 @@ export function Toast({ toast, timeoutMs, onUndo, onComment, onClose }) {
     return html`
       <div class="toast toast-error" role="alert">
         <span class="toast-text">${toast.message}</span>
+        ${
+          toast.reconnect &&
+          html`<span class="toast-actions">
+            <button type="button" class="tool-button" onClick=${onReconnect}>
+              ${t('connection.reconnect')}
+            </button>
+          </span>`
+        }
         ${close}
       </div>
     `;

package/public/entry/js/components/StatusHeader.mjs

@@ -34,9 +34,40 @@ function passageLine(entry, t, format) {
   });
 }
 
-export function StatusHeader({ state, entry, online, queued, night, onToggleNight }) {
-  const { t, format } = useLocale();
+// While the server does not answer, the connection mark is a button that
+// tries again at once, rather than at the next poll.
+function ConnectionMark({ online, connecting, queued, onReconnect }) {
+  const { t } = useLocale();
   const connection = online ? t('entry.online') : t('entry.offline');
+  const label = queued > 0 ? `${connection} · ${t('entry.queued', { count: queued })}` : connection;
+  if (online) {
+    return html`<span class="connection connection-online">
+      <span class="connection-dot" aria-hidden="true"></span>
+      ${label}
+    </span>`;
+  }
+  return html`
+    <span class="connection connection-offline">
+      <span class="connection-dot" aria-hidden="true"></span>
+      ${label}
+      <button type="button" class="tool-button" disabled=${connecting} onClick=${onReconnect}>
+        ${connecting ? t('entry.reconnecting') : t('connection.reconnect')}
+      </button>
+    </span>
+  `;
+}
+
+export function StatusHeader({
+  state,
+  entry,
+  online,
+  connecting,
+  queued,
+  night,
+  onToggleNight,
+  onReconnect
+}) {
+  const { t, format } = useLocale();
   return html`
     <header class="entry-header">
       <div class="entry-status">
@@ -50,10 +81,12 @@ export function StatusHeader({ state, entry, online, queued, night, onToggleNigh
         }
       </div>
       <div class="entry-tools">
-        <span class=${online ? 'connection connection-online' : 'connection connection-offline'}>
-          <span class="connection-dot" aria-hidden="true"></span>
-          ${queued > 0 ? `${connection} · ${t('entry.queued', { count: queued })}` : connection}
-        </span>
+        <${ConnectionMark}
+          online=${online}
+          connecting=${connecting}
+          queued=${queued}
+          onReconnect=${onReconnect}
+        />
         <button
           type="button"
           class="tool-button"

package/public/entry/js/main.mjs

@@ -1,6 +1,13 @@
 import { html, render, useEffect, useMemo, useState } from '../../vendor/preact-htm.mjs';
-import { fetchAll, get, onResponse, request } from '../../js/api.mjs';
-import { createLocale, LocaleProvider, useLocale, usePolling } from '../../js/context.mjs';
+import { connection, fetchAll, get, onResponse, request } from '../../js/api.mjs';
+import { connectionProblem, watchConnection } from '../../js/connection.mjs';
+import {
+  createLocale,
+  LocaleProvider,
+  useConnection,
+  useLocale,
+  usePolling
+} from '../../js/context.mjs';
 import { randomId } from '../../js/ids.mjs';
 import { pickLanguage } from '../../js/i18n.mjs';
 import { createServerClock } from './clock.mjs';
@@ -80,10 +87,8 @@ function writeSetting(key, value) {
 }
 
 const clock = createServerClock();
-let markOnline = () => {};
 onResponse((response, sentAt, receivedAt) => {
   clock.observe(response.headers.get('date'), sentAt, receivedAt);
-  markOnline(true);
 });
 
 function App({ journal }) {
@@ -93,7 +98,7 @@ function App({ journal }) {
   const [lastEntryId, setLastEntryId] = useState(null);
   const [types, setTypes] = useState(knownTypes);
   const [roster, setRoster] = useState(knownCrew);
-  const [online, setOnline] = useState(true);
+  const link = useConnection();
   const [forbidden, setForbidden] = useState(false);
   const [queue, setQueue] = useState(journal.outbox.snapshot());
   const [toast, setToast] = useState(null);
@@ -104,18 +109,51 @@ function App({ journal }) {
   const [version, setVersion] = useState(0);
   const [busy, setBusy] = useState(false);
 
-  markOnline = setOnline;
   const refresh = () => setVersion((v) => v + 1);
+  // The link itself is followed by `connection` (api.mjs), which every request
+  // reports to; a refusal is this tablet lacking access, which the gate asks for.
+  const online = link.state !== 'offline';
 
   const noteFailure = (error) => {
-    if (error?.code === 'network') {
-      setOnline(false);
-    }
     if (error?.code === 'forbidden') {
       setForbidden(true);
     }
   };
 
+  // Shows what was not done. Entries are queued rather than refused when the
+  // link is down, so this is for corrections and the crew list.
+  const showFailure = (error) => {
+    noteFailure(error);
+    const offline = connectionProblem(error) === 'offline';
+    setToast({
+      kind: 'error',
+      reconnect: offline,
+      message: offline ? t('entry.notDoneOffline') : t('entry.refused', { message: error.message })
+    });
+  };
+
+  const flushQueue = async () => {
+    if (journal.outbox.size === 0) {
+      return;
+    }
+    const outcome = await journal.flush();
+    noteFailure(outcome.blocked);
+    if (outcome.sent.length > 0) {
+      refresh();
+    }
+  };
+
+  // Asked for by the crew: says so when the server still does not answer,
+  // since nothing else on screen would change.
+  const reconnect = async () => {
+    const state = await connection.check();
+    if (state === 'offline') {
+      setToast({ kind: 'error', reconnect: true, message: t('entry.stillOffline') });
+    } else if (toast?.reconnect) {
+      setToast(null);
+    }
+  };
+
   useEffect(() => {
     journal.setListener(setQueue);
   }, []);
@@ -164,7 +202,7 @@ function App({ journal }) {
         .catch(noteFailure);
     },
     0,
-    [forbidden, online]
+    [forbidden, link.restored]
   );
 
   usePolling(
@@ -179,30 +217,28 @@ function App({ journal }) {
         .catch(noteFailure);
     },
     0,
-    [forbidden, online]
+    [forbidden, link.restored]
   );
 
   // Replays the queue while it holds anything, and as soon as the network is back.
   useEffect(() => {
-    const flush = async () => {
-      if (journal.outbox.size === 0) {
-        return;
-      }
-      const outcome = await journal.flush();
-      noteFailure(outcome.blocked);
-      if (outcome.sent.length > 0) {
-        refresh();
-      }
-    };
-    const timer = setInterval(flush, FLUSH_INTERVAL_MS);
-    window.addEventListener('online', flush);
-    flush();
+    const timer = setInterval(flushQueue, FLUSH_INTERVAL_MS);
+    window.addEventListener('online', flushQueue);
     return () => {
       clearInterval(timer);
-      window.removeEventListener('online', flush);
+      window.removeEventListener('online', flushQueue);
     };
   }, []);
 
+  // And whenever the link comes back, along with the state it missed.
+  useEffect(() => {
+    flushQueue();
+    if (link.restored > 0) {
+      setForbidden(false);
+      refresh();
+    }
+  }, [link.restored]);
+
   const manoeuvreLabels = useMemo(
     () => Object.fromEntries(types.map((type) => [type.key, type.label])),
     [types]
@@ -266,8 +302,7 @@ function App({ journal }) {
       }
       refresh();
     } catch (error) {
-      noteFailure(error);
-      setToast({ kind: 'error', message: t('entry.refused', { message: error.message }) });
+      showFailure(error);
     }
   };
 
@@ -279,8 +314,7 @@ function App({ journal }) {
       await request('DELETE', `/events/${event.id}`);
       refresh();
     } catch (error) {
-      noteFailure(error);
-      setToast({ kind: 'error', message: t('entry.refused', { message: error.message }) });
+      showFailure(error);
     }
   };
 
@@ -295,8 +329,7 @@ function App({ journal }) {
       setManagingCrew(false);
       refresh();
     } catch (error) {
-      noteFailure(error);
-      setToast({ kind: 'error', message: t('entry.refused', { message: error.message }) });
+      showFailure(error);
     }
   };
 
@@ -306,8 +339,7 @@ function App({ journal }) {
       setRoster((prev) => [...prev, member]);
       return member;
     } catch (error) {
-      noteFailure(error);
-      setToast({ kind: 'error', message: t('entry.refused', { message: error.message }) });
+      showFailure(error);
       return null;
     }
   };
@@ -317,8 +349,7 @@ function App({ journal }) {
       const updated = await request('PATCH', `/crew/${id}`, patch);
       setRoster((prev) => prev.map((member) => (member.id === id ? updated : member)));
     } catch (error) {
-      noteFailure(error);
-      setToast({ kind: 'error', message: t('entry.refused', { message: error.message }) });
+      showFailure(error);
     }
   };
 
@@ -328,8 +359,7 @@ function App({ journal }) {
       setRoster((prev) => prev.filter((member) => member.id !== id));
       return true;
     } catch (error) {
-      noteFailure(error);
-      setToast({ kind: 'error', message: t('entry.refused', { message: error.message }) });
+      showFailure(error);
       return false;
     }
   };
@@ -342,17 +372,20 @@ function App({ journal }) {
       state=${state}
       entry=${entry}
       online=${online}
+      connecting=${link.checking}
+      onReconnect=${reconnect}
       queued=${queue.pending.length}
       night=${night}
       onToggleNight=${() => setNight((value) => !value)}
     />
     <main class="entry-main">
       ${
-        forbidden &&
+        (forbidden || link.state === 'signedOut') &&
         html`<${AccessGate}
           onGranted=${() => {
             setForbidden(false);
-            journal.flush();
+            connection.check();
+            flushQueue();
             refresh();
           }}
         />`
@@ -429,6 +462,7 @@ function App({ journal }) {
       timeoutMs=${TOAST_MS}
       onClose=${() => setToast(null)}
       onUndo=${undo}
+      onReconnect=${reconnect}
       onComment=${() =>
         setEditing({ ref: toast.ref, what: toast.what, event: journal.entryFor(toast.ref) })}
     />
@@ -479,6 +513,8 @@ journal.setListener = (next) => {
   listener = next;
 };
 
+watchConnection(connection, { window, document });
+
 render(
   html`<${LocaleProvider} value=${locale}><${App} journal=${journal} /></${LocaleProvider}>`,
   document.getElementById('app')

package/public/entry/sw.js

@@ -31,6 +31,7 @@ const SHELL = [
   '../icon-small.svg',
   '../js/api.mjs',
   '../js/auth.mjs',
+  '../js/connection.mjs',
   '../js/context.mjs',
   '../js/days.mjs',
   '../js/format.mjs',

package/public/js/api.mjs

@@ -1,6 +1,8 @@
 import { deviceToken } from './auth.mjs';
+import { createConnection } from './connection.mjs';
 
 const BASE = '/plugins/signalk-chiplog/api';
+const PROBE_TIMEOUT_MS = 10 * 1000;
 
 export class RequestError extends Error {
   constructor(status, code, message) {
@@ -23,6 +25,17 @@ export function onResponse(listener) {
   return () => responseListeners.delete(listener);
 }
 
+// The link to the server, as every request finds it. Its probe is the cheapest
+// read there is, and one any client with access may make.
+export const connection = createConnection({
+  probe: () => request('GET', '/state', undefined, { timeoutMs: PROBE_TIMEOUT_MS })
+});
+
+function fail(error) {
+  connection.report(error);
+  return error;
+}
+
 export async function request(method, path, body, { timeoutMs } = {}) {
   const headers = body === undefined ? {} : { 'content-type': 'application/json' };
   const token = deviceToken.get();
@@ -44,12 +57,13 @@ export async function request(method, path, body, { timeoutMs } = {}) {
       signal: controller?.signal
     });
   } catch (err) {
-    throw new RequestError(0, 'network', err.message);
+    throw fail(new RequestError(0, 'network', err.message));
   } finally {
     clearTimeout(timer);
   }
   const receivedAt = Date.now();
   responseListeners.forEach((listener) => listener(response, sentAt, receivedAt));
+  connection.observe(response.status);
 
   if (response.status === 204) {
     return null;
@@ -65,7 +79,9 @@ export async function request(method, path, body, { timeoutMs } = {}) {
       response.status === 401 || response.status === 403
         ? 'forbidden'
         : (data?.error?.code ?? 'http_error');
-    throw new RequestError(response.status, code, data?.error?.message ?? response.statusText);
+    throw fail(
+      new RequestError(response.status, code, data?.error?.message ?? response.statusText)
+    );
   }
   return data;
 }

package/public/js/components/LogView.mjs

@@ -178,7 +178,7 @@ export function LogView() {
 
   return html`
     <h1 class="page-title" tabindex="-1" ref=${title}>${t('log.title')}</h1>
-    <${ErrorNotice} error=${error} />
+    <${ErrorNotice} error=${error} onRetry=${() => reload()} />
     <${LogStats} stats=${log.stats} />
     ${groupByDay(log.items).map(
       (day) => html`

package/public/js/components/StatusBar.mjs

@@ -2,6 +2,7 @@ import { html, useState } from '../../vendor/preact-htm.mjs';
 import { get } from '../api.mjs';
 import { useLocale, usePolling } from '../context.mjs';
 import { fallbackMessage } from '../status.mjs';
+import { connectionProblem } from '../connection.mjs';
 import { ErrorNotice } from './common.mjs';
 
 const REFRESH_MS = 15 * 1000;
@@ -20,20 +21,34 @@ export function StatusBar() {
   const { t, format } = useLocale();
   const [state, setState] = useState(null);
   const [error, setError] = useState(null);
+  const [attempt, setAttempt] = useState(0);
 
-  usePolling((isCurrent) => {
-    get('/state')
-      .then((next) => {
-        if (isCurrent()) {
-          setState(next);
-          setError(null);
-        }
-      })
-      .catch((err) => isCurrent() && setError(err));
-  }, REFRESH_MS);
+  usePolling(
+    (isCurrent) => {
+      get('/state')
+        .then((next) => {
+          if (isCurrent()) {
+            setState(next);
+            setError(null);
+          }
+        })
+        .catch((err) => isCurrent() && setError(err));
+    },
+    REFRESH_MS,
+    [attempt]
+  );
 
+  // A lost link is the connection toast's to tell; the bar keeps what it last
+  // knew, and its notice only reloads it once the link is back.
+  if (error && connectionProblem(error) && state) {
+    return html`<div class=${`statusbar statusbar-${state.motion}`}>
+      <${ErrorNotice} error=${error} onRetry=${() => setAttempt((n) => n + 1)} />
+      <span class="status-dot" aria-hidden="true"></span>
+      <strong>${motionLabel(state, t)}</strong>
+    </div>`;
+  }
   if (error) {
-    return html`<div class="statusbar"><${ErrorNotice} error=${error} /></div>`;
+    return html`<div class="statusbar"><${ErrorNotice} error=${error} onRetry=${() => setAttempt((n) => n + 1)} /></div>`;
   }
   if (!state) {
     return html`<div class="statusbar">${t('common.loading')}</div>`;

package/public/js/components/common.mjs

@@ -1,18 +1,127 @@
-import { html } from '../../vendor/preact-htm.mjs';
-import { useLocale } from '../context.mjs';
+import { html, useEffect, useMemo, useState } from '../../vendor/preact-htm.mjs';
+import { connection } from '../api.mjs';
+import { connectionProblem } from '../connection.mjs';
+import { useConnection, useLocale } from '../context.mjs';
+
+// Signing in happens in the Signal K admin, on a tab of its own so that this
+// page keeps what it showed; coming back to it checks the link again.
+export function SignInLink({ label }) {
+  return html`<a href="/admin/#/login" target="_blank" rel="noopener">${label}</a>`;
+}
+
+// Failed actions waiting for the link to come back, so the toast can say, once
+// it does, that there is something to do again.
+const unfinished = new Set();
+
+const RESTORED_TOAST_MS = 6000;
+
+// One toast for the whole page while the server is out of reach, fixed to the
+// bottom of the screen so it is seen wherever the reader is, however many
+// requests failed: why, and a way to get the link back.
+export function ConnectionToast() {
+  const { t } = useLocale();
+  const link = useConnection();
+  // A server that is down refuses at once: without a word, a reconnect that
+  // failed would look like a button that does nothing.
+  const [failed, setFailed] = useState(false);
+  const [restored, setRestored] = useState(null);
+
+  useEffect(() => {
+    if (link.restored === 0) {
+      return undefined;
+    }
+    setFailed(false);
+    setRestored({ again: unfinished.size > 0 });
+    const timer = setTimeout(() => setRestored(null), RESTORED_TOAST_MS);
+    return () => clearTimeout(timer);
+  }, [link.restored]);
+
+  if (link.state === 'connected') {
+    if (!restored) {
+      return null;
+    }
+    const message = restored.again
+      ? `${t('connection.restored')} ${t('connection.tryAgain')}`
+      : t('connection.restored');
+    return html`
+      <div class="connection-toast connection-toast-ok" role="status">
+        <p>${message}</p>
+        <button type="button" class="toast-close" aria-label=${t('common.close')} onClick=${() => setRestored(null)}>×</button>
+      </div>
+    `;
+  }
+  const signedOut = link.state === 'signedOut';
+  let message = t(signedOut ? 'connection.signedOut' : 'connection.offline');
+  if (link.checking) {
+    message = t('connection.checking');
+  } else if (failed) {
+    message = `${t('connection.stillDown')} ${message}`;
+  }
+  const reconnect = async () => setFailed((await connection.check()) !== 'connected');
+  return html`
+    <div class="connection-toast" role="alert">
+      <p>${message}</p>
+      <p class="notice-actions">
+        ${signedOut && html`<${SignInLink} label=${t('connection.signIn')} />`}
+        <button type="button" disabled=${link.checking} onClick=${reconnect}>
+          ${t('connection.reconnect')}
+        </button>
+      </p>
+    </div>
+  `;
+}
+
+// Where a request failed for want of the link, the toast speaks; here only
+// what the place itself needs. A notice that can redo its request does so once
+// the link is back, whoever brought it back; one that cannot is counted for the
+// toast to say so.
+function ConnectionNotice({ error, problem, link, since, onRetry }) {
+  const { t } = useLocale();
+  const back = link.state === 'connected' && !link.checking;
+  // Back, after a 401 that the probe got past: the account lacks the rights.
+  const refused = back && problem === 'signedOut' && link.restored === since;
+
+  useEffect(() => {
+    if (onRetry) {
+      return undefined;
+    }
+    unfinished.add(error);
+    return () => unfinished.delete(error);
+  }, [error]);
+
+  useEffect(() => {
+    if (back && !refused && onRetry) {
+      onRetry();
+    }
+  }, [back, refused]);
+
+  if (!refused) {
+    return null;
+  }
+  return html`
+    <div class="notice notice-error" role="alert">
+      <p>${t('error.forbidden')} <${SignInLink} label=${t('error.signIn')} /></p>
+    </div>
+  `;
+}
 
 export function ErrorNotice({ error, onRetry }) {
   const { t } = useLocale();
+  const link = useConnection();
+  const problem = connectionProblem(error);
+  // How many times the link had come back when this error arrived.
+  const since = useMemo(() => link.restored, [error]);
   if (!error) {
     return null;
   }
+  if (problem) {
+    return html`<${ConnectionNotice} error=${error} problem=${problem} link=${link} since=${since} onRetry=${onRetry} />`;
+  }
   let message;
   if (error.code === 'forbidden') {
-    message = html`${t('error.forbidden')} <a href="/admin/">${t('error.signIn')}</a>`;
+    message = html`${t('error.forbidden')} <${SignInLink} label=${t('error.signIn')} />`;
   } else if (error.code === 'plugin_not_started') {
     message = t('error.notRunning');
-  } else if (error.code === 'network') {
-    message = t('error.network');
   } else {
     message = t('error.generic', { message: error.message });
   }

package/public/js/connection.mjs

@@ -0,0 +1,126 @@
+// The state of the link to the Signal K server, shared by everything on the
+// page so that every message about a lost connection agrees, and one reconnect
+// serves them all.
+//
+// States: connected; offline (the server does not answer: the network dropped,
+// or it is restarting); signedOut (it answers but no longer knows us: the login
+// expired, or the device token was revoked). `checking` is true while a probe
+// runs, and `restored` counts the returns to connected, so a message shown
+// before one can tell that the link has come back since.
+
+// Which kind of connection loss an API error stands for, or null when it is
+// about the request itself.
+export function connectionProblem(error) {
+  if (!error) {
+    return null;
+  }
+  if (error.code === 'network') {
+    return 'offline';
+  }
+  // A proxy in front of a server that is down answers for it.
+  if ((error.status === 502 || error.status === 504) && error.code === 'http_error') {
+    return 'offline';
+  }
+  // Signal K answers 401 to a missing or expired login and to an account that
+  // lacks the rights alike: only a probe tells them apart.
+  return error.status === 401 ? 'signedOut' : null;
+}
+
+// `probe` makes a read every client with access may make, and rejects with the
+// API's error.
+export function createConnection({ probe }) {
+  let state = 'connected';
+  let checking = null;
+  let restored = 0;
+  const listeners = new Set();
+
+  const snapshot = () => ({ state, checking: checking !== null, restored });
+  const notify = () => {
+    const current = snapshot();
+    listeners.forEach((listener) => listener(current));
+  };
+
+  function settle(next) {
+    if (next === 'connected' && state !== 'connected') {
+      restored += 1;
+    }
+    state = next;
+  }
+
+  function check() {
+    if (checking) {
+      return checking;
+    }
+    checking = (async () => {
+      try {
+        await probe();
+        settle('connected');
+      } catch (error) {
+        // An answer that is not about the link (the plugin stopped, say)
+        // still means the server is there and lets us in.
+        settle(connectionProblem(error) ?? 'connected');
+      }
+      checking = null;
+      notify();
+      return state;
+    })();
+    notify();
+    return checking;
+  }
+
+  return {
+    snapshot,
+
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+
+    // Every response the server sends: a successful one proves the link.
+    observe(status) {
+      if (status >= 200 && status < 300 && state !== 'connected') {
+        settle('connected');
+        notify();
+      }
+    },
+
+    // Every failed request. Returns the problem it stands for, if any; a 401 is
+    // checked before being taken for a lost login.
+    report(error) {
+      const problem = connectionProblem(error);
+      if (problem === 'offline' && state !== 'offline') {
+        state = 'offline';
+        notify();
+      } else if (problem === 'signedOut' && state !== 'signedOut') {
+        check();
+      } else if (problem === null && state !== 'connected') {
+        // Refused for a reason of its own (the plugin is still starting, say):
+        // the server answered, and past its login.
+        settle('connected');
+        notify();
+      }
+      return problem;
+    },
+
+    check
+  };
+}
+
+// Looks again as soon as there is reason to think the link is back: the
+// network returned, or the reader came back to the page — from signing in
+// on another tab, typically.
+export function watchConnection(connection, { window, document }) {
+  const recheck = () => {
+    if (connection.snapshot().state !== 'connected' && document.visibilityState !== 'hidden') {
+      connection.check();
+    }
+  };
+  window.addEventListener('online', recheck);
+  window.addEventListener('focus', recheck);
+  document.addEventListener('visibilitychange', recheck);
+  return () => {
+    window.removeEventListener('online', recheck);
+    window.removeEventListener('focus', recheck);
+    document.removeEventListener('visibilitychange', recheck);
+  };
+}

package/public/js/context.mjs

@@ -1,4 +1,5 @@
 import { createContext, useContext, useEffect, useRef, useState } from '../vendor/preact-htm.mjs';
+import { connection } from './api.mjs';
 import { parseAnimationHash } from './days.mjs';
 import { createFormatter } from './format.mjs';
 import { createTranslator } from './i18n.mjs';
@@ -86,3 +87,13 @@ export function usePolling(load, intervalMs, dependencies = []) {
     };
   }, dependencies);
 }
+
+// The link to the server as the page last found it (see connection.mjs).
+export function useConnection() {
+  const [link, setLink] = useState(connection.snapshot);
+  useEffect(() => {
+    setLink(connection.snapshot());
+    return connection.subscribe(setLink);
+  }, []);
+  return link;
+}

package/public/js/i18n.mjs

@@ -27,9 +27,18 @@ export const MESSAGES = {
       'Your Signal K account is not allowed to do this. Sign in with an account that has the rights.',
     'error.signIn': 'Open the Signal K admin',
     'error.notRunning': 'The Chiplog plugin is not running. Enable it in the Signal K admin.',
-    'error.network': 'The Signal K server cannot be reached.',
     'error.generic': 'Something went wrong: {message}',
 
+    'connection.offline':
+      'The Signal K server does not answer: the network may be down, or the server restarting.',
+    'connection.signedOut': 'Your Signal K session has ended. Sign in again, then reconnect.',
+    'connection.checking': 'Connecting to the Signal K server…',
+    'connection.reconnect': 'Reconnect',
+    'connection.stillDown': 'Still no luck.',
+    'connection.signIn': 'Sign in',
+    'connection.restored': 'The connection is back.',
+    'connection.tryAgain': 'What failed can be done again.',
+
     'status.underwaySail': 'Under way under sail',
     'status.underwayEngine': 'Under way under engine',
     'status.underway': 'Under way',
@@ -517,6 +526,10 @@ export const MESSAGES = {
     'entry.noteTime': 'Time (now if left empty)',
     'entry.noPassageError': 'No passage to log this in: cast off or weigh anchor first.',
     'entry.refused': 'Not logged: {message}',
+    'entry.notDoneOffline': 'Not done: the Signal K server does not answer.',
+    'entry.stillOffline':
+      'Still no answer from the Signal K server. Entries keep waiting on this tablet.',
+    'entry.reconnecting': 'Connecting…',
     'entry.chooseSail': 'Which sail is up?',
     'entry.otherSail': 'Other sail',
     'entry.sketchUndo': 'Undo',
@@ -591,9 +604,19 @@ export const MESSAGES = {
     'error.signIn': 'Ouvrir l’administration Signal K',
     'error.notRunning':
       'Le plugin Chiplog n’est pas démarré. Activez-le dans l’administration Signal K.',
-    'error.network': 'Le serveur Signal K est injoignable.',
     'error.generic': 'Une erreur est survenue : {message}',
 
+    'connection.offline':
+      'Le serveur Signal K ne répond pas : le réseau est peut-être coupé, ou le serveur redémarre.',
+    'connection.signedOut':
+      'Votre session Signal K a pris fin. Connectez-vous à nouveau, puis rétablissez la connexion.',
+    'connection.checking': 'Connexion au serveur Signal K…',
+    'connection.reconnect': 'Rétablir la connexion',
+    'connection.stillDown': 'Toujours sans succès.',
+    'connection.signIn': 'Se connecter',
+    'connection.restored': 'La connexion est rétablie.',
+    'connection.tryAgain': 'Vous pouvez refaire ce qui a échoué.',
+
     'status.underwaySail': 'En route à la voile',
     'status.underwayEngine': 'En route au moteur',
     'status.underway': 'En route',
@@ -1092,6 +1115,10 @@ export const MESSAGES = {
     'entry.noPassageError':
       'Aucune navigation où consigner : appareillez ou levez l’ancre d’abord.',
     'entry.refused': 'Non consigné : {message}',
+    'entry.notDoneOffline': 'Non effectué : le serveur Signal K ne répond pas.',
+    'entry.stillOffline':
+      'Le serveur Signal K ne répond toujours pas. Les entrées restent en attente sur cette tablette.',
+    'entry.reconnecting': 'Connexion…',
     'entry.chooseSail': 'Quelle voile est envoyée ?',
     'entry.otherSail': 'Autre voile',
     'entry.sketchUndo': 'Annuler',

package/public/js/main.mjs

@@ -1,4 +1,6 @@
 import { html, render } from '../vendor/preact-htm.mjs';
+import { connection } from './api.mjs';
+import { watchConnection } from './connection.mjs';
 import { createLocale, LocaleProvider, useLocale, useRoute } from './context.mjs';
 import { pickLanguage } from './i18n.mjs';
 import { AnimationView } from './components/AnimationView.mjs';
@@ -8,6 +10,7 @@ import { PassageView } from './components/PassageView.mjs';
 import { ReplayView } from './components/ReplayView.mjs';
 import { StatisticsView } from './components/StatisticsView.mjs';
 import { StatusBar } from './components/StatusBar.mjs';
+import { ConnectionToast } from './components/common.mjs';
 
 function Page({ route }) {
   if (route.name === 'passage') {
@@ -50,6 +53,7 @@ function Shell() {
     <${StatusBar} />
     <main><${Page} route=${route} /></main>
     <footer class="attribution">${t('footer.attribution')}</footer>
+    <${ConnectionToast} />
   `;
 }
 
@@ -57,6 +61,8 @@ const locale = createLocale(pickLanguage(navigator.languages, location.search));
 document.documentElement.lang = locale.language;
 document.title = locale.t('app.title');
 
+watchConnection(connection, { window, document });
+
 render(
   html`<${LocaleProvider} value=${locale}><${Shell} /></${LocaleProvider}>`,
   document.getElementById('app')