scenescout 3.14.1 → 3.16.0

package/dist/engine/live-page.js

@@ -173,9 +173,17 @@ export const LIVE_PAGE = `<!doctype html>
   #report .doc details { margin: 8px 0; }
   #report .doc summary { cursor: pointer; color: var(--muted); }
   #report .doc .unset { color: var(--muted); font-style: italic; }
+  #report .doc figure.picture { margin: 8px 0 14px; max-width: min(100%, 720px); }
+  #report .doc figure.picture img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
+  #report .doc figure.picture figcaption { margin-top: 4px; font-size: 12px; color: var(--muted); }
+  #report .doc figure.picture .gone-note { display: none; padding: 12px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); }
+  #report .doc figure.picture.gone img { display: none; }
+  #report .doc figure.picture.gone .gone-note { display: block; }
   #report .doc details.evidence { margin: 10px 0 16px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
   #report .doc details.evidence[open] summary { margin-bottom: 10px; }
   #report .doc details.evidence figure { margin: 0 0 12px; }
+  #report .doc figure.picture { margin: 8px 0 14px; max-width: 640px; }
+  #report .doc figure.picture img { display: block; width: auto; max-width: 100%; max-height: 360px; border: 1px solid var(--line); border-radius: 6px; }
   #report .doc details.evidence .shots { display: flex; flex-wrap: wrap; gap: 14px; }
   #report .doc details.evidence figure { flex: 1 1 320px; max-width: 440px; }
   #report .doc details.evidence img { display: block; width: 100%; max-height: 280px; object-fit: cover; object-position: top;
@@ -494,7 +502,28 @@ export const LIVE_PAGE = `<!doctype html>
   function evidenceFor(id) {
     var found = null;
     reportEvidence.forEach(function (e) { if (e.id === id) found = e; });
-    if (!found || !found.frames.length) return null;
+    if (!found) return null;
+    // The picture taken when it was filed comes first, open: it is what a reader looks for.
+    var picture = null;
+    if (found.picture) {
+      picture = el('figure', 'picture');
+      picture.setAttribute('data-testid', 'live-report-picture-' + id);
+      var link = el('a');
+      link.href = 'record/' + found.picture.file;
+      link.target = '_blank';
+      link.rel = 'noreferrer';
+      link.setAttribute('data-testid', 'live-report-picture-open');
+      var pic = el('img');
+      pic.loading = 'lazy';
+      pic.src = 'record/' + found.picture.file;
+      pic.alt = 'What the finding is about, when it was filed';
+      pic.addEventListener('error', function () { picture.classList.add('gone'); });
+      link.appendChild(pic);
+      picture.appendChild(link);
+      picture.appendChild(el('figcaption', '', found.picture.caption));
+      picture.appendChild(el('p', 'gone-note', 'This picture is no longer in ' + found.picture.file.replace(/\\/[^/]*$/, '') + '.'));
+    }
+    if (!found.frames.length) return picture;
     var box = el('details', 'evidence');
     box.setAttribute('data-testid', 'live-report-evidence-' + id);
     box.appendChild(el('summary', '', found.frames.length + (found.frames.length === 1 ? ' screenshot' : ' screenshots') + ' from around this finding'));
@@ -514,7 +543,11 @@ export const LIVE_PAGE = `<!doctype html>
       fig.appendChild(el('p', 'gone-note', 'This frame is no longer in ' + f.frame.replace(/\\/[^/]*$/, '') + '.'));
       shots.appendChild(fig);
     });
-    return box;
+    if (!picture) return box;
+    var both = el('div');
+    both.appendChild(picture);
+    both.appendChild(box);
+    return both;
   }
   function renderMarkdown(root, md) {
     root.textContent = '';
@@ -567,6 +600,20 @@ export const LIVE_PAGE = `<!doctype html>
         inline(h, m[2]);
         container.appendChild(h);
         i += 1;
+      } else if ((m = /^!\\[([^\\]]*)\\]\\((recordings\\/[A-Za-z0-9._\\/-]+)\\)$/.exec(line)) && m[2].indexOf('..') < 0) {
+        // A finding's picture from the run's recording, served by the frame
+        // route. Any other picture is a file this view cannot serve.
+        flush();
+        var fig = el('figure', 'picture');
+        var pic = el('img');
+        pic.loading = 'lazy';
+        pic.src = 'record/' + m[2];
+        pic.alt = m[1];
+        fig.appendChild(pic);
+        container.appendChild(fig);
+        i += 1;
+      } else if (/^!\\[[^\\]]*\\]\\([^)]*\\)$/.test(line)) {
+        i += 1;
       } else if ((m = /^<details><summary>(.*)<\\/summary>$/.exec(line))) {
         flush();
         var details = el('details');

package/dist/engine/live.js

@@ -27,6 +27,7 @@ import fs from "node:fs";
 import http from "node:http";
 import path from "node:path";
 import { LIVE_PAGE } from "./live-page.js";
+import { isPng } from "./png.js";
 import { JOURNEY_END, JOURNEY_START, TASK_SET } from "./memory.js";
 /** Holds the live view's token, next to status.json. Written owner-only; removed when the engine shuts down. */
 export const LIVE_TOKEN_FILE = "live-token";
@@ -477,7 +478,9 @@ export class LiveServer {
             const jpeg = await this.provider.frame(asked);
             if (!jpeg)
                 return this.send(res, 404, "no such frame");
-            return this.send(res, 200, jpeg, "image/jpeg", { "Content-Length": jpeg.length, "Cache-Control": "private, max-age=3600" });
+            // Frames are JPEG; a finding's picture is PNG (capture.ts), and is labelled as one.
+            const type = isPng(jpeg) ? "image/png" : "image/jpeg";
+            return this.send(res, 200, jpeg, type, { "Content-Length": jpeg.length, "Cache-Control": "private, max-age=3600" });
         }
         if (route === "events" && !name) {
             const wanted = this.param(req, "sessions");