[Logging-View]: Enhancements and features

e2e/README.md

@@ -13,6 +13,16 @@ Tests are split into two Playwright projects:
 | `ui`          | `tests/ui/`          | UI tests — launch the Electron app and interact with the UI                             |
 | `integration` | `tests/integration/` | Real renderer/main IPC, Go HTTP catalogs, WebSocket subscriptions and profile isolation |
 
+Logging View also has a standalone browser suite in `tests/logging-view/`, using
+`playwright.logging.config.ts`. Run `pnpm --dir e2e test:logging-view` from the
+repository root. It starts Vite on port 9007 and verifies dashboard tabs, independent
+signal/layout/time settings, keyboard navigation, and session resets without Electron
+or a backend binary.
+The suite also covers the tab settings popover, colors, drag and keyboard reordering,
+and lock protection for tab metadata, plots, sidebar selection and time controls.
+Compact controls in the tab bar and the expandable full controls are checked for
+state preservation, lock protection and narrow layouts.
+
 ---
 
 ## UI Tests
@@ -57,18 +67,30 @@ vehicle commands. The WebSocket integration test only subscribes to connection s
 | `pnpm test:fast`             | Run all tests without rebuilding (assumes already built)              |
 | `pnpm test:fast:ui`          | Run `tests/ui` without rebuilding                                     |
 | `pnpm test:fast:integration` | Run integration tests without rebuilding                              |
+| `pnpm test:logging-view`     | Run Logging View dashboard tests against a local Vite server          |
 | `pnpm report`                | Open the last Playwright HTML report                                  |
 
 The renderer build does not compile Go or package Electron. It copies each
 frontend once, preserving Testing's E2E build rather than rebuilding it in normal mode.
 Use `:fast` variants when iterating against already-built renderers.
 
+`pnpm build` also seeds the About credits. The About screen reads a snapshot of
+contributor photographs and per-person commit counts that `generateCredits.js`
+fetches from the GitHub API when the app is packaged; it is gitignored, so a
+fresh clone — every CI run — has neither it nor the avatars beside it, and
+`tests/ui/about.test.ts` would find an empty contributor list. The build writes
+a fixed, offline fixture through `scripts/about-credits.mjs` when no usable
+snapshot is on disk, and leaves a generated one untouched, so a developer's own
+build stays what the About tests exercise locally. The suite never calls GitHub:
+the About tests assert that the screen is entirely network-free.
+
 ---
 
 ## Requirements
 
 - A platform-appropriate, prebuilt backend binary must exist in `electron-app/binaries/`. CI builds it before running the suite.
 - `testing-view` must be built in e2e mode (`build:e2e`), also handled automatically.
+- About credits need no network or GitHub token: `pnpm build` seeds an offline fixture when nothing has generated the snapshot.
 - Workers are set to `1` — Electron tests must run serially since only one app instance can run at a time.
 
 CI builds all four tested views and runs both projects. `E2E_REQUIRED_VIEWS=testing,competition,logging,adj` makes missing CI build artifacts a failure instead of silently skipping cross-view tests. Fast local runs may still skip optional-view cases when testing a reduced build.

e2e/package.json

@@ -11,6 +11,7 @@
     "test:fast": "playwright test",
     "test:fast:ui": "playwright test tests/ui",
     "test:fast:integration": "playwright test --project=integration",
+    "test:logging-view": "playwright test --config playwright.logging.config.ts",
     "report": "playwright show-report"
   },
   "devDependencies": {

e2e/playwright.logging.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests/logging-view",
+  timeout: 60_000,
+  workers: 1,
+  reporter: "list",
+  use: {
+    baseURL: "http://127.0.0.1:9007",
+    viewport: { width: 1440, height: 900 },
+    trace: "retain-on-failure",
+  },
+  webServer: {
+    command:
+      "pnpm --dir ../frontend/logging-view dev --host 127.0.0.1 --port 9007 --strictPort",
+    url: "http://127.0.0.1:9007",
+    reuseExistingServer: !process.env.CI,
+  },
+});

e2e/scripts/about-credits.mjs

@@ -0,0 +1,185 @@
+/**
+ * The About screen reads electron-app/src/about/credits.snapshot.json and the
+ * avatars next to it. Both are generated from the GitHub API at build time and
+ * deliberately not committed (they are contributor photographs and per-person
+ * commit counts, in a public repository), so a fresh clone — every CI run —
+ * has neither, About lists nobody and tests/ui/about.test.ts cannot find a
+ * single contributor.
+ *
+ * The suite must not fetch them either: the About tests assert that the screen
+ * is entirely network-free, and making every pull request depend on the GitHub
+ * commits API would be slow and flaky. So seed a fixed, offline snapshot plus
+ * matching images, and leave a real generated snapshot alone when there is one,
+ * so a developer's own build keeps being what the tests exercise locally.
+ */
+import { deflateSync } from "node:zlib";
+import { access, mkdir, readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const ELECTRON_APP = fileURLToPath(
+  new URL("../../electron-app/", import.meta.url),
+);
+const SNAPSHOT = path.join(ELECTRON_APP, "src/about/credits.snapshot.json");
+const AVATARS = path.join(ELECTRON_APP, "renderer/about/avatars");
+// The renderer only builds an <img> for a path shaped like this one.
+const AVATAR_URL = /^\.\/avatars\/[a-zA-Z0-9-]+\.(png|jpg|webp)$/;
+
+// Ids far outside GitHub's range for this repository's members, so the fixture
+// images can never be mistaken for, or overwrite, a real contributor's photo.
+// Descending, distinct counts: the first test asserts the list is sorted and
+// the second one opens the top member's profile, which needs a login.
+const FIXTURE = [
+  {
+    id: "900000001",
+    login: "e2e-ada",
+    contributions: 128,
+    colour: [64, 110, 235],
+  },
+  {
+    id: "900000002",
+    login: "e2e-grace",
+    contributions: 57,
+    colour: [217, 72, 140],
+  },
+  {
+    id: "900000003",
+    login: "e2e-linus",
+    contributions: 9,
+    colour: [48, 168, 122],
+  },
+];
+
+const CRC_TABLE = Uint32Array.from({ length: 256 }, (_, index) => {
+  let value = index;
+  for (let bit = 0; bit < 8; bit++)
+    value = value & 1 ? 0xedb88320 ^ (value >>> 1) : value >>> 1;
+  return value >>> 0;
+});
+
+function crc32(buffer) {
+  let crc = 0xffffffff;
+  for (const byte of buffer) crc = CRC_TABLE[(crc ^ byte) & 0xff] ^ (crc >>> 8);
+  return (crc ^ 0xffffffff) >>> 0;
+}
+
+function chunk(type, data) {
+  const head = Buffer.alloc(8);
+  head.writeUInt32BE(data.length, 0);
+  head.write(type, 4, "ascii");
+  const tail = Buffer.alloc(4);
+  tail.writeUInt32BE(crc32(Buffer.concat([head.subarray(4), data])), 0);
+  return Buffer.concat([head, data, tail]);
+}
+
+/**
+ * Encodes a solid square as a real PNG. The test requires each avatar to
+ * decode in the renderer (`naturalWidth > 0`), so these are complete images
+ * rather than placeholder bytes, and no binary fixture needs committing.
+ * @param {number} size - Side length in pixels.
+ * @param {[number, number, number]} colour - 8-bit RGB fill.
+ * @returns {Buffer}
+ */
+function solidPng(size, colour) {
+  const stride = size * 3 + 1;
+  const raw = Buffer.alloc(stride * size);
+  for (let row = 0; row < size; row++) {
+    raw[row * stride] = 0; // Filter type 0: no filtering.
+    for (let column = 0; column < size; column++) {
+      const pixel = row * stride + 1 + column * 3;
+      raw[pixel] = colour[0];
+      raw[pixel + 1] = colour[1];
+      raw[pixel + 2] = colour[2];
+    }
+  }
+  const header = Buffer.alloc(13);
+  header.writeUInt32BE(size, 0);
+  header.writeUInt32BE(size, 4);
+  header[8] = 8; // Bit depth.
+  header[9] = 2; // Colour type: truecolour RGB.
+  return Buffer.concat([
+    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+    chunk("IHDR", header),
+    chunk("IDAT", deflateSync(raw, { level: 9 })),
+    chunk("IEND", Buffer.alloc(0)),
+  ]);
+}
+
+/**
+ * Reports whether the snapshot on disk can carry the About tests: it must
+ * list somebody, be counted the way getAboutCredits() demands, name at least
+ * one GitHub profile to open, and reference only images that are still there,
+ * because a missing file leaves an <img> that never loads.
+ * @returns {Promise<boolean>}
+ */
+async function hasUsableCredits() {
+  let snapshot;
+  try {
+    snapshot = JSON.parse(await readFile(SNAPSHOT, "utf8"));
+  } catch {
+    return false;
+  }
+  const people = snapshot?.contributors;
+  if (snapshot?.counting !== "non-merge" || !Array.isArray(people))
+    return false;
+  const listed = people.filter((person) => person.type !== "Bot");
+  if (!listed.length || !listed.some((person) => person.login)) return false;
+  const images = listed
+    .map((person) => person.avatarUrl)
+    .filter((url) => typeof url === "string" && url);
+  if (!images.length || !images.every((url) => AVATAR_URL.test(url)))
+    return false;
+  const present = await Promise.all(
+    images.map((url) =>
+      access(path.join(AVATARS, path.basename(url))).then(
+        () => true,
+        () => false,
+      ),
+    ),
+  );
+  return present.every(Boolean);
+}
+
+/**
+ * Writes the offline About fixture unless a usable generated snapshot is
+ * already on disk.
+ * @returns {Promise<"fixture" | "generated">} Which credits the tests will read.
+ */
+export async function seedAboutCredits() {
+  if (await hasUsableCredits()) return "generated";
+  await mkdir(AVATARS, { recursive: true });
+  await mkdir(path.dirname(SNAPSHOT), { recursive: true });
+  await Promise.all(
+    FIXTURE.map((person) =>
+      writeFile(
+        path.join(AVATARS, `${person.id}.png`),
+        solidPng(96, person.colour),
+      ),
+    ),
+  );
+  await writeFile(
+    SNAPSHOT,
+    `${JSON.stringify(
+      {
+        schemaVersion: 3,
+        repository: "Hyperloop-UPV/software",
+        counting: "non-merge",
+        // No revision, so the next real build refetches instead of reusing this.
+        headSha: null,
+        fetchedAt: "2026-01-02T03:04:05.000Z",
+        contributors: FIXTURE.map(({ id, login, contributions }) => ({
+          id,
+          login,
+          name: login,
+          contributions,
+          avatarUrl: `./avatars/${id}.png`,
+          type: "User",
+        })),
+      },
+      null,
+      2,
+    )}\n`,
+    "utf8",
+  );
+  return "fixture";
+}

e2e/scripts/build-renderers.mjs

@@ -2,6 +2,7 @@ import { execFileSync } from "node:child_process";
 import { cpSync, existsSync, mkdirSync, rmSync } from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import { seedAboutCredits } from "./about-credits.mjs";
 
 const root = fileURLToPath(new URL("../../", import.meta.url));
 const pnpmCli = process.env.npm_execpath;
@@ -32,3 +33,11 @@ for (const view of ["testing", "competition", "logging", "adj"]) {
   mkdirSync(destination, { recursive: true });
   cpSync(source, destination, { recursive: true });
 }
+
+// About reads a build-time snapshot that a fresh clone does not have.
+const credits = await seedAboutCredits();
+console.log(
+  credits === "fixture"
+    ? "About credits: wrote the offline e2e fixture."
+    : "About credits: keeping the generated snapshot already on disk.",
+);