TODO: docs

squash this into the commit that first added all_tests.ts, we don't even
want to have a trace of it left

for the cli ones, we can simply iterate the filesystem relative our
location. for the web one, we determine it on launch and expose it as an
endpoint from the server which the client queries

cmd/mbf/internal/pkgserver/ui/all_tests.ts

@@ -0,0 +1,2 @@
+// Import all test files to register their test suites.
+import "./index_test.js";

cmd/mbf/internal/pkgserver/ui/index_test.ts

@@ -0,0 +1,2 @@
+import { suite, test } from "./jstest/jstest.js";
+import "./index.js";

cmd/mbf/internal/pkgserver/ui/jstest/cli.ts

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+
+// Many editors have terminal emulators built in, so running tests with NodeJS
+// provides faster iteration, especially for those acclimated to test-driven
+// development.
+
+import "../all_tests.js";
+import { StreamReporter, GLOBAL_REGISTRAR } from "./jstest.js";
+
+// TypeScript doesn't like process and Deno as their type definitions aren't
+// installed, but doesn't seem to complain if they're accessed through
+// globalThis.
+const process: any = (globalThis as any).process;
+const Deno: any = (globalThis as any).Deno;
+
+function getArgs(): string[] {
+    if (process) {
+        const [runtime, program, ...args] = process.argv;
+        return args;
+    }
+    if (Deno) return Deno.args;
+    return [];
+}
+
+function exit(code?: number): never {
+    if (Deno) Deno.exit(code);
+    if (process) process.exit(code);
+    throw `exited with code ${code ?? 0}`;
+}
+
+const args = getArgs();
+let verbose = false;
+if (args.length > 1) {
+    console.error("Too many arguments");
+    exit(1);
+}
+if (args.length === 1) {
+    if (args[0] === "-v" || args[0] === "--verbose" || args[0] === "-verbose") {
+        verbose = true;
+    } else if (args[0] !== "--") {
+        console.error(`Unknown argument '${args[0]}'`);
+        exit(1);
+    }
+}
+
+let reporter = new StreamReporter({ writeln: console.log }, verbose);
+GLOBAL_REGISTRAR.run(reporter);
+exit(reporter.succeeded() ? 0 : 1);

cmd/mbf/internal/pkgserver/ui/jstest/failure-closed.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0"?>
+<!-- See failure-open.svg for an explanation of the view box dimensions. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
+    <!-- This triangle should match success-closed.svg, fill and stroke color notwithstanding. -->
+    <polygon points="0,0 100,50 0,100" fill="red" stroke="red" stroke-width="15" stroke-linejoin="round"/>
+    <!--
+     ! y-coordinates go before x-coordinates here to highlight the difference
+     ! (or, lack thereof) between these numbers and the ones in failure-open.svg;
+     ! try a textual diff. Make sure to keep the numbers in sync!
+     -->
+    <line y1="30" x1="10" y2="70" x2="50" stroke="white" stroke-width="16"/>
+    <line y1="30" x1="50" y2="70" x2="10" stroke="white" stroke-width="16"/>
+</svg>

cmd/mbf/internal/pkgserver/ui/jstest/failure-open.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<!--
+ ! This view box is a bit weird: the strokes assume they're working in a view
+ ! box that spans from the (0,0) to (100,100), and indeed that is convenient
+ ! conceptualizing the strokes, but the stroke itself has a considerable width
+ ! that gets clipped by restrictive view box dimensions. Hence, the view is
+ ! shifted from (0,0)–(100,100) to (-20,-20)–(120,120), to make room for the
+ ! clipped stroke, while leaving behind an illusion of working in a view box
+ ! spanning from (0,0) to (100,100).
+ !
+ ! However, the resulting SVG is too close to the summary text, and CSS
+ ! properties to add padding do not seem to work with `content:` (likely because
+ ! they're anonymous replaced elements); thus, the width of the view is
+ ! increased considerably to provide padding in the SVG itself, while leaving
+ ! the strokes oblivious.
+ !
+ ! It gets worse: the summary text isn't vertically aligned with the icon! As
+ ! a flexbox cannot be used in a summary to align the marker with the text, the
+ ! simplest and most effective solution is to reduce the height of the view box
+ ! from 140 to 130, thereby removing some of the bottom padding present.
+ !
+ ! All six SVGs use the same view box (and indeed, they refer to this comment)
+ ! so that they all appear to be the same size and position relative to each
+ ! other on the DOM—indeed, the view box dimensions, alongside the width,
+ ! directly control their placement on the DOM.
+ !
+ ! TL;DR: CSS is janky, overflow is weird, and SVG is awesome!
+ -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
+    <!-- This triangle should match success-open.svg, fill and stroke color notwithstanding. -->
+    <polygon points="0,0 100,0 50,100" fill="red" stroke="red" stroke-width="15" stroke-linejoin="round"/>
+    <!-- See the comment in failure-closed.svg before modifying this. -->
+    <line x1="30" y1="10" x2="70" y2="50" stroke="white" stroke-width="16"/>
+    <line x1="30" y1="50" x2="70" y2="10" stroke="white" stroke-width="16"/>
+</svg>

cmd/mbf/internal/pkgserver/ui/jstest/go_test_entrypoint.ts

@@ -0,0 +1,3 @@
+import "../all_tests.js";
+import { GoTestReporter, GLOBAL_REGISTRAR } from "./jstest.js";
+GLOBAL_REGISTRAR.run(new GoTestReporter());

cmd/mbf/internal/pkgserver/ui/jstest/index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>PkgServer Tests</title>
+</head>
+<body>
+<noscript>
+    I hate JavaScript as much as you, but this page runs tests written in
+    JavaScript to test the functionality of code written in JavaScript, so it
+    wouldn't make sense for it to work without JavaScript. <strong>Please turn
+    JavaScript on!</strong>
+</noscript>
+
+<h1>PkgServer Tests</h1>
+
+<main>
+<p id="counters">
+    <span id="success-counter">0</span> succeeded, <span id="failure-counter">0</span>
+    failed<span id="skip-counter-text" hidden>, <span id="skip-counter">0</span> skipped</span>.
+</p>
+
+<p hidden id="success-description">Successful test</p>
+<p hidden id="failure-description">Failed test</p>
+<p hidden id="skip-description">Partially or fully skipped test</p>
+
+<div id="root">
+</div>
+
+<script type="module">
+    import "../all_tests.js";
+    import { DOMReporter, GLOBAL_REGISTRAR } from "./jstest.js";
+    GLOBAL_REGISTRAR.run(new DOMReporter());
+</script>
+</main>
+</body>
+</html>

cmd/mbf/internal/pkgserver/ui/jstest/jstest.ts

@@ -0,0 +1,464 @@
+// =============================================================================
+// DSL
+
+type TestTree = TestGroup | Test;
+type TestGroup = { name: string; children: TestTree[] };
+type Test = { name: string; test: (t: TestController) => void };
+
+// A registrar provides a central location to register test suites.
+export class TestRegistrar {
+    // Note that, while this is equivalent to a new tree node sans a name, the
+    // lack of a name provides the illusion of multiple “top-level” suites,
+    // while still allowing reporters to pick their favorite name—say, “JS
+    // tests”—were they to need to label all suites together.
+    #suites: TestGroup[];
+
+    constructor() {
+        this.#suites = [];
+    }
+
+    suite(name: string, children: TestTree[]) {
+        checkDuplicates(name, children);
+        this.#suites.push({ name, children });
+    }
+
+    run(reporter: Reporter) {
+        reporter.register(this.#suites);
+        for (const suite of this.#suites) {
+            for (const c of suite.children) runTests(reporter, [suite.name], c);
+        }
+        reporter.finalize();
+    }
+}
+
+export let GLOBAL_REGISTRAR = new TestRegistrar();
+
+// Register a suite in the global registrar.
+export function suite(name: string, children: TestTree[]) {
+    GLOBAL_REGISTRAR.suite(name, children);
+}
+
+export function group(name: string, children: TestTree[]): TestTree {
+    checkDuplicates(name, children);
+    return { name, children };
+}
+export const context = group;
+export const describe = group;
+
+export function test(name: string, test: (t: TestController) => void): TestTree {
+    return { name, test };
+}
+
+// While this function could certainly refine the type to a map instead of
+// simply checking for duplicates and discarding that knowledge, these test
+// trees are primarily for flooding—that is, iteration—for which an array is
+// better suited.
+function checkDuplicates(parent: string, names: { name: string }[]) {
+    let seen = new Set<string>();
+    for (const { name } of names) {
+        if (seen.has(name)) {
+            throw new RangeError(`duplicate name '${name}' in '${parent}'`);
+        }
+        seen.add(name);
+    }
+}
+
+export type TestState = "success" | "failure" | "skip";
+
+class AbortSentinel {}
+
+export class TestController {
+    #state: TestState;
+    logs: string[];
+
+    constructor() {
+        this.#state = "success";
+        this.logs = [];
+    }
+
+    getState(): TestState {
+        return this.#state;
+    }
+
+    fail() {
+        this.#state = "failure";
+    }
+
+    failed(): boolean {
+        return this.#state === "failure";
+    }
+
+    failNow(): never {
+        this.fail();
+        throw new AbortSentinel();
+    }
+
+    log(message: string) {
+        this.logs.push(message);
+    }
+
+    error(message: string) {
+        this.log(message);
+        this.fail();
+    }
+
+    fatal(message: string): never {
+        this.log(message);
+        this.failNow();
+    }
+
+    skip(message?: string): never {
+        if (message != null) this.log(message);
+        if (this.#state !== "failure") this.#state = "skip";
+        throw new AbortSentinel();
+    }
+
+    skipped(): boolean {
+        return this.#state === "skip";
+    }
+}
+
+// =============================================================================
+// Execution
+
+export interface TestResult {
+    state: TestState;
+    logs: string[];
+}
+
+function runTests(reporter: Reporter, parents: string[], node: TestTree) {
+    const path = [...parents, node.name];
+    if ("children" in node) {
+        for (const c of node.children) runTests(reporter, path, c);
+        return;
+    }
+    let controller = new TestController();
+    try {
+        node.test(controller);
+    } catch (e) {
+        if (!(e instanceof AbortSentinel)) {
+            controller.error(extractExceptionString(e));
+        }
+    }
+    reporter.update(path, { state: controller.getState(), logs: controller.logs });
+}
+
+function extractExceptionString(e: any): string {
+    // String() instead of .toString() as null and undefined don't have
+    // properties.
+    const s = String(e);
+    if (!(e instanceof Error && e.stack)) return s;
+    // v8 (Chromium, NodeJS) includes the error message, while Firefox and
+    // WebKit do not.
+    if (e.stack.startsWith(s)) return e.stack;
+    return `${s}\n${e.stack}`;
+}
+
+// =============================================================================
+// Reporting
+
+export interface Reporter {
+    // A notable feature—or flaw, to some—of the DSL is that the tree of tests
+    // is statically known, which might greatly aid in implementing a reporter.
+    register(suites: TestGroup[]): void;
+    // While we could simply call a function with a tree representing all
+    // results, which would indeed greatly simplify implementation of reporters,
+    // simply registering a path and allowing the reporter to—either implicitly
+    // or explicitly—construct a tree themselves allows for results to be
+    // *incrementally reported*, instead of a great deal of silence until all
+    // tests finish.
+    update(path: string[], result: TestResult): void;
+    // With just update(), the reporter never knows when all tests have
+    // completed. The simplest possible use for this is to notify the user, but
+    // its intent is actually more tailored to the StreamReporter scenario:
+    // while destructively updated report rendering (as with a tree of DOM nodes
+    // which are mutated) always displays the results in a structured manner
+    // matching that of the tests, “rerendering” or otherwise destructively
+    // updating the rendered output might be infeasible in some paradigms, such
+    // as command-line applications—all existing implementations of such
+    // rendering both mess up the scrollback position and necessarily crop out
+    // some of the data at the bottom (since the top of the tree is forced to be
+    // at the top of the screen, as one cannot unscroll portably). Explicitly
+    // signaling to the reporter that no more results will be received permits
+    // it to simply display live test progress linearly, while building up
+    // a tree and displaying it once it's known the tree is complete.
+    finalize(): void;
+}
+
+// A reporter that diligently reports absolutely nothing. This is essentially
+// a way to “undo” the incremental reporting update() provides, getting back the
+// underlying result tree; this makes it extremely convenient in some cases like
+// testing ourself.
+export class NoOpReporter implements Reporter {
+    suites: TestGroup[];
+    results: ({ path: string[] } & TestResult)[];
+    finalized: boolean;
+
+    constructor() {
+        this.suites = [];
+        this.results = [];
+        this.finalized = false;
+    }
+
+    register(suites: TestGroup[]) {
+        this.suites = suites;
+    }
+
+    update(path: string[], result: TestResult) {
+        this.results.push({ path, ...result });
+    }
+
+    finalize() {
+        this.finalized = true;
+    }
+}
+
+export interface Stream {
+    writeln(s: string): void;
+}
+
+const SEP = " ❯ ";
+
+// A simple reporter that outputs to some stream; suitable for CLIs.
+export class StreamReporter implements Reporter {
+    stream: Stream;
+    verbose: boolean;
+    #successes: ({ path: string[] } & TestResult)[];
+    #failures: ({ path: string[] } & TestResult)[];
+    #skips: ({ path: string[] } & TestResult)[];
+
+    constructor(stream: Stream, verbose: boolean = false) {
+        this.stream = stream;
+        this.verbose = verbose;
+        this.#successes = [];
+        this.#failures = [];
+        this.#skips = [];
+    }
+
+    succeeded(): boolean {
+        return this.#successes.length > 0 && this.#failures.length === 0;
+    }
+
+    // We don't need the structure for reporting.
+    register(suites: TestGroup[]) {}
+
+    update(path: string[], result: TestResult) {
+        if (path.length === 0) throw new RangeError("path is empty");
+        const pathStr = path.join(SEP);
+        switch (result.state) {
+        case "success":
+            this.#successes.push({ path, ...result });
+            // NOTE: emojis are used instead of colored Unicode symbols as
+            // coloring isn't possible through all streams, which would make
+            // this terminal-specific, and even in terminals and emulators
+            // thereof, it's very tedious to correctly detect whether one should
+            // use colors (https://no-color.org, https://bixense.com/clicolors,
+            // https://force-color.org), ensure reasonable contrast is retained
+            // on every possible theme (using reverse video is often the only
+            // way), and be immediately noticeable. Emojis have an upper hand in
+            // that they're more common than obscure Unicode characters—which
+            // also means you're more likely to have an emoji font but not
+            // a font with those symbols—and that they're double-width.
+            if (this.verbose) this.stream.writeln(`✅️ ${pathStr}`);
+            break;
+        case "failure":
+            this.#failures.push({ path, ...result });
+            this.stream.writeln(`⚠️ ${pathStr}`);
+            break;
+        case "skip":
+            this.#skips.push({ path, ...result });
+            this.stream.writeln(`⏭️ ${pathStr}`);
+            break;
+        }
+    }
+
+    finalize() {
+        if (this.verbose) this.#displaySection("successes", this.#successes, true);
+        this.#displaySection("failures", this.#failures);
+        this.#displaySection("skips", this.#skips);
+        this.stream.writeln("");
+        this.stream.writeln(
+            `${this.#successes.length} succeeded, ${this.#failures.length} failed` +
+                (this.#skips.length ? `, ${this.#skips.length} skipped` : ""),
+        );
+    }
+
+    #displaySection(name: string, data: ({ path: string[] } & TestResult)[], ignoreEmpty: boolean = false) {
+        if (!data.length) return;
+
+        // Transform [{ path: ["a", "b", "c"] }, { path: ["a", "b", "d"] }] into
+        // { "a ❯ b": ["c", "d"] }. NOTE: intermediate nodes are collapsed as
+        // excessive nesting is difficult to convey clearly in a text-only
+        // environment.
+        let pathMap = new Map<string, ({ name: string } & TestResult)[]>();
+        for (const t of data) {
+            if (t.path.length === 0) throw new RangeError("path is empty");
+            const key = t.path.slice(0, -1).join(SEP);
+            if (!pathMap.has(key)) pathMap.set(key, []);
+            pathMap.get(key)!.push({ name: t.path.at(-1)!, ...t });
+        }
+
+        this.stream.writeln("");
+        this.stream.writeln(name.toUpperCase());
+        this.stream.writeln("=".repeat(name.length));
+
+        for (let [path, tests] of pathMap) {
+            if (ignoreEmpty) tests = tests.filter((t) => t.logs.length);
+            if (tests.length === 0) continue;
+            if (tests.length === 1) {
+                this.#writeOutput(tests[0], path ? `${path}${SEP}` : "", false);
+            } else {
+                this.stream.writeln(path);
+                for (const t of tests) this.#writeOutput(t, "  - ", true);
+            }
+        }
+    }
+
+    #writeOutput(test: { name: string } & TestResult, prefix: string, nested: boolean) {
+        let output = "";
+        if (test.logs.length) {
+            // Individual logs might span multiple lines, so join them together
+            // then split it again.
+            const logStr = test.logs.join("\n");
+            const lines = logStr.split("\n");
+            if (lines.length <= 1) {
+                output = `: ${logStr}`;
+            } else {
+                const padding = nested ? "      " : "  ";
+                output = ":\n" + lines.map((line) => padding + line).join("\n");
+            }
+        }
+        this.stream.writeln(`${prefix}${test.name}${output}`);
+    }
+}
+
+function assertGetElementById(id: string): HTMLElement {
+    let elem = document.getElementById(id);
+    if (elem == null) throw new ReferenceError(`element with ID '${id}' missing from DOM`);
+    return elem;
+}
+
+// A reporter that directly translates a tree of results into a tree of
+// collapsible elements in the DOM.
+export class DOMReporter implements Reporter {
+    // It is very difficult to implement this using the statically known tree,
+    // because Map doesn't handle array keys properly (to store the path), and
+    // it's unknown of there's any way to implement it without writing one's own
+    // data types. Oh well; using the DOM as a data structure might seem hacky
+    // but it does have its benefits, apart from encouraging a tagless final.
+    register(suites: TestGroup[]) {}
+
+    update(path: string[], result: TestResult) {
+        if (path.length === 0) throw new RangeError("path is empty");
+        if (result.state === "skip") {
+            assertGetElementById("skip-counter-text").hidden = false;
+        }
+        const counter = assertGetElementById(`${result.state}-counter`);
+        counter.innerText = (Number(counter.innerText) + 1).toString();
+
+        let parent = assertGetElementById("root");
+        for (const node of path) {
+            let child: HTMLDetailsElement | null = null;
+            let summary: HTMLElement | null = null;
+            let d: Element;
+            outer: for (d of parent.children) {
+                if (!(d instanceof HTMLDetailsElement)) continue;
+                for (const s of d.children) {
+                    if (!(s instanceof HTMLElement)) continue;
+                    if (!(s.tagName === "SUMMARY" && s.innerText === node)) continue;
+                    child = d;
+                    summary = s;
+                    break outer;
+                }
+            }
+            if (!child) {
+                child = document.createElement("details");
+                child.className = "test-node";
+                child.ariaRoleDescription = "test";
+                summary = document.createElement("summary");
+                summary.appendChild(document.createTextNode(node));
+                summary.ariaRoleDescription = "test name";
+                child.appendChild(summary);
+                parent.appendChild(child);
+            }
+            if (!summary) throw new Error("unreachable as assigned above");
+
+            switch (result.state) {
+            case "failure":
+                // Only expand failures, to minimize successes and skips.
+                child.open = true;
+                child.classList.add("failure");
+                child.classList.remove("skip");
+                child.classList.remove("success");
+                // The summary marker does not appear in the AOM, so setting its
+                // alt text is fruitless; label the summary itself instead.
+                summary.setAttribute("aria-labelledby", "failure-description");
+                break;
+            case "skip":
+                if (child.classList.contains("failure")) break;
+                child.classList.add("skip");
+                child.classList.remove("success");
+                summary.setAttribute("aria-labelledby", "skip-description");
+                break;
+            case "success":
+                if (child.classList.contains("failure") || child.classList.contains("skip")) break;
+                child.classList.add("success");
+                summary.setAttribute("aria-labelledby", "success-description");
+                break;
+            }
+
+            parent = child;
+        }
+
+        const p = document.createElement("p");
+        p.classList.add("test-desc");
+        if (result.logs.length) {
+            const pre = document.createElement("pre");
+            pre.appendChild(document.createTextNode(result.logs.join("\n")));
+            p.appendChild(pre);
+        } else {
+            p.classList.add("italic");
+            p.appendChild(document.createTextNode("No output."));
+        }
+        parent.appendChild(p);
+    }
+
+    finalize() {}
+}
+
+interface GoNode {
+    name: string;
+    subtests?: GoNode[];
+}
+
+// Used to display results via `go test`, via some glue code from the Go side.
+// TODO(Ophestra): said glue code has to be written.
+export class GoTestReporter implements Reporter {
+    register(suites: TestGroup[]) {
+        console.log(JSON.stringify(suites.map(GoTestReporter.serialize)));
+    }
+
+    // Convert a test tree into the one expected by the Go code.
+    static serialize(node: TestTree): GoNode {
+        return {
+            name: node.name,
+            subtests: "children" in node ? node.children.map(GoTestReporter.serialize) : undefined,
+        };
+    }
+
+    update(path: string[], result: TestResult) {
+        let state: number;
+        switch (result.state) {
+            case "success": state = 0; break;
+            case "failure": state = 1; break;
+            case "skip": state = 2; break;
+        }
+        console.log(JSON.stringify({ path, state, logs: result.logs }));
+    }
+
+    // Unnecessary but convenient on the Go side, so that it doesn't have to
+    // infer this via process exit.
+    finalize() {
+        console.log("null");
+    }
+}

cmd/mbf/internal/pkgserver/ui/jstest/skip-closed.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0"?>
+<!-- See failure-open.svg for an explanation of the view box dimensions. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
+    <!-- This triangle should match success-closed.svg, fill and stroke color notwithstanding. -->
+    <polygon points="0,0 100,50 0,100" fill="blue" stroke="blue" stroke-width="15" stroke-linejoin="round"/>
+    <!--
+     ! This path is extremely similar to the one in skip-open.svg; before
+     ! making minor modifications, diff the two to understand how they should
+     ! remain in sync.
+     -->
+    <path
+        d="M 50,50
+           A 23,23 270,1,1 30,30
+           l -10,20
+           m 10,-20
+           l -20,-10"
+        fill="none"
+        stroke="white"
+        stroke-width="12"
+        stroke-linejoin="round"/>
+</svg>

cmd/mbf/internal/pkgserver/ui/jstest/skip-open.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0"?>
+<!-- See failure-open.svg for an explanation of the view box dimensions. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
+    <!-- This triangle should match success-open.svg, fill and stroke color notwithstanding. -->
+    <polygon points="0,0 100,0 50,100" fill="blue" stroke="blue" stroke-width="15" stroke-linejoin="round"/>
+    <!--
+     ! This path is extremely similar to the one in skip-closed.svg; before
+     ! making minor modifications, diff the two to understand how they should
+     ! remain in sync.
+     -->
+    <path
+        d="M 50,50
+           A 23,23 270,1,1 70,30
+           l 10,-20
+           m -10,20
+           l -20,-10"
+        fill="none"
+        stroke="white"
+        stroke-width="12"
+        stroke-linejoin="round"/>
+</svg>

cmd/mbf/internal/pkgserver/ui/jstest/style.css

@@ -0,0 +1,87 @@
+/*
+ * When updating the theme colors, also update them in success-closed.svg and
+ * success-open.svg!
+ */
+
+:root {
+  --bg: #d3d3d3;
+  --fg: black;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #2c2c2c;
+    --fg: ghostwhite;
+  }
+}
+
+html {
+  background-color: var(--bg);
+  color: var(--fg);
+}
+
+h1, p, summary, noscript {
+  font-family: sans-serif;
+}
+
+noscript {
+  font-size: 16pt;
+}
+
+.root {
+  margin: 1rem 0;
+}
+
+details.test-node {
+  margin-left: 1rem;
+  padding: 0.2rem 0.5rem;
+  border-left: 2px dashed var(--fg);
+  > summary {
+    cursor: pointer;
+  }
+  &.success > summary::marker {
+    /*
+     * WebKit only supports color and font-size properties in ::marker [1], and
+     * its ::-webkit-details-marker only supports hiding the marker entirely
+     * [2], contrary to mdn's example [3]; thus, set a color as a fallback:
+     * while it may not be accessible for colorblind individuals, it's better
+     * than no indication of a test's state for anyone, as that there's no other
+     * way to include an indication in the marker on WebKit.
+     *
+     * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::marker#browser_compatibility
+     * [2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary#default_style
+     * [3]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary#changing_the_summarys_icon
+     */
+    color: var(--fg);
+    content: url("./success-closed.svg") / "success";
+  }
+  &.success[open] > summary::marker {
+    content: url("./success-open.svg") / "success";
+  }
+  &.failure > summary::marker {
+    color: red;
+    content: url("./failure-closed.svg") / "failure";
+  }
+  &.failure[open] > summary::marker {
+    content: url("./failure-open.svg") / "failure";
+  }
+  &.skip > summary::marker {
+    color: blue;
+    content: url("./skip-closed.svg") / "skip";
+  }
+  &.skip[open] > summary::marker {
+    content: url("./skip-open.svg") / "skip";
+  }
+}
+
+p.test-desc {
+  margin: 0 0 0 1rem;
+  padding: 2px 0;
+  > pre {
+    margin: 0;
+  }
+}
+
+.italic {
+  font-style: italic;
+}

cmd/mbf/internal/pkgserver/ui/jstest/success-closed.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<!-- See failure-open.svg for an explanation of the view box dimensions. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
+    <style>
+    .adaptive-stroke {
+        stroke: black;
+    }
+    @media (prefers-color-scheme: dark) {
+        .adaptive-stroke {
+            stroke: ghostwhite;
+        }
+    }
+    </style>
+    <!-- When updating this triangle, also update the other five SVGs. -->
+    <polygon points="0,0 100,50 0,100" fill="none" class="adaptive-stroke" stroke-width="15" stroke-linejoin="round"/>
+</svg>

cmd/mbf/internal/pkgserver/ui/jstest/success-open.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<!-- See failure-open.svg for an explanation of the view box dimensions. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
+    <style>
+    .adaptive-stroke {
+        stroke: black;
+    }
+    @media (prefers-color-scheme: dark) {
+        .adaptive-stroke {
+            stroke: ghostwhite;
+        }
+    }
+    </style>
+    <!-- When updating this triangle, also update the other five SVGs. -->
+    <polygon points="0,0 100,0 50,100" fill="none" class="adaptive-stroke" stroke-width="15" stroke-linejoin="round"/>
+</svg>

cmd/mbf/internal/pkgserver/ui/test_ui.go

@@ -0,0 +1,13 @@
+//go:build frontend && frontend_test
+
+package ui
+
+import "embed"
+
+//go:generate tsc -p tsconfig.test.json
+//go:generate cp index.html style.css favicon.ico static
+//go:generate cp jstest/index.html jstest/style.css static/jstest
+//go:generate sh -c "cp jstest/*.svg static/jstest"
+//go:embed static
+var _static embed.FS
+var static = staticFS(_static)

cmd/mbf/internal/pkgserver/ui/tsconfig.json

@@ -1,8 +1,11 @@
+// This file defines the common options for all TypeScript here. This shouldn't
+// be directly used as the project file in builds; see tsconfig.*.json instead,
+// which inherit from this file and essentially define specific build targets.
 {
   "compilerOptions": {
     "target": "ES2024",
     "strict": true,
     "alwaysStrict": true,
-    "outDir": "static"
-  }
+    "outDir": "static",
+  },
 }

cmd/mbf/internal/pkgserver/ui/tsconfig.test.json

@@ -0,0 +1,5 @@
+// Project file for building pkgserver alongside its tests. test_ui.go uses this
+// as its project file.
+{
+  "extends": "./tsconfig.json",
+}

cmd/mbf/internal/pkgserver/ui/tsconfig.ui.json

@@ -0,0 +1,6 @@
+// Project file for building just the pkgserver UI, with none of the testing
+// stuff attached. ui_full.go uses this as its project file.
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["jstest", "all_tests.ts", "*_test.ts"],
+}

cmd/mbf/internal/pkgserver/ui/ui.go

@@ -1,7 +1,19 @@
 // Package ui holds the static web UI.
 package ui
 
-import "net/http"
+import (
+	"io/fs"
+	"net/http"
+)
+
+// staticFS is an internal helper to wrap around go:embed's filesystem.
+func staticFS(static fs.FS) fs.FS {
+	if f, err := fs.Sub(static, "static"); err != nil {
+		panic(err)
+	} else {
+		return f
+	}
+}
 
 // Register arranges for mux to serve the embedded frontend.
 func Register(mux *http.ServeMux) {

cmd/mbf/internal/pkgserver/ui/ui_full.go

@@ -1,21 +1,11 @@
-//go:build frontend
+//go:build frontend && !frontend_test
 
 package ui
 
-import (
-	"embed"
-	"io/fs"
-)
+import "embed"
 
-//go:generate tsc
-//go:generate cp index.html style.css static
+//go:generate tsc -p tsconfig.ui.json
+//go:generate cp index.html style.css favicon.ico static
 //go:embed static
 var _static embed.FS
-
-var static = func() fs.FS {
-	if f, err := fs.Sub(_static, "static"); err != nil {
-		panic(err)
-	} else {
-		return f
-	}
-}()
+var static = staticFS(_static)