sailkick-boat 0.21.2 → 0.22.0

package/README.md

@@ -242,6 +242,15 @@ so the boat's own app opens with no password, fully offline. Everything else in
 config passes through untouched. (Hand-edit `proxy.openAccess: false` to keep the cloud
 login gate — there is no toggle, since the gate cannot complete over the mirror anyway.)
 
+It also fills in **`boat.perfKey`**, which the cloud only sends to a logged-in session.
+Without it the app has no identity and the **performance data cloud** — the recorded
+(TWA, STW) samples behind the polar plot, baked to `/perf/<perfKey>/estimate.json` — never
+loads, even though the bake itself is cached and reachable. The key is derived rather than
+configured: the app server takes a boat's Influx bucket and its perf directory from the
+same identity, so the bucket minus its `_raw` suffix *is* the perf key, for a UUID account
+and a grandfathered slug one alike. An unpaired boat has no bucket, so `boat` is left
+exactly as the cloud sent it.
+
 ## Routes, polars and settings — stored on the boat
 The app reads and writes these through `/api/profile/*`. On the cloud that router is
 session-gated, and the mirror can never satisfy it: the caching GET path forwards no
@@ -255,9 +264,33 @@ directory (atomic writes, saves serialized so a burst from the route panel can't
 itself). Same envelopes as the cloud, so the app can't tell the difference — and route
 planning now works with no uplink at all, which is when you actually want it.
 
-**This copy is boat-local and does not sync.** A route saved on board stays on board; a
-route saved in the web app stays in the cloud. Merging the two needs conflict resolution
-worth designing properly rather than guessing at, so for now they are simply separate.
+**This copy is boat-local.** A route saved on board stays on board; a route saved in the
+web app stays in the cloud. They are not reconciled in the background — but you can copy
+either way, item by item, from the **Sync polars & routes** page in the Signal K Webapps
+menu.
+
+### Sync page — copying polars and routes to and from the cloud
+
+Sign in once with your sailkick account and the page lists polars and routes on both
+sides, marking each **in sync**, **differs**, **boat only** or **cloud only**, with a
+button to copy it either way. Nothing is deleted, and an item that already exists is only
+overwritten after a confirmation.
+
+The plugin holds the session, not the browser. That is what makes this possible at all:
+the cloud session cookie is `HttpOnly; SameSite=Lax; Secure`, and the boat serves the app
+over plain HTTP on a LAN address — a browser will not store a Secure cookie on an http
+origin, will not send a Lax cookie cross-site, and blocks an https page from fetching http
+at all. Those are all *browser* rules; the plugin is an ordinary HTTP client talking https
+to the cloud, so none of them apply, and the browser only ever talks to the boat.
+
+**Only the session is stored, never the password** — it buys a session and is discarded.
+The session lasts 30 days, after which the page asks you to sign in again. The endpoints
+live on the plugin's own router, which sits behind Signal K's security, rather than on the
+open mirror port where anyone on the boat's wifi could use them.
+
+Items are matched by **name**, since ids are assigned independently on each side. So a
+polar you refined in the web app appears as *cloud only* — or *differs* if the boat has an
+older one of the same name — and one click brings it aboard.
 
 ## Local history (offline Trends + track)
 **One source: a live ring**, sampled from the same BoatState that feeds `/ws/telemetry`

package/index.js

@@ -10,6 +10,7 @@ const { createBackfill } = require('./lib/backfill')
 const { createAis } = require('./lib/ais')
 const { createAisTargets } = require('./lib/ais/targets')
 const { createProfile } = require('./lib/profile')
+const { createCloud } = require('./lib/cloud')
 const { resolveAccountConfig } = require('./lib/account')
 
 // sailkick-boat: one Signal K plugin, two independently-toggleable modules —
@@ -98,6 +99,7 @@ module.exports = function (app) {
   let ais = null
   let aisTargets = null
   let profile = null
+  let cloud = null
   let proxyPort = null // what the launcher page needs to build its links
   let pairedSlug = null
   let statusTimer = null
@@ -266,9 +268,17 @@ module.exports = function (app) {
       if (upstream.ignored) {
         ;(app.error || console.error)(`[sailkick-boat] ignoring proxy.sailkickUrl "${upstream.ignored}" left over from an older config — mirroring ${upstream.url}. Set proxy.selfHosted:true to keep your own server.`)
       }
+      // Boat identity for the app, derived — never guessed. The cloud only fills
+      // config.boat for a logged-in session and the mirror forwards no cookie, so the app
+      // ran with no identity and public/engine/polar-cloud.js could not find its data
+      // cloud (it keys on boat.perfKey). The app server defaults `bucket` and `perfKey`
+      // from the same identity (server/auth/registry.js), so the bucket minus its _raw
+      // suffix IS the perf key — for a UUID account and a grandfathered slug one alike.
+      const perfKey = b && b.bucket ? String(b.bucket).replace(/_raw$/, '') : null
       const pOpts = {
         sailkickUrl: upstream.url,
         storeDir: store,
+        boat: perfKey ? { perfKey, slug: (b && b.slug) || perfKey } : null,
         proxyPort: (proxyPort = p.proxyPort == null ? 8080 : p.proxyPort),
         localSignalkUrl: p.localSignalkUrl || 'http://127.0.0.1:3000',
         localPaths: (p.localPaths && p.localPaths.length) ? p.localPaths : PROXY_TUNING.localPaths,
@@ -326,6 +336,16 @@ module.exports = function (app) {
         profile = null
       }
 
+      // Cloud account session, for copying polars and routes between the boat and the
+      // cloud copy (the Sync page). Cookie only — see lib/cloud/index.js.
+      try {
+        cloud = createCloud(app, { upstream: SAILKICK_APP_URL, timeoutMs: PROXY_TUNING.requestTimeoutMs })
+        cloud.start()
+      } catch (e) {
+        (app.error || console.error)('[sailkick-boat] cloud session start failed: ' + e.message)
+        cloud = null
+      }
+
       if (p.serveTelemetry !== false) {
         try {
           telemetry = createTelemetry(app, {})
@@ -452,6 +472,7 @@ module.exports = function (app) {
     try { if (history) history.stop() } catch {}
     try { if (aisTargets) aisTargets.stop() } catch {}
     try { if (profile) profile.stop() } catch {}
+    try { if (cloud) cloud.stop() } catch {}
     try { if (ais) ais.stop() } catch {}
     try { if (backfill) backfill.stop() } catch {}
     try { if (proxy) proxy.stop() } catch {}
@@ -462,6 +483,7 @@ module.exports = function (app) {
     ais = null
     aisTargets = null
     profile = null
+    cloud = null
     proxyPort = null
     pairedSlug = null
     proxy = null
@@ -485,6 +507,27 @@ module.exports = function (app) {
         version: (() => { try { return require('./package.json').version } catch { return null } })()
       })
     })
+    // Cloud account endpoints for the Sync page. Deliberately HERE and not on the mirror:
+    // the plugin router sits behind Signal K's own security (this path answers 401
+    // unauthenticated, the mirror answers 200), so the cloud session is no more exposed
+    // than the admin UI. On :8080 it would be handed to anyone on the boat's wifi.
+    router.all('/cloud/*', (req, res) => {
+      if (!cloud) { res.status(503).json({ ok: false, code: 'off', message: 'plugin not enabled' }); return }
+      cloud.handle(String(req.params[0] || ''), req, res)
+    })
+    // The boat's OWN profile, mirrored onto this router so the Sync page can read both
+    // sides same-origin. It is already served on the mirror for the app itself, but the
+    // page is served from Signal K on :3000 and a cross-port fetch would need CORS.
+    router.all('/profile*', (req, res) => {
+      if (!profile) { res.status(503).json({ ok: false, code: 'off', message: 'plugin not enabled' }); return }
+      const rest = String(req.params[0] || '')
+      // profile.handle() parses an /api/profile/... url; give it one — query string
+      // included, or ?section= would be silently dropped and return the whole profile.
+      const qs = req.url.indexOf('?')
+      const url = '/api/profile' + rest + (qs >= 0 ? req.url.slice(qs) : '')
+      const shim = new Proxy(req, { get: (t, k) => (k === 'url' ? url : t[k]) })
+      profile.handle(shim, res)
+    })
     router.get('/p/*', (req, res) => {
       if (proxy) proxy.handleGet(req, res)
       else res.status(503).send('proxy not enabled')

package/lib/cloud/index.js

@@ -0,0 +1,226 @@
+'use strict'
+
+// Authenticated client for the boat's own cloud account, so the app on board can copy
+// polars and routes to and from the cloud copy.
+//
+// Why the PLUGIN holds the credential rather than the browser: the cloud session cookie
+// is `HttpOnly; SameSite=Lax; Secure` (server/auth/session.js), and the boat serves the
+// app over plain HTTP on a LAN address. A browser will not store a Secure cookie on an
+// http origin, will not send a Lax cookie cross-site, and blocks an https page from
+// fetching http at all — so no arrangement of buttons in the browser can bridge the two.
+// Every one of those is a BROWSER rule. Here the plugin is an ordinary HTTP client
+// talking https to the cloud, so none of them apply, and the browser only ever talks to
+// the boat, same-origin.
+//
+// COOKIE ONLY. The password is used once to obtain a session and is never written to
+// disk: a stored password would let the boat act as the account indefinitely, which is a
+// large escalation over the bucket-scoped write token sync uses. The cost is that the
+// session expires (30 days, server/auth/session.js TTL_SEC) and has to be renewed by
+// hand. That trade was chosen deliberately.
+//
+// These endpoints are mounted on the PLUGIN ROUTER, not the open mirror on :8080. The
+// plugin router sits behind Signal K's own security (verified: /plugins/sailkick-boat/*
+// answers 401 unauthenticated, the mirror answers 200), so the cloud session is no more
+// exposed than the admin UI itself. On the mirror it would be handed to anyone on the
+// boat's wifi.
+
+const fs = require('fs')
+const fsp = fs.promises
+const path = require('path')
+
+const COOKIE_NAME = 'sk_session'
+const MAX_BODY_BYTES = 8 * 1024 * 1024 // a polar CSV is tiny; this is just a sane ceiling
+
+function createCloud (app, options = {}) {
+  const log = (m) => (app.debug ? app.debug('[cloud] ' + m) : console.log('[sailkick-boat:cloud]', m))
+  const warn = (m) => (app.error ? app.error('[sailkick-boat:cloud] ' + m) : console.error('[sailkick-boat:cloud]', m))
+
+  const upstream = String(options.upstream || '').replace(/\/+$/, '')
+  const dataDir = options.dataDir || (app.getDataDirPath && app.getDataDirPath()) || '.'
+  const file = options.sessionFile || path.join(dataDir, 'cloud-session.json')
+  const timeoutMs = options.timeoutMs || 20000
+
+  let session = null // { cookie, slug, expiresAt }
+
+  function load () {
+    try {
+      const j = JSON.parse(fs.readFileSync(file, 'utf8'))
+      if (j && j.cookie) session = j
+    } catch { /* absent or corrupt — simply logged out */ }
+    if (session && session.expiresAt && Date.now() > session.expiresAt) {
+      log('stored cloud session had expired — logged out')
+      session = null
+      remove()
+    }
+  }
+
+  async function persist () {
+    try {
+      await fsp.mkdir(path.dirname(file), { recursive: true })
+      const tmp = `${file}.tmp-${process.pid}`
+      await fsp.writeFile(tmp, JSON.stringify(session), { mode: 0o600 })
+      await fsp.rename(tmp, file)
+    } catch (e) { warn('could not persist the cloud session: ' + e.message) }
+  }
+  function remove () { try { fs.unlinkSync(file) } catch {} }
+
+  // Pull our cookie out of a Set-Cookie response. getSetCookie() is the correct API when
+  // several cookies come back; fall back for older runtimes.
+  function readCookie (headers) {
+    const all = typeof headers.getSetCookie === 'function'
+      ? headers.getSetCookie()
+      : [headers.get('set-cookie')].filter(Boolean)
+    for (const raw of all) {
+      const first = String(raw).split(';')[0]
+      if (first.startsWith(COOKIE_NAME + '=')) {
+        const maxAge = /max-age=(\d+)/i.exec(raw)
+        return { cookie: first, expiresAt: maxAge ? Date.now() + Number(maxAge[1]) * 1000 : null }
+      }
+    }
+    return null
+  }
+
+  async function login (slug, password) {
+    if (!upstream) return { ok: false, code: 'no-upstream', message: 'no cloud host configured' }
+    let r
+    try {
+      r = await fetch(`${upstream}/api/auth/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ slug, password }),
+        signal: AbortSignal.timeout(timeoutMs)
+      })
+    } catch (e) {
+      return { ok: false, code: 'offline', message: `cannot reach ${upstream} (${e.message})` }
+    }
+    if (r.status === 401) return { ok: false, code: 'bad-credentials', message: 'wrong boat name or password' }
+    if (!r.ok) return { ok: false, code: 'login-failed', message: `the cloud replied HTTP ${r.status}` }
+    const got = readCookie(r.headers)
+    if (!got) return { ok: false, code: 'no-session', message: 'the cloud accepted the login but sent no session' }
+
+    let name = slug
+    try { const j = await r.json(); name = (j && j.boat && (j.boat.slug || j.boat.name)) || slug } catch {}
+    session = { cookie: got.cookie, slug: name, expiresAt: got.expiresAt }
+    await persist()
+    log(`logged in to ${upstream} as ${name}${got.expiresAt ? `; session valid until ${new Date(got.expiresAt).toISOString().slice(0, 10)}` : ''}`)
+    return { ok: true, ...status() }
+  }
+
+  function logout () {
+    session = null
+    remove()
+    log('cloud session cleared')
+    return { ok: true, ...status() }
+  }
+
+  function status () {
+    if (!session) return { loggedIn: false, upstream }
+    return {
+      loggedIn: true,
+      upstream,
+      slug: session.slug,
+      expiresAt: session.expiresAt || null,
+      expiresInDays: session.expiresAt ? Math.max(0, Math.round((session.expiresAt - Date.now()) / 86400000)) : null
+    }
+  }
+
+  // One authenticated request against the cloud. Never throws: the caller is an HTTP
+  // handler and a boat is offline most of the time.
+  async function request (apiPath, { method = 'GET', body = null } = {}) {
+    if (!session) return { ok: false, status: 401, code: 'logged-out', message: 'not logged in to the cloud' }
+    let r
+    try {
+      r = await fetch(upstream + apiPath, {
+        method,
+        headers: {
+          Cookie: session.cookie,
+          Accept: 'application/json',
+          ...(body ? { 'Content-Type': 'application/json' } : {})
+        },
+        body: body || undefined,
+        signal: AbortSignal.timeout(timeoutMs)
+      })
+    } catch (e) {
+      return { ok: false, status: 0, code: 'offline', message: `cannot reach the cloud (${e.message})` }
+    }
+    // A 401 means the session died (expired, or revoked by a logout elsewhere). Clear it
+    // so the page shows a login form instead of silently failing every button.
+    if (r.status === 401) {
+      session = null
+      remove()
+      warn('the cloud session is no longer valid — log in again on the Sync page')
+      return { ok: false, status: 401, code: 'logged-out', message: 'the cloud session expired — log in again' }
+    }
+    const text = await r.text().catch(() => '')
+    let json = null
+    try { json = JSON.parse(text) } catch {}
+    return { ok: r.ok, status: r.status, json, text }
+  }
+
+  // ---- HTTP surface, mounted on the plugin router --------------------------------
+  const send = (res, code, obj) => {
+    res.statusCode = code
+    res.setHeader('Content-Type', 'application/json')
+    res.end(JSON.stringify(obj))
+  }
+
+  function readJson (req) {
+    return new Promise((resolve) => {
+      let size = 0
+      const chunks = []
+      req.on('data', (c) => {
+        size += c.length
+        if (size > MAX_BODY_BYTES) { req.destroy(); resolve(undefined); return }
+        chunks.push(c)
+      })
+      req.on('error', () => resolve(undefined))
+      req.on('end', () => {
+        const raw = Buffer.concat(chunks).toString('utf8')
+        if (!raw.trim()) return resolve(null)
+        try { resolve(JSON.parse(raw)) } catch { resolve(undefined) }
+      })
+    })
+  }
+
+  // `rest` is the path after /cloud — '', 'status', 'login', 'logout', 'profile/...'
+  async function handle (rest, req, res) {
+    const [head, ...tail] = String(rest || '').replace(/^\/+/, '').split('/')
+    const method = req.method === 'HEAD' ? 'GET' : req.method
+
+    if (head === 'status' && method === 'GET') return send(res, 200, { ok: true, ...status() })
+
+    if (head === 'logout' && method === 'POST') return send(res, 200, logout())
+
+    if (head === 'login' && method === 'POST') {
+      const body = await readJson(req)
+      if (!body || typeof body !== 'object') return send(res, 400, { ok: false, code: 'bad-body', message: 'send {slug, password}' })
+      const r = await login(String(body.slug || '').trim(), String(body.password || ''))
+      return send(res, r.ok ? 200 : (r.code === 'bad-credentials' ? 401 : 502), r)
+    }
+
+    // Everything under /cloud/profile is relayed verbatim to the cloud's own profile API,
+    // so polars and routes need no per-section code here — the shapes already match the
+    // boat's local copy (lib/profile/index.js mirrors the same router).
+    if (head === 'profile') {
+      const body = (method === 'POST' || method === 'PUT') ? JSON.stringify(await readJson(req)) : null
+      const target = '/api/profile' + (tail.length ? '/' + tail.map(encodeURIComponent).join('/') : '')
+      const r = await request(target, { method, body })
+      if (!r.ok && r.code) return send(res, r.status === 401 ? 401 : 502, { ok: false, code: r.code, message: r.message })
+      res.statusCode = r.status
+      res.setHeader('Content-Type', 'application/json')
+      return res.end(r.text || '{}')
+    }
+
+    send(res, 404, { ok: false, code: 'not-found', message: `${req.method} /cloud/${rest} not found` })
+  }
+
+  function start () {
+    load()
+    log(session ? `cloud session for "${session.slug}" loaded` : 'no cloud session — log in on the Sync page to copy polars and routes')
+  }
+  function stop () { session = null }
+
+  return { start, stop, handle, status, login, logout, request, _file: () => file }
+}
+
+module.exports = { createCloud, COOKIE_NAME }

package/lib/proxy/index.js

@@ -93,9 +93,11 @@ function createProxy (app, options) {
       history: options.history || null,
       aisTargets: options.aisTargets || null,
       profile: options.profile || null,
+      boat: options.boat || null, // { perfKey, slug } — patched into /api/config, see serveConfig
       openAccess: options.openAccess !== false
     }
     log(`mirroring ${cfg.upstream}; local SignalK ${cfg.localSignalk}; store ${cfg.storeDir}`)
+    if (cfg.boat && cfg.boat.perfKey) log(`boat identity for the app: perfKey=${cfg.boat.perfKey} (performance data cloud at /perf/${cfg.boat.perfKey}/)`)
 
     // Cache-manifest poller: auto-refresh a dataset lazily when the cloud
     // announces a new bake. Tiles are otherwise pinned (no time-based expiry).
@@ -293,6 +295,26 @@ function createProxy (app, options) {
         if (j && typeof j === 'object') {
           j.auth = { ...(j.auth || {}), required: false } // single-tenant boat: no cloud login
           if (cfg.history && cfg.history.available()) j.historyAvailable = true // served locally (InfluxDB or ring)
+          // The cloud fills `boat` only for a logged-in session, and the mirror forwards no
+          // cookie — so it always arrived as null and the app had no identity. Harmless for
+          // most of the UI, but public/engine/polar-cloud.js keys the performance data cloud
+          // on boat.perfKey and throws 'no boat identity' without it, so the polar cloud was
+          // simply absent on the boat while the bake sat cached and reachable.
+          //
+          // perfKey is not guessed: server/auth/registry.js defaults `bucket` and `perfKey`
+          // from the same identity, so the bucket minus its _raw suffix IS the perf key —
+          // for UUID accounts and for grandfathered slug ones alike.
+          if (cfg.boat && cfg.boat.perfKey) {
+            j.boat = {
+              ...(j.boat || {}),
+              perfKey: cfg.boat.perfKey,
+              slug: cfg.boat.slug || cfg.boat.perfKey,
+              name: (j.boat && j.boat.name) || cfg.boat.slug || cfg.boat.perfKey,
+              // NEVER readOnly: that flag exists for public visitor sessions, and it hides
+              // the editing affordances. The owner at the chart table has full control.
+              readOnly: false
+            }
+          }
           out = Buffer.from(JSON.stringify(j))
           ct = 'application/json'
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sailkick-boat",
-  "version": "0.21.2",
+  "version": "0.22.0",
   "description": "Run the sailkick app on board with no internet: charts, weather, climatology, trends and AIS all served from the boat itself. With a sailkick account it also syncs your metrics to the cloud in real time. Alpha, invite-only \u2014 info@sailkick.io",
   "main": "index.js",
   "scripts": {

package/public/index.html

@@ -51,6 +51,7 @@
   <div class="grid">
     <a class="card" id="desktop" href="#"><strong>Open Sailkick</strong><span>Full app — chart, trends, weather</span></a>
     <a class="card" id="mobile"  href="#"><strong>Open on phone</strong><span>Mobile view — swipeable instrument decks</span></a>
+    <a class="card" href="sync.html"><strong>Sync polars &amp; routes</strong><span>Copy between this boat and the cloud</span></a>
   </div>
 
   <div class="note" id="note">Locating the mirror…</div>

package/public/sync.html

@@ -0,0 +1,233 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Sailkick · Sync</title>
+<!--
+  Copy polars and routes between this boat and the cloud account.
+
+  Both sides are read through the PLUGIN ROUTER (/plugins/sailkick-boat/...), never the
+  mirror on :8080 — that router is behind Signal K's own security, and it keeps this page
+  same-origin with both sides so no CORS is involved.
+
+  Items are matched by NAME, not id: ids are assigned independently on each side, so the
+  same polar has two different ids. Nothing is ever overwritten without a second, explicit
+  click, and nothing is deleted at all.
+-->
+<style>
+  :root { color-scheme: light dark; --bg:#f6f7f9; --fg:#12161c; --mut:#5c6672; --card:#fff; --line:#e2e6eb;
+          --accent:#0b6ea9; --ok:#1d7a4c; --warn:#b4791f; --err:#b4453a }
+  @media (prefers-color-scheme: dark) {
+    :root { --bg:#11151a; --fg:#e8edf2; --mut:#96a1ad; --card:#171c23; --line:#252c35;
+            --accent:#4aa8e0; --ok:#4cc38a; --warn:#d9a441; --err:#e0736a }
+  }
+  * { box-sizing: border-box }
+  body { margin:0; padding:1.5rem 1rem 3rem; background:var(--bg); color:var(--fg);
+         font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif }
+  main { max-width:60rem; margin:0 auto }
+  h1 { margin:0 0 .2rem; font-size:1.4rem; display:flex; align-items:center; gap:.5rem }
+  h1 img { border-radius:.35rem }
+  h2 { font-size:1rem; margin:1.6rem 0 .5rem; color:var(--mut); font-weight:600;
+       text-transform:uppercase; letter-spacing:.04em }
+  .sub { color:var(--mut); margin:0 0 1.2rem }
+  .bar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; padding:.8rem 1rem; background:var(--card);
+         border:1px solid var(--line); border-radius:.6rem; margin-bottom:1rem }
+  .bar .grow { flex:1 1 auto }
+  input { padding:.45rem .6rem; border:1px solid var(--line); border-radius:.4rem;
+          background:var(--bg); color:var(--fg); font:inherit; min-width:9rem }
+  button { padding:.45rem .8rem; border:1px solid var(--line); border-radius:.4rem; background:var(--card);
+           color:inherit; font:inherit; cursor:pointer }
+  button:hover:not(:disabled) { border-color:var(--accent) }
+  button:disabled { opacity:.4; cursor:default }
+  button.primary { background:var(--accent); border-color:var(--accent); color:#fff }
+  table { width:100%; border-collapse:collapse; background:var(--card);
+          border:1px solid var(--line); border-radius:.6rem; overflow:hidden }
+  th, td { padding:.55rem .7rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle }
+  th { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--mut) }
+  tr:last-child td { border-bottom:none }
+  td.act { text-align:right; white-space:nowrap }
+  .tag { font-size:.75rem; padding:.1rem .45rem; border-radius:.3rem; border:1px solid var(--line); color:var(--mut) }
+  .tag.ok { color:var(--ok); border-color:var(--ok) }
+  .tag.diff { color:var(--warn); border-color:var(--warn) }
+  .tag.only { color:var(--accent); border-color:var(--accent) }
+  .msg { padding:.7rem 1rem; border-radius:.5rem; border:1px solid var(--line); background:var(--card); margin:.8rem 0 }
+  .msg.err { border-color:var(--err); color:var(--err) }
+  .msg.ok { border-color:var(--ok) }
+  .empty { color:var(--mut); padding:.8rem .7rem }
+  code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em }
+</style>
+</head>
+<body>
+<main>
+  <h1><img src="icon.png" alt="" width="26" height="26">Sync polars &amp; routes</h1>
+  <p class="sub">Copy between this boat and your sailkick cloud account. Nothing is deleted, and nothing is
+     overwritten without asking.</p>
+
+  <div class="bar" id="authbar"><span class="grow">Checking the cloud session…</span></div>
+  <div id="msg"></div>
+
+  <h2>Polars</h2>
+  <div id="polars"></div>
+  <h2>Routes</h2>
+  <div id="routes"></div>
+</main>
+
+<script>
+(function () {
+  var API = '/plugins/sailkick-boat';
+  var $ = function (id) { return document.getElementById(id); };
+  var esc = function (s) { var d = document.createElement('div'); d.textContent = s == null ? '' : String(s); return d.innerHTML; };
+  var state = { loggedIn: false, boat: {}, cloud: {} };
+
+  function say (text, kind) {
+    $('msg').innerHTML = text ? '<div class="msg ' + (kind || '') + '">' + esc(text) + '</div>' : '';
+  }
+
+  function j (path, opts) {
+    return fetch(API + path, Object.assign({ credentials: 'same-origin' }, opts || {}))
+      .then(function (r) { return r.json().catch(function () { return {}; })
+        .then(function (b) { return { status: r.status, body: b }; }); });
+  }
+
+  // ---- identity ---------------------------------------------------------------
+  // Ids are per-side, so a polar present in both has two different ones. Name is the
+  // only stable handle across the boundary.
+  function key (item) { return String(item && item.name || '').trim().toLowerCase(); }
+
+  // Same name — same thing? Compare what the user actually authored, not the wrapper:
+  // the CSV for a polar, the geometry for a route. updatedAt and id always differ.
+  function same (a, b, section) {
+    if (section === 'polars') return String(a.csv || '') === String(b.csv || '');
+    return JSON.stringify(a.path || null) === JSON.stringify(b.path || null) &&
+           JSON.stringify(a.destination || null) === JSON.stringify(b.destination || null);
+  }
+
+  function rows (section) {
+    var boat = state.boat[section] || [], cloud = state.cloud[section] || [];
+    var names = {}, out = [];
+    boat.forEach(function (i) { names[key(i)] = { name: i.name, boat: i }; });
+    cloud.forEach(function (i) { (names[key(i)] = names[key(i)] || { name: i.name }).cloud = i; });
+    Object.keys(names).sort().forEach(function (k) { out.push(names[k]); });
+    return out;
+  }
+
+  function render (section, el) {
+    var list = rows(section);
+    if (!list.length) {
+      el.innerHTML = '<div class="msg"><span class="empty">Nothing on either side yet.</span></div>';
+      return;
+    }
+    var html = '<table><tr><th>Name</th><th>On the boat</th><th>In the cloud</th><th></th></tr>';
+    list.forEach(function (r, i) {
+      var tag, act = '';
+      if (r.boat && r.cloud) {
+        var eq = same(r.boat, r.cloud, section);
+        tag = eq ? '<span class="tag ok">in sync</span>' : '<span class="tag diff">differs</span>';
+        if (!eq) {
+          act = '<button data-a="pull" data-s="' + section + '" data-i="' + i + '">⤓ cloud → boat</button> ' +
+                '<button data-a="push" data-s="' + section + '" data-i="' + i + '">⤒ boat → cloud</button>';
+        }
+      } else if (r.cloud) {
+        tag = '<span class="tag only">cloud only</span>';
+        act = '<button class="primary" data-a="pull" data-s="' + section + '" data-i="' + i + '">⤓ copy to boat</button>';
+      } else {
+        tag = '<span class="tag only">boat only</span>';
+        act = '<button data-a="push" data-s="' + section + '" data-i="' + i + '">⤒ copy to cloud</button>';
+      }
+      html += '<tr><td>' + esc(r.name) + ' ' + tag + '</td>' +
+              '<td>' + (r.boat ? '✓' : '—') + '</td>' +
+              '<td>' + (r.cloud ? '✓' : '—') + '</td>' +
+              '<td class="act">' + (state.loggedIn ? act : '') + '</td></tr>';
+    });
+    el.innerHTML = html + '</table>';
+    el.querySelectorAll('button[data-a]').forEach(function (b) {
+      b.addEventListener('click', function () { copy(b.dataset.a, b.dataset.s, Number(b.dataset.i), b); });
+    });
+  }
+
+  // ---- copy one item ----------------------------------------------------------
+  function copy (dir, section, idx, btn) {
+    var r = rows(section)[idx];
+    var from = dir === 'pull' ? r.cloud : r.boat;
+    var onto = dir === 'pull' ? r.boat : r.cloud;
+    if (!from) return;
+    if (onto && !confirm('"' + r.name + '" already exists on the ' + (dir === 'pull' ? 'boat' : 'cloud') +
+                         ' and differs.\n\nOverwrite it with the ' + (dir === 'pull' ? 'cloud' : 'boat') + ' copy?')) return;
+
+    // Carry only the authored fields — never the source id or updatedAt, which belong to
+    // the side they came from.
+    var body = {};
+    Object.keys(from).forEach(function (k) { if (k !== 'id' && k !== 'updatedAt') body[k] = from[k]; });
+
+    var base = dir === 'pull' ? '/profile/' + section : '/cloud/profile/' + section;
+    var path = onto ? base + '/' + encodeURIComponent(onto.id) : base;
+    btn.disabled = true;
+    say('Copying "' + r.name + '"…');
+    j(path, { method: onto ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+      .then(function (res) {
+        if (res.status >= 200 && res.status < 300) { say('Copied "' + r.name + '".', 'ok'); return load(); }
+        say('Could not copy "' + r.name + '": ' + (res.body.message || 'HTTP ' + res.status), 'err');
+        btn.disabled = false;
+      })
+      .catch(function (e) { say('Could not copy: ' + e.message, 'err'); btn.disabled = false; });
+  }
+
+  // ---- load both sides --------------------------------------------------------
+  function load () {
+    return j('/cloud/status').then(function (s) {
+      state.loggedIn = !!(s.body && s.body.loggedIn);
+      authbar(s.body || {});
+      // Both sides use the same section endpoints, so the response shape is identical:
+      // { ok, polars: [...] } / { ok, routes: [...] }.
+      var want = [j('/profile/polars'), j('/profile/routes')];
+      if (state.loggedIn) want.push(j('/cloud/profile/polars'), j('/cloud/profile/routes'));
+      return Promise.all(want).then(function (r) {
+        state.boat.polars = (r[0].body && r[0].body.polars) || [];
+        state.boat.routes = (r[1].body && r[1].body.routes) || [];
+        state.cloud.polars = state.loggedIn ? ((r[2].body && r[2].body.polars) || []) : [];
+        state.cloud.routes = state.loggedIn ? ((r[3].body && r[3].body.routes) || []) : [];
+        if (state.loggedIn && r[2].status === 401) { state.loggedIn = false; authbar({ loggedIn: false }); }
+        render('polars', $('polars'));
+        render('routes', $('routes'));
+      });
+    }).catch(function (e) { say('Cannot reach the plugin: ' + e.message, 'err'); });
+  }
+
+  function authbar (s) {
+    var bar = $('authbar');
+    if (s.loggedIn) {
+      bar.innerHTML = '<span class="grow">Signed in to the cloud as <b>' + esc(s.slug) + '</b>' +
+        (s.expiresInDays != null ? ' · session expires in ' + s.expiresInDays + ' days' : '') + '</span>' +
+        '<button id="out">Sign out</button>';
+      $('out').addEventListener('click', function () {
+        j('/cloud/logout', { method: 'POST' }).then(function () { say(''); load(); });
+      });
+    } else {
+      bar.innerHTML = '<span class="grow">Sign in to your sailkick account to see the cloud side.</span>' +
+        '<input id="slug" placeholder="boat name" autocomplete="username">' +
+        '<input id="pw" type="password" placeholder="password" autocomplete="current-password">' +
+        '<button class="primary" id="in">Sign in</button>';
+      var go = function () {
+        var slug = $('slug').value.trim(), pw = $('pw').value;
+        if (!slug || !pw) return;
+        $('in').disabled = true; say('Signing in…');
+        j('/cloud/login', { method: 'POST', headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ slug: slug, password: pw }) })
+          .then(function (res) {
+            if (res.body && res.body.loggedIn) { say('Signed in. Your password is not stored — only the session.', 'ok'); return load(); }
+            say((res.body && res.body.message) || 'Sign in failed', 'err');
+            $('in').disabled = false;
+          })
+          .catch(function (e) { say('Sign in failed: ' + e.message, 'err'); $('in').disabled = false; });
+      };
+      $('in').addEventListener('click', go);
+      $('pw').addEventListener('keydown', function (e) { if (e.key === 'Enter') go(); });
+    }
+  }
+
+  load();
+})();
+</script>
+</body>
+</html>