@takodotid/circuit 0.34.2 → 0.35.0

package/src/studio/public/tables.js

@@ -2,1222 +2,1274 @@
 /// <reference lib="dom" />
 // Studio's tables, for reading the config without reading TypeScript: every device and everything it holds, and the network's VLANs, addresses, BGP sessions and cables.
 
-import { fetchJson } from "./compare.js";
-import { diffLines } from "./diff.js";
-import { go, h, link } from "./dom.js";
-import { csvOf, save } from "./export.js";
-import { currentLayer, LAYER_NAMES, lightVlan, selectDevice } from "./graph.js";
+import { Compare } from "./compare.js";
+import { Diff } from "./diff.js";
+import { Dom } from "./dom.js";
+import { Export } from "./export.js";
+import { Graph } from "./graph.js";
 
 /** @typedef {import("../../schema").Device} Device */
 /** @typedef {import("../data").StudioData} StudioData */
 /** @typedef {import("./dom.js").Child} Child */
 /** A column named after a field shows the name as code. A table with `csv` can be saved under that name. @typedef {{ head: { label: string, title?: string, field?: boolean }[], rows: { cells: Child[], muted?: boolean, id?: string }[], csv?: string }} Table */
 /** @typedef {{ id: string, title: string, has: (device: Device) => boolean, render: (device: Device) => Child[] }} Section */
+/** How a port is used. @typedef {"shut" | "lag" | "access" | "trunk" | "routed" | "plain"} PortUse */
 
-/** What the tables show, set each time they are drawn. @type {StudioData} */
-let data;
+export class Tables {
+    /** What the tables show, set each time they are drawn. @type {StudioData} */
+    static #data;
 
-/**
- * @param {unknown} value
- * @returns {value is Record<string, unknown>}
- */
-const isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+    /**
+     * @param {unknown} value
+     * @returns {value is Record<string, unknown>}
+     */
+    static #isObject(value) {
+        return typeof value === "object" && value !== null && !Array.isArray(value);
+    }
 
-/** @param {unknown} value */
-const isSecret = (value) =>
-    isObject(value) && Object.keys(value).length === 1 && (typeof value.secret === "string" || typeof value.secret_file === "string");
+    /** @param {unknown} value */
+    static #isSecret(value) {
+        return (
+            Tables.#isObject(value) &&
+            Object.keys(value).length === 1 &&
+            (typeof value.secret === "string" || typeof value.secret_file === "string")
+        );
+    }
+
+    /** @param {Record<string, unknown>} value */
+    static #secretText(value) {
+        return typeof value.secret === "string" ? `secret("${value.secret}")` : `secretFile("${value.secret_file}")`;
+    }
 
-/** @param {Record<string, unknown>} value */
-const secretText = (value) => (typeof value.secret === "string" ? `secret("${value.secret}")` : `secretFile("${value.secret_file}")`);
+    /**
+     * What a field is, from the schema's comments: looked up in these types, and the types they take fields from.
+     *
+     * @param {readonly string[]} types
+     * @param {string} field
+     * @returns {string | undefined}
+     */
+    static #describe(types, field) {
+        const seen = new Set();
+        const queue = [...types];
 
-/**
- * What a field is, from the schema's comments: looked up in these types, and the types they take fields from.
- *
- * @param {readonly string[]} types
- * @param {string} field
- * @returns {string | undefined}
- */
-function describe(types, field) {
-    const seen = new Set();
-    const queue = [...types];
+        for (let name = queue.shift(); name !== undefined; name = queue.shift()) {
+            if (seen.has(name)) continue;
+            seen.add(name);
 
-    for (let name = queue.shift(); name !== undefined; name = queue.shift()) {
-        if (seen.has(name)) continue;
-        seen.add(name);
+            const type = Tables.#data.docs[name];
+            if (!type) continue;
 
-        const type = data.docs[name];
-        if (!type) continue;
+            const found = type.fields[field] ?? Object.entries(type.fields).find(([path]) => path.endsWith(`.${field}`))?.[1];
+            if (found?.description) return found.description;
 
-        const found = type.fields[field] ?? Object.entries(type.fields).find(([path]) => path.endsWith(`.${field}`))?.[1];
-        if (found?.description) return found.description;
+            queue.push(...type.includes);
+        }
 
-        queue.push(...type.includes);
+        return undefined;
     }
 
-    return undefined;
-}
+    /**
+     * A value in one line of text.
+     *
+     * @param {unknown} value
+     * @returns {string}
+     */
+    static #compact(value) {
+        if (value === undefined || value === null) return "";
+        if (Tables.#isSecret(value)) return Tables.#secretText(/** @type {Record<string, unknown>} */ (value));
+        if (Array.isArray(value)) return value.map(Tables.#compact).join(value.every((item) => !Tables.#isObject(item)) ? ", " : " / ");
+
+        // A field written as `{}`, such as `ssh: {}`, is on with its defaults.
+        if (Tables.#isObject(value) && !Object.keys(value).length) return "on";
+        if (Tables.#isObject(value)) {
+            return Object.entries(value)
+                .map(([key, inner]) => (inner === true ? key : `${key} ${Tables.#compact(inner)}`))
+                .join(", ");
+        }
 
-/**
- * A value in one line of text.
- *
- * @param {unknown} value
- * @returns {string}
- */
-function compact(value) {
-    if (value === undefined || value === null) return "";
-    if (isSecret(value)) return secretText(/** @type {Record<string, unknown>} */ (value));
-    if (Array.isArray(value)) return value.map(compact).join(value.every((item) => !isObject(item)) ? ", " : " / ");
-
-    // A field written as `{}`, such as `ssh: {}`, is on with its defaults.
-    if (isObject(value) && !Object.keys(value).length) return "on";
-    if (isObject(value)) {
-        return Object.entries(value)
-            .map(([key, inner]) => (inner === true ? key : `${key} ${compact(inner)}`))
-            .join(", ");
+        return String(value);
     }
 
-    return String(value);
-}
-
-/**
- * @param {Table} table
- * @returns {Node}
- */
-export function table({ head, rows, csv }) {
-    /** @param {Table["rows"][number]} row */
-    const attributesOf = (row) => ({ ...(row.muted ? { class: "muted" } : {}), ...(row.id ? { id: row.id } : {}) });
-
-    const element = h(
-        "table",
-        { class: "data" },
-        h(
-            "thead",
-            {},
-            h(
-                "tr",
+    /**
+     * @param {Table} table
+     * @returns {Node}
+     */
+    static of({ head, rows, csv }) {
+        /** @param {Table["rows"][number]} row */
+        const attributesOf = (row) => ({ ...(row.muted ? { class: "muted" } : {}), ...(row.id ? { id: row.id } : {}) });
+
+        const element = Dom.h(
+            "table",
+            { class: "data" },
+            Dom.h(
+                "thead",
                 {},
-                ...head.map((column) =>
-                    h("th", column.title ? { title: column.title } : {}, column.field ? h("code", {}, column.label) : column.label)
+                Dom.h(
+                    "tr",
+                    {},
+                    ...head.map((column) =>
+                        Dom.h(
+                            "th",
+                            column.title ? { title: column.title } : {},
+                            column.field ? Dom.h("code", {}, column.label) : column.label
+                        )
+                    )
                 )
-            )
-        ),
-        h("tbody", {}, ...rows.map((row) => h("tr", attributesOf(row), ...row.cells.map((cell) => h("td", {}, cell)))))
-    );
+            ),
+            Dom.h("tbody", {}, ...rows.map((row) => Dom.h("tr", attributesOf(row), ...row.cells.map((cell) => Dom.h("td", {}, cell)))))
+        );
 
-    if (!csv) return element;
+        if (!csv) return element;
 
-    const download = link("Save as CSV", () => save(`${csv}.csv`, new Blob([csvOf(element)], { type: "text/csv" })));
-    return h("div", { class: "table-block" }, h("p", { class: "table-actions" }, download), element);
-}
+        const download = Dom.link("Save as CSV", () => Export.save(`${csv}.csv`, new Blob([Export.csv(element)], { type: "text/csv" })));
+        return Dom.h("div", { class: "table-block" }, Dom.h("p", { class: "table-actions" }, download), element);
+    }
 
-/**
- * The fields any of the items hold, in the order first seen, with a chosen few first.
- *
- * @param {Record<string, unknown>[]} items
- * @param {readonly string[]} [first]
- */
-function columnsOf(items, first = []) {
-    const seen = new Set(first.filter((key) => items.some((item) => key in item)));
-    for (const item of items) for (const key of Object.keys(item)) seen.add(key);
-    return [...seen];
-}
+    /**
+     * The fields any of the items hold, in the order first seen, with a chosen few first.
+     *
+     * @param {Record<string, unknown>[]} items
+     * @param {readonly string[]} [first]
+     */
+    static #columnsOf(items, first = []) {
+        const seen = new Set(first.filter((key) => items.some((item) => key in item)));
+        for (const item of items) for (const key of Object.keys(item)) seen.add(key);
+        return [...seen];
+    }
 
-/**
- * Named items, such as ports or neighbors, as a table: a row per name, a column per field.
- *
- * @param {object} record
- * @param {readonly string[]} types
- * @param {string} [nameLabel]
- * @param {readonly string[]} [first]
- * @returns {Node}
- */
-function recordTable(record, types, nameLabel = "Name", first = []) {
-    const entries = Object.entries(record).filter(([, value]) => value !== undefined);
-    if (!entries.length) return empty("None.");
-
-    /** @type {Record<string, unknown>[]} */
-    const items = entries.map(([, value]) => (isObject(value) && !isSecret(value) ? value : { value }));
-    const columns = columnsOf(items, first);
-
-    return table({
-        head: [{ label: nameLabel }, ...columns.map((column) => ({ label: column, title: describe(types, column), field: true }))],
-        rows: entries.map(([name], index) => ({
-            cells: [h("strong", {}, name), ...columns.map((column) => compact(items[index]?.[column]))],
-        })),
-    });
-}
+    /**
+     * Named items, such as ports or neighbors, as a table: a row per name, a column per field.
+     *
+     * @param {object} record
+     * @param {readonly string[]} types
+     * @param {string} [nameLabel]
+     * @param {readonly string[]} [first]
+     * @returns {Node}
+     */
+    static #recordTable(record, types, nameLabel = "Name", first = []) {
+        const entries = Object.entries(record).filter(([, value]) => value !== undefined);
+        if (!entries.length) return Tables.empty("None.");
+
+        /** @type {Record<string, unknown>[]} */
+        const items = entries.map(([, value]) => (Tables.#isObject(value) && !Tables.#isSecret(value) ? value : { value }));
+        const columns = Tables.#columnsOf(items, first);
+
+        return Tables.of({
+            head: [
+                { label: nameLabel },
+                ...columns.map((column) => ({ label: column, title: Tables.#describe(types, column), field: true })),
+            ],
+            rows: entries.map(([name], index) => ({
+                cells: [Dom.h("strong", {}, name), ...columns.map((column) => Tables.#compact(items[index]?.[column]))],
+            })),
+        });
+    }
 
-/**
- * A list of items, such as rules or routes, as a table, in order.
- *
- * @param {readonly unknown[]} list
- * @param {readonly string[]} types
- * @param {readonly string[]} [first]
- * @returns {Node}
- */
-function listTable(list, types, first = []) {
-    if (!list.length) return empty("None.");
-
-    const items = list.map((value) => (isObject(value) ? value : { value }));
-    const columns = columnsOf(items, first);
-
-    return table({
-        head: [{ label: "#" }, ...columns.map((column) => ({ label: column, title: describe(types, column), field: true }))],
-        rows: items.map((item, index) => ({ cells: [String(index + 1), ...columns.map((column) => compact(item[column]))] })),
-    });
-}
+    /**
+     * A list of items, such as rules or routes, as a table, in order.
+     *
+     * @param {readonly unknown[]} list
+     * @param {readonly string[]} types
+     * @param {readonly string[]} [first]
+     * @returns {Node}
+     */
+    static #listTable(list, types, first = []) {
+        if (!list.length) return Tables.empty("None.");
 
-/**
- * Settings as a table of field and value. A value that holds more is shown inside, the same way.
- *
- * @param {object} object
- * @param {readonly string[]} types
- * @returns {Node}
- */
-function settings(object, types) {
-    const entries = Object.entries(object).filter(([, value]) => value !== undefined);
-    if (!entries.length) return empty("None.");
+        const items = list.map((value) => (Tables.#isObject(value) ? value : { value }));
+        const columns = Tables.#columnsOf(items, first);
+
+        return Tables.of({
+            head: [{ label: "#" }, ...columns.map((column) => ({ label: column, title: Tables.#describe(types, column), field: true }))],
+            rows: items.map((item, index) => ({ cells: [String(index + 1), ...columns.map((column) => Tables.#compact(item[column]))] })),
+        });
+    }
 
     /**
-     * @param {unknown} value
-     * @returns {Child}
+     * Settings as a table of field and value. A value that holds more is shown inside, the same way.
+     *
+     * @param {object} object
+     * @param {readonly string[]} types
+     * @returns {Node}
      */
-    const valueOf = (value) => {
-        if (isObject(value) && !Object.keys(value).length) return compact(value);
-        if (isObject(value) && !isSecret(value)) {
-            const allObjects = Object.values(value).every((inner) => isObject(inner) && !isSecret(inner));
-            return allObjects ? recordTable(value, types) : settings(value, types);
-        }
+    static #settings(object, types) {
+        const entries = Object.entries(object).filter(([, value]) => value !== undefined);
+        if (!entries.length) return Tables.empty("None.");
+
+        /**
+         * @param {unknown} value
+         * @returns {Child}
+         */
+        const valueOf = (value) => {
+            if (Tables.#isObject(value) && !Object.keys(value).length) return Tables.#compact(value);
+            if (Tables.#isObject(value) && !Tables.#isSecret(value)) {
+                const allObjects = Object.values(value).every((inner) => Tables.#isObject(inner) && !Tables.#isSecret(inner));
+                return allObjects ? Tables.#recordTable(value, types) : Tables.#settings(value, types);
+            }
 
-        if (Array.isArray(value) && value.some(isObject)) return listTable(value, types);
-        return compact(value);
-    };
+            if (Array.isArray(value) && value.some(Tables.#isObject)) return Tables.#listTable(value, types);
+            return Tables.#compact(value);
+        };
 
-    return h(
-        "table",
-        { class: "data settings" },
-        h(
-            "tbody",
-            {},
-            ...entries.map(([key, value]) => {
-                const title = describe(types, key);
-                return h("tr", {}, h("th", title ? { title } : {}, h("code", {}, key)), h("td", {}, valueOf(value)));
-            })
-        )
-    );
-}
+        return Dom.h(
+            "table",
+            { class: "data settings" },
+            Dom.h(
+                "tbody",
+                {},
+                ...entries.map(([key, value]) => {
+                    const title = Tables.#describe(types, key);
+                    return Dom.h("tr", {}, Dom.h("th", title ? { title } : {}, Dom.h("code", {}, key)), Dom.h("td", {}, valueOf(value)));
+                })
+            )
+        );
+    }
 
-/**
- * @param {string} text
- * @param {"h2" | "h3" | "h4"} [level]
- */
-export const heading = (text, level = "h3") => h(level, {}, text);
-
-/** @param {string} text */
-export const empty = (text) => h("p", { class: "muted" }, text);
-
-/**
- * A muted paragraph of several parts, such as text with a command in it.
- *
- * @param {...import("./dom.js").Child} parts
- */
-export const prose = (...parts) => h("p", { class: "muted" }, ...parts);
-
-/** @param {string} name */
-export const deviceLink = (name) => link(name, () => go(`devices/${encodeURIComponent(name)}`));
-
-/** @param {string} name */
-const deviceRoute = (name) => `devices/${encodeURIComponent(name)}`;
-
-/**
- * @param {string} device
- * @returns {Child[]}
- */
-function findingBadges(device) {
-    const findings = data.graph.findings.filter((finding) => finding.device === device);
-    const errors = findings.filter((finding) => finding.level === "error").length;
-    const warnings = findings.length - errors;
-
-    return [
-        errors ? h("span", { class: "badge error" }, `${errors} ${errors === 1 ? "error" : "errors"}`) : undefined,
-        warnings ? h("span", { class: "badge warning" }, `${warnings} ${warnings === 1 ? "warning" : "warnings"}`) : undefined,
-    ];
-}
+    /**
+     * @param {string} text
+     * @param {"h2" | "h3" | "h4"} [level]
+     */
+    static heading(text, level = "h3") {
+        return Dom.h(level, {}, text);
+    }
 
-/** @type {Record<string, string>} */
-const SNAPSHOT_TEXT = {
-    matches: "matches its snapshot",
-    differs: "differs from its snapshot",
-    "no snapshot": "no snapshot yet",
-    "cannot plan": "cannot be planned",
-};
-
-/**
- * How a port is used, for its square on the faceplate.
- *
- * @param {Record<string, unknown> | undefined} port
- * @returns {"shut" | "lag" | "access" | "trunk" | "routed" | "plain"}
- */
-function portUse(port) {
-    if (!port) return "shut";
-    if (port.lag) return "lag";
-    if (port.access_vlan) return "access";
-    if (port.trunk_vlans) return "trunk";
-    if (port.addresses) return "routed";
-    return "plain";
-}
+    /** @param {string} text */
+    static empty(text) {
+        return Dom.h("p", { class: "muted" }, text);
+    }
 
-/** @type {Record<ReturnType<typeof portUse>, string>} */
-const PORT_USES = {
-    shut: "shut down",
-    lag: "in a LAG",
-    access: "access",
-    trunk: "trunk",
-    routed: "routed",
-    plain: "up, nothing on it",
-};
-
-/**
- * The device's ports as its front panel: one square per port, by speed, colored by how the port is used. A square points to its row.
- *
- * @param {Device} device
- * @param {string[]} ports
- * @param {Record<string, Record<string, unknown> | undefined>} declared
- */
-function faceplate(device, ports, declared) {
-    /** @type {Map<string, string[]>} */
-    const bySpeed = new Map();
-    for (const name of ports) {
-        const speed = name.split("-")[0] ?? name;
-        bySpeed.set(speed, [...(bySpeed.get(speed) ?? []), name]);
+    /**
+     * A muted paragraph of several parts, such as text with a command in it.
+     *
+     * @param {...import("./dom.js").Child} parts
+     */
+    static prose(...parts) {
+        return Dom.h("p", { class: "muted" }, ...parts);
     }
 
-    const panel = h("div", { class: "faceplate", role: "group", "aria-label": `${device.name}'s ports` });
+    /** @param {string} name */
+    static deviceLink(name) {
+        return Dom.link(name, () => Dom.go(`devices/${encodeURIComponent(name)}`));
+    }
 
-    for (const [speed, names] of bySpeed) {
-        const squares = h("div", { class: "ports" });
+    /** @param {string} name */
+    static #deviceRoute(name) {
+        return `devices/${encodeURIComponent(name)}`;
+    }
 
-        for (const name of names) {
-            const port = declared[name];
-            const use = portUse(port);
-            const far = /** @type {{ device: string, port: string } | undefined} */ (port?.link);
-            const label = [name, PORT_USES[use], compact(port?.description), far ? `to ${far.device} ${far.port}` : ""]
-                .filter(Boolean)
-                .join(", ");
+    /**
+     * @param {string} device
+     * @returns {Child[]}
+     */
+    static #findingBadges(device) {
+        const findings = Tables.#data.graph.findings.filter((finding) => finding.device === device);
+        const errors = findings.filter((finding) => finding.level === "error").length;
+        const warnings = findings.length - errors;
+
+        return [
+            errors ? Dom.h("span", { class: "badge error" }, `${errors} ${errors === 1 ? "error" : "errors"}`) : undefined,
+            warnings ? Dom.h("span", { class: "badge warning" }, `${warnings} ${warnings === 1 ? "warning" : "warnings"}`) : undefined,
+        ];
+    }
 
-            const square = h(
-                "button",
-                { class: `port ${use}${far ? " linked" : ""}`, title: label, "aria-label": label },
-                name.split("-")[1] ?? name
-            );
-            square.addEventListener("click", () => {
-                const row = document.getElementById(`port-${name}`);
-                row?.scrollIntoView({ block: "center", behavior: "smooth" });
-                row?.classList.add("flash");
-                setTimeout(() => row?.classList.remove("flash"), 1600);
-            });
-            squares.append(square);
+    /** @type {Record<string, string>} */
+    static #SNAPSHOT_TEXT = {
+        matches: "matches its snapshot",
+        differs: "differs from its snapshot",
+        "no snapshot": "no snapshot yet",
+        "cannot plan": "cannot be planned",
+    };
+
+    /**
+     * How a port is used, for its square on the faceplate.
+     *
+     * @param {Record<string, unknown> | undefined} port
+     * @returns {PortUse}
+     */
+    static #portUse(port) {
+        if (!port) return "shut";
+        if (port.lag) return "lag";
+        if (port.access_vlan) return "access";
+        if (port.trunk_vlans) return "trunk";
+        if (port.addresses) return "routed";
+        return "plain";
+    }
+
+    /** @type {Record<PortUse, string>} */
+    static #PORT_USES = {
+        shut: "shut down",
+        lag: "in a LAG",
+        access: "access",
+        trunk: "trunk",
+        routed: "routed",
+        plain: "up, nothing on it",
+    };
+
+    /**
+     * The device's ports as its front panel: one square per port, by speed, colored by how the port is used. A square points to its row.
+     *
+     * @param {Device} device
+     * @param {string[]} ports
+     * @param {Record<string, Record<string, unknown> | undefined>} declared
+     */
+    static #faceplate(device, ports, declared) {
+        /** @type {Map<string, string[]>} */
+        const bySpeed = new Map();
+        for (const name of ports) {
+            const speed = name.split("-")[0] ?? name;
+            bySpeed.set(speed, [...(bySpeed.get(speed) ?? []), name]);
+        }
+
+        const panel = Dom.h("div", { class: "faceplate", role: "group", "aria-label": `${device.name}'s ports` });
+
+        for (const [speed, names] of bySpeed) {
+            const squares = Dom.h("div", { class: "ports" });
+
+            for (const name of names) {
+                const port = declared[name];
+                const use = Tables.#portUse(port);
+                const far = /** @type {{ device: string, port: string } | undefined} */ (port?.link);
+                const label = [name, Tables.#PORT_USES[use], Tables.#compact(port?.description), far ? `to ${far.device} ${far.port}` : ""]
+                    .filter(Boolean)
+                    .join(", ");
+
+                const square = Dom.h(
+                    "button",
+                    { class: `port ${use}${far ? " linked" : ""}`, title: label, "aria-label": label },
+                    name.split("-")[1] ?? name
+                );
+                square.addEventListener("click", () => {
+                    const row = document.getElementById(`port-${name}`);
+                    row?.scrollIntoView({ block: "center", behavior: "smooth" });
+                    row?.classList.add("flash");
+                    setTimeout(() => row?.classList.remove("flash"), 1600);
+                });
+                squares.append(square);
+            }
+
+            panel.append(Dom.h("div", { class: "speed" }, Dom.h("span", { class: "speed-name" }, speed), squares));
         }
 
-        panel.append(h("div", { class: "speed" }, h("span", { class: "speed-name" }, speed), squares));
+        const legend = Dom.h(
+            "ul",
+            { class: "faceplate-legend" },
+            ...Object.entries(Tables.#PORT_USES).map(([use, text]) => Dom.h("li", {}, Dom.h("span", { class: `port ${use}` }), text)),
+            Dom.h("li", {}, Dom.h("span", { class: "port plain linked" }), "linked to another device")
+        );
+
+        return Dom.h("div", {}, panel, legend);
     }
 
-    const legend = h(
-        "ul",
-        { class: "faceplate-legend" },
-        ...Object.entries(PORT_USES).map(([use, text]) => h("li", {}, h("span", { class: `port ${use}` }), text)),
-        h("li", {}, h("span", { class: "port plain linked" }), "linked to another device")
-    );
+    /**
+     * Two texts compared line by line: what is the same is folded away, except a few lines around each change.
+     *
+     * @param {string} before
+     * @param {string} after
+     * @returns {Child}
+     */
+    static lineDiff(before, after) {
+        const lines = Diff.lines(before.trimEnd().split("\n"), after.trimEnd().split("\n"));
+        if (!lines) return Tables.empty("They differ in too many lines to compare one by one. The plan shows what would be sent.");
 
-    return h("div", {}, panel, legend);
-}
+        const changed = lines.filter((line) => line.kind !== "same").length;
+        if (!changed) return Tables.empty("They are the same, line for line.");
 
-/**
- * Two texts compared line by line: what is the same is folded away, except a few lines around each change.
- *
- * @param {string} before
- * @param {string} after
- * @returns {Child}
- */
-export function lineDiff(before, after) {
-    const lines = diffLines(before.trimEnd().split("\n"), after.trimEnd().split("\n"));
-    if (!lines) return empty("They differ in too many lines to compare one by one. The plan shows what would be sent.");
-
-    const changed = lines.filter((line) => line.kind !== "same").length;
-    if (!changed) return empty("They are the same, line for line.");
-
-    const context = 3;
-    const near = lines.map((_, index) =>
-        lines.slice(Math.max(0, index - context), index + context + 1).some((line) => line.kind !== "same")
-    );
-
-    const code = h("pre", { class: "code diff" });
-    let folded = 0;
-
-    const fold = () => {
-        if (folded) code.append(h("span", { class: "fold" }, `${folded} ${folded === 1 ? "line" : "lines"} the same\n`));
-        folded = 0;
-    };
+        const context = 3;
+        const near = lines.map((_, index) =>
+            lines.slice(Math.max(0, index - context), index + context + 1).some((line) => line.kind !== "same")
+        );
 
-    for (const [index, line] of lines.entries()) {
-        if (!near[index]) {
-            folded++;
-            continue;
+        const code = Dom.h("pre", { class: "code diff" });
+        let folded = 0;
+
+        const fold = () => {
+            if (folded) code.append(Dom.h("span", { class: "fold" }, `${folded} ${folded === 1 ? "line" : "lines"} the same\n`));
+            folded = 0;
+        };
+
+        for (const [index, line] of lines.entries()) {
+            if (!near[index]) {
+                folded++;
+                continue;
+            }
+
+            fold();
+            const mark = line.kind === "added" ? "+ " : line.kind === "removed" ? "- " : "  ";
+            code.append(Dom.h("span", { class: line.kind }, `${mark}${line.text}\n`));
         }
 
         fold();
-        const mark = line.kind === "added" ? "+ " : line.kind === "removed" ? "- " : "  ";
-        code.append(h("span", { class: line.kind }, `${mark}${line.text}\n`));
+        return Dom.h("div", {}, Tables.empty(`${changed} ${changed === 1 ? "line differs" : "lines differ"}.`), code);
     }
 
-    fold();
-    return h("div", {}, empty(`${changed} ${changed === 1 ? "line differs" : "lines differ"}.`), code);
-}
+    /** The fields the Ports table has columns of its own for. */
+    static #PORT_FIELDS = ["description", "access_vlan", "trunk_vlans", "native_vlan", "addresses", "lag", "link"];
 
-/** The fields the Ports table has columns of its own for. */
-const PORT_FIELDS = ["description", "access_vlan", "trunk_vlans", "native_vlan", "addresses", "lag", "link"];
-
-/**
- * How a port is switched. A LAG member carries what its LAG carries.
- *
- * @param {Device} device
- * @param {Record<string, unknown>} port
- * @returns {string}
- */
-function switching(device, port) {
-    const lag = typeof port.lag === "string" ? device.interfaces?.[port.lag] : undefined;
-    if (lag) {
-        const carried = switching(device, { ...lag, lag: undefined });
-        return carried ? `${carried}, on LAG ${port.lag}` : "";
-    }
+    /**
+     * How a port is switched. A LAG member carries what its LAG carries.
+     *
+     * @param {Device} device
+     * @param {Record<string, unknown>} port
+     * @returns {string}
+     */
+    static #switching(device, port) {
+        const lag = typeof port.lag === "string" ? device.interfaces?.[port.lag] : undefined;
+        if (lag) {
+            const carried = Tables.#switching(device, { ...lag, lag: undefined });
+            return carried ? `${carried}, on LAG ${port.lag}` : "";
+        }
 
-    if (port.access_vlan) return `access ${port.access_vlan}`;
-    if (Array.isArray(port.trunk_vlans))
-        return `trunk ${port.trunk_vlans.join(", ")}${port.native_vlan ? `, native ${port.native_vlan}` : ""}`;
-    return "";
-}
+        if (port.access_vlan) return `access ${port.access_vlan}`;
+        if (Array.isArray(port.trunk_vlans))
+            return `trunk ${port.trunk_vlans.join(", ")}${port.native_vlan ? `, native ${port.native_vlan}` : ""}`;
+        return "";
+    }
 
-// A device's sections. Each lists the schema types its fields come from, for their descriptions.
-/** @type {Section[]} */
-const SECTIONS = [
-    {
-        id: "overview",
-        title: "Overview",
-        has: () => true,
-        render(device) {
-            const findings = data.graph.findings.filter((finding) => finding.device === device.name);
-            const drift = data.graph.drift[device.name];
-
-            const { platform, model, connection, system, hardware_offload, lldp, stp, vrfs } = device;
-            const shown = { platform, model, connection, hardware_offload, lldp, stp, vrfs, system };
-            const differs = drift?.status === "differs";
-
-            return [
-                findings.length ? h("h3", {}, "Found by ", h("code", {}, "circuit validate")) : undefined,
-                findings.length
-                    ? h(
-                          "ul",
-                          { class: "findings" },
-                          ...findings.map((finding) =>
-                              h("li", {}, h("span", { class: `badge ${finding.level}` }, finding.level), finding.message)
+    // A device's sections. Each lists the schema types its fields come from, for their descriptions.
+    /** @type {Section[]} */
+    static #SECTIONS = [
+        {
+            id: "overview",
+            title: "Overview",
+            has: () => true,
+            render(device) {
+                const findings = Tables.#data.graph.findings.filter((finding) => finding.device === device.name);
+                const drift = Tables.#data.graph.drift[device.name];
+
+                const { platform, model, connection, system, hardware_offload, lldp, stp, vrfs } = device;
+                const shown = { platform, model, connection, hardware_offload, lldp, stp, vrfs, system };
+                const differs = drift?.status === "differs";
+
+                return [
+                    findings.length ? Dom.h("h3", {}, "Found by ", Dom.h("code", {}, "circuit validate")) : undefined,
+                    findings.length
+                        ? Dom.h(
+                              "ul",
+                              { class: "findings" },
+                              ...findings.map((finding) =>
+                                  Dom.h("li", {}, Dom.h("span", { class: `badge ${finding.level}` }, finding.level), finding.message)
+                              )
                           )
-                      )
-                    : undefined,
-                heading("Against its snapshot"),
-                h(
-                    "p",
-                    {},
-                    drift ? (SNAPSHOT_TEXT[drift.status] ?? "") : "not compared",
-                    differs ? " · " : "",
-                    differs ? link("see the plan", () => go(`${deviceRoute(device.name)}/plan`)) : undefined
+                        : undefined,
+                    Tables.heading("Against its snapshot"),
+                    Dom.h(
+                        "p",
+                        {},
+                        drift ? (Tables.#SNAPSHOT_TEXT[drift.status] ?? "") : "not compared",
+                        differs ? " · " : "",
+                        differs ? Dom.link("see the plan", () => Dom.go(`${Tables.#deviceRoute(device.name)}/plan`)) : undefined
+                    ),
+                    Tables.heading("Device"),
+                    Tables.#settings(shown, ["Device", "Connection", "System", "Vrf"]),
+                ];
+            },
+        },
+        {
+            id: "ports",
+            title: "Ports",
+            has: () => true,
+            render(device) {
+                const declared = /** @type {Record<string, Record<string, unknown> | undefined>} */ (device.ports ?? {});
+                const all = [...new Set([...(Tables.#data.ports[device.name] ?? []), ...Object.keys(declared)])];
+                const types = ["Port", "Routed", "Switched", "Link", "PortStp", "Vrrp", "Exchange"];
+
+                const rows = all.map((name) => {
+                    const port = declared[name];
+                    const id = `port-${name}`;
+                    if (!port) return { id, cells: [name, "not declared, so shut down", "", "", "", "", ""], muted: true };
+
+                    const far = /** @type {{ device: string, port: string } | undefined} */ (port.link);
+                    const other = Object.fromEntries(Object.entries(port).filter(([key]) => !Tables.#PORT_FIELDS.includes(key)));
+
+                    return {
+                        id,
+                        cells: [
+                            Dom.h("strong", {}, name),
+                            Tables.#compact(port.description),
+                            Tables.#switching(device, port),
+                            Tables.#compact(port.addresses),
+                            Tables.#compact(port.lag),
+                            far ? Dom.h("span", {}, Tables.deviceLink(far.device), ` ${far.port}`) : "",
+                            Object.keys(other).length ? Tables.#compact(other) : "",
+                        ],
+                    };
+                });
+
+                /**
+                 * @param {string} label
+                 * @param {string} [field]
+                 */
+                const column = (label, field) => ({ label, title: field ? Tables.#describe(types, field) : undefined });
+                const used = Object.keys(declared).length;
+
+                return [
+                    Dom.h(
+                        "p",
+                        { class: "muted" },
+                        `${used} of ${all.length} ports declared. A port the config does not declare is shut down.`
+                    ),
+                    Tables.#faceplate(device, all, declared),
+                    Tables.of({
+                        csv: `${device.name}-ports`,
+                        head: [
+                            column("Port"),
+                            column("Description", "description"),
+                            column("VLANs", "trunk_vlans"),
+                            column("Addresses", "addresses"),
+                            column("LAG", "lag"),
+                            column("Link", "link"),
+                            column("Other"),
+                        ],
+                        rows,
+                    }),
+                ];
+            },
+        },
+        {
+            id: "interfaces",
+            title: "Interfaces",
+            has: (device) => Object.keys(device.interfaces ?? {}).length > 0,
+            render: (device) => [
+                Tables.#recordTable(
+                    device.interfaces ?? {},
+                    [
+                        "VlanInterface",
+                        "Loopback",
+                        "Lag",
+                        "Gre",
+                        "Vxlan",
+                        "WireGuard",
+                        "Base",
+                        "Routed",
+                        "Switched",
+                        "Vrrp",
+                        "WireGuardPeer",
+                        "Exchange",
+                    ],
+                    "Interface",
+                    ["type", "description", "vlan", "addresses"]
                 ),
-                heading("Device"),
-                settings(shown, ["Device", "Connection", "System", "Vrf"]),
-            ];
+            ],
         },
-    },
-    {
-        id: "ports",
-        title: "Ports",
-        has: () => true,
-        render(device) {
-            const declared = /** @type {Record<string, Record<string, unknown> | undefined>} */ (device.ports ?? {});
-            const all = [...new Set([...(data.ports[device.name] ?? []), ...Object.keys(declared)])];
-            const types = ["Port", "Routed", "Switched", "Link", "PortStp", "Vrrp", "Exchange"];
-
-            const rows = all.map((name) => {
-                const port = declared[name];
-                const id = `port-${name}`;
-                if (!port) return { id, cells: [name, "not declared, so shut down", "", "", "", "", ""], muted: true };
+        {
+            id: "vlans",
+            title: "VLANs",
+            has: (device) => Object.keys(device.vlans ?? {}).length > 0,
+            render: (device) => [Tables.#recordTable(device.vlans ?? {}, ["Vlan"], "VLAN", ["id", "description"])],
+        },
+        {
+            id: "routing",
+            title: "Routing",
+            has: (device) => device.routing !== undefined,
+            render(device) {
+                const routing = device.routing ?? {};
+                const types = ["Routing", "StaticRoute", "Bgp", "Neighbor", "NeighborSettings", "Ospf", "OspfInterface", "RpkiServer"];
+                /** @type {Child[]} */
+                const parts = [];
+
+                if (routing.router_id) parts.push(Tables.#settings({ router_id: routing.router_id }, types));
+                if (routing.static?.length)
+                    parts.push(Tables.heading("Static routes"), Tables.#listTable(routing.static, types, ["prefix", "via", "interface"]));
+
+                if (routing.bgp) {
+                    const { asn, networks, groups, neighbors } = routing.bgp;
+                    parts.push(Tables.heading("BGP"), Tables.#settings({ asn, networks }, types));
+                    if (groups) parts.push(Tables.heading("BGP groups"), Tables.#recordTable(groups, types, "Group"));
+                    if (neighbors)
+                        parts.push(
+                            Tables.heading("BGP neighbors"),
+                            Tables.#recordTable(neighbors, types, "Neighbor", ["address", "group", "remote_as", "role"])
+                        );
+                }
 
-                const far = /** @type {{ device: string, port: string } | undefined} */ (port.link);
-                const other = Object.fromEntries(Object.entries(port).filter(([key]) => !PORT_FIELDS.includes(key)));
+                if (routing.ospf) {
+                    const { families, redistribute } = routing.ospf;
+                    parts.push(Tables.heading("OSPF"));
+                    if (families || redistribute) parts.push(Tables.#settings({ families, redistribute }, types));
+                    for (const [area, { interfaces }] of Object.entries(routing.ospf.areas)) {
+                        parts.push(Tables.heading(`Area ${area}`, "h4"), Tables.#recordTable(interfaces, types, "Interface"));
+                    }
+                }
 
-                return {
-                    id,
-                    cells: [
-                        h("strong", {}, name),
-                        compact(port.description),
-                        switching(device, port),
-                        compact(port.addresses),
-                        compact(port.lag),
-                        far ? h("span", {}, deviceLink(far.device), ` ${far.port}`) : "",
-                        Object.keys(other).length ? compact(other) : "",
-                    ],
-                };
-            });
-
-            /**
-             * @param {string} label
-             * @param {string} [field]
-             */
-            const column = (label, field) => ({ label, title: field ? describe(types, field) : undefined });
-            const used = Object.keys(declared).length;
-
-            return [
-                h("p", { class: "muted" }, `${used} of ${all.length} ports declared. A port the config does not declare is shut down.`),
-                faceplate(device, all, declared),
-                table({
-                    csv: `${device.name}-ports`,
-                    head: [
-                        column("Port"),
-                        column("Description", "description"),
-                        column("VLANs", "trunk_vlans"),
-                        column("Addresses", "addresses"),
-                        column("LAG", "lag"),
-                        column("Link", "link"),
-                        column("Other"),
-                    ],
-                    rows,
-                }),
-            ];
+                if (routing.rpki?.length) parts.push(Tables.heading("RPKI"), Tables.#listTable(routing.rpki, types));
+                return parts;
+            },
         },
-    },
-    {
-        id: "interfaces",
-        title: "Interfaces",
-        has: (device) => Object.keys(device.interfaces ?? {}).length > 0,
-        render: (device) => [
-            recordTable(
-                device.interfaces ?? {},
-                [
-                    "VlanInterface",
-                    "Loopback",
-                    "Lag",
-                    "Gre",
-                    "Vxlan",
-                    "WireGuard",
-                    "Base",
-                    "Routed",
-                    "Switched",
-                    "Vrrp",
-                    "WireGuardPeer",
-                    "Exchange",
-                ],
-                "Interface",
-                ["type", "description", "vlan", "addresses"]
-            ),
-        ],
-    },
-    {
-        id: "vlans",
-        title: "VLANs",
-        has: (device) => Object.keys(device.vlans ?? {}).length > 0,
-        render: (device) => [recordTable(device.vlans ?? {}, ["Vlan"], "VLAN", ["id", "description"])],
-    },
-    {
-        id: "routing",
-        title: "Routing",
-        has: (device) => device.routing !== undefined,
-        render(device) {
-            const routing = device.routing ?? {};
-            const types = ["Routing", "StaticRoute", "Bgp", "Neighbor", "NeighborSettings", "Ospf", "OspfInterface", "RpkiServer"];
-            /** @type {Child[]} */
-            const parts = [];
-
-            if (routing.router_id) parts.push(settings({ router_id: routing.router_id }, types));
-            if (routing.static?.length)
-                parts.push(heading("Static routes"), listTable(routing.static, types, ["prefix", "via", "interface"]));
-
-            if (routing.bgp) {
-                const { asn, networks, groups, neighbors } = routing.bgp;
-                parts.push(heading("BGP"), settings({ asn, networks }, types));
-                if (groups) parts.push(heading("BGP groups"), recordTable(groups, types, "Group"));
-                if (neighbors)
+        {
+            id: "policies",
+            title: "Policies",
+            has: (device) => Object.keys({ ...device.policies, ...device.prefix_sets }).length > 0,
+            render(device) {
+                const types = ["PolicyRule", "Match", "Sets", "PrefixSet"];
+                /** @type {Child[]} */
+                const parts = [];
+
+                for (const [name, rules] of Object.entries(device.policies ?? {})) {
                     parts.push(
-                        heading("BGP neighbors"),
-                        recordTable(neighbors, types, "Neighbor", ["address", "group", "remote_as", "role"])
+                        Tables.heading(`Policy ${name}`),
+                        Tables.#listTable(rules, types, ["description", "match", "set", "action"])
                     );
-            }
-
-            if (routing.ospf) {
-                const { families, redistribute } = routing.ospf;
-                parts.push(heading("OSPF"));
-                if (families || redistribute) parts.push(settings({ families, redistribute }, types));
-                for (const [area, { interfaces }] of Object.entries(routing.ospf.areas)) {
-                    parts.push(heading(`Area ${area}`, "h4"), recordTable(interfaces, types, "Interface"));
                 }
-            }
 
-            if (routing.rpki?.length) parts.push(heading("RPKI"), listTable(routing.rpki, types));
-            return parts;
+                if (device.prefix_sets)
+                    parts.push(Tables.heading("Prefix sets"), Tables.#recordTable(device.prefix_sets, types, "Prefix set"));
+                return parts;
+            },
         },
-    },
-    {
-        id: "policies",
-        title: "Policies",
-        has: (device) => Object.keys({ ...device.policies, ...device.prefix_sets }).length > 0,
-        render(device) {
-            const types = ["PolicyRule", "Match", "Sets", "PrefixSet"];
-            /** @type {Child[]} */
-            const parts = [];
-
-            for (const [name, rules] of Object.entries(device.policies ?? {})) {
-                parts.push(heading(`Policy ${name}`), listTable(rules, types, ["description", "match", "set", "action"]));
-            }
-
-            if (device.prefix_sets) parts.push(heading("Prefix sets"), recordTable(device.prefix_sets, types, "Prefix set"));
-            return parts;
-        },
-    },
-    {
-        id: "firewall",
-        title: "Firewall",
-        has: (device) => device.firewall !== undefined || Object.keys(device.acls ?? {}).length > 0,
-        render(device) {
-            const types = ["Firewall", "Chain", "FilterRule", "FilterMatch", "NatRule", "AclRule"];
-            const firewall = device.firewall;
-            /** @type {Child[]} */
-            const parts = [];
-
-            if (firewall?.address_sets) {
-                parts.push(
-                    heading("Address sets"),
-                    table({
-                        head: [{ label: "Set" }, { label: "Members" }],
-                        rows: Object.entries(firewall.address_sets).map(([name, members]) => ({
-                            cells: [h("strong", {}, name), compact(members)],
-                        })),
-                    })
-                );
-            }
+        {
+            id: "firewall",
+            title: "Firewall",
+            has: (device) => device.firewall !== undefined || Object.keys(device.acls ?? {}).length > 0,
+            render(device) {
+                const types = ["Firewall", "Chain", "FilterRule", "FilterMatch", "NatRule", "AclRule"];
+                const firewall = device.firewall;
+                /** @type {Child[]} */
+                const parts = [];
+
+                if (firewall?.address_sets) {
+                    parts.push(
+                        Tables.heading("Address sets"),
+                        Tables.of({
+                            head: [{ label: "Set" }, { label: "Members" }],
+                            rows: Object.entries(firewall.address_sets).map(([name, members]) => ({
+                                cells: [Dom.h("strong", {}, name), Tables.#compact(members)],
+                            })),
+                        })
+                    );
+                }
 
-            // A filter chain has a default and rules; a NAT chain is its rules.
-            for (const [chain, settingsOfChain] of Object.entries(firewall?.filter ?? {})) {
-                if (!settingsOfChain) continue;
-                const fallback = settingsOfChain.default ? `, default ${settingsOfChain.default}` : "";
-                parts.push(
-                    heading(`Filter ${chain}${fallback}`),
-                    listTable(settingsOfChain.rules ?? [], types, ["description", "match", "action"])
-                );
-            }
+                // A filter chain has a default and rules; a NAT chain is its rules.
+                for (const [chain, settingsOfChain] of Object.entries(firewall?.filter ?? {})) {
+                    if (!settingsOfChain) continue;
+                    const fallback = settingsOfChain.default ? `, default ${settingsOfChain.default}` : "";
+                    parts.push(
+                        Tables.heading(`Filter ${chain}${fallback}`),
+                        Tables.#listTable(settingsOfChain.rules ?? [], types, ["description", "match", "action"])
+                    );
+                }
 
-            for (const [chain, rules] of Object.entries(firewall?.nat ?? {})) {
-                if (rules) parts.push(heading(`NAT ${chain}`), listTable(rules, types, ["description", "match", "action"]));
-            }
+                for (const [chain, rules] of Object.entries(firewall?.nat ?? {})) {
+                    if (rules)
+                        parts.push(Tables.heading(`NAT ${chain}`), Tables.#listTable(rules, types, ["description", "match", "action"]));
+                }
 
-            const { helpers, untracked } = firewall ?? {};
-            if (helpers || untracked) parts.push(heading("Other"), settings({ helpers, untracked }, types));
+                const { helpers, untracked } = firewall ?? {};
+                if (helpers || untracked) parts.push(Tables.heading("Other"), Tables.#settings({ helpers, untracked }, types));
 
-            for (const [name, rules] of Object.entries(device.acls ?? {})) {
-                parts.push(heading(`ACL ${name}`), listTable(rules, types, ["description", "match", "action"]));
-            }
+                for (const [name, rules] of Object.entries(device.acls ?? {})) {
+                    parts.push(Tables.heading(`ACL ${name}`), Tables.#listTable(rules, types, ["description", "match", "action"]));
+                }
 
-            return parts;
+                return parts;
+            },
         },
-    },
-    {
-        id: "management",
-        title: "Management",
-        has: () => true,
-        render(device) {
-            const types = ["Management", "Service", "SnmpUser", "User", "Certificate"];
-
-            // A certificate is shown by its size; it is public, but a page of PEM helps no one here.
-            const certificates = Object.fromEntries(
-                Object.entries(device.certificates ?? {}).map(([name, certificate]) => [
-                    name,
-                    { ...certificate, certificate: `PEM, ${certificate.certificate.trim().split("\n").length} lines` },
-                ])
-            );
-            const hasCertificates = Object.keys(certificates).length > 0;
-
-            return [
-                heading("Users"),
-                recordTable(device.users ?? {}, types, "User", ["role", "description"]),
-                heading("Ways in"),
-                settings(device.management ?? {}, types),
-                hasCertificates ? heading("Certificates") : undefined,
-                hasCertificates ? recordTable(certificates, types, "Certificate") : undefined,
-            ];
+        {
+            id: "management",
+            title: "Management",
+            has: () => true,
+            render(device) {
+                const types = ["Management", "Service", "SnmpUser", "User", "Certificate"];
+
+                // A certificate is shown by its size; it is public, but a page of PEM helps no one here.
+                const certificates = Object.fromEntries(
+                    Object.entries(device.certificates ?? {}).map(([name, certificate]) => [
+                        name,
+                        { ...certificate, certificate: `PEM, ${certificate.certificate.trim().split("\n").length} lines` },
+                    ])
+                );
+                const hasCertificates = Object.keys(certificates).length > 0;
+
+                return [
+                    Tables.heading("Users"),
+                    Tables.#recordTable(device.users ?? {}, types, "User", ["role", "description"]),
+                    Tables.heading("Ways in"),
+                    Tables.#settings(device.management ?? {}, types),
+                    hasCertificates ? Tables.heading("Certificates") : undefined,
+                    hasCertificates ? Tables.#recordTable(certificates, types, "Certificate") : undefined,
+                ];
+            },
         },
-    },
-    {
-        id: "services",
-        title: "Services",
-        has: (device) => Boolean(device.dhcp || device.dhcp_relay || device.flow_export),
-        render(device) {
-            const types = ["DhcpServer", "DhcpRelay", "FlowExport"];
-
-            return [
-                device.dhcp ? heading("DHCP servers") : undefined,
-                device.dhcp ? recordTable(device.dhcp, types, "Server", ["interface", "network", "gateway", "pool"]) : undefined,
-                device.dhcp_relay ? heading("DHCP relays") : undefined,
-                device.dhcp_relay ? recordTable(device.dhcp_relay, types, "Relay") : undefined,
-                device.flow_export ? heading("Flow export") : undefined,
-                device.flow_export ? settings(device.flow_export, types) : undefined,
-            ];
+        {
+            id: "services",
+            title: "Services",
+            has: (device) => Boolean(device.dhcp || device.dhcp_relay || device.flow_export),
+            render(device) {
+                const types = ["DhcpServer", "DhcpRelay", "FlowExport"];
+
+                return [
+                    device.dhcp ? Tables.heading("DHCP servers") : undefined,
+                    device.dhcp
+                        ? Tables.#recordTable(device.dhcp, types, "Server", ["interface", "network", "gateway", "pool"])
+                        : undefined,
+                    device.dhcp_relay ? Tables.heading("DHCP relays") : undefined,
+                    device.dhcp_relay ? Tables.#recordTable(device.dhcp_relay, types, "Relay") : undefined,
+                    device.flow_export ? Tables.heading("Flow export") : undefined,
+                    device.flow_export ? Tables.#settings(device.flow_export, types) : undefined,
+                ];
+            },
         },
-    },
-    {
-        id: "config",
-        title: "Config",
-        has: () => true,
-        render: (device) => [
-            prose(
-                "What the device should run, in its vendor's commands, as ",
-                h("code", {}, "circuit build"),
-                " prints it. Secrets are markers, never values."
-            ),
-            h("pre", { class: "code" }, data.rendered[device.name] ?? ""),
-        ],
-    },
-    {
-        id: "running",
-        title: "Running",
-        has: () => true,
-        render(device) {
-            const snapshot = data.snapshots[device.name];
-            if (snapshot === undefined)
-                return [prose("No snapshot yet, so nothing to compare with: run ", h("code", {}, "circuit snapshot"), ".")];
-
-            return [
-                prose(
-                    "What the device ran when Circuit last read it, ",
-                    h("span", { class: "removed" }, "marked -"),
-                    ", beside what the config would have it run, ",
-                    h("span", { class: "added" }, "marked +"),
-                    ". Lines can differ only in order or form; the plan shows what would be sent."
+        {
+            id: "config",
+            title: "Config",
+            has: () => true,
+            render: (device) => [
+                Tables.prose(
+                    "What the device should run, in its vendor's commands, as ",
+                    Dom.h("code", {}, "circuit build"),
+                    " prints it. Secrets are markers, never values."
                 ),
-                lineDiff(snapshot, data.rendered[device.name] ?? ""),
-            ];
+                Dom.h("pre", { class: "code" }, Tables.#data.rendered[device.name] ?? ""),
+            ],
         },
-    },
-    {
-        id: "history",
-        title: "History",
-        has: () => true,
-        render(device) {
-            const area = h("div", {}, empty("Reading the history…"));
-            const files = data.files[device.name] ?? {};
-
-            void fetchJson(`history?device=${encodeURIComponent(device.name)}`).then((found) => {
-                area.replaceChildren();
-                if (!Array.isArray(found)) return area.append(empty(`No history: ${"error" in found ? found.error : "git has none"}.`));
-                if (!found.length) return area.append(empty("No commit has changed it yet."));
-
-                area.append(
-                    prose(
-                        "The commits that changed ",
-                        files.source ? h("code", {}, files.source) : "its file",
-                        files.snapshot ? h("span", {}, " or its snapshot, ", h("code", {}, files.snapshot)) : "",
-                        ", newest first."
+        {
+            id: "running",
+            title: "Running",
+            has: () => true,
+            render(device) {
+                const snapshot = Tables.#data.snapshots[device.name];
+                if (snapshot === undefined)
+                    return [Tables.prose("No snapshot yet, so nothing to compare with: run ", Dom.h("code", {}, "circuit snapshot"), ".")];
+
+                return [
+                    Tables.prose(
+                        "What the device ran when Circuit last read it, ",
+                        Dom.h("span", { class: "removed" }, "marked -"),
+                        ", beside what the config would have it run, ",
+                        Dom.h("span", { class: "added" }, "marked +"),
+                        ". Lines can differ only in order or form; the plan shows what would be sent."
                     ),
-                    table({
-                        csv: `${device.name}-history`,
-                        head: ["When", "Who", "What", "Commit", ""].map((label) => ({ label })),
-                        rows: /** @type {import("../git").Commit[]} */ (found).map((commit) => ({
-                            cells: [
-                                new Date(commit.date).toLocaleString(),
-                                commit.author,
-                                commit.subject,
-                                h("code", {}, commit.short),
-                                link("compare with now", () => go(`compare/${commit.commit}`)),
-                            ],
-                        })),
-                    })
-                );
-            });
+                    Tables.lineDiff(snapshot, Tables.#data.rendered[device.name] ?? ""),
+                ];
+            },
+        },
+        {
+            id: "history",
+            title: "History",
+            has: () => true,
+            render(device) {
+                const area = Dom.h("div", {}, Tables.empty("Reading the history…"));
+                const files = Tables.#data.files[device.name] ?? {};
+
+                void Compare.fetchJson(`history?device=${encodeURIComponent(device.name)}`).then((found) => {
+                    area.replaceChildren();
+                    if (!Array.isArray(found))
+                        return area.append(Tables.empty(`No history: ${"error" in found ? found.error : "git has none"}.`));
+                    if (!found.length) return area.append(Tables.empty("No commit has changed it yet."));
+
+                    area.append(
+                        Tables.prose(
+                            "The commits that changed ",
+                            files.source ? Dom.h("code", {}, files.source) : "its file",
+                            files.snapshot ? Dom.h("span", {}, " or its snapshot, ", Dom.h("code", {}, files.snapshot)) : "",
+                            ", newest first."
+                        ),
+                        Tables.of({
+                            csv: `${device.name}-history`,
+                            head: ["When", "Who", "What", "Commit", ""].map((label) => ({ label })),
+                            rows: /** @type {import("../git").Commit[]} */ (found).map((commit) => ({
+                                cells: [
+                                    new Date(commit.date).toLocaleString(),
+                                    commit.author,
+                                    commit.subject,
+                                    Dom.h("code", {}, commit.short),
+                                    Dom.link("compare with now", () => Dom.go(`compare/${commit.commit}`)),
+                                ],
+                            })),
+                        })
+                    );
+                });
 
-            return [area];
+                return [area];
+            },
         },
-    },
-    {
-        id: "plan",
-        title: "Plan",
-        has: () => true,
-        render(device) {
-            const drift = data.graph.drift[device.name];
-            if (!drift || drift.status === "no snapshot")
-                return [prose("No snapshot yet, so nothing to compare with: run ", h("code", {}, "circuit snapshot"), ".")];
-            if (drift.status === "matches")
-                return [prose("The device matches its last snapshot: ", h("code", {}, "circuit diff"), " would send nothing.")];
-
-            return [
-                drift.status === "differs"
-                    ? prose("What ", h("code", {}, "circuit diff"), " would send, against the last snapshot:")
-                    : empty("It could not be planned:"),
-                h("pre", { class: "code" }, drift.lines.join("\n")),
-            ];
+        {
+            id: "plan",
+            title: "Plan",
+            has: () => true,
+            render(device) {
+                const drift = Tables.#data.graph.drift[device.name];
+                if (!drift || drift.status === "no snapshot")
+                    return [Tables.prose("No snapshot yet, so nothing to compare with: run ", Dom.h("code", {}, "circuit snapshot"), ".")];
+                if (drift.status === "matches")
+                    return [
+                        Tables.prose("The device matches its last snapshot: ", Dom.h("code", {}, "circuit diff"), " would send nothing."),
+                    ];
+
+                return [
+                    drift.status === "differs"
+                        ? Tables.prose("What ", Dom.h("code", {}, "circuit diff"), " would send, against the last snapshot:")
+                        : Tables.empty("It could not be planned:"),
+                    Dom.h("pre", { class: "code" }, drift.lines.join("\n")),
+                ];
+            },
         },
-    },
-];
-
-/** @param {HTMLElement} container */
-function devicesView(container) {
-    container.append(
-        heading("Devices", "h2"),
-        table({
-            csv: "devices",
-            head: ["Name", "Platform", "Model", "Reached at", "Ports declared", "Snapshot", "Found"].map((label) => ({ label })),
-            rows: data.devices.map((device) => {
-                const badges = findingBadges(device.name);
-
-                return {
-                    cells: [
-                        h("strong", {}, deviceLink(device.name)),
-                        device.platform,
-                        device.model,
-                        device.connection.host,
-                        `${Object.keys(device.ports ?? {}).length} of ${data.ports[device.name]?.length ?? "?"}`,
-                        SNAPSHOT_TEXT[data.graph.drift[device.name]?.status ?? ""] ?? "",
-                        badges.some(Boolean) ? h("span", {}, ...badges) : h("span", { class: "muted" }, "nothing"),
-                    ],
-                };
-            }),
-        })
-    );
-}
+    ];
 
-/**
- * @param {string} name
- * @param {string | undefined} sectionId
- * @param {HTMLElement} container
- */
-function deviceView(name, sectionId, container) {
-    const device = data.devices.find((candidate) => candidate.name === name);
-    if (!device) {
+    /** @param {HTMLElement} container */
+    static #devicesView(container) {
         container.append(
-            heading("No such device", "h2"),
-            empty(`The config has no device ${name}.`),
-            link("All devices", () => go("devices"))
+            Tables.heading("Devices", "h2"),
+            Tables.of({
+                csv: "devices",
+                head: ["Name", "Platform", "Model", "Reached at", "Ports declared", "Snapshot", "Found"].map((label) => ({ label })),
+                rows: Tables.#data.devices.map((device) => {
+                    const badges = Tables.#findingBadges(device.name);
+
+                    return {
+                        cells: [
+                            Dom.h("strong", {}, Tables.deviceLink(device.name)),
+                            device.platform,
+                            device.model,
+                            device.connection.host,
+                            `${Object.keys(device.ports ?? {}).length} of ${Tables.#data.ports[device.name]?.length ?? "?"}`,
+                            Tables.#SNAPSHOT_TEXT[Tables.#data.graph.drift[device.name]?.status ?? ""] ?? "",
+                            badges.some(Boolean) ? Dom.h("span", {}, ...badges) : Dom.h("span", { class: "muted" }, "nothing"),
+                        ],
+                    };
+                }),
+            })
         );
-        return;
     }
 
-    const sections = SECTIONS.filter((section) => section.has(device));
-    const section = sections.find((candidate) => candidate.id === sectionId) ?? SECTIONS[0];
-    if (!section) return;
-
-    const tabs = h("nav", { class: "tabs", "aria-label": "Sections" });
-    for (const candidate of sections) {
-        const button = h("button", { "aria-pressed": String(candidate === section) }, candidate.title);
-        button.addEventListener("click", () => go(`${deviceRoute(device.name)}/${candidate.id}`));
-        tabs.append(button);
-    }
+    /**
+     * @param {string} name
+     * @param {string | undefined} sectionId
+     * @param {HTMLElement} container
+     */
+    static #deviceView(name, sectionId, container) {
+        const device = Tables.#data.devices.find((candidate) => candidate.name === name);
+        if (!device) {
+            container.append(
+                Tables.heading("No such device", "h2"),
+                Tables.empty(`The config has no device ${name}.`),
+                Dom.link("All devices", () => Dom.go("devices"))
+            );
+            return;
+        }
 
-    container.append(
-        h(
-            "p",
-            { class: "crumbs" },
-            link("Devices", () => go("devices")),
-            " / "
-        ),
-        h("h2", {}, device.name, " ", ...findingBadges(device.name)),
-        h(
-            "p",
-            { class: "muted" },
-            `${device.platform} ${device.model}, reached at ${device.connection.host} · `,
-            link("show in the graph", () => {
-                selectDevice(device.name);
-                go(`graph/${currentLayer()}`);
-            })
-        ),
-        tabs,
-        h("div", { class: "section" }, ...section.render(device))
-    );
-}
+        const sections = Tables.#SECTIONS.filter((section) => section.has(device));
+        const section = sections.find((candidate) => candidate.id === sectionId) ?? Tables.#SECTIONS[0];
+        if (!section) return;
 
-/** @param {HTMLElement} container */
-function vlansView(container) {
-    /** @type {Map<number, { names: Set<string>, declared: string[], gateways: string[], ports: string[] }>} */
-    const byId = new Map();
+        const tabs = Dom.h("nav", { class: "tabs", "aria-label": "Sections" });
+        for (const candidate of sections) {
+            const button = Dom.h("button", { "aria-pressed": String(candidate === section) }, candidate.title);
+            button.addEventListener("click", () => Dom.go(`${Tables.#deviceRoute(device.name)}/${candidate.id}`));
+            tabs.append(button);
+        }
 
-    for (const device of data.devices) {
-        for (const [name, vlan] of Object.entries(device.vlans ?? {})) {
-            const row = byId.get(vlan.id) ?? { names: new Set(), declared: [], gateways: [], ports: [] };
-            row.names.add(name);
-            row.declared.push(device.name);
+        container.append(
+            Dom.h(
+                "p",
+                { class: "crumbs" },
+                Dom.link("Devices", () => Dom.go("devices")),
+                " / "
+            ),
+            Dom.h("h2", {}, device.name, " ", ...Tables.#findingBadges(device.name)),
+            Dom.h(
+                "p",
+                { class: "muted" },
+                `${device.platform} ${device.model}, reached at ${device.connection.host} · `,
+                Dom.link("show in the graph", () => {
+                    Graph.selectDevice(device.name);
+                    Dom.go(`graph/${Graph.currentLayer()}`);
+                })
+            ),
+            tabs,
+            Dom.h("div", { class: "section" }, ...section.render(device))
+        );
+    }
 
-            for (const [iface, settingsOfInterface] of Object.entries(device.interfaces ?? {})) {
-                if (settingsOfInterface.type === "vlan" && settingsOfInterface.vlan === name) {
-                    row.gateways.push(`${device.name} ${iface} ${compact(settingsOfInterface.addresses)}`.trim());
+    /** @param {HTMLElement} container */
+    static #vlansView(container) {
+        /** @type {Map<number, { names: Set<string>, declared: string[], gateways: string[], ports: string[] }>} */
+        const byId = new Map();
+
+        for (const device of Tables.#data.devices) {
+            for (const [name, vlan] of Object.entries(device.vlans ?? {})) {
+                const row = byId.get(vlan.id) ?? { names: new Set(), declared: [], gateways: [], ports: [] };
+                row.names.add(name);
+                row.declared.push(device.name);
+
+                for (const [iface, settingsOfInterface] of Object.entries(device.interfaces ?? {})) {
+                    if (settingsOfInterface.type === "vlan" && settingsOfInterface.vlan === name) {
+                        row.gateways.push(`${device.name} ${iface} ${Tables.#compact(settingsOfInterface.addresses)}`.trim());
+                    }
                 }
+
+                const carriers = /** @type {(Record<string, unknown> | undefined)[]} */ (
+                    Object.values({ ...device.ports, ...device.interfaces })
+                );
+                const access = carriers.filter((carrier) => carrier?.access_vlan === name).length;
+                const trunk = carriers.filter(
+                    (carrier) => Array.isArray(carrier?.trunk_vlans) && carrier.trunk_vlans.includes(name)
+                ).length;
+                const counts = [access ? `${access} access` : "", trunk ? `${trunk} trunk` : ""].filter(Boolean).join(", ");
+                if (counts) row.ports.push(`${device.name}: ${counts}`);
+
+                byId.set(vlan.id, row);
             }
+        }
 
-            const carriers = /** @type {(Record<string, unknown> | undefined)[]} */ (
-                Object.values({ ...device.ports, ...device.interfaces })
-            );
-            const access = carriers.filter((carrier) => carrier?.access_vlan === name).length;
-            const trunk = carriers.filter((carrier) => Array.isArray(carrier?.trunk_vlans) && carrier.trunk_vlans.includes(name)).length;
-            const counts = [access ? `${access} access` : "", trunk ? `${trunk} trunk` : ""].filter(Boolean).join(", ");
-            if (counts) row.ports.push(`${device.name}: ${counts}`);
+        const rows = [...byId].sort(([a], [b]) => a - b);
 
-            byId.set(vlan.id, row);
-        }
+        container.append(
+            Tables.heading("VLANs", "h2"),
+            Tables.empty("Every VLAN any device declares. One id under two names is worth a look."),
+            rows.length
+                ? Tables.of({
+                      csv: "vlans",
+                      head: ["VLAN", "Name", "Declared on", "Gateway", "Ports", ""].map((label) => ({ label })),
+                      rows: rows.map(([id, row]) => ({
+                          cells: [
+                              Dom.h("strong", {}, String(id)),
+                              [...row.names].join(", "),
+                              Dom.h("span", {}, ...row.declared.flatMap((name, index) => [index ? ", " : "", Tables.deviceLink(name)])),
+                              row.gateways.join("; "),
+                              row.ports.join("; "),
+                              Dom.link("cables in the graph", () => {
+                                  Graph.lightVlan(id);
+                                  Dom.go("graph/l2");
+                              }),
+                          ],
+                      })),
+                  })
+                : Tables.empty("No device declares a VLAN.")
+        );
     }
 
-    const rows = [...byId].sort(([a], [b]) => a - b);
-
-    container.append(
-        heading("VLANs", "h2"),
-        empty("Every VLAN any device declares. One id under two names is worth a look."),
-        rows.length
-            ? table({
-                  csv: "vlans",
-                  head: ["VLAN", "Name", "Declared on", "Gateway", "Ports", ""].map((label) => ({ label })),
-                  rows: rows.map(([id, row]) => ({
-                      cells: [
-                          h("strong", {}, String(id)),
-                          [...row.names].join(", "),
-                          h("span", {}, ...row.declared.flatMap((name, index) => [index ? ", " : "", deviceLink(name)])),
-                          row.gateways.join("; "),
-                          row.ports.join("; "),
-                          link("cables in the graph", () => {
-                              lightVlan(id);
-                              go("graph/l2");
-                          }),
-                      ],
-                  })),
-              })
-            : empty("No device declares a VLAN.")
-    );
-}
+    /** @param {HTMLElement} container */
+    static #addressesView(container) {
+        const { spaces, elsewhere } = Tables.#data.addresses;
+        container.append(
+            Tables.heading("Addresses", "h2"),
+            Tables.empty("Every address the config uses, by prefix, and what is still free, as circuit addresses prints it.")
+        );
 
-/** @param {HTMLElement} container */
-function addressesView(container) {
-    const { spaces, elsewhere } = data.addresses;
-    container.append(
-        heading("Addresses", "h2"),
-        empty("Every address the config uses, by prefix, and what is still free, as circuit addresses prints it.")
-    );
+        /**
+         * @param {typeof elsewhere.segments} segments
+         * @param {typeof elsewhere.blocks} blocks
+         */
+        const segmentsAndBlocks = (segments, blocks) => {
+            for (const segment of segments) {
+                const next = segment.next ? `, next ${segment.next}` : "";
+                container.append(
+                    Tables.heading(`${segment.prefix}, ${segment.free} free${next}`, "h4"),
+                    Tables.of({
+                        head: [{ label: "Address" }, { label: "Used by" }],
+                        rows: segment.uses.map((use) => ({ cells: [use.address, use.what] })),
+                    })
+                );
+            }
 
-    /**
-     * @param {typeof elsewhere.segments} segments
-     * @param {typeof elsewhere.blocks} blocks
-     */
-    const segmentsAndBlocks = (segments, blocks) => {
-        for (const segment of segments) {
-            const next = segment.next ? `, next ${segment.next}` : "";
-            container.append(
-                heading(`${segment.prefix}, ${segment.free} free${next}`, "h4"),
-                table({
-                    head: [{ label: "Address" }, { label: "Used by" }],
-                    rows: segment.uses.map((use) => ({ cells: [use.address, use.what] })),
-                })
-            );
-        }
+            if (blocks.length) {
+                container.append(
+                    Tables.heading("Blocks", "h4"),
+                    Tables.of({
+                        head: [{ label: "Prefix" }, { label: "Used by" }],
+                        rows: blocks.map((block) => ({ cells: [block.prefix, block.what] })),
+                    })
+                );
+            }
+        };
 
-        if (blocks.length) {
-            container.append(
-                heading("Blocks", "h4"),
-                table({
-                    head: [{ label: "Prefix" }, { label: "Used by" }],
-                    rows: blocks.map((block) => ({ cells: [block.prefix, block.what] })),
-                })
-            );
+        for (const space of spaces) {
+            container.append(Tables.heading(`${space.prefix}, ${space.owner}`));
+            segmentsAndBlocks(space.segments, space.blocks);
+            container.append(Dom.h("p", {}, Dom.h("strong", {}, "Free: "), space.free.join(", ") || "none"));
         }
-    };
 
-    for (const space of spaces) {
-        container.append(heading(`${space.prefix}, ${space.owner}`));
-        segmentsAndBlocks(space.segments, space.blocks);
-        container.append(h("p", {}, h("strong", {}, "Free: "), space.free.join(", ") || "none"));
-    }
+        if (elsewhere.segments.length || elsewhere.blocks.length) {
+            container.append(Tables.heading("Outside the space the network originates"));
+            segmentsAndBlocks(elsewhere.segments, elsewhere.blocks);
+        }
 
-    if (elsewhere.segments.length || elsewhere.blocks.length) {
-        container.append(heading("Outside the space the network originates"));
-        segmentsAndBlocks(elsewhere.segments, elsewhere.blocks);
+        if (!spaces.length && !elsewhere.segments.length && !elsewhere.blocks.length)
+            container.append(Tables.empty("The config holds no addresses."));
     }
 
-    if (!spaces.length && !elsewhere.segments.length && !elsewhere.blocks.length) container.append(empty("The config holds no addresses."));
-}
+    /** @param {HTMLElement} container */
+    static #sessionsView(container) {
+        const ours = new Set(Tables.#data.devices.map((device) => device.name));
 
-/** @param {HTMLElement} container */
-function sessionsView(container) {
-    const ours = new Set(data.devices.map((device) => device.name));
-
-    container.append(
-        heading("BGP sessions", "h2"),
-        empty("Every BGP neighbor, with its group's settings filled in. A far end that is one of our devices links to it."),
-        data.sessions.length
-            ? table({
-                  csv: "bgp-sessions",
-                  head: ["Device", "Neighbor", "Address", "Remote AS", "Role", "Import", "Export", "Far end", ""].map((label) => ({
-                      label,
-                  })),
-                  rows: data.sessions.map((session) => ({
-                      cells: [
-                          deviceLink(session.device),
-                          h("strong", {}, session.name),
-                          session.address,
-                          session.remoteAs ? String(session.remoteAs) : "",
-                          session.role ?? "",
-                          session.import ?? "imports nothing",
-                          session.export ?? "exports nothing",
-                          session.far && ours.has(session.far) ? deviceLink(session.far) : (session.far ?? ""),
-                          session.oneSided ? h("span", { class: "badge warning" }, "no session back") : "",
-                      ],
-                  })),
-              })
-            : empty("No device runs BGP.")
-    );
-}
-
-/** @param {HTMLElement} container */
-function cablesView(container) {
-    container.append(
-        heading("Cables", "h2"),
-        empty("Every cable a port's link names, once, from the end that names it first."),
-        data.cables.length
-            ? table({
-                  csv: "cables",
-                  head: ["Device", "Port", "Far device", "Far port", "LAG", "VLANs", "Description", ""].map((label) => ({ label })),
-                  rows: data.cables.map((cable) => ({
-                      cells: [
-                          deviceLink(cable.device),
-                          cable.port,
-                          deviceLink(cable.farDevice),
-                          cable.farPort,
-                          [cable.lag, cable.farLag].filter(Boolean).join(" to "),
-                          cable.vlans.join(", "),
-                          cable.description ?? "",
-                          cable.oneSided ? h("span", { class: "badge warning" }, "not linked back") : "",
-                      ],
-                  })),
-              })
-            : empty("No port names a link.")
-    );
-}
+        container.append(
+            Tables.heading("BGP sessions", "h2"),
+            Tables.empty("Every BGP neighbor, with its group's settings filled in. A far end that is one of our devices links to it."),
+            Tables.#data.sessions.length
+                ? Tables.of({
+                      csv: "bgp-sessions",
+                      head: ["Device", "Neighbor", "Address", "Remote AS", "Role", "Import", "Export", "Far end", ""].map((label) => ({
+                          label,
+                      })),
+                      rows: Tables.#data.sessions.map((session) => ({
+                          cells: [
+                              Tables.deviceLink(session.device),
+                              Dom.h("strong", {}, session.name),
+                              session.address,
+                              session.remoteAs ? String(session.remoteAs) : "",
+                              session.role ?? "",
+                              session.import ?? "imports nothing",
+                              session.export ?? "exports nothing",
+                              session.far && ours.has(session.far) ? Tables.deviceLink(session.far) : (session.far ?? ""),
+                              session.oneSided ? Dom.h("span", { class: "badge warning" }, "no session back") : "",
+                          ],
+                      })),
+                  })
+                : Tables.empty("No device runs BGP.")
+        );
+    }
 
-/**
- * Everything that needs a look, in one place: what validate found, what only one end declares, and devices unlike their snapshot.
- *
- * @param {HTMLElement} container
- */
-function problemsView(container) {
-    const { graph } = data;
-    const nameOf = (/** @type {string} */ id) => graph.nodes.find((node) => node.id === id)?.label ?? id;
-
-    const errors = graph.findings.filter((finding) => finding.level === "error");
-    const warnings = graph.findings.filter((finding) => finding.level === "warning");
-    const oneSided = graph.edges.filter((edge) => edge.oneSided);
-    const drifted = data.devices.filter((device) => graph.drift[device.name]?.status === "differs");
-    const unplanned = data.devices.filter((device) => graph.drift[device.name]?.status === "cannot plan");
-    const unsnapped = data.devices.filter((device) => graph.drift[device.name]?.status === "no snapshot");
-
-    container.append(
-        heading("Problems", "h2"),
-        empty("Everything that needs a look. Studio finds these from the files and the last snapshots alone.")
-    );
-
-    if (!errors.length && !warnings.length && !oneSided.length && !drifted.length && !unplanned.length) {
-        container.append(empty("Nothing: every check passes, both ends declare everything, and every device with a snapshot matches it."));
+    /** @param {HTMLElement} container */
+    static #cablesView(container) {
+        container.append(
+            Tables.heading("Cables", "h2"),
+            Tables.empty("Every cable a port's link names, once, from the end that names it first."),
+            Tables.#data.cables.length
+                ? Tables.of({
+                      csv: "cables",
+                      head: ["Device", "Port", "Far device", "Far port", "LAG", "VLANs", "Description", ""].map((label) => ({ label })),
+                      rows: Tables.#data.cables.map((cable) => ({
+                          cells: [
+                              Tables.deviceLink(cable.device),
+                              cable.port,
+                              Tables.deviceLink(cable.farDevice),
+                              cable.farPort,
+                              [cable.lag, cable.farLag].filter(Boolean).join(" to "),
+                              cable.vlans.join(", "),
+                              cable.description ?? "",
+                              cable.oneSided ? Dom.h("span", { class: "badge warning" }, "not linked back") : "",
+                          ],
+                      })),
+                  })
+                : Tables.empty("No port names a link.")
+        );
     }
 
     /**
-     * @param {string} title
-     * @param {import("../../core/define").Finding[]} findings
+     * Everything that needs a look, in one place: what validate found, what only one end declares, and devices unlike their snapshot.
+     *
+     * @param {HTMLElement} container
      */
-    const findingTable = (title, findings) => {
-        if (!findings.length) return;
+    static #problemsView(container) {
+        const { graph } = Tables.#data;
+        const nameOf = (/** @type {string} */ id) => graph.nodes.find((node) => node.id === id)?.label ?? id;
+
+        const errors = graph.findings.filter((finding) => finding.level === "error");
+        const warnings = graph.findings.filter((finding) => finding.level === "warning");
+        const oneSided = graph.edges.filter((edge) => edge.oneSided);
+        const drifted = Tables.#data.devices.filter((device) => graph.drift[device.name]?.status === "differs");
+        const unplanned = Tables.#data.devices.filter((device) => graph.drift[device.name]?.status === "cannot plan");
+        const unsnapped = Tables.#data.devices.filter((device) => graph.drift[device.name]?.status === "no snapshot");
 
         container.append(
-            h("h3", {}, title, " found by ", h("code", {}, "circuit validate")),
-            table({
-                csv: title.toLowerCase(),
-                head: ["Device", "Message"].map((label) => ({ label })),
-                rows: findings.map((finding) => ({
-                    cells: [finding.device ? deviceLink(finding.device) : "the network", finding.message],
-                })),
-            })
+            Tables.heading("Problems", "h2"),
+            Tables.empty("Everything that needs a look. Studio finds these from the files and the last snapshots alone.")
         );
-    };
 
-    findingTable("Errors", errors);
-    findingTable("Warnings", warnings);
+        if (!errors.length && !warnings.length && !oneSided.length && !drifted.length && !unplanned.length) {
+            container.append(
+                Tables.empty("Nothing: every check passes, both ends declare everything, and every device with a snapshot matches it.")
+            );
+        }
 
-    if (oneSided.length) {
-        container.append(
-            heading("Declared by one end only"),
-            table({
-                csv: "one-sided",
-                head: ["Layer", "What", "From", "To", ""].map((label) => ({ label })),
-                rows: oneSided.map((edge) => ({
-                    cells: [
-                        LAYER_NAMES[edge.layer],
-                        edge.label,
-                        nameOf(edge.from),
-                        nameOf(edge.to),
-                        link("in the graph", () => go(`graph/${edge.layer}`)),
-                    ],
-                })),
-            })
-        );
-    }
+        /**
+         * @param {string} title
+         * @param {import("../../core/define").Finding[]} findings
+         */
+        const findingTable = (title, findings) => {
+            if (!findings.length) return;
 
-    /**
-     * @param {string} title
-     * @param {Device[]} devices
-     * @param {string} section
-     * @param {string} action
-     */
-    const deviceList = (title, devices, section, action) => {
-        if (!devices.length) return;
+            container.append(
+                Dom.h("h3", {}, title, " found by ", Dom.h("code", {}, "circuit validate")),
+                Tables.of({
+                    csv: title.toLowerCase(),
+                    head: ["Device", "Message"].map((label) => ({ label })),
+                    rows: findings.map((finding) => ({
+                        cells: [finding.device ? Tables.deviceLink(finding.device) : "the network", finding.message],
+                    })),
+                })
+            );
+        };
 
-        container.append(
-            heading(title),
-            h(
-                "ul",
-                { class: "findings" },
-                ...devices.map((device) =>
-                    h(
-                        "li",
-                        {},
-                        deviceLink(device.name),
-                        " · ",
-                        link(action, () => go(`${deviceRoute(device.name)}/${section}`))
+        findingTable("Errors", errors);
+        findingTable("Warnings", warnings);
+
+        if (oneSided.length) {
+            container.append(
+                Tables.heading("Declared by one end only"),
+                Tables.of({
+                    csv: "one-sided",
+                    head: ["Layer", "What", "From", "To", ""].map((label) => ({ label })),
+                    rows: oneSided.map((edge) => ({
+                        cells: [
+                            Graph.LAYER_NAMES[edge.layer],
+                            edge.label,
+                            nameOf(edge.from),
+                            nameOf(edge.to),
+                            Dom.link("in the graph", () => Dom.go(`graph/${edge.layer}`)),
+                        ],
+                    })),
+                })
+            );
+        }
+
+        /**
+         * @param {string} title
+         * @param {Device[]} devices
+         * @param {string} section
+         * @param {string} action
+         */
+        const deviceList = (title, devices, section, action) => {
+            if (!devices.length) return;
+
+            container.append(
+                Tables.heading(title),
+                Dom.h(
+                    "ul",
+                    { class: "findings" },
+                    ...devices.map((device) =>
+                        Dom.h(
+                            "li",
+                            {},
+                            Tables.deviceLink(device.name),
+                            " · ",
+                            Dom.link(action, () => Dom.go(`${Tables.#deviceRoute(device.name)}/${section}`))
+                        )
                     )
                 )
-            )
-        );
-    };
+            );
+        };
 
-    deviceList("Unlike their last snapshot", drifted, "plan", "see the plan");
-    deviceList("Could not be planned against their snapshot", unplanned, "plan", "see why");
+        deviceList("Unlike their last snapshot", drifted, "plan", "see the plan");
+        deviceList("Could not be planned against their snapshot", unplanned, "plan", "see why");
 
-    if (unsnapped.length) {
-        container.append(
-            heading("No snapshot yet"),
-            prose(
-                unsnapped.map((device) => device.name).join(", "),
-                ". Run ",
-                h("code", {}, "circuit snapshot"),
-                " to compare them with what they run."
-            )
-        );
+        if (unsnapped.length) {
+            container.append(
+                Tables.heading("No snapshot yet"),
+                Tables.prose(
+                    unsnapped.map((device) => device.name).join(", "),
+                    ". Run ",
+                    Dom.h("code", {}, "circuit snapshot"),
+                    " to compare them with what they run."
+                )
+            );
+        }
     }
-}
-
-/** How many problems there are, for the top bar. */
-export function problemCount(/** @type {StudioData} */ next) {
-    const drifted = Object.values(next.graph.drift).filter((drift) => drift.status === "differs" || drift.status === "cannot plan").length;
-    return next.graph.findings.length + next.graph.edges.filter((edge) => edge.oneSided).length + drifted;
-}
 
-/** Which section shows each part of a device, for search results. @type {Record<string, string>} */
-const SECTION_OF = {
-    ports: "ports",
-    interfaces: "interfaces",
-    vlans: "vlans",
-    routing: "routing",
-    policies: "policies",
-    prefix_sets: "policies",
-    firewall: "firewall",
-    acls: "firewall",
-    users: "management",
-    management: "management",
-    certificates: "management",
-    dhcp: "services",
-    dhcp_relay: "services",
-    flow_export: "services",
-};
-
-/**
- * @param {string} query
- * @param {HTMLElement} container
- */
-function searchView(query, container) {
-    const needle = query.toLowerCase();
-    /** @type {{ device: string, section: string, path: string, text: string }[]} */
-    const results = [];
+    /** How many problems there are, for the top bar. */
+    static problemCount(/** @type {StudioData} */ next) {
+        const drifted = Object.values(next.graph.drift).filter(
+            (drift) => drift.status === "differs" || drift.status === "cannot plan"
+        ).length;
+        return next.graph.findings.length + next.graph.edges.filter((edge) => edge.oneSided).length + drifted;
+    }
 
-    /**
-     * @param {string} device
-     * @param {string[]} path
-     * @param {string} text
-     */
-    const check = (device, path, text) => {
-        if (!text.toLowerCase().includes(needle) || path.at(-1) === "certificate") return;
-        results.push({ device, section: SECTION_OF[path[0] ?? ""] ?? "overview", path: path.join(" › "), text });
+    /** Which section shows each part of a device, for search results. @type {Record<string, string>} */
+    static #SECTION_OF = {
+        ports: "ports",
+        interfaces: "interfaces",
+        vlans: "vlans",
+        routing: "routing",
+        policies: "policies",
+        prefix_sets: "policies",
+        firewall: "firewall",
+        acls: "firewall",
+        users: "management",
+        management: "management",
+        certificates: "management",
+        dhcp: "services",
+        dhcp_relay: "services",
+        flow_export: "services",
     };
 
     /**
-     * @param {string} device
-     * @param {string[]} path
-     * @param {unknown} value
+     * @param {string} query
+     * @param {HTMLElement} container
      */
-    const walk = (device, path, value) => {
-        if (results.length >= 200) return;
-
-        if (isSecret(value)) return check(device, path, secretText(/** @type {Record<string, unknown>} */ (value)));
-        if (Array.isArray(value)) return value.forEach((item, index) => walk(device, [...path, String(index + 1)], item));
-        if (isObject(value)) {
-            for (const [key, inner] of Object.entries(value)) {
-                // A name a device declares, such as a port or a VLAN, is a match too.
-                if (path.length && key.toLowerCase().includes(needle)) check(device, [...path, key], key);
-                walk(device, [...path, key], inner);
+    static #searchView(query, container) {
+        const needle = query.toLowerCase();
+        /** @type {{ device: string, section: string, path: string, text: string }[]} */
+        const results = [];
+
+        /**
+         * @param {string} device
+         * @param {string[]} path
+         * @param {string} text
+         */
+        const check = (device, path, text) => {
+            if (!text.toLowerCase().includes(needle) || path.at(-1) === "certificate") return;
+            results.push({ device, section: Tables.#SECTION_OF[path[0] ?? ""] ?? "overview", path: path.join(" › "), text });
+        };
+
+        /**
+         * @param {string} device
+         * @param {string[]} path
+         * @param {unknown} value
+         */
+        const walk = (device, path, value) => {
+            if (results.length >= 200) return;
+
+            if (Tables.#isSecret(value)) return check(device, path, Tables.#secretText(/** @type {Record<string, unknown>} */ (value)));
+            if (Array.isArray(value)) return value.forEach((item, index) => walk(device, [...path, String(index + 1)], item));
+            if (Tables.#isObject(value)) {
+                for (const [key, inner] of Object.entries(value)) {
+                    // A name a device declares, such as a port or a VLAN, is a match too.
+                    if (path.length && key.toLowerCase().includes(needle)) check(device, [...path, key], key);
+                    walk(device, [...path, key], inner);
+                }
+                return;
             }
-            return;
-        }
 
-        if (value !== undefined && value !== null) check(device, path, String(value));
-    };
+            if (value !== undefined && value !== null) check(device, path, String(value));
+        };
 
-    for (const device of data.devices) walk(device.name, [], device);
+        for (const device of Tables.#data.devices) walk(device.name, [], device);
 
-    container.append(heading(`Search: ${query}`, "h2"));
+        container.append(Tables.heading(`Search: ${query}`, "h2"));
 
-    if (!results.length) {
-        container.append(empty("Nothing in the config matches."));
-        return;
-    }
+        if (!results.length) {
+            container.append(Tables.empty("Nothing in the config matches."));
+            return;
+        }
 
-    container.append(
-        empty(results.length >= 200 ? "The first 200 matches." : `${results.length} ${results.length === 1 ? "match" : "matches"}.`),
-        table({
-            csv: "search",
-            head: ["Device", "Where", "Value"].map((label) => ({ label })),
-            rows: results.map((result) => ({
-                cells: [
-                    deviceLink(result.device),
-                    link(result.path, () => go(`${deviceRoute(result.device)}/${result.section}`)),
-                    result.text.length > 120 ? `${result.text.slice(0, 120)}…` : result.text,
-                ],
-            })),
-        })
-    );
-}
+        container.append(
+            Tables.empty(
+                results.length >= 200 ? "The first 200 matches." : `${results.length} ${results.length === 1 ? "match" : "matches"}.`
+            ),
+            Tables.of({
+                csv: "search",
+                head: ["Device", "Where", "Value"].map((label) => ({ label })),
+                rows: results.map((result) => ({
+                    cells: [
+                        Tables.deviceLink(result.device),
+                        Dom.link(result.path, () => Dom.go(`${Tables.#deviceRoute(result.device)}/${result.section}`)),
+                        result.text.length > 120 ? `${result.text.slice(0, 120)}…` : result.text,
+                    ],
+                })),
+            })
+        );
+    }
 
-/**
- * Draw a place in Studio's tables, such as `["devices", "edge-01", "ports"]`, into a container.
- *
- * @param {string[]} route
- * @param {HTMLElement} container
- * @param {StudioData} next
- */
-export function showTables(route, container, next) {
-    data = next;
-    container.replaceChildren();
-
-    const [view, first, second] = route;
-
-    if (view === "devices" && first) deviceView(first, second, container);
-    else if (view === "devices") devicesView(container);
-    else if (view === "vlans") vlansView(container);
-    else if (view === "addresses") addressesView(container);
-    else if (view === "sessions") sessionsView(container);
-    else if (view === "cables") cablesView(container);
-    else if (view === "problems") problemsView(container);
-    else if (view === "search") searchView(first ?? "", container);
+    /**
+     * Draw a place in Studio's tables, such as `["devices", "edge-01", "ports"]`, into a container.
+     *
+     * @param {string[]} route
+     * @param {HTMLElement} container
+     * @param {StudioData} next
+     */
+    static show(route, container, next) {
+        Tables.#data = next;
+        container.replaceChildren();
+
+        const [view, first, second] = route;
+
+        if (view === "devices" && first) Tables.#deviceView(first, second, container);
+        else if (view === "devices") Tables.#devicesView(container);
+        else if (view === "vlans") Tables.#vlansView(container);
+        else if (view === "addresses") Tables.#addressesView(container);
+        else if (view === "sessions") Tables.#sessionsView(container);
+        else if (view === "cables") Tables.#cablesView(container);
+        else if (view === "problems") Tables.#problemsView(container);
+        else if (view === "search") Tables.#searchView(first ?? "", container);
+    }
 }