@signalk/tracks-plugin 3.0.0-beta.1 → 3.0.0-beta.3

package/dist/simplify.d.ts

@@ -0,0 +1,46 @@
+import { TimedPosition } from './types.js';
+/**
+ * Metres per degree of latitude. Good to ~0.5% over the WGS84 ellipsoid.
+ *
+ * Exported because the provider derives its automatic tolerance from the same
+ * figure: "one part in a thousand of the diagonal" only holds while both use
+ * one metres-per-degree value.
+ */
+export declare const M_PER_DEG = 111320;
+/**
+ * Douglas-Peucker simplification of a recorded track.
+ *
+ * Distinct from `thin()`, and the difference is the whole point: thinning
+ * decimates by *time*, so it keeps a point every N seconds whether the boat was
+ * turning or holding a course, and a corner falling between two samples is
+ * simply lost. Simplification decimates by *shape* — it keeps the points that
+ * carry the geometry and drops the ones a straight line already describes.
+ *
+ * That is what makes this the piece a route conversion needs. 5,550 points at
+ * 1.2 s spacing is a recording, not a route; thinning it to 30 points gives 30
+ * evenly spaced positions that miss every turn, while simplifying it to 30
+ * gives the turns and nothing else.
+ *
+ * `epsilon` is a tolerance in **metres**: no point of the original track is
+ * further than this from the simplified line.
+ */
+export declare function simplify(points: TimedPosition[], epsilon: number): TimedPosition[];
+/**
+ * The smallest epsilon that simplifies `points` to at most `target` of them.
+ *
+ * Epsilon is meaningful in the physical world but not in the thing a user
+ * cares about: "accurate to 10 m" gives 8 waypoints across an open bay and 400
+ * through an archipelago, so a client asking for a usable route cannot pick a
+ * number in advance. A point budget is predictable; the tolerance that
+ * achieved it is what gets reported back.
+ *
+ *
+ * Not reachable through the v2 API, which takes a tolerance rather than a
+ * budget. It is here for the track-management webapp's "convert to route",
+ * where the user asks for a usable number of waypoints and is told the
+ * accuracy that produced them.
+ */
+export declare function simplifyToBudget(points: TimedPosition[], target: number): {
+    points: TimedPosition[];
+    epsilon: number;
+};

package/dist/simplify.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/sqliteStore.d.ts

@@ -55,16 +55,20 @@ export declare class SqliteTrackStore implements TrackStore {
         track: LatLngTuple[];
     }[]>;
     /**
-     * Tracks whose last position matches the spatial predicate.
+     * Tracks matching the spatial predicate, which depends on who is asking.
+     *
+     * `intersects: false` — the v1 routes — matches a track's *last* position:
+     * "which vessels are near me now". `intersects: true` — the v2 Track API —
+     * matches a track that passed through the box at any point in the window,
+     * including one that has since left.
      *
      * Two filters run, and they are not redundant despite both testing bounds:
      *
      * - `contextsInBounds` asks the cell index which contexts have *any* position
      *   near the box. It is a cheap prefilter that keeps the query off every row
      *   in the table, and it decides nothing on its own.
-     * - `matcher` — the same predicate the in-memory store uses — then tests each
-     *   track's *last* position, which is what the endpoint actually means by
-     *   "in this box". That test is authoritative.
+     * - `matcher` — the same predicate the in-memory store uses — then applies
+     *   whichever rule the caller asked for. That test is authoritative.
      *
      * Because `matcher` has the final say, dropping the exact-bounds check inside
      * `contextsInBounds` does not change any result; it only widens the candidate
@@ -88,7 +92,7 @@ export declare class SqliteTrackStore implements TrackStore {
      * straight line across the anchorage.
      */
     segments(context: Context, window?: TimeWindow): LatLngTuple[][];
-    prune(maxAge: number): void;
+    prune(maxAge: number, keep?: Context): void;
     close(): void;
     /** Unsigned round-trip check, used by the tests. */
     cellIdsFor(context: Context): bigint[];

package/dist/stateGate.d.ts

@@ -1,8 +1,4 @@
 import { Context } from './types.js';
-/**
- * Off unless a user opts in, per the request and because the states worth
- * pausing on depend on how a boat is used.
- */
 export declare const DEFAULT_PAUSE_STATES: string[];
 /**
  * The states a boat is plausibly parked in, offered in the plugin UI.

package/dist/store.d.ts

@@ -8,12 +8,12 @@ import { TrackQuery } from './timeWindow.js';
  * calls in `index.ts` and nothing more, so that adding an implementation cannot
  * quietly widen what a store is expected to do.
  *
- * Note what is *not* here. `getAllTracks` and `getFilteredTracks` are derived
- * operations — filtering is a predicate over whole tracks, which the in-memory
- * implementation applies in JS and a database implementation will want to push
- * into the query. Both stay on the interface for that reason: a store that can
- * filter in SQL must be allowed to, rather than being forced to materialise
- * every track so a caller can filter it afterwards.
+ * `getAllTracks` and `getFilteredTracks` are derived operations, and they are
+ * on the interface deliberately: filtering is a predicate over whole tracks,
+ * which the in-memory implementation applies in JS and a database
+ * implementation will want to push into the query. A store that can filter in
+ * SQL must be allowed to, rather than being forced to materialise every track
+ * so a caller can filter it afterwards.
  */
 export interface TrackStore {
     /** Record a position for a context. `timestamp` defaults to now. */
@@ -21,7 +21,8 @@ export interface TrackStore {
     /**
      * Seed a context's track, replacing whatever it held.
      *
-     * Used by the History API bootstrap at startup. `timestamps` is positional
+     * A test helper: it is how a known track is installed without going through
+     * the position bus, which throttles on write. `timestamps` is positional
      * against `track`; points without one are dated to the start of time so a
      * time-window query treats them as older than anything live.
      */
@@ -50,8 +51,26 @@ export interface TrackStore {
      * "vessels currently near here" rather than "vessels that ever passed here".
      */
     getFilteredTracks(params: TrackParams, selfPosition?: LatLngTuple, debug?: Debug, query?: TrackQuery): Promise<TrackCollection>;
-    /** Drop contexts whose newest position is older than `maxAge` ms. */
-    prune(maxAge: number): void;
+    /**
+     * Drop contexts whose newest position is older than `maxAge` ms.
+     *
+     * `keep` is never pruned however long it has been idle. The own vessel's
+     * track is the one a user came for — it has to survive a winter on a
+     * mooring, a passage with the server off, and any gap in reception. Other
+     * vessels age out: a harbour puts hundreds of AIS targets past a receiver in
+     * a day, and keeping every one of them forever is not what anybody asked for.
+     *
+     * An implementation must also apply whatever row-level retention it was
+     * configured with, scoped to `keep`. The two are separate: one drops a whole
+     * vessel that has gone quiet, the other trims old points from the vessel a
+     * user is actually recording, and neither may switch the other off.
+     *
+     * `Infinity` ages nothing out, which is how a caller asks for the retention
+     * pass alone. A negative `maxAge` puts the cutoff in the future and so drops
+     * every context — the tests use `-1` for exactly that; the plugin's schema
+     * keeps it out of a real configuration.
+     */
+    prune(maxAge: number, keep?: Context): void;
     /**
      * Release any resources held by the store.
      *

package/dist/style.css

@@ -0,0 +1,49 @@
+:root {
+  color-scheme: light dark;
+  font-family: system-ui, sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 1rem;
+}
+
+h1 {
+  font-size: 1.25rem;
+  margin: 0 0 0.25rem;
+}
+
+#status {
+  color: GrayText;
+  margin: 0 0 1rem;
+}
+
+#status[data-state='error'] {
+  color: crimson;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th,
+td {
+  border-bottom: 1px solid ButtonBorder;
+  padding: 0.4rem 0.6rem;
+  text-align: left;
+}
+
+/* Point counts are compared down the column, so they line up on the right. */
+.num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+tbody tr:hover {
+  background: Canvas;
+}
+
+.self {
+  font-weight: 600;
+}

package/dist/trackApi.d.ts

@@ -15,18 +15,16 @@ export type TrackBoundingBox = [number, number, number, number];
 /**
  * A request as the server hands it to a provider.
  *
- * Not every field is honoured here. `simplify`, `epsilon` and `properties` are
- * accepted by the API and ignored by this provider: it serves positions, and
- * has no co-recorded values to attach or geometry simplifier to run. Geometry
- * comes back unsimplified, which is a superset of what such a request asked for
- * rather than a wrong answer.
+ * Not every field is honoured here. `properties` is accepted by the API and
+ * ignored by this provider: it serves positions, and has no co-recorded values
+ * to attach. Geometry comes back without them, which is a superset of what such
+ * a request asked for rather than a wrong answer.
  *
- * `resolution` and `maxPoints` are both applied, and the response reports the
- * spacing actually used — which is not always the one asked for, since a
- * budget widens it.
- *
- * Simplification and co-recorded properties are tracked separately; see
- * SignalK/tracks.
+ * `resolution`, `maxPoints`, `simplify` and `epsilon` are all applied, and the
+ * response reports the spacing and tolerance actually used — neither is always
+ * the one asked for, since a budget widens the spacing and `simplify` without
+ * an epsilon leaves the tolerance to the provider.
+
  */
 export interface TracksRequest {
     contexts?: string[];

package/dist/trackProvider.d.ts

@@ -1,5 +1,6 @@
 import { TrackStore } from './store.js';
 import { TrackApi } from './trackApi.js';
+import { TimedPosition, TimeWindow } from './types.js';
 /**
  * Serves the v2 Track API from this plugin's store.
  *
@@ -17,5 +18,28 @@ export interface TrackProviderDeps {
     selfContext: () => string;
     /** Gap in ms that starts a new segment; 0 leaves the track as one line. */
     segmentGap: () => number;
+    /**
+     * The vessel's name for `contextName`, or undefined when unknown.
+     *
+     * Injected like the rest: resolving it needs the server's data model, which
+     * the provider has no handle on. Called per query rather than cached,
+     * because an AIS target's static report routinely lands well after its
+     * first position.
+     */
+    contextName: (context: string) => string | undefined;
+    /**
+     * Positions a history provider holds for a context and window, reconciled
+     * with the store's own.
+     *
+     * Injected rather than reached for directly: the reconciliation belongs to
+     * the plugin, and the v1 routes have done it since #73 — a query answered
+     * through the v2 provider has to give the same answer as the same query
+     * answered through v1, or the plugin contradicts itself depending on which
+     * route a client happens to use.
+     *
+     * Resolves to the store's own points unchanged when no provider is
+     * installed, which is the common case.
+     */
+    reconcileWithHistory: (context: string, stored: TimedPosition[], window: TimeWindow | undefined, resolutionMs: number | undefined) => Promise<TimedPosition[]>;
 }
 export declare function createTrackProvider(deps: TrackProviderDeps): TrackApi;

package/dist/tracks.d.ts

@@ -15,9 +15,12 @@ export interface TracksConfig {
     fetchInitialTrack?: boolean;
 }
 /**
- * The in-memory store: a bounded sliding window of positions per context,
- * held in RxJS accumulators and lost on restart. `bootstrapSelfTrack()` in
- * index.ts is what re-hydrates it from a History provider at startup.
+ * The in-memory store: a bounded sliding window of positions per context, held
+ * in RxJS accumulators and lost on restart.
+ *
+ * No longer used by the plugin, which always records to SQLite. It remains as
+ * the client-side `TrackAccumulator` this package exports, where a browser
+ * holding one vessel's recent track in memory is exactly the right shape.
  */
 export declare class Tracks implements TrackStore {
     tracks: TracksMap;
@@ -44,7 +47,7 @@ export declare class Tracks implements TrackStore {
      * which tracks match — the filter runs once, here.
      */
     getFilteredTimedTracks(params: TrackParams, selfPosition?: LatLngTuple, debug?: Debug, query?: TrackQuery): Promise<TimedTrackCollection>;
-    prune(maxAge: number): void;
+    prune(maxAge: number, keep?: Context): void;
 }
 interface AccumulatorParams {
     resolution: number;

package/dist/tracks.js

@@ -0,0 +1,192 @@
+/**
+ * Track list for the management webapp.
+ *
+ * Reads the v2 Track API with `geometry=false`, which answers with each
+ * track's metadata and no coordinates — the same query the API already serves,
+ * so listing hundreds of tracks costs nothing like fetching them.
+ *
+ * Plain modules and no build step: the plugin ships `public/` as static files
+ * and the server mounts it directly, so anything needing a bundler would mean
+ * a second build output for a page this size.
+ */
+
+/**
+ * How far back the list reaches.
+ *
+ * The API refuses an unbounded multi-context query — "a time window (from or
+ * duration) is required unless a single context is given" — because listing
+ * every track a server ever saw is a question with no cheap answer. Thirty
+ * days covers the passage someone is looking for while keeping the query
+ * something the store can serve.
+ */
+const WINDOW = 'P30D'
+
+/**
+ * Ceiling on the list request.
+ *
+ * Generous, because a month of tracks on a busy receiver is a real query, not
+ * a hung one — this exists to end a request that will never answer, not to
+ * hurry a slow store.
+ */
+const REQUEST_TIMEOUT_MS = 30_000
+
+/** Relative, because the server mounts this under /@signalk/tracks-plugin. */
+const TRACKS_URL = `../../signalk/v2/api/tracks?geometry=false&duration=${WINDOW}`
+
+const status = document.getElementById('status')
+const table = document.getElementById('tracks')
+const tbody = table.querySelector('tbody')
+
+/**
+ * The label for a track, matching `trackLabel()` on the server.
+ *
+ * The API gives `contextName` — the vessel's own name, undecorated and absent
+ * when unknown — plus `isSelf`. Turning those into something a person
+ * recognises is the client's job, and it has to agree with what v1 returns or
+ * the same track reads differently depending on which screen it is on.
+ */
+function label({ context, contextName, isSelf }) {
+  if (isSelf) {
+    return 'Own Ship'
+  }
+  if (contextName) {
+    return `AIS ${contextName}`
+  }
+  const mmsi = /urn:mrn:imo:mmsi:(\d+)$/.exec(context)
+  return mmsi ? `AIS ${mmsi[1]}` : context
+}
+
+/** ISO-8601 from the API, rendered in the viewer's own locale and zone. */
+function when(iso) {
+  const at = new Date(iso)
+  return Number.isNaN(at.getTime()) ? '—' : at.toLocaleString()
+}
+
+function row(properties) {
+  const tr = document.createElement('tr')
+  const name = document.createElement('td')
+  name.textContent = label(properties)
+  if (properties.isSelf) {
+    name.className = 'self'
+  }
+  tr.append(
+    name,
+    cell(when(properties.from)),
+    cell(when(properties.to)),
+    cell(properties.pointCount, 'num'),
+    exportCell(properties),
+  )
+  return tr
+}
+
+/**
+ * A link that downloads this track as GPX.
+ *
+ * A plain link rather than a fetch: the browser already knows how to save a
+ * response with a Content-Disposition on it, and the server sets one. Doing it
+ * by hand would mean holding a whole track in memory to build a blob.
+ */
+function exportCell({ context, isSelf }) {
+  const td = document.createElement('td')
+  const link = document.createElement('a')
+  // `self` resolves server-side; using it keeps the URL short and avoids
+  // guessing how the own vessel's context should be spelled.
+  const vessel = isSelf ? 'self/track.gpx' : `vessels/${encodeURIComponent(context)}/track.gpx`
+  link.href = `../../signalk/v1/api/${vessel}?duration=${WINDOW}`
+  link.textContent = 'GPX'
+  link.rel = 'nofollow'
+  td.append(link)
+  return td
+}
+
+function cell(text, className) {
+  const td = document.createElement('td')
+  // textContent, never innerHTML: a vessel name arrives from an AIS
+  // transmission and is not ours to trust as markup.
+  td.textContent = String(text)
+  if (className) {
+    td.className = className
+  }
+  return td
+}
+
+function show(message, state) {
+  status.textContent = message
+  if (state) {
+    status.dataset.state = state
+  } else {
+    delete status.dataset.state
+  }
+}
+
+async function load() {
+  let response
+  // Bounded, because an unsettled fetch is the one failure the page cannot
+  // recover from: every other path ends in an error message, while a stalled
+  // server or proxy leaves it on "Loading…" indefinitely, which reads as a
+  // hang rather than a failure. The signal stays armed through json() below,
+  // so a response that stops mid-body is caught too.
+  const deadline = AbortSignal.timeout(REQUEST_TIMEOUT_MS)
+  try {
+    response = await fetch(TRACKS_URL, { credentials: 'include', signal: deadline })
+  } catch {
+    show(deadline.aborted ? 'The server did not answer in time.' : 'Could not reach the server.', 'error')
+    return
+  }
+  // 501 is the server saying no provider is registered, which is a different
+  // thing from an error and worth telling the user plainly.
+  if (response.status === 501) {
+    show('No track provider is registered on this server.', 'error')
+    return
+  }
+  if (!response.ok) {
+    show(`The server answered ${response.status}.`, 'error')
+    return
+  }
+
+  let body
+  try {
+    body = await response.json()
+  } catch {
+    // A 200 carrying something that is not JSON: a proxy's error page, or a
+    // body that stops mid-stream, which the deadline above aborts here rather
+    // than at the fetch. Without this the rejection escapes `void load()` and
+    // the page sits on "Loading…" forever, which looks like a hang.
+    show(
+      deadline.aborted ? 'The server did not answer in time.' : 'The server sent a response this page could not read.',
+      'error',
+    )
+    return
+  }
+  // A 200 carrying something else entirely -- an error object, a login page --
+  // is a failure, not an empty list. Reporting "no tracks" for it would tell
+  // the user the opposite of what happened.
+  if (body?.type !== 'FeatureCollection' || !Array.isArray(body.features)) {
+    show('The server sent a response this page could not read.', 'error')
+    return
+  }
+  // Individual entries are still skipped rather than thrown on: one malformed
+  // feature should not blank a list that is otherwise fine.
+  const features = body.features
+  // Newest first: the track someone came to look at is almost always the one
+  // that just finished.
+  const sorted = features
+    .map((feature) => feature?.properties)
+    .filter(
+      (properties) => properties && typeof properties.context === 'string' && Number.isFinite(properties.pointCount),
+    )
+    .sort((a, b) => String(b.to ?? '').localeCompare(String(a.to ?? '')))
+
+  // Checked after filtering, not before: a response of nothing but malformed
+  // features would otherwise draw an empty table reading "0 tracks".
+  if (sorted.length === 0) {
+    show('No tracks in the last 30 days.')
+    return
+  }
+
+  tbody.replaceChildren(...sorted.map(row))
+  table.hidden = false
+  show(`${sorted.length} track${sorted.length === 1 ? '' : 's'} in the last 30 days.`)
+}
+
+void load()

package/dist/utils.d.ts

@@ -29,3 +29,72 @@ export declare function validateParameters(params: QueryParameters, defaultMaxRa
 export declare function createDistanceTo([lat1d, lon1d]: LatLngTuple, debug?: Debug): (d: LatLngTuple | null) => number;
 export declare function resolveContext(vesselId: string, selfContext?: string): string;
 export declare function createMatcher(params: TrackParams, selfPosition?: LatLngTuple, debug?: Debug): (track: LatLngTuple[]) => boolean;
+/**
+ * A history row is `[timestamp, position]`. Both encodings are legal: the
+ * History API types a value as `unknown` and its own comment names "objects
+ * (like navigation.position)" alongside primitives, so signalk-questdb returns
+ * `{latitude, longitude}` and signalk-to-influxdb2 returns `[lon, lat]`.
+ * Accept both — neither is an error, so rejecting one silently yields an empty
+ * track rather than a failure anybody can see.
+ */
+export declare const historyRowPosition: (row: unknown) => LatLngTuple | undefined;
+/**
+ * The name of the vessel (or aircraft, or aton) a context refers to.
+ *
+ * Deliberately bare — `Ariadne`, not `AIS Ariadne` and not `Own Ship`. This is
+ * the v2 Track API's `contextName`, whose spec says "Name of the vessel,
+ * aircraft or other context, where known. Not a name for the track itself."
+ * Decoration belongs to whoever is drawing a list; see `trackLabel`.
+ *
+ * `lookup` reads the data model (`app.getPath`). Note the shape: a vessel's
+ * `name` is a bare string in the full model, not the `{value}` wrapper that
+ * `navigation.position` and friends carry, so both are accepted rather than
+ * guessed at.
+ *
+ * Resolves `name` and nothing else, matching the server's own `findContextName`
+ * (`packages/server-admin-ui/src/utils/pathKeys.ts`), which returns undefined
+ * rather than substituting an identifier. An MMSI is how a vessel is addressed,
+ * not what it is called, so it belongs in `trackLabel` where something has to
+ * render — putting it here would make "where known" untrue.
+ */
+export declare function contextName(context: string, lookup: (path: string) => unknown): string | undefined;
+/**
+ * A display label for a track, as a chart plotter would show it.
+ *
+ * TimeZero's GPX exports label tracks `Own Ship` and `AIS <shipname>` — never a
+ * serial number — and that is what makes a list of tracks readable. A UI
+ * listing `vessels.urn:mrn:imo:mmsi:211234567` is unusable.
+ *
+ * Distinct from `contextName`: this one *is* a name for the track, so it says
+ * whose track it is and where the identity came from. Falls back to the raw
+ * context, because a label has to render something.
+ */
+export declare function trackLabel(context: string, selfContext: string | undefined, lookup: (path: string) => unknown): string;
+/**
+ * A track label as a filename a browser can save.
+ *
+ * A vessel name arrives from an AIS transmission and is not ours to trust in a
+ * path, so the characters that could break out of one — separators, quotes,
+ * controls — are replaced. Everything else is kept, including non-ASCII: a
+ * boat called `Ärger` keeps its name.
+ */
+export declare function gpxFilename(label: string): string;
+/**
+ * The ASCII-only form of a filename, for the quoted `Content-Disposition`
+ * parameter.
+ *
+ * An HTTP header carries bytes: anything outside Latin-1 makes `setHeader`
+ * throw, and anything outside ASCII is reinterpreted byte-wise by the client,
+ * so `Ärger.gpx` arrives as mojibake. The real name travels in the `filename*`
+ * parameter; this is the fallback for readers that do not implement it.
+ */
+export declare function asciiFilename(filename: string): string;
+/**
+ * A filename as an RFC 8187 extended value, for `filename*`.
+ *
+ * `encodeURIComponent` is close but not exact: it leaves `!'()*` unescaped,
+ * and RFC 8187's `attr-char` set excludes them. A vessel called
+ * `Boat (Test)` would otherwise put raw parentheses into the header, which is
+ * not a valid extended value.
+ */
+export declare function rfc8187(filename: string): string;

package/dist/webapp.e2e.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/webapp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/tracks-plugin",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.3",
   "description": "Plugin to keep track of tracks of vessels",
   "type": "module",
   "exports": {
@@ -15,6 +15,7 @@
   "//files": "app-icon.svg ships alongside dist because `files` is an allowlist: the app store probes the declared signalk.appIcon path inside the published tarball, so an icon left out here 404s and the plugin falls back to a placeholder.",
   "files": [
     "dist",
+    "public",
     "app-icon.svg"
   ],
   "signalk": {
@@ -23,6 +24,8 @@
   },
   "keywords": [
     "signalk-node-server-plugin",
+    "signalk-webapp",
+    "signalk-embeddable-webapp",
     "signalk-category-utility"
   ],
   "author": "Teppo Kurki <teppo.kurki@iki.fi>",
@@ -52,6 +55,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@js-temporal/polyfill": "^0.5.1",
+    "@xmldom/xmldom": "^0.9.12",
     "rxjs": "^7.8.2",
     "s2js": "^1.44.0",
     "typebox": "^1.3.11"
@@ -72,6 +76,6 @@
     "typescript-eslint": "^8.66.0",
     "vite": "^8.2.2",
     "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.10"
+    "vitest": "^5.0.0"
   }
 }

package/public/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Tracks</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Tracks</h1>
+      <p id="status" role="status">Loading…</p>
+    </header>
+    <main>
+      <table id="tracks" hidden>
+        <thead>
+          <tr>
+            <th scope="col">Vessel</th>
+            <th scope="col">From</th>
+            <th scope="col">To</th>
+            <th scope="col" class="num">Points</th>
+            <th scope="col">Export</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </main>
+    <script type="module" src="./tracks.js"></script>
+  </body>
+</html>