@meri-imperiumi/signalk-passage-briefing 0.2.0

package/public/components/strategic-outlook.js

@@ -0,0 +1,248 @@
+/**
+ * `<strategic-outlook>` — Screen 2: whole-passage summary (SPEC
+ * §6.3). ETA percentile table, macro sea-state warnings, convective
+ * warnings and the raw METAREA bulletin console.
+ *
+ * @file components/strategic-outlook.js
+ */
+
+import { etaTable, sailWorkTimeline, splitSevere } from "./models.mjs";
+import { SK_BASE_CSS } from "./sk-base-css.js";
+
+/**
+ * The custom element (browser only).
+ */
+class StrategicOutlook extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${SK_BASE_CSS}
+        :host { display: block; }
+        .sk-card { margin-bottom: 12px; }
+        pre.console { margin: 0; }
+        .warn {
+          color: var(--color-orange);
+          font-family: var(--font-data, ui-monospace, monospace);
+          font-size: 0.85rem;
+          padding: 4px 0;
+        }
+        .warn.severe { color: var(--color-red); }
+        .none { color: var(--text-muted); font-size: 0.85rem; }
+        strong.sev {
+          color: var(--color-orange);
+          text-transform: uppercase;
+        }
+      </style>
+      <section class="sk-card theme-teal">
+        <h2>ETA &amp; Motor Plan</h2>
+        <table class="data">
+          <thead>
+            <tr><th>Percentile</th><th>Arrival (UTC)</th></tr>
+          </thead>
+          <tbody id="eta-body"></tbody>
+        </table>
+        <div class="grid-auto" style="margin-top: 8px">
+          <div><div class="label">Motor hours</div><div class="value-small" id="motor">—</div></div>
+          <div><div class="label">Fuel</div><div class="value-small" id="fuel">—</div></div>
+        </div>
+      </section>
+      <section class="sk-card theme-orange">
+        <h2>Macro Sea State</h2>
+        <div id="sea"><span class="none">No anomalies</span></div>
+      </section>
+      <section class="sk-card theme-red">
+        <h2>Convective Risk</h2>
+        <div id="conv"><span class="none">No warnings</span></div>
+      </section>
+      <section class="sk-card theme-orange">
+        <h2>Sail Work</h2>
+        <div id="sailwork"><span class="none">No sail changes planned</span></div>
+      </section>
+      <section class="sk-card" id="sky-card" hidden>
+        <h2>Sky Notes</h2>
+        <div id="sky"></div>
+      </section>
+      <section class="sk-card theme-teal">
+        <h2>METAREA Bulletin</h2>
+        <pre class="console" id="bulletin">No bulletin cached</pre>
+      </section>
+      <section class="sk-card theme-red" id="blocks-card" hidden>
+        <h2>Warnings On Your Waters</h2>
+        <div class="console" id="blocks"></div>
+      </section>
+      <synoptic-chart hidden></synoptic-chart>
+    `;
+    this._etaBody = this.shadowRoot.getElementById("eta-body");
+    this._motorEl = this.shadowRoot.getElementById("motor");
+    this._fuelEl = this.shadowRoot.getElementById("fuel");
+    this._seaEl = this.shadowRoot.getElementById("sea");
+    this._convEl = this.shadowRoot.getElementById("conv");
+    this._sailWorkEl = this.shadowRoot.getElementById("sailwork");
+    this._skyCard = this.shadowRoot.getElementById("sky-card");
+    this._skyEl = this.shadowRoot.getElementById("sky");
+    this._bulletinEl = this.shadowRoot.getElementById("bulletin");
+    if (this._exceptions) {
+      this.setExceptions(this._exceptions);
+    }
+    if (this._bulletin !== undefined) {
+      this.setBulletin(this._bulletin);
+    }
+    if (this._spaceEvents !== undefined) {
+      this.setSpaceEvents(this._spaceEvents);
+    }
+  }
+
+  /**
+   * Sky notes (work doc #3): comets and any other non-urgent space
+   * events for the passage summary. Hidden when there are none.
+   *
+   * @param {Array<{description: string, tactical: boolean}>|null} events
+   */
+  setSpaceEvents(events) {
+    this._spaceEvents = events;
+    if (!this._skyEl) {
+      return; // Not yet connected
+    }
+    const list = (events ?? []).filter((e) => !e.tactical);
+    this._skyCard.hidden = list.length === 0;
+    this._skyEl.innerHTML = "";
+    for (const e of list) {
+      const el = document.createElement("div");
+      el.textContent = `✦ ${e.description}`;
+      this._skyEl.appendChild(el);
+    }
+  }
+
+  /**
+   * Renders from the worker's exception view.
+   *
+   * @param {object|null} exceptions
+   */
+  setExceptions(exceptions) {
+    this._exceptions = exceptions;
+    if (!this._etaBody) {
+      return; // Not yet connected
+    }
+    const table = etaTable(exceptions);
+    this._etaBody.innerHTML = "";
+    for (const row of table.rows) {
+      const tr = document.createElement("tr");
+      const tdLabel = document.createElement("td");
+      tdLabel.className = "muted";
+      tdLabel.textContent = row.label;
+      const tdStamp = document.createElement("td");
+      tdStamp.textContent = row.stamp || "—";
+      tr.append(tdLabel, tdStamp);
+      this._etaBody.appendChild(tr);
+    }
+    this._motorEl.textContent = table.motorHours || "—";
+    this._fuelEl.textContent = table.fuel || "—";
+
+    // Macro sea-state anomalies
+    this._seaEl.innerHTML = "";
+    const sea = exceptions?.passageSummary?.macroSeaAnomalies ?? [];
+    for (const a of sea) {
+      const el = document.createElement("div");
+      el.className = "warn";
+      el.textContent = `+${a.hoursFromNow}h steep sea (ratio ${a.steepnessRatio})`;
+      this._seaEl.appendChild(el);
+    }
+    if (sea.length === 0) {
+      const el = document.createElement("span");
+      el.className = "none";
+      el.textContent = "No anomalies";
+      this._seaEl.appendChild(el);
+    }
+
+    // Sail work: recommendations plus the planned tacks/gybes (doc #5)
+    this._sailWorkEl.innerHTML = "";
+    const sailWork = sailWorkTimeline(exceptions);
+    for (const item of sailWork) {
+      const el = document.createElement("div");
+      el.className =
+        item.label.startsWith("Tack") || item.label.startsWith("Gybe")
+          ? "warn"
+          : "";
+      el.textContent = `+${item.hoursFromNow}h ${item.stamp} · ${item.label}${item.detail ? ` · ${item.detail}` : ""}`;
+      this._sailWorkEl.appendChild(el);
+    }
+    if (sailWork.length === 0) {
+      const el = document.createElement("span");
+      el.className = "none";
+      el.textContent = "No sail changes planned";
+      this._sailWorkEl.appendChild(el);
+    }
+
+    // Convective warnings
+    this._convEl.innerHTML = "";
+    const conv = exceptions?.passageSummary?.convectiveWarnings ?? [];
+    for (const a of conv) {
+      const el = document.createElement("div");
+      el.className = "warn severe";
+      const parts = [];
+      if (a.cape != null) {
+        parts.push(`CAPE ${a.cape}`);
+      }
+      if (a.kIndex != null) {
+        parts.push(`K ${a.kIndex}`);
+      }
+      el.textContent = `+${a.hoursFromNow}h convection (${parts.join(", ")})`;
+      this._convEl.appendChild(el);
+    }
+    if (conv.length === 0) {
+      const el = document.createElement("span");
+      el.className = "none";
+      el.textContent = "No warnings";
+      this._convEl.appendChild(el);
+    }
+  }
+
+  /**
+   * Raw METAREA bulletin (spool-sourced when available).
+   *
+   * @param {string|{bulletinText: string, blocks: Array<{text: string}>}|null}
+   *   bulletin - The payload's metareaBulletin, or raw text
+   */
+  setBulletin(bulletin) {
+    this._bulletin = bulletin;
+    if (!this._bulletinEl) {
+      return; // Not yet connected
+    }
+    const normalized =
+      typeof bulletin === "string" ? { bulletinText: bulletin } : bulletin;
+    this._bulletinEl.textContent =
+      normalized?.bulletinText || "No bulletin cached";
+
+    // Filtered blocks replace the raw wall of text (work doc #4 §5):
+    // only geographically relevant paragraphs, severe keywords lit
+    const blocksCard = this.shadowRoot.getElementById("blocks-card");
+    const blocksEl = this.shadowRoot.getElementById("blocks");
+    const blocks = normalized?.blocks ?? [];
+    blocksCard.hidden = blocks.length === 0;
+    blocksEl.innerHTML = "";
+    for (const block of blocks) {
+      const pre = document.createElement("div");
+      pre.style.marginBottom = "8px";
+      for (const token of splitSevere(block.text)) {
+        if (token.severe) {
+          const strong = document.createElement("strong");
+          strong.className = "sev";
+          strong.textContent = token.text;
+          pre.appendChild(strong);
+        } else {
+          pre.appendChild(document.createTextNode(token.text));
+        }
+      }
+      blocksEl.appendChild(pre);
+    }
+  }
+}
+
+if (typeof customElements !== "undefined") {
+  customElements.define("strategic-outlook", StrategicOutlook);
+}
+
+export { StrategicOutlook };

package/public/components/synoptic-chart.js

@@ -0,0 +1,48 @@
+/**
+ * The synoptic surface-analysis figure (work doc #11): loads the
+ * cached chart for the vessel's position zone from the plugin API
+ * and shows it inverted under the night palette. Stays hidden until
+ * the image actually loads, so zones without a chart render nothing
+ * — same graceful handling as the bulletin console. Shared by the
+ * strategic screen and the conditions-here view.
+ *
+ * @file components/synoptic-chart.js
+ */
+
+const PLUGIN_API = "/plugins/signalk-passage-briefing/api";
+
+class SynopticChart extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: block; }
+        :host([hidden]) { display: none; }
+        figure { margin: 0; }
+        img { width: 100%; height: auto; display: block; }
+        :host([data-mode="night"]) img {
+          filter: invert(0.93) hue-rotate(180deg);
+        }
+      </style>
+      <figure>
+        <img id="img" alt="Synoptic surface analysis for the current zone">
+      </figure>
+    `;
+    const img = this.shadowRoot.getElementById("img");
+    img.addEventListener("load", () => {
+      this.hidden = false;
+    });
+    img.addEventListener("error", () => {
+      this.hidden = true;
+    });
+    img.src = `${PLUGIN_API}/synoptic`;
+  }
+}
+
+if (typeof customElements !== "undefined") {
+  customElements.define("synoptic-chart", SynopticChart);
+}
+
+export { SynopticChart };

package/public/components/tactical-dashboard.js

@@ -0,0 +1,172 @@
+/**
+ * `<tactical-dashboard>` — Screen 1: the next 24 hours (SPEC §6.3).
+ *
+ * Exception-driven: sail action cards render only when there are
+ * changes, the energy warning only on deficit, hazard banners only
+ * on proximity alerts. Data arrives via `setExceptions()` from the
+ * root component; updates touch cached DOM nodes only.
+ *
+ * @file components/tactical-dashboard.js
+ */
+
+import { sailActionCards, tacticalNow } from "./models.mjs";
+import { SK_BASE_CSS } from "./sk-base-css.js";
+
+/**
+ * The custom element (browser only).
+ */
+class TacticalDashboard extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+    this.shadowRoot.innerHTML = `
+      <style>
+        ${SK_BASE_CSS}
+        :host { display: block; }
+        .now { display: flex; align-items: baseline; gap: 12px; }
+        .tier {
+          font-family: var(--font-data, ui-monospace, monospace);
+          font-size: 1rem; font-weight: 700;
+          letter-spacing: 0.1em; text-transform: uppercase;
+        }
+        .cards { display: grid; gap: 8px; }
+        .card {
+          border: 1px solid var(--theme-color, var(--color-teal));
+          padding: 8px 12px; display: flex; justify-content: space-between;
+          gap: 8px; align-items: baseline;
+        }
+        .banner {
+          border: 1px solid var(--color-red);
+          color: var(--color-red);
+          font-family: var(--font-data, ui-monospace, monospace);
+          padding: 8px 12px; margin-top: 8px;
+          text-transform: uppercase; letter-spacing: 0.1em;
+          font-size: 0.85rem; font-weight: 700;
+        }
+      </style>
+      <section class="sk-card theme-teal">
+        <h2>Next 24 Hours</h2>
+        <div class="now">
+          <span class="value" id="aws">—</span>
+          <span class="tier" id="tier">no data</span>
+          <comfort-info id="cinfo"></comfort-info>
+        </div>
+        <horizon-sparkline id="spark"></horizon-sparkline>
+        <div id="actions"></div>
+        <div id="energy"></div>
+        <div id="hazards"></div>
+        <div id="space"></div>
+      </section>
+    `;
+    this._awsEl = this.shadowRoot.getElementById("aws");
+    this._tierEl = this.shadowRoot.getElementById("tier");
+    this._cinfo = this.shadowRoot.getElementById("cinfo");
+    this._spark = this.shadowRoot.getElementById("spark");
+    this._actionsEl = this.shadowRoot.getElementById("actions");
+    this._energyEl = this.shadowRoot.getElementById("energy");
+    this._hazardsEl = this.shadowRoot.getElementById("hazards");
+    this._spaceEl = this.shadowRoot.getElementById("space");
+    if (this._exceptions) {
+      this.setExceptions(this._exceptions);
+    }
+  }
+
+  /**
+   * Renders from the worker's exception view.
+   *
+   * @param {object|null} exceptions
+   */
+  setExceptions(exceptions) {
+    this._exceptions = exceptions;
+    if (!this._awsEl) {
+      return; // Not yet connected
+    }
+
+    // Now readout
+    const now = tacticalNow(exceptions);
+    this._awsEl.textContent =
+      now.awsKnots != null ? `${now.awsKnots.toFixed(1)}` : "—";
+    this._tierEl.textContent = now.comfortLevel ?? "no data";
+    this._tierEl.style.color = now.color;
+    this._cinfo?.setAttribute("tier", now.comfortLevel ?? "");
+
+    this._spark.setColumns(exceptions?.next24h?.comfortBlocks ?? []);
+
+    // Sail action cards — only when there are changes; maneuver
+    // events read as the sail work they demand (work doc #5)
+    const cards = sailActionCards(exceptions);
+    this._actionsEl.innerHTML = "";
+    if (cards.length > 0) {
+      const wrap = document.createElement("div");
+      wrap.className = "cards";
+      for (const c of cards) {
+        const el = document.createElement("div");
+        el.className = "card";
+        el.style.setProperty("--theme-color", "var(--color-orange)");
+        const name = document.createElement("span");
+        name.className = "value-small";
+        name.textContent = c.maneuver
+          ? `${c.maneuver === "tack" ? "Tack" : "Gybe"} to ${c.toTack ?? "?"}`
+          : c.sailState;
+        const when = document.createElement("span");
+        when.className = "muted";
+        when.textContent = c.maneuver
+          ? `~${c.stamp}${c.twsKnots != null ? `, ${c.twsKnots.toFixed(0)} kt` : ""}`
+          : `${c.night ? "☾ " : ""}+${c.hoursFromNow}h ${c.stamp}`;
+        el.append(name, when);
+        wrap.appendChild(el);
+      }
+      this._actionsEl.appendChild(wrap);
+    }
+
+    // Energy deficit — only when true
+    const deficit = exceptions?.next24h?.energyDeficitAlert === true;
+    this._energyEl.innerHTML = "";
+    if (deficit) {
+      const el = document.createElement("div");
+      el.className = "banner";
+      el.textContent = "Energy deficit next 24h";
+      this._energyEl.appendChild(el);
+    }
+
+    // Hazard banners — only when present
+    const hazards = exceptions?.next24h?.hazards ?? [];
+    this._hazardsEl.innerHTML = "";
+    for (const h of hazards) {
+      const el = document.createElement("div");
+      el.className = "banner";
+      el.textContent = `⚠ ${h.description ?? h.noteId ?? "hazard"} +${h.hoursFromNow}h`;
+      this._hazardsEl.appendChild(el);
+    }
+    if (this._spaceEvents) {
+      this.setSpaceEvents(this._spaceEvents);
+    }
+  }
+
+  /**
+   * Tactical space-weather banners (work doc #3): aurora-class
+   * alerts only; comet items belong to the strategic outlook.
+   *
+   * @param {Array<{description: string}>|null} events
+   */
+  setSpaceEvents(events) {
+    this._spaceEvents = events;
+    if (!this._spaceEl) {
+      return; // Not yet connected
+    }
+    this._spaceEl.innerHTML = "";
+    for (const e of events ?? []) {
+      const el = document.createElement("div");
+      el.className = "banner";
+      el.textContent = `✦ ${e.description}`;
+      this._spaceEl.appendChild(el);
+    }
+  }
+}
+
+if (typeof customElements !== "undefined") {
+  customElements.define("tactical-dashboard", TacticalDashboard);
+}
+
+export { TacticalDashboard };