@meri-imperiumi/signalk-passage-briefing 0.2.0

package/public/brief-ext-widget.js

@@ -0,0 +1,294 @@
+/**
+ * `<brief-ext-widget>` — the passage-brief plotter tile (work doc
+ * #8). Runs inside a chart plotter's sandboxed iframe (Plotter
+ * Extensions API v1 hosts): connects over the vendored bus client,
+ * subscribes to the plugin's three published paths through the
+ * host's multiplexed Signal K relay, and renders brief freshness.
+ * The pure state machine lives in `brief-ext-model.js`.
+ *
+ * Tap → open the full brief. The v1 widget→host open-panel request
+ * is not settled, so the documented fallback applies: open the brief
+ * webapp URL in a new browser context (the webapp renders from the
+ * cached payload, so it shows the same brief offline).
+ * Long-press → host config/remove dialog (pointer events inside the
+ * iframe are invisible to the host, so the widget detects the
+ * gesture itself). Night mode (optional capability) shifts the
+ * palette amber/red.
+ *
+ * @file brief-ext-widget.js
+ */
+
+import { tileModel } from "./brief-ext-model.js";
+import { connectExtension } from "./vendor/plotterext-bus/extension.js";
+
+/** Flat paths the tile consumes (scalars over the host relay). */
+const STREAM_PATHS = [
+  "navigation.briefing.generatedAt",
+  "navigation.briefing.route",
+  "navigation.briefing.hasNew",
+  "navigation.briefing.comfort",
+  "navigation.briefing.stale",
+  "navigation.briefing.ageHours",
+];
+
+// Tap-to-open the full webapp is not possible from this iframe: the
+// host sandbox blocks pop-ups and all top-frame navigation (verified
+// on board), so the tile is a pure mini summary — the crew opens the
+// briefing from the host app list or a host panel. The meta endpoint
+// still runs on the same server, so the summary fetches directly.
+const BRIEF_META_URL = "/plugins/signalk-passage-briefing/api/brief-meta";
+
+const template = document.createElement("template");
+template.innerHTML = /* html */ `
+  <style>
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      padding: 6px 8px;
+      background: var(--bg-panel, #111414);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      font-family: ui-monospace, "Fira Code", monospace;
+      color: var(--text-main, #ffffff);
+      cursor: default;
+      user-select: none;
+      --tile-accent: var(--color-teal, #4f9ea8);
+    }
+    :host(.ok) { --tile-accent: var(--color-teal, #4f9ea8); }
+    :host(.new) {
+      --tile-accent: var(--color-red, #c94b4b);
+      border-color: var(--color-red, #c94b4b);
+    }
+    :host(.muted) { --tile-accent: var(--color-grey, #666677); }
+
+    /* Night mode (host nightMode capability): amber/red palette. */
+    :host(.night) {
+      --color-teal: #c97b4f;
+      --color-red: #e06a5a;
+      --color-grey: #6a4a3f;
+      --text-main: #e8c9a0;
+      --bg-panel: rgba(22, 11, 6, 0.88);
+    }
+
+    .tile {
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      height: 100%;
+      gap: 2px;
+    }
+    .head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 6px;
+    }
+    .head .label {
+      font-size: 0.55rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      color: var(--tile-accent);
+      white-space: nowrap;
+    }
+    .badge {
+      display: none;
+      padding: 1px 5px;
+      border: 1px solid var(--color-red, #c94b4b);
+      color: var(--color-red, #c94b4b);
+      font-size: 0.55rem;
+      font-weight: 700;
+      letter-spacing: 0.1em;
+    }
+    .badge.on { display: inline-block; }
+    .route {
+      align-self: center;
+      font-size: clamp(0.8rem, 3vh, 1.05rem);
+      font-weight: 700;
+      line-height: 1.15;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+    .age {
+      font-size: 0.6rem;
+      letter-spacing: 0.06em;
+      color: var(--text-muted, #9aa3ad);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .age.stale { color: #fca847; }
+    .comfort {
+      align-self: center;
+      font-family: var(--font-data, ui-monospace, monospace);
+      font-size: clamp(0.9rem, 4vh, 1.4rem);
+      font-weight: 700;
+      letter-spacing: 0.1em;
+      line-height: 1.1;
+    }
+  </style>
+  <div class="tile">
+    <div class="head">
+      <span class="label">Brief</span>
+      <span class="badge" id="badge">NEW</span>
+    </div>
+    <div class="route" id="route">No brief</div>
+    <div class="comfort" id="comfort"></div>
+    <div class="age" id="age">not compiled yet</div>
+  </div>
+`;
+
+class BriefExtWidget extends HTMLElement {
+  constructor() {
+    super();
+    const root = this.attachShadow({ mode: "open" });
+    root.append(template.content.cloneNode(true));
+    // target="_top" lets the anchor escape this iframe when the host
+    // sandbox allows top navigation at all
+
+    /** @type {Record<string, unknown>} latest per-path bus values */
+    this.values = {};
+    this.connected = false;
+
+    // Long-press → host config/remove dialog; short tap → open the
+    // brief webapp (fallback until the v1 open-panel request lands).
+    /** @type {number|null} */
+    this.pressTimer = null;
+    /** @type {boolean} */
+    this.longPressed = false;
+    this.addEventListener("pointerdown", this.onPointerDown);
+    this.addEventListener("pointerup", this.onPointerUp);
+    this.addEventListener("pointercancel", this.onPointerUp);
+    this.addEventListener("pointerleave", this.onPointerUp);
+    this.addEventListener("contextmenu", (e) => e.preventDefault());
+  }
+
+  /**
+   * @param {PointerEvent} e
+   * @returns {void}
+   */
+  onPointerDown(e) {
+    if (!this.connected || e.button !== 0) return;
+    this.longPressed = false;
+    this.pressTimer = setTimeout(() => {
+      this.longPressed = true;
+      this.client?.call("ui.toggleConfigPanel").catch(() => {});
+    }, 1200);
+  }
+
+  /**
+   * @returns {void}
+   */
+  onPointerUp() {
+    if (this.pressTimer) {
+      clearTimeout(this.pressTimer);
+      this.pressTimer = null;
+    }
+  }
+
+  /**
+   * @returns {void}
+   */
+  async connectedCallback() {
+    if (this.connected) return;
+    let client;
+    try {
+      client = await connectExtension();
+    } catch {
+      // No host handshake (opened standalone while developing, or the
+      // host vanished): render the placeholder and give up.
+      this.render();
+      return;
+    }
+    this.connected = true;
+    this.client = client;
+
+    // Current values right away: deltas only travel on change, so
+    // without this the tile would wait for the next ticker emission
+    try {
+      const meta = await fetch(BRIEF_META_URL).then((r) => r.json());
+      Object.assign(this.values, {
+        "navigation.briefing.generatedAt": meta.generatedAt,
+        "navigation.briefing.route": meta.route,
+        "navigation.briefing.hasNew": meta.hasNew,
+        "navigation.briefing.comfort": meta.comfort,
+        "navigation.briefing.stale": meta.stale,
+        "navigation.briefing.ageHours": meta.ageHours,
+      });
+      this.render();
+    } catch (_error) {
+      // Meta unavailable: the subscription still fills values in
+    }
+
+    try {
+      await client.signalk.subscribe(STREAM_PATHS, (ev) => {
+        // Event name is `sk.<path>`; the path is the dict key.
+        const path = ev?.path;
+        if (typeof path === "string") this.values[path] = ev.value;
+        this.render();
+      });
+    } catch {
+      // Host without signalk.stream (or relay failure): placeholders.
+    }
+
+    if (client.hasCapability("nightMode")) {
+      try {
+        const { enabled } = await client.nightMode.get();
+        this.classList.toggle("night", Boolean(enabled));
+      } catch {
+        /* best-effort seed */
+      }
+      await client
+        .subscribe(["nightMode.changed"], (_name, params) => {
+          this.classList.toggle("night", Boolean(params?.enabled));
+        })
+        .catch(() => {});
+    }
+
+    this.render();
+  }
+
+  disconnectedCallback() {
+    this.onPointerUp();
+    this.client?.close();
+    this.client = null;
+    this.connected = false;
+  }
+
+  /**
+   * Applies the latest bus values to the DOM.
+   *
+   * @returns {void}
+   */
+  render() {
+    const model = tileModel({
+      generatedAt: this.values["navigation.briefing.generatedAt"] ?? null,
+      route: this.values["navigation.briefing.route"] ?? null,
+      hasNew: this.values["navigation.briefing.hasNew"] ?? null,
+    });
+    const root = this.shadowRoot;
+    this.classList.remove("ok", "new", "muted");
+    this.classList.add(model.severity);
+    root.querySelector("#route").textContent = model.title;
+    const comfort = this.values["navigation.briefing.comfort"];
+    const comfortEl = root.querySelector("#comfort");
+    comfortEl.textContent = comfort ? String(comfort).toUpperCase() : "";
+    comfortEl.style.color =
+      {
+        champagne: "#8dfcbb",
+        easy: "#8dfcbb",
+        coffee: "#fca847",
+        rough: "#fca847",
+        sick: "#ff5e5e",
+      }[String(comfort).toLowerCase()] ?? "var(--text-main, #c4c4c4)";
+    const stale = this.values["navigation.briefing.stale"] === true;
+    const ageEl = root.querySelector("#age");
+    ageEl.textContent = model.detail + (stale ? " · STALE" : "");
+    ageEl.classList.toggle("stale", stale);
+    root.querySelector("#badge").classList.toggle("on", model.badge);
+  }
+}
+
+customElements.define("brief-ext-widget", BriefExtWidget);

package/public/components/backfill-controls.js

@@ -0,0 +1,100 @@
+/**
+ * Logbook backfill controls: a card on the strategic screen that
+ * triggers the plugin's POST /api/backfill from the browser session.
+ * The route is auth-gated server-side, so it cannot be curl-ed from
+ * the host without a login — the webapp's session is the interface.
+ *
+ * @file components/backfill-controls.js
+ */
+
+import { fetchJson } from "./sk-api.js";
+import { SK_BASE_CSS } from "./sk-base-css.js";
+
+const PLUGIN_API = "/plugins/signalk-passage-briefing/api";
+
+class BackfillControls extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${SK_BASE_CSS}
+        :host { display: block; }
+        details.sk-card { margin-bottom: 12px; }
+        summary { cursor: pointer; font-weight: 700; }
+        .body { margin-top: 8px; }
+        .row {
+          display: flex; gap: 8px; flex-wrap: wrap;
+          align-items: center; margin-top: 8px;
+        }
+        input { font: inherit; }
+        .note { color: var(--color-grey); font-size: 0.85rem; margin: 4px 0 0; }
+        .out {
+          font-family: var(--font-data, ui-monospace, monospace);
+          font-size: 0.85rem; margin-top: 8px; white-space: pre-wrap;
+        }
+        .out.err { color: var(--color-red); }
+      </style>
+      <details class="sk-card">
+        <summary>Logbook Backfill</summary>
+        <div class="body">
+          <p class="note">
+            Learn sail preferences from signalk-logbook history into the
+            day/night matrix (optional date range).
+          </p>
+          <div class="row">
+            <label>From <input type="date" id="from"></label>
+            <label>To <input type="date" id="to"></label>
+            <button id="run">Backfill</button>
+          </div>
+          <div class="out" id="out"></div>
+        </div>
+      </details>
+    `;
+    this._run = this.shadowRoot.getElementById("run");
+    this._out = this.shadowRoot.getElementById("out");
+    this._run.addEventListener("click", () => this.backfill());
+  }
+
+  disconnectedCallback() {
+    this._run?.replaceWith(this._run.cloneNode(true));
+  }
+
+  async backfill() {
+    const from = this.shadowRoot.getElementById("from").value;
+    const to = this.shadowRoot.getElementById("to").value;
+    const query = new URLSearchParams();
+    if (from) {
+      query.set("from", from);
+    }
+    if (to) {
+      query.set("to", to);
+    }
+    const qs = query.size > 0 ? `?${query}` : "";
+    this._run.disabled = true;
+    this._out.classList.remove("err");
+    this._out.textContent = "Backfill running…";
+    try {
+      const summary = await fetchJson(`${PLUGIN_API}/backfill${qs}`, 600000, {
+        method: "POST",
+      });
+      const skipped = summary.skippedCached + summary.skippedNoData;
+      this._out.textContent =
+        `Learned ${summary.learned} of ${summary.total} sail changes` +
+        (skipped > 0 ? ` (skipped ${skipped})` : "") +
+        `, ${summary.cells.length} matrix cells`;
+    } catch (error) {
+      this._out.classList.add("err");
+      this._out.textContent = `Backfill failed: ${error.message}`;
+    } finally {
+      this._run.disabled = false;
+    }
+  }
+}
+
+if (typeof customElements !== "undefined") {
+  customElements.define("backfill-controls", BackfillControls);
+}
+
+export { BackfillControls };

package/public/components/comfort-info.js

@@ -0,0 +1,94 @@
+/**
+ * The ℹ️ next to the comfort tier: an expanding explainer for the
+ * Sereno comfort scale (champagne → sick), highlighting the current
+ * tier via the `tier` attribute. Used by the tactical dashboard and
+ * the conditions-here view.
+ *
+ * @file components/comfort-info.js
+ */
+
+import { COMFORT_SCALE_INFO } from "../sereno-physics.mjs";
+
+class ComfortInfo extends HTMLElement {
+  static get observedAttributes() {
+    return ["tier"];
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: inline-block; position: relative; }
+        summary {
+          list-style: none; cursor: pointer; user-select: none;
+        }
+        summary::-webkit-details-marker { display: none; }
+        .pop {
+          position: absolute; z-index: 20; left: 0; top: calc(100% + 6px);
+          min-width: 16rem; max-width: 18rem; padding: 8px 10px;
+          background: var(--bg-panel);
+          border: 1px solid var(--color-grey);
+          font-family: var(--font-data, ui-monospace, monospace);
+          font-size: 0.75rem; text-transform: none; letter-spacing: normal;
+        }
+        .note { color: var(--color-grey); margin: 0 0 6px; }
+        .row { margin: 4px 0; }
+        .row.current { font-weight: 700; }
+        .row.current .name { text-decoration: underline; }
+        .band { color: var(--color-grey); display: block; }
+      </style>
+      <details class="info">
+        <summary aria-label="Comfort scale explained" title="Comfort scale explained">ℹ️</summary>
+        <div class="pop" id="pop"></div>
+      </details>
+    `;
+    this._details = this.shadowRoot.querySelector("details");
+    this._pop = this.shadowRoot.getElementById("pop");
+    this.renderPop();
+  }
+
+  attributeChangedCallback() {
+    this.renderPop();
+  }
+
+  renderPop() {
+    if (!this._pop) {
+      return;
+    }
+    const current = this.getAttribute("tier")?.toLowerCase() ?? "";
+    this._pop.textContent = "";
+    const note = document.createElement("p");
+    note.className = "note";
+    note.textContent =
+      "Comfort tiers are lost when apparent wind or vertical motion crosses their line — the worse factor wins.";
+    this._pop.appendChild(note);
+    for (const level of COMFORT_SCALE_INFO) {
+      const row = document.createElement("div");
+      row.className =
+        level.tier.toLowerCase() === current ? "row current" : "row";
+      const name = document.createElement("span");
+      name.className = "name";
+      name.textContent = level.tier.toUpperCase();
+      const text = document.createElement("span");
+      text.textContent = ` — ${level.text}`;
+      row.appendChild(name);
+      row.appendChild(text);
+      const band = document.createElement("span");
+      band.className = "band";
+      band.textContent =
+        level.maxAws == null
+          ? "wind ≥ 33 kn or motion ≥ 1.25 m/s²"
+          : `wind < ${level.maxAws} kn · motion < ${level.maxAz} m/s²`;
+      row.appendChild(band);
+      this._pop.appendChild(row);
+    }
+  }
+}
+
+if (typeof customElements !== "undefined") {
+  customElements.define("comfort-info", ComfortInfo);
+}
+
+export { ComfortInfo };