signalk-chiplog 2.7.0 → 2.8.0

package/CHANGELOG.md

@@ -6,6 +6,26 @@ All notable changes to Chiplog are documented here. The format follows
 
 ## [Unreleased]
 
+## [2.8.0] - 2026-10-01
+
+### Added
+
+- **A manual entry's time can be typed in or corrected.** A note can be written up after the fact with the time it
+  happened, and any manoeuvre, note or sketch the crew logged can be redated later from the logbook's timeline or from
+  the tablet — an entry still waiting for the connection included. Since such an entry was not made where it happened,
+  its position is read back from the track at that time and left empty when the track has nothing within 2 minutes of
+  it, along with the instrument readings taken when the button was pressed. A time outside the passage or in the future
+  is refused, and the departure manoeuvre that opened a passage is still moved through that passage's departure time.
+
+### Changed
+
+- **The tablet's confirmation banner no longer reads as a question.** Logging an entry put up two buttons the size of
+  the app's primary actions, "Add a comment" and "Undo", which looked like a dialog waiting for an answer — it was not
+  clear the entry was already in, nor that "Undo" deleted it rather than dismissing the banner. The banner now confirms
+  first (a check mark, or a clock for an entry held on the tablet), carries a close button and a bar draining over the
+  ten seconds it stays, and puts the two follow-ups below the message at a smaller size, the undo in red and labelled
+  with what it undoes.
+
 ## [2.7.0] - 2026-09-22
 
 ### Added
@@ -383,7 +403,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.7.0...HEAD
+[Unreleased]: https://github.com/ricard33/signalk-chiplog/compare/v2.8.0...HEAD
+[2.8.0]: https://github.com/ricard33/signalk-chiplog/compare/v2.7.0...v2.8.0
 [2.7.0]: https://github.com/ricard33/signalk-chiplog/compare/v2.6.0...v2.7.0
 [2.6.0]: https://github.com/ricard33/signalk-chiplog/compare/v2.5.1...v2.6.0
 [2.5.1]: https://github.com/ricard33/signalk-chiplog/compare/v2.5.0...v2.5.1

package/README.md

@@ -214,8 +214,12 @@ Open **Chiplog** from the Signal K webapps, or `/signalk-chiplog/`. Reading need
   counter at departure and arrival and the hours run, and the tank levels and battery charge, voltage and current noted
   at departure), and the log: every reading and event in order, including handwritten notes. A passage in progress
   refreshes every minute. Each line's comment can be edited (read/write access); a manoeuvre or note the crew logged
-  themselves can also be deleted — automatic lines (alarms, autopilot, weather, corrections) can only be annotated.
-  Under each position, in grey, its bearing and distance from the nearest landmark.
+  themselves can also be **redated** and deleted — automatic lines (alarms, autopilot, weather, corrections) can only be
+  annotated. Correcting a time reads the position back from the track at that time, and leaves it empty when the track
+  has nothing within 2 minutes of it, since the entry was not made where it happened. A time outside the passage, or in
+  the future, is refused, and the departure manoeuvre that opened a passage is moved by changing that passage's
+  departure time in **Corrections** below. Under each position, in grey, its bearing and distance from the nearest
+  landmark.
 - **Corrections** (read/write access):
   - rename the departure, or the arrival once the passage is closed — a passage in progress has none yet to rename;
   - switch an engine period to sail or back;
@@ -355,9 +359,11 @@ change. One tap logs it with the time, the position and an instrument reading.
 
 - **Sail change** asks which sail went up: mainsail, genoa, jib, staysail, spinnaker, gennaker, code 0, storm jib, or
   any name you type.
-- A banner then confirms it for 10 seconds, with two big buttons:
-  - **Undo**, for a mistaken tap;
-  - **Add a comment**, e.g. "25 kn, second reef".
+- A banner then confirms it: a check mark, what was logged and at what time, and a bar along the bottom draining over
+  the 10 seconds it stays. Nothing is waiting on you — it goes on its own, or at once with the **×**. Under the message
+  sit two optional follow-ups:
+  - **Add a comment**, e.g. "25 kn, second reef";
+  - **Undo this entry**, in red, for a mistaken tap — it deletes the entry just logged.
 
 ### Departures open the passage
 
@@ -372,7 +378,8 @@ note once moored belongs to the passage that brought you there. Anywhere else, t
 
 ### Notes and handwriting
 
-- **Note** — type and tap **Log it**.
+- **Note** — type and tap **Log it**. Leave **Time** empty for now, or fill it in to write up something that happened
+  earlier; a note dated by hand takes its position from the track rather than from where you are standing.
 - **Handwriting** — takes over the whole screen, with a toolbar above the pad: fine pen, thick pen, highlighter, eraser,
   undo, and a choice of colour (kept to the theme's colour in night mode, to spare night vision). Pen pressure also sets
   the line width. The eraser removes only what it actually touches, splitting a stroke rather than deleting all of it;
@@ -385,7 +392,8 @@ export, not just on the tablet.
 ### Latest entries
 
 Below, the latest entries of the current passage (or of the last one) are listed with their time. Each can take a
-comment, and your own entries can be deleted; a note's text can be edited.
+comment, and your own entries can be redated and deleted; a note's text can be edited. An entry still waiting for the
+connection can be corrected too — the change travels with it.
 
 ### Night mode
 

package/lib/api.js

@@ -499,7 +499,7 @@ function registerRoutes(router, { getContext, logError }) {
 
   readwrite.patch(
     '/api/events/:id',
-    handle(({ db }, req) => {
+    handle(({ db, now }, req) => {
       const id = v.parseId(req.params.id);
       const body = v.requireBody(req.body, ['time', 'comment', 'subtype', 'payload']);
       const patch = withoutUndefined({
@@ -508,7 +508,7 @@ function registerRoutes(router, { getContext, logError }) {
         subtype: optional(body, 'subtype', nullableString(200)),
         payload: optional(body, 'payload', parsePayload)
       });
-      return events.updateEvent(db, id, patch);
+      return events.updateEvent(db, id, patch, { now: now() });
     })
   );
 

package/lib/events.js

@@ -138,28 +138,44 @@ function allEvents(db, entryId) {
     .map(toEvent);
 }
 
-function positionAt(db, time, { now, vesselPosition }) {
-  if (time === undefined) {
-    return vesselPosition;
-  }
+// Where the track says the vessel was at `time`, or null when it recorded
+// nothing close enough. `entryId` narrows the search to one passage, which only
+// an edit can do: a new entry does not know its passage yet.
+function trackPositionAt(db, time, entryId = null) {
   const target = Date.parse(time);
+  const scope = entryId === null ? '' : ' AND entry_id = ?';
+  const bounds = entryId === null ? [time] : [time, entryId];
   const nearest = [
     db.prepare(
-      'SELECT time, lat, lon FROM track_points WHERE time <= ? ORDER BY time DESC LIMIT 1'
+      `SELECT time, lat, lon FROM track_points WHERE time <= ?${scope} ORDER BY time DESC LIMIT 1`
     ),
-    db.prepare('SELECT time, lat, lon FROM track_points WHERE time >= ? ORDER BY time LIMIT 1')
+    db.prepare(
+      `SELECT time, lat, lon FROM track_points WHERE time >= ?${scope} ORDER BY time LIMIT 1`
+    )
   ]
-    .map((statement) => statement.get(time))
+    .map((statement) => statement.get(...bounds))
     .filter(
       (point) => point && Math.abs(Date.parse(point.time) - target) <= TRACK_POSITION_WINDOW_MS
     )
     .sort(
       (a, b) => Math.abs(Date.parse(a.time) - target) - Math.abs(Date.parse(b.time) - target)
     )[0];
-  if (nearest) {
-    return { lat: nearest.lat, lon: nearest.lon };
+  return nearest ? { lat: nearest.lat, lon: nearest.lon } : null;
+}
+
+function positionAt(db, time, { now, vesselPosition }) {
+  if (time === undefined) {
+    return vesselPosition;
+  }
+  const recorded = trackPositionAt(db, time);
+  if (recorded) {
+    return recorded;
   }
-  return Math.abs(Date.parse(now) - target) <= CURRENT_POSITION_WINDOW_MS ? vesselPosition : null;
+  // Still the vessel's own position when the entry was made moments ago — a
+  // replay from the tablet's queue, where the track may hold nothing yet.
+  return Math.abs(Date.parse(now) - Date.parse(time)) <= CURRENT_POSITION_WINDOW_MS
+    ? vesselPosition
+    : null;
 }
 
 function findByClientRef(db, clientRef) {
@@ -259,7 +275,39 @@ function logCrewEvent(db, input, context) {
   });
 }
 
-function updateEvent(db, id, patch) {
+// A hand-written time has to stay a time the passage could have been logged at,
+// and must not contradict the departure it opened.
+function checkRetiming(db, event, time, now) {
+  if (Date.parse(time) > Date.parse(now)) {
+    throw badRequest('time cannot be in the future');
+  }
+  const entry = requireEntryRow(db, event.entryId);
+  const until = entry.end_time ?? now;
+  if (Date.parse(time) < Date.parse(entry.start_time) || Date.parse(time) > Date.parse(until)) {
+    throw badRequest('time must fall within the passage');
+  }
+  const opens = db.prepare('SELECT 1 FROM log_entries WHERE opened_by_event_id = ?').get(event.id);
+  if (opens) {
+    throw badRequest('This event opened the passage; change the passage departure time instead');
+  }
+}
+
+// The instrument snapshot taken when the event was logged (SPEC §4.1) belongs to
+// the moment the button was pressed, not to the moment the event is redated to:
+// it goes, unless another event of the passage still stands at that time.
+function dropEventSnapshot(db, event) {
+  const others = db
+    .prepare('SELECT 1 FROM events WHERE entry_id = ? AND time = ? AND id <> ?')
+    .get(event.entryId, event.time, event.id);
+  if (!others) {
+    db.prepare("DELETE FROM observations WHERE entry_id = ? AND time = ? AND reason = 'event'").run(
+      event.entryId,
+      event.time
+    );
+  }
+}
+
+function updateEvent(db, id, patch, context = {}) {
   const current = toEvent(requireEventRow(db, id));
 
   if (!CLIENT_EVENT_TYPES.includes(current.type)) {
@@ -271,16 +319,32 @@ function updateEvent(db, id, patch) {
 
   const next = { ...current, ...patch };
   validateContent(db, next);
+  const retimed = next.time !== current.time;
+  if (retimed) {
+    checkRetiming(db, current, next.time, context.now);
+  }
 
-  db.prepare('UPDATE events SET time = ?, subtype = ?, comment = ?, payload = ? WHERE id = ?').run(
-    next.time,
-    next.subtype,
-    next.comment,
-    serializePayload(next.payload),
-    id
-  );
-
-  return toEvent(requireEventRow(db, id));
+  return withTransaction(db, () => {
+    // Redating an event unmoors it from where the crew was when they logged it:
+    // its position is the track's at the new time, or none at all.
+    const position = retimed ? trackPositionAt(db, next.time, current.entryId) : current.position;
+    db.prepare(
+      `UPDATE events SET time = ?, subtype = ?, comment = ?, payload = ?, lat = ?, lon = ?
+       WHERE id = ?`
+    ).run(
+      next.time,
+      next.subtype,
+      next.comment,
+      serializePayload(next.payload),
+      position ? position.lat : null,
+      position ? position.lon : null,
+      id
+    );
+    if (retimed) {
+      dropEventSnapshot(db, current);
+    }
+    return toEvent(requireEventRow(db, id));
+  });
 }
 
 // An alarm is logged as two lines — the notification reaching `alarm` or

package/package.json

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

package/public/app.css

@@ -628,6 +628,26 @@ main {
   resize: vertical;
 }
 
+.timeline-comment-form textarea,
+.timeline-time-field input {
+  font: inherit;
+  padding: 0.4rem 0.6rem;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+}
+
+.timeline-time-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.timeline-time-field small {
+  font-size: 0.8em;
+}
+
 /* Tide */
 
 .tide-place {

package/public/entry/entry.css

@@ -631,7 +631,10 @@ input {
   align-items: center;
   gap: 0.75rem;
   width: min(46rem, calc(100% - 2rem));
-  padding: 0.75rem 1rem;
+  /* Room on the right for the close button and under for the countdown, both
+     taken out of the flow so neither wraps away from the line it belongs to. */
+  padding: 0.75rem 4rem 1rem 1rem;
+  overflow: hidden;
   background: var(--surface);
   border: 2px solid var(--accent);
   border-radius: var(--radius);
@@ -647,6 +650,79 @@ input {
   background: var(--queued-bg);
 }
 
+/* The banner confirms; it does not ask. The mark reads before the words, the
+   follow-ups are tool-sized rather than the app's primary size, and the
+   countdown says it will go on its own. */
+.toast-mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 2px solid currentcolor;
+  border-radius: 50%;
+  color: var(--accent);
+}
+
+.toast-queued .toast-mark {
+  color: var(--warn);
+}
+
+.toast-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  /* Always a line of their own, under the message: a follow-up one may take,
+     rather than the answer to a question asked beside it. */
+  flex: 1 0 100%;
+}
+
+.toast-actions .tool-button {
+  gap: 0.4rem;
+}
+
+.toast-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  border-color: transparent;
+}
+
+.toast-countdown {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 4px;
+  background: var(--accent);
+  transform-origin: left;
+  animation: toast-countdown var(--toast-ms, 10s) linear forwards;
+}
+
+.toast-queued .toast-countdown {
+  background: var(--warn);
+}
+
+@keyframes toast-countdown {
+  from {
+    transform: scaleX(1);
+  }
+
+  to {
+    transform: scaleX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast-countdown {
+    animation: none;
+    opacity: 0.4;
+  }
+}
+
 .toast-error {
   border-color: var(--danger);
   background: var(--error-bg);
@@ -679,6 +755,23 @@ input {
   gap: 0.75rem;
 }
 
+.sheet-field {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.sheet-field input,
+.note-time input {
+  font: inherit;
+  /* Thumb-sized: the sheet is read and tapped at arm's length. */
+  min-height: 3rem;
+}
+
+.note-time {
+  display: grid;
+  gap: 0.35rem;
+}
+
 .sheet-row {
   display: flex;
   flex-wrap: wrap;

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

@@ -1,28 +1,58 @@
 import { html, useEffect, useRef, useState } from '../../../vendor/preact-htm.mjs';
 import { useLocale } from '../../../js/context.mjs';
+import { EDITABLE_EVENT_TYPES } from '../../../js/log-lines.mjs';
+import { CheckIcon, ClockIcon, CloseIcon, UndoIcon } from './Icons.mjs';
 
-export function CommentDialog({ title, initial = '', onSave, onCancel }) {
-  const { t } = useLocale();
-  const [text, setText] = useState(initial ?? '');
+// Correcting an entry just made, or one picked out of the recent list: its
+// comment, and — for what the crew logged themselves — its time. Redating it
+// makes the server read its position back from the track, so an entry written up
+// after the fact still sits in the right place. `event` is the logged event, or
+// the body of one still waiting in the outbox.
+export function EventDialog({ title, event, bounds, onSave, onCancel }) {
+  const { t, format } = useLocale();
+  const [text, setText] = useState(event?.comment ?? '');
+  const [when, setWhen] = useState(() => (event?.time ? format.dateTimeInput(event.time) : ''));
   const field = useRef(null);
   useEffect(() => field.current?.focus(), []);
+  const retimeable = EDITABLE_EVENT_TYPES.includes(event?.type);
 
-  const submit = (event) => {
-    event.preventDefault();
-    onSave(text.trim() === '' ? null : text.trim());
+  const submit = (submitEvent) => {
+    submitEvent.preventDefault();
+    const comment = text.trim() === '' ? null : text.trim();
+    const patch = comment === (event?.comment ?? null) ? {} : { comment };
+    const time = retimeable && when !== '' ? format.fromDateTimeInput(when) : null;
+    if (time !== null && time !== event?.time) {
+      patch.time = time;
+    }
+    onSave(patch);
   };
 
   return html`
-    <div class="sheet-backdrop" onClick=${(event) => event.target === event.currentTarget && onCancel()}>
+    <div class="sheet-backdrop" onClick=${(clickEvent) => clickEvent.target === clickEvent.currentTarget && onCancel()}>
       <form class="sheet" role="dialog" aria-modal="true" aria-labelledby="comment-title" onSubmit=${submit}>
         <h2 id="comment-title">${title}</h2>
+        ${
+          retimeable &&
+          html`<label class="sheet-field">
+            <span>${t('entry.eventTime')}</span>
+            <input
+              type="datetime-local"
+              step="60"
+              value=${when}
+              min=${bounds?.start ? format.dateTimeInput(bounds.start) : undefined}
+              max=${format.dateTimeInput(bounds?.end ?? Date.now())}
+              onInput=${(inputEvent) => setWhen(inputEvent.currentTarget.value)}
+            />
+            <small class="muted">${t('entry.timeFromTrack')}</small>
+          </label>`
+        }
         <textarea
           ref=${field}
           rows="4"
           maxlength="10000"
           value=${text}
           aria-label=${t('entry.comment')}
-          onInput=${(event) => setText(event.currentTarget.value)}
+          onInput=${(inputEvent) => setText(inputEvent.currentTarget.value)}
         ></textarea>
         <div class="sheet-row">
           <button type="button" class="big-button" onClick=${onCancel}>${t('common.cancel')}</button>
@@ -33,32 +63,68 @@ export function CommentDialog({ title, initial = '', onSave, onCancel }) {
   `;
 }
 
-// What was just logged, with the two things one wants right after: undo a
-// mistaken tap, or add a word about it.
-export function Toast({ toast, onUndo, onComment, onClose }) {
+// What was just logged. It confirms rather than asks: the mark and the wording
+// 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 }) {
   const { t, format } = useLocale();
   if (!toast) {
     return null;
   }
+  const close = html`<button
+    type="button"
+    class="tool-button icon-button toast-close"
+    aria-label=${t('common.close')}
+    onClick=${onClose}
+  >
+    <${CloseIcon} />
+  </button>`;
+
   if (toast.kind === 'error') {
     return html`
       <div class="toast toast-error" role="alert">
         <span class="toast-text">${toast.message}</span>
-        <button type="button" class="tool-button" onClick=${onClose}>×</button>
+        ${close}
       </div>
     `;
   }
   if (toast.kind === 'undone') {
-    return html`<div class="toast" role="status"><span class="toast-text">${t('entry.undone')}</span></div>`;
+    return html`
+      <div
+        key=${toast}
+        class="toast"
+        role="status"
+        style=${`--toast-ms: ${timeoutMs}ms`}
+      >
+        <span class="toast-text">${t('entry.undone')}</span>
+        ${close}
+        <span class="toast-countdown" aria-hidden="true"></span>
+      </div>
+    `;
   }
   const detail = toast.queued
     ? t('entry.loggedQueued')
     : `${t('entry.logged', { time: format.time(toast.time) })}${toast.openedEntry ? ` · ${t('entry.openedPassage')}` : ''}`;
   return html`
-    <div class=${toast.queued ? 'toast toast-queued' : 'toast'} role="status">
+    <div
+      key=${toast}
+      class=${toast.queued ? 'toast toast-queued' : 'toast toast-logged'}
+      role="status"
+      style=${`--toast-ms: ${timeoutMs}ms`}
+    >
+      <span class="toast-mark">${toast.queued ? html`<${ClockIcon} />` : html`<${CheckIcon} />`}</span>
       <span class="toast-text"><strong>${toast.what}</strong><br />${detail}</span>
-      <button type="button" class="big-button" onClick=${onComment}>${t('entry.addComment')}</button>
-      <button type="button" class="big-button" onClick=${onUndo}>${t('entry.undo')}</button>
+      <span class="toast-actions">
+        <button type="button" class="tool-button" onClick=${onComment}>
+          ${t('entry.addComment')}
+        </button>
+        <button type="button" class="tool-button danger" onClick=${onUndo}>
+          <${UndoIcon} />${t('entry.undo')}
+        </button>
+      </span>
+      ${close}
+      <span class="toast-countdown" aria-hidden="true"></span>
     </div>
   `;
 }

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

@@ -134,3 +134,36 @@ export function TrashIcon() {
     />
   </svg>`;
 }
+
+export function CheckIcon() {
+  return html`<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
+    <path
+      d="M4 10.5 8 14.5 16 5.5"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2.4"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>`;
+}
+
+export function ClockIcon() {
+  return html`<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
+    <circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="1.8" />
+    <path
+      d="M10 5.8V10l2.8 1.8"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>`;
+}
+
+export function CloseIcon() {
+  return html`<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
+    <path d="M5.5 5.5 14.5 14.5M14.5 5.5 5.5 14.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+  </svg>`;
+}

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

@@ -1,9 +1,13 @@
 import { html, useState } from '../../../vendor/preact-htm.mjs';
 import { useLocale } from '../../../js/context.mjs';
 
-export function NotePanel({ busy, onLog }) {
-  const { t } = useLocale();
+// A free-text note. Its time is left empty for the usual case — the server dates
+// it, and takes an instrument snapshot with it — and filled in when the note is
+// being written up after the fact, where the position comes from the track.
+export function NotePanel({ busy, bounds, onLog }) {
+  const { t, format } = useLocale();
   const [text, setText] = useState('');
+  const [when, setWhen] = useState('');
 
   const submit = async (event) => {
     event.preventDefault();
@@ -11,8 +15,11 @@ export function NotePanel({ busy, onLog }) {
     if (!comment) {
       return;
     }
-    if (await onLog({ type: 'text_annotation', comment }, t('entry.note'))) {
+    const time = when === '' ? null : format.fromDateTimeInput(when);
+    const body = time === null ? { comment } : { comment, time };
+    if (await onLog({ type: 'text_annotation', ...body }, t('entry.note'))) {
       setText('');
+      setWhen('');
     }
   };
 
@@ -26,6 +33,17 @@ export function NotePanel({ busy, onLog }) {
         aria-label=${t('entry.note')}
         onInput=${(event) => setText(event.currentTarget.value)}
       ></textarea>
+      <label class="note-time">
+        <span>${t('entry.noteTime')}</span>
+        <input
+          type="datetime-local"
+          step="60"
+          value=${when}
+          min=${bounds?.start ? format.dateTimeInput(bounds.start) : undefined}
+          max=${format.dateTimeInput(bounds?.end ?? Date.now())}
+          onInput=${(event) => setWhen(event.currentTarget.value)}
+        />
+      </label>
       <button type="submit" class="big-button primary" disabled=${busy || !text.trim()}>
         ${t('entry.send')}
       </button>

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

@@ -2,13 +2,12 @@ import { html, useState } from '../../../vendor/preact-htm.mjs';
 import { fetchAll } from '../../../js/api.mjs';
 import { useLocale, usePolling } from '../../../js/context.mjs';
 import { EventRemark } from '../../../js/components/Timeline.mjs';
+import { EDITABLE_EVENT_TYPES } from '../../../js/log-lines.mjs';
 import { PencilIcon, TrashIcon } from './Icons.mjs';
 
 const REFRESH_MS = 30 * 1000;
 const SHOWN = 15;
 
-const CLIENT_TYPES = new Set(['manoeuvre', 'text_annotation', 'handwritten_annotation']);
-
 function queuedLabel(body, t, manoeuvreLabels) {
   if (body.type === 'manoeuvre') {
     const key = `manoeuvre.${body.subtype}`;
@@ -106,7 +105,7 @@ export function RecentList({
               </button>
               ${
                 event.source === 'manual' &&
-                CLIENT_TYPES.has(event.type) &&
+                EDITABLE_EVENT_TYPES.includes(event.type) &&
                 html`<button
                   type="button"
                   class="tool-button icon-button danger"

package/public/entry/js/journal.mjs

@@ -1,5 +1,5 @@
 // What the tablet does with an entry: send it at once when the server answers,
-// otherwise keep it in the outbox with the time it was made. Undo and comments
+// otherwise keep it in the outbox with the time it was made. Undo and edits
 // follow the entry wherever it is — still queued, or already logged.
 
 import { createOutbox, isTransient } from './outbox.mjs';
@@ -70,7 +70,10 @@ export function createJournal({ request, storage, clock, newRef, onChange = () =
     flush,
 
     // Resolves to { status: 'sent', event } | { status: 'queued', error } and
-    // rejects with the server's refusal (a 400 or 409).
+    // rejects with the server's refusal (a 400 or 409). A `time` on the body is
+    // the crew dating the entry themselves: it is sent as it stands, online as
+    // well as queued, which is also what tells the server not to take an
+    // instrument snapshot for a moment already past.
     async log(body) {
       const ref = newRef();
       const madeAt = new Date(clock.now()).toISOString();
@@ -80,7 +83,7 @@ export function createJournal({ request, storage, clock, newRef, onChange = () =
           ref,
           method: 'POST',
           path: '/events',
-          body: { ...entry, time: madeAt },
+          body: { time: madeAt, ...entry },
           createdAt: Date.parse(madeAt)
         });
 
@@ -110,6 +113,17 @@ export function createJournal({ request, storage, clock, newRef, onChange = () =
       return outbox.snapshot().pending.some((item) => item.ref === ref);
     },
 
+    // What there is to show of an entry, wherever it sits: the logged event, or
+    // the body of one still waiting its turn — both carry a type, a time and a
+    // comment, which is all an edit sheet needs.
+    entryFor(ref) {
+      return (
+        delivered.get(ref) ??
+        outbox.snapshot().pending.find((item) => item.ref === ref)?.body ??
+        null
+      );
+    },
+
     async undo(ref) {
       if (outbox.remove(ref)) {
         // Removed from the queue, but a replay may have picked it up already.
@@ -124,16 +138,19 @@ export function createJournal({ request, storage, clock, newRef, onChange = () =
       return sendOrQueue('DELETE', `/events/${event.id}`);
     },
 
-    async comment(ref, comment) {
-      if (outbox.update(ref, { comment })) {
+    // A comment, a corrected time, or both. On an entry still in the queue it
+    // rewrites the body that has yet to go out, so the server works its position
+    // out from the corrected time when it finally lands.
+    async edit(ref, patch) {
+      if (outbox.update(ref, patch)) {
         return null;
       }
       const event = delivered.get(ref);
       if (!event) {
         return null;
       }
-      delivered.set(ref, { ...event, comment });
-      return sendOrQueue('PATCH', `/events/${event.id}`, { comment });
+      delivered.set(ref, { ...event, ...patch });
+      return sendOrQueue('PATCH', `/events/${event.id}`, patch);
     }
   };
 }

package/public/entry/js/main.mjs

@@ -6,7 +6,7 @@ import { pickLanguage } from '../../js/i18n.mjs';
 import { createServerClock } from './clock.mjs';
 import { createJournal } from './journal.mjs';
 import { AccessGate } from './components/AccessGate.mjs';
-import { CommentDialog, Toast } from './components/Dialogs.mjs';
+import { EventDialog, Toast } from './components/Dialogs.mjs';
 import { CrewDialog } from './components/CrewDialog.mjs';
 import { PencilIcon } from './components/Icons.mjs';
 import { ManoeuvrePad } from './components/ManoeuvrePad.mjs';
@@ -97,7 +97,7 @@ function App({ journal }) {
   const [forbidden, setForbidden] = useState(false);
   const [queue, setQueue] = useState(journal.outbox.snapshot());
   const [toast, setToast] = useState(null);
-  const [commenting, setCommenting] = useState(null);
+  const [editing, setEditing] = useState(null);
   const [managingCrew, setManagingCrew] = useState(false);
   const [tab, setTab] = useState('note');
   const [night, setNight] = useState(readSetting(NIGHT_KEY) === 'on');
@@ -248,18 +248,21 @@ function App({ journal }) {
     refresh();
   };
 
-  const saveComment = async (comment) => {
-    const target = commenting;
-    setCommenting(null);
+  const saveEvent = async (patch) => {
+    const target = editing;
+    setEditing(null);
     // A note is its text: emptying it would be a deletion, which has its own button.
-    if (comment === null && target.event?.type === 'text_annotation') {
+    if (patch.comment === null && target.event?.type === 'text_annotation') {
+      return;
+    }
+    if (Object.keys(patch).length === 0) {
       return;
     }
     try {
       if (target.ref) {
-        noteFailure(await journal.comment(target.ref, comment));
+        noteFailure(await journal.edit(target.ref, patch));
       } else {
-        await request('PATCH', `/events/${target.event.id}`, { comment });
+        await request('PATCH', `/events/${target.event.id}`, patch);
       }
       refresh();
     } catch (error) {
@@ -331,7 +334,8 @@ function App({ journal }) {
     }
   };
 
-  const commentTitle = commenting?.what ?? t('entry.comment');
+  const editTitle = editing?.what ?? t('entry.comment');
+  const bounds = entry ? { start: entry.startTime, end: entry.endTime } : null;
 
   return html`
     <${StatusHeader}
@@ -402,7 +406,9 @@ function App({ journal }) {
               </button>`
             )}
           </div>
-          <div class="tab-panel" hidden=${tab !== 'note'}><${NotePanel} busy=${busy} onLog=${log} /></div>
+          <div class="tab-panel" hidden=${tab !== 'note'}>
+            <${NotePanel} busy=${busy} bounds=${bounds} onLog=${log} />
+          </div>
           <div class="tab-panel" hidden=${tab !== 'sketch'}>
             <${SketchPanel} busy=${busy} onLog=${log} night=${night} />
           </div>
@@ -415,22 +421,25 @@ function App({ journal }) {
         manoeuvreLabels=${manoeuvreLabels}
         onDelete=${deleteEvent}
         onDiscard=${discard}
-        onComment=${(event) => setCommenting({ event })}
+        onComment=${(event) => setEditing({ event })}
       />
     </main>
     <${Toast}
       toast=${toast}
+      timeoutMs=${TOAST_MS}
       onClose=${() => setToast(null)}
       onUndo=${undo}
-      onComment=${() => setCommenting({ ref: toast.ref, what: toast.what })}
+      onComment=${() =>
+        setEditing({ ref: toast.ref, what: toast.what, event: journal.entryFor(toast.ref) })}
     />
     ${
-      commenting &&
-      html`<${CommentDialog}
-        title=${commentTitle}
-        initial=${commenting.event?.comment ?? null}
-        onCancel=${() => setCommenting(null)}
-        onSave=${saveComment}
+      editing &&
+      html`<${EventDialog}
+        title=${editTitle}
+        event=${editing.event}
+        bounds=${bounds}
+        onCancel=${() => setEditing(null)}
+        onSave=${saveEvent}
       />`
     }
     ${

package/public/js/components/PassageView.mjs

@@ -355,9 +355,9 @@ export function PassageView({ id }) {
       await request('DELETE', `/entries/${id}`);
       location.hash = '#/';
     });
-  const editComment = (event, comment) =>
+  const editEvent = (event, patch) =>
     act(async () => {
-      await request('PATCH', `/events/${event.id}`, { comment });
+      await request('PATCH', `/events/${event.id}`, patch);
       reload();
     });
   const deleteEvent = (event) =>
@@ -529,9 +529,10 @@ export function PassageView({ id }) {
         events=${data.events}
         observations=${data.observations}
         landmarks=${data.landmarks}
+        bounds=${{ start: entry.startTime, end: entry.endTime }}
         manoeuvreLabels=${data.manoeuvreLabels}
         busy=${busy}
-        onEditComment=${editComment}
+        onEditEvent=${editEvent}
         onDelete=${deleteEvent}
       />
     </section>

package/public/js/components/Timeline.mjs

@@ -2,7 +2,7 @@ import { html, useEffect, useRef, useState } from '../../vendor/preact-htm.mjs';
 import { useLocale } from '../context.mjs';
 import { dayKey } from '../days.mjs';
 import { landmarkLine } from '../landmarks.mjs';
-import { buildRows, describeEvent } from '../log-lines.mjs';
+import { EDITABLE_EVENT_TYPES, buildRows, describeEvent } from '../log-lines.mjs';
 
 // A dot — the stroke of an i or a full stop — has a single point, which a
 // polyline only draws when given twice.
@@ -64,24 +64,28 @@ export function EventRemark({ event, manoeuvreLabels }) {
   return html`${label}${strokes}${detail}${comment}`;
 }
 
-// A logged event's remarks, with edit-comment and delete controls. Editing is
-// limited to the comment on anything the plugin logged itself (SPEC: "an
-// edited comment"). Deleting is offered for what the crew themselves logged
-// (`source: "manual"`) and for an alarm (`sk_alarm`) — which takes its paired
-// line, the raise or the clearing, with it (lib/events.js `pairedAlarmEvent`);
-// other automatic lines (autopilot, weather, corrections) can only be
-// annotated.
-function EventLine({ event, manoeuvreLabels, busy, onEditComment, onDelete }) {
-  const { t } = useLocale();
+// A logged event's remarks, with edit and delete controls. Editing is limited to
+// the comment on anything the plugin logged itself (SPEC: "an edited comment");
+// what the crew logged (`EDITABLE_EVENT_TYPES`) can also be redated, which makes
+// the server re-read its position from the track. Deleting is offered for what
+// the crew themselves logged (`source: "manual"`) and for an alarm (`sk_alarm`)
+// — which takes its paired line, the raise or the clearing, with it
+// (lib/events.js `pairedAlarmEvent`); other automatic lines (autopilot, weather,
+// corrections) can only be annotated.
+function EventLine({ event, bounds, manoeuvreLabels, busy, onEditEvent, onDelete }) {
+  const { t, format } = useLocale();
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(event.comment ?? '');
+  const [when, setWhen] = useState(() => format.dateTimeInput(event.time));
   const field = useRef(null);
+  const retimeable = EDITABLE_EVENT_TYPES.includes(event.type);
 
   useEffect(() => {
     if (!editing) {
       setDraft(event.comment ?? '');
+      setWhen(format.dateTimeInput(event.time));
     }
-  }, [event.comment, editing]);
+  }, [event.comment, event.time, editing]);
 
   useEffect(() => {
     if (editing) {
@@ -93,11 +97,31 @@ function EventLine({ event, manoeuvreLabels, busy, onEditComment, onDelete }) {
     const submit = (submitEvent) => {
       submitEvent.preventDefault();
       const trimmed = draft.trim();
+      const patch = { comment: trimmed === '' ? null : trimmed };
+      const time = retimeable ? format.fromDateTimeInput(when) : null;
+      if (time !== null && time !== event.time) {
+        patch.time = time;
+      }
       setEditing(false);
-      onEditComment(event, trimmed === '' ? null : trimmed);
+      onEditEvent(event, patch);
     };
     return html`
       <form class="timeline-comment-form" onSubmit=${submit}>
+        ${
+          retimeable &&
+          html`<label class="timeline-time-field">
+            <span>${t('timeline.eventTime')}</span>
+            <input
+              type="datetime-local"
+              step="60"
+              value=${when}
+              min=${bounds?.start ? format.dateTimeInput(bounds.start) : undefined}
+              max=${format.dateTimeInput(bounds?.end ?? Date.now())}
+              onInput=${(inputEvent) => setWhen(inputEvent.currentTarget.value)}
+            />
+            <small class="muted">${t('timeline.timeFromTrack')}</small>
+          </label>`
+        }
         <textarea
           ref=${field}
           rows="2"
@@ -146,9 +170,10 @@ export function Timeline({
   events,
   observations,
   landmarks,
+  bounds,
   manoeuvreLabels,
   busy,
-  onEditComment,
+  onEditEvent,
   onDelete
 }) {
   const { t, format } = useLocale();
@@ -229,9 +254,10 @@ export function Timeline({
                     row.event
                       ? html`<${EventLine}
                           event=${row.event}
+                          bounds=${bounds}
                           manoeuvreLabels=${manoeuvreLabels}
                           busy=${busy}
-                          onEditComment=${onEditComment}
+                          onEditEvent=${onEditEvent}
                           onDelete=${onDelete}
                         />`
                       : html`<span class="muted">${t(`observation.${readings.reason}`)}</span>`

package/public/js/format.mjs

@@ -12,6 +12,11 @@ function toDegrees(radians) {
   return (radians * 180) / Math.PI;
 }
 
+// `Date.parse` falls back to guessing at anything it is handed, so a
+// `datetime-local` value is matched before being read. Seconds are optional:
+// a field stepped finer than a minute supplies them.
+const DATE_TIME_INPUT = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?$/;
+
 // `timeZone` is an IANA zone for dates and times; without it, the device's own.
 export function createFormatter({ locale, units, timeZone }) {
   const number = (digits) =>
@@ -53,11 +58,25 @@ export function createFormatter({ locale, units, timeZone }) {
     day: '2-digit',
     timeZone
   });
+  // What `<input type="datetime-local">` reads and writes: `YYYY-MM-DDTHH:mm`.
+  const inputFormat = new Intl.DateTimeFormat('en-CA', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hourCycle: 'h23',
+    timeZone
+  });
   const offsetFormat = new Intl.DateTimeFormat('en-US', {
     timeZone,
     timeZoneName: 'longOffset'
   });
 
+  const localParts = (instant) => inputFormat.format(new Date(instant)).replace(', ', 'T');
+  // How far the formatter's zone runs ahead of UTC around `instant`.
+  const zoneOffsetMs = (instant) => Date.parse(`${localParts(instant)}:00Z`) - instant;
+
   function sexagesimal(value, positive, negative, width) {
     const absolute = Math.abs(value);
     let degrees = Math.floor(absolute);
@@ -139,6 +158,21 @@ export function createFormatter({ locale, units, timeZone }) {
     time: (value) => timeFormat.format(new Date(value)),
     // The calendar day of an instant in the formatter's time zone.
     dayKey: (value) => dayKeyFormat.format(new Date(value)),
+    // An instant as a `datetime-local` field reads it, in the formatter's zone.
+    dateTimeInput: (value) => localParts(Date.parse(new Date(value).toISOString())),
+    // And back: the instant that wall-clock reading stands for, or null when the
+    // field holds nothing usable. Two passes, so a reading on the far side of a
+    // daylight-saving change settles on its own offset rather than the one in
+    // force at the first guess; the hour a zone repeats when it falls back is
+    // genuinely ambiguous in such a field, and reads as the later of the two.
+    fromDateTimeInput: (local) => {
+      if (!DATE_TIME_INPUT.test(local ?? '')) {
+        return null;
+      }
+      const asUtc = Date.parse(`${local.slice(0, 16)}:00Z`);
+      const guess = asUtc - zoneOffsetMs(asUtc);
+      return new Date(asUtc - zoneOffsetMs(guess)).toISOString();
+    },
     // "UTC+02:00" at that instant; daylight saving time changes it.
     utcOffset: (value) => {
       const zone = offsetFormat

package/public/js/i18n.mjs

@@ -21,6 +21,7 @@ export const MESSAGES = {
     'common.cancel': 'Cancel',
     'common.edit': 'Edit',
     'common.delete': 'Delete',
+    'common.close': 'Close',
 
     'error.forbidden':
       'Your Signal K account is not allowed to do this. Sign in with an account that has the rights.',
@@ -282,6 +283,8 @@ export const MESSAGES = {
     'timeline.apparent': 'app.',
     'timeline.heading': 'hdg',
     'timeline.comment': 'Comment',
+    'timeline.eventTime': 'Time',
+    'timeline.timeFromTrack': 'Changing the time reads the position back from the track.',
     'timeline.deleteConfirm': 'Delete this log line? This cannot be undone.',
     'timeline.deleteAlarmConfirm': 'Delete this alarm and its resolution? This cannot be undone.',
 
@@ -458,10 +461,13 @@ export const MESSAGES = {
     'entry.logged': 'Logged at {time}',
     'entry.loggedQueued': 'Kept on this tablet, sent once connected',
     'entry.openedPassage': 'Passage opened',
-    'entry.undo': 'Undo',
+    'entry.undo': 'Undo this entry',
     'entry.undone': 'Undone',
     'entry.addComment': 'Add a comment',
     'entry.comment': 'Comment',
+    'entry.eventTime': 'Time',
+    'entry.timeFromTrack': 'Changing the time reads the position back from the track.',
+    '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.chooseSail': 'Which sail is up?',
@@ -531,6 +537,7 @@ export const MESSAGES = {
     'common.cancel': 'Annuler',
     'common.edit': 'Modifier',
     'common.delete': 'Supprimer',
+    'common.close': 'Fermer',
 
     'error.forbidden':
       'Votre compte Signal K n’a pas les droits pour cette action. Connectez-vous avec un compte autorisé.',
@@ -796,6 +803,8 @@ export const MESSAGES = {
     'timeline.apparent': 'app.',
     'timeline.heading': 'cap',
     'timeline.comment': 'Commentaire',
+    'timeline.eventTime': 'Heure',
+    'timeline.timeFromTrack': 'Changer l’heure relit la position dans la trace.',
     'timeline.deleteConfirm': 'Supprimer cette ligne du journal ? C’est irréversible.',
     'timeline.deleteAlarmConfirm': 'Supprimer cette alarme et sa résolution ? C’est irréversible.',
 
@@ -977,10 +986,13 @@ export const MESSAGES = {
     'entry.logged': 'Consigné à {time}',
     'entry.loggedQueued': 'Gardé sur la tablette, envoyé au retour de la connexion',
     'entry.openedPassage': 'Navigation ouverte',
-    'entry.undo': 'Annuler',
+    'entry.undo': 'Annuler l’entrée',
     'entry.undone': 'Annulé',
     'entry.addComment': 'Ajouter un commentaire',
     'entry.comment': 'Commentaire',
+    'entry.eventTime': 'Heure',
+    'entry.timeFromTrack': 'Changer l’heure relit la position dans la trace.',
+    'entry.noteTime': 'Heure (maintenant si vide)',
     'entry.noPassageError':
       'Aucune navigation où consigner : appareillez ou levez l’ancre d’abord.',
     'entry.refused': 'Non consigné : {message}',

package/public/js/log-lines.mjs

@@ -2,6 +2,11 @@
 // reading goes on which line, and what each event says. Pure — the server
 // imports it too — so strings only, no markup.
 
+// What a client may edit beyond the comment, mirroring `CLIENT_EVENT_TYPES` in
+// lib/events.js: an event the crew logged themselves. Narrower than
+// `source: "manual"`, which also covers a `manual_correction`.
+export const EDITABLE_EVENT_TYPES = ['manoeuvre', 'text_annotation', 'handwritten_annotation'];
+
 function autopilotTarget(target, format) {
   if (typeof target === 'number') {
     return format.bearing(target);