[feat](trx-rs): receive SSTV pictures end to end

Wires the SSTV decoder into the stack, from the audio the server already
has to a panel in the browser that shows the picture arriving.

Server: a decoder task alongside the WEFAX one, running whenever the
decoder is enabled and the rig is in a mode SSTV is sent in.  A finished
picture is written to the cache as a PNG and sent on as a message; the
rows are sent as they decode, so a client can watch two minutes of
Martin M1 fill in rather than waiting for it.  Pictures join the decode
history, are replayed to a client that connects later, and survive a
restart.

Protocol: SetSstvDecodeEnabled and ResetSstvDecoder, a sstv_decode
_enabled flag in the rig state, two audio message types, and Sstv and
SstvProgress on DecodedMessage.  The history stores the message without
its base64 payload -- the picture is already on disk, and a megabyte per
entry is not what a history is for.

Client: pictures land in their own history, and the PNG the server sent
is written to the local cache so /sstv-images/ can serve it back.  That
endpoint and the WEFAX one now share their filename checks rather than
each carrying a copy: no separators, no parent references, .png only.

Web UI: an SSTV sub-tab beside WEFAX, with a live canvas the rows paint
into at the line number they carry, a card for the last picture, and a
filterable history with links to the files.  Rows below the one arriving
are grey rather than black -- not yet received is a different thing from
received as black.  A picture is not a spot, so neither pictures nor
their progress updates reach the decode statistics; that exclusion list
had grown by hand for LRPT and WEFAX and is now one named set.

The decoder crate gains what the server needed to hand a picture on:
to_png, to_png_base64 and save_png, with file names stamped in UTC so
they sort.

Panel behaviour is tested with the plugin runtime: rows painting at
their own line numbers rather than in arrival order, a completed picture
linked by file name alone with no server path in the page, a cut-off
picture reported as partial, clearing, and the toggle following the rig
state.

Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/sstv.test.mjs

@@ -0,0 +1,183 @@
+// SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
+//
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+// The SSTV panel: a picture arriving row by row, and what is kept once it has.
+// Watching the image build up is the point of the mode, so rows have to reach
+// the canvas as they arrive rather than at the end of a two-minute frame.
+
+import assert from "node:assert/strict";
+import test from "node:test";
+import vm from "node:vm";
+import { bundleEntry } from "./bundle-entry.mjs";
+import { createHost } from "./host-fixture.mjs";
+
+/** A DOM stub with only what the plugin reaches for. */
+function makeElement(id) {
+  const listeners = new Map();
+  return {
+    id,
+    textContent: "",
+    innerHTML: "",
+    value: "",
+    style: {},
+    attributes: {},
+    classList: {
+      classes: new Set(),
+      add(name) { this.classes.add(name); },
+      remove(name) { this.classes.delete(name); },
+      toggle(name, on) { if (on) this.classes.add(name); else this.classes.delete(name); },
+      contains(name) { return this.classes.has(name); },
+    },
+    addEventListener(type, handler) { listeners.set(type, handler); },
+    setAttribute(name, value) { this.attributes[name] = String(value); },
+    getAttribute(name) { return this.attributes[name] ?? null; },
+    click() { listeners.get("click")?.(); },
+    fire(type, event) { listeners.get(type)?.(event); },
+  };
+}
+
+function makeCanvas(id) {
+  const element = makeElement(id);
+  element.width = 0;
+  element.height = 0;
+  const painted = [];
+  const fills = [];
+  element.painted = painted;
+  element.fills = fills;
+  element.getContext = () => ({
+    fillStyle: "",
+    fillRect: (...args) => { fills.push(args); },
+    createImageData: (width, height) => ({
+      width, height, data: new Uint8ClampedArray(width * height * 4),
+    }),
+    putImageData: (image, x, y) => { painted.push({ x, y, data: image.data }); },
+  });
+  return element;
+}
+
+async function loadPanel() {
+  const elements = new Map();
+  const element = (id) => {
+    if (!elements.has(id)) {
+      elements.set(id, id.endsWith("canvas") ? makeCanvas(id) : makeElement(id));
+    }
+    return elements.get(id);
+  };
+  // Touch every id the panel defines, so the plugin caches real stubs.
+  for (const id of [
+    "sstv-status", "sstv-live-view", "sstv-history-view", "sstv-live-container",
+    "sstv-live-info", "sstv-live-canvas", "sstv-live-latest", "sstv-history-list",
+    "sstv-history-count", "sstv-filter", "sstv-sort", "sstv-decode-toggle-btn",
+    "sstv-clear-btn", "sstv-view-live", "sstv-view-history",
+  ]) element(id);
+
+  const window = { ...createHost() };
+  const context = vm.createContext({
+    window,
+    document: { getElementById: (id) => elements.get(id) ?? null },
+    atob: (data) => Buffer.from(data, "base64").toString("binary"),
+    Date, Number, String, Math, Set, Uint8Array, Uint8ClampedArray, JSON, console,
+  });
+  const runtime = await bundleEntry(new URL("../src/plugin-runtime.ts", import.meta.url));
+  const source = await bundleEntry(new URL("../src/plugins/sstv.ts", import.meta.url));
+  new vm.Script(runtime).runInContext(context);
+  new vm.Script(source).runInContext(context);
+  return { window, runtime: window.trxPluginRuntime, element };
+}
+
+/** One row of RGB triples, base64 as the server sends it. */
+function rowData(width, [r, g, b]) {
+  const bytes = new Uint8Array(width * 3);
+  for (let x = 0; x < width; x += 1) {
+    bytes[x * 3] = r;
+    bytes[x * 3 + 1] = g;
+    bytes[x * 3 + 2] = b;
+  }
+  return Buffer.from(bytes).toString("base64");
+}
+
+test("a picture arriving paints its rows as they come", async () => {
+  const { runtime, element } = await loadPanel();
+
+  // The header names the mode and the geometry; the canvas takes both.
+  runtime.dispatch("sstv_progress", {
+    state: "Receiving Martin M1", mode: "Martin M1", width: 320, height: 256, line: 0,
+  });
+  const canvas = element("sstv-live-canvas");
+  assert.equal(canvas.width, 320, "the canvas did not take the mode's width");
+  assert.equal(canvas.height, 256, "the canvas did not take the mode's height");
+  assert.equal(element("sstv-live-container").style.display, "",
+    "the live view stayed hidden while a picture was arriving");
+  assert.match(element("sstv-status").textContent, /Martin M1/);
+
+  // Rows land at the line number they carry, not in arrival order: a decoder
+  // that painted them in sequence would shear a picture with a dropped line.
+  runtime.dispatch("sstv_progress", { line: 4, line_data: rowData(320, [255, 0, 0]) });
+  runtime.dispatch("sstv_progress", { line: 2, line_data: rowData(320, [0, 0, 255]) });
+  assert.deepEqual(canvas.painted.map((p) => p.y), [4, 2],
+    `rows painted at ${canvas.painted.map((p) => p.y).join(",")}`);
+  assert.deepEqual([...canvas.painted[0].data.slice(0, 4)], [255, 0, 0, 255], "row 4 is not red");
+  assert.deepEqual([...canvas.painted[1].data.slice(0, 4)], [0, 0, 255, 255], "row 2 is not blue");
+  assert.match(element("sstv-live-info").textContent, /Martin M1/);
+});
+
+test("a received picture is kept, shown, and linked by file name alone", async () => {
+  const { runtime, element } = await loadPanel();
+
+  runtime.dispatch("sstv", {
+    ts_ms: Date.UTC(2026, 7, 5, 12, 0, 0),
+    vis: 44, mode: "Martin M1", width: 320, height: 256, lines: 256, complete: true,
+    path: "/home/op/.cache/trx-rs/sstv/SSTV_20260805T120000Z_14230000_Martin-M1.png",
+  });
+
+  const latest = element("sstv-live-latest").innerHTML;
+  assert.match(latest, /Martin M1/);
+  assert.match(latest, /complete/);
+  // The server serves pictures by file name; the path it stored is its own.
+  assert.match(latest, /\/sstv-images\/SSTV_20260805T120000Z_14230000_Martin-M1\.png/);
+  assert.doesNotMatch(latest, /home\/op/, "the server's filesystem path reached the page");
+
+  element("sstv-view-history").click();
+  const history = element("sstv-history-list").innerHTML;
+  assert.match(history, /Martin M1/);
+  assert.match(history, /320×256/);
+  assert.match(element("sstv-history-count").textContent, /1 picture/);
+});
+
+test("a picture cut short is kept, and says so", async () => {
+  const { runtime, element } = await loadPanel();
+
+  runtime.dispatch("sstv", {
+    ts_ms: Date.now(), vis: 60, mode: "Scottie S1", width: 320, height: 256,
+    lines: 91, complete: false, path: "/cache/SSTV_x_Scottie-S1.png",
+  });
+
+  assert.match(element("sstv-status").textContent, /Partial/);
+  element("sstv-view-history").click();
+  assert.match(element("sstv-history-list").innerHTML, /91 \(partial\)/);
+});
+
+test("clearing empties the panel", async () => {
+  const { runtime, element } = await loadPanel();
+  runtime.dispatch("sstv", { ts_ms: Date.now(), mode: "PD120", lines: 496, complete: true });
+  assert.match(element("sstv-live-latest").innerHTML, /PD120/);
+
+  runtime.reset("sstv");
+  assert.equal(element("sstv-live-latest").innerHTML, "");
+  assert.equal(element("sstv-status").textContent, "Idle");
+  assert.equal(element("sstv-live-container").style.display, "none");
+});
+
+test("the toggle button follows the rig state", async () => {
+  const { window, element } = await loadPanel();
+  const button = element("sstv-decode-toggle-btn");
+
+  window.syncSstvToggle(true);
+  assert.equal(button.textContent, "Disable SSTV");
+  assert.equal(button.getAttribute("aria-pressed"), "true");
+
+  window.syncSstvToggle(false);
+  assert.equal(button.textContent, "Enable SSTV");
+  assert.equal(button.getAttribute("aria-pressed"), "false");
+});