querysub 0.616.0 → 0.617.0

package/src/diagnostics/misc-pages/LatencyGraphSection.tsx

@@ -0,0 +1,524 @@
+module.allowclient = true;
+
+import { qreact } from "../../4-dom/qreact";
+import { css } from "typesafecss";
+import { getBrowserUrlNode } from "../../-f-node-discovery/NodeDiscovery";
+import { TrafficStats } from "../../-f-node-discovery/TrafficTracking";
+import { getDomain } from "../../config";
+import { decodeNodeId } from "sliftutils/misc/https/certs";
+import { sort, timeInMinute } from "socket-function/src/misc";
+import { getFunctionRunnerIndex, FunctionRunnerNodeInfo } from "../../4-querysub/FunctionRunnerTracking";
+import { formatTime, formatNumber } from "socket-function/src/formatting/format";
+import { LatencyGraph, LatencyGraphNode, LatencyGraphLink, LatencyGraphLabelLine } from "../../library-components/LatencyGraph";
+import { URLParam } from "../../library-components/URLParam";
+import { mainResets } from "../../library-components/urlResetGroups";
+import { FUNCTION_RUNNER_COLOR, PATHVALUE_COLOR } from "../../misc/nodeCategoryColors";
+import { ID_CHARS, NodeAuthorityInfo, RoutingTableSynced, machineIdOf, threadLabel } from "./RoutingTablePage";
+
+const LATENCY_GRAPH_HEIGHT_PX = 720;
+const MACHINE_LATENCY_WIDTH_PX = 235;
+
+// Clicking a machine node in the graph (or a row) sorts that machine's nodes to the top of the table.
+const selectedMachineParam = new URLParam("rtSelectedMachine", "", { reset: [mainResets] });
+const trafficWindowParam = new URLParam<number>("rtTrafficWindow", timeInMinute * 5, { reset: [mainResets] });
+
+// The per-node table columns, in order. `color` tints the function/path-value/querysub columns to match the graph;
+// `perMachine` columns (the IP and machine id) only print on the first row of each machine group.
+const NODE_TABLE_COLUMNS: { key: keyof NodeRow; label: string; width: number; color?: string; perMachine?: boolean; }[] = [
+    { key: "ip", label: "IP", width: 130, perMachine: true },
+    { key: "networks", label: "Networks", width: 180, color: FUNCTION_RUNNER_COLOR, perMachine: true },
+    { key: "machineShort", label: "Machine", width: 96, perMachine: true },
+    { key: "threadPort", label: "Thread:Port", width: 130 },
+    { key: "name", label: "Name", width: 160 },
+    { key: "data", label: "Data", width: 210 },
+    { key: "fn", label: "Function", width: 380, color: FUNCTION_RUNNER_COLOR },
+    { key: "pv", label: "Path Values", width: 250, color: PATHVALUE_COLOR },
+];
+
+type NodeRow = {
+    nodeId: string;
+    machineId: string;
+    ip: string;
+    networks: string;
+    machineShort: string;
+    threadPort: string;
+    name: string;
+    data: string;
+    fn: string;
+    pv: string;
+};
+
+function nodeTotalTraffic(traffic: TrafficStats): { sent: number; received: number; outside: number; } {
+    let outsideSent = traffic.outside?.sent || 0;
+    let outsideReceived = traffic.outside?.received || 0;
+    let sent = outsideSent;
+    let received = outsideReceived;
+    for (let d of Object.values(traffic.perNode || {})) {
+        sent += d?.sent || 0;
+        received += d?.received || 0;
+    }
+    return { sent, received, outside: outsideSent + outsideReceived };
+}
+
+// min · median · max of one source node's latencies to a machine's threads (plus a tooltip naming the farthest
+// thread), and the node's total path values sent/received to that machine (summed — the per-thread split isn't interesting).
+function machineLatencyCell(config: {
+    sourceLatencies: { [nodeId: string]: number } | undefined;
+    threads: string[];
+    traffic: TrafficStats | undefined;
+}): { text: string; tooltip: string } {
+    let { sourceLatencies, threads, traffic } = config;
+    if (!sourceLatencies) return { text: "", tooltip: "" };
+    let entries: { thread: string; ms: number }[] = [];
+    for (let thread of threads) {
+        let ms = sourceLatencies[thread];
+        if (Number.isFinite(ms)) entries.push({ thread, ms });
+    }
+    if (!entries.length) return { text: "", tooltip: "" };
+    sort(entries, entry => entry.ms);
+    let farthest = entries[entries.length - 1];
+    let text = `${formatTime(entries[0].ms)} · ${formatTime(entries[Math.floor(entries.length / 2)].ms)} · ${formatTime(farthest.ms)}`;
+    let pvSent = 0;
+    let pvReceived = 0;
+    for (let thread of threads) {
+        let data = traffic?.perNode?.[thread];
+        if (!data) continue;
+        pvSent += data.pathValuesSent || 0;
+        pvReceived += data.pathValuesReceived || 0;
+    }
+    if (pvSent || pvReceived) {
+        text += `  ↑${formatNumber(pvSent)}/s ↓${formatNumber(pvReceived)}/s values`;
+    }
+    return { text, tooltip: `${text}\nfarthest: ${threadLabel(farthest.thread)} (${formatTime(farthest.ms)})` };
+}
+
+// Summed traffic metrics across a set of nodes (a machine's threads).
+function sumTraffic(threads: string[], trafficMaps: Map<string, TrafficStats>) {
+    let dataSent = 0;
+    let dataReceived = 0;
+    let valuesSent = 0;
+    let valuesReceived = 0;
+    let calls = 0;
+    let addCalls = 0;
+    for (let id of threads) {
+        let traffic = trafficMaps.get(id);
+        if (!traffic) continue;
+        let totals = nodeTotalTraffic(traffic);
+        dataSent += totals.sent;
+        dataReceived += totals.received;
+        valuesSent += traffic.pathValuesSent || 0;
+        valuesReceived += traffic.pathValuesReceived || 0;
+        calls += traffic.functionsExecuted || 0;
+        addCalls += traffic.querysubCalls || 0;
+    }
+    return { dataSent, dataReceived, valuesSent, valuesReceived, calls, addCalls };
+}
+
+// A machine's graph label: the IP first (most important), then its function-runner networks, then the same per-piece
+// info as the table, summed across all its threads and colored the same.
+function machineLabelLines(config: {
+    machineId: string;
+    threads: string[];
+    trafficMaps: Map<string, TrafficStats>;
+    ip: string | undefined;
+    networks: string[];
+}): LatencyGraphLabelLine[] {
+    let { machineId, threads, ip, networks } = config;
+    let totals = sumTraffic(threads, config.trafficMaps);
+    let lines: LatencyGraphLabelLine[] = [];
+    if (ip) {
+        lines.push({ text: ip });
+    }
+    if (networks.length) {
+        lines.push({ text: networks.join(" | "), color: FUNCTION_RUNNER_COLOR });
+    }
+    lines.push({ text: `${machineId.slice(0, ID_CHARS)}  ${threads.length} threads` });
+    if (totals.dataSent + totals.dataReceived > 0) {
+        lines.push({ text: `↑${formatNumber(totals.dataSent)}B/s ↓${formatNumber(totals.dataReceived)}B/s` });
+    }
+    if (totals.valuesSent || totals.valuesReceived) {
+        lines.push({ text: `↑${formatNumber(totals.valuesSent)}/s ↓${formatNumber(totals.valuesReceived)}/s values`, color: PATHVALUE_COLOR });
+    }
+    if (totals.calls) {
+        lines.push({ text: `${formatNumber(totals.calls)}/s calls`, color: FUNCTION_RUNNER_COLOR });
+    }
+    if (totals.addCalls) {
+        lines.push({ text: `${formatNumber(totals.addCalls)}/s querysub addCalls`, color: FUNCTION_RUNNER_COLOR });
+    }
+    return lines;
+}
+
+// One table row per thread node: each piece of info that used to live on the graph label becomes its own column.
+function buildNodeRow(config: {
+    nodeId: string;
+    runner: FunctionRunnerNodeInfo | undefined;
+    info: NodeAuthorityInfo | undefined;
+    traffic: TrafficStats | undefined;
+    machineIp: Map<string, string>;
+    machineNetworks: Map<string, string[]>;
+}): NodeRow {
+    let { nodeId, runner, info, traffic, machineIp, machineNetworks } = config;
+    let parts = decodeNodeId(nodeId, getDomain(), "allowMissingThreadId");
+    let thread = (parts?.threadId || "?").slice(0, ID_CHARS);
+    let machineId = parts?.machineId || nodeId;
+    let entryPoint = info?.entryPoint || runner?.entryPoint;
+    let name = entryPoint && entryPoint.split(/[\\/]/).filter(Boolean).at(-1) || "";
+
+    let data = "";
+    if (traffic) {
+        let totals = nodeTotalTraffic(traffic);
+        let sum = totals.sent + totals.received;
+        if (sum > 0) {
+            let outsidePct = Math.round((totals.outside / sum) * 100);
+            data = `↑${formatNumber(totals.sent)}B/s ↓${formatNumber(totals.received)}B/s  ${outsidePct}%⊘`;
+        }
+    }
+
+    let fnParts: string[] = [];
+    if (runner) {
+        if (runner.networks.length) fnParts.push(runner.networks.join(" "));
+        for (let shard of runner.shards) {
+            fnParts.push(`${shard.shardRange.startFraction.toFixed(3)}-${shard.shardRange.endFraction.toFixed(3)}`);
+        }
+        fnParts.push(`${formatNumber(traffic?.functionsExecuted ?? 0)}/s calls`);
+        if (!runner.isPublic) fnParts.push("PRIVATE");
+    }
+    // A slightly different source than function calls, but still function calls, so it lives in the function column
+    if (traffic?.querysubCalls) {
+        fnParts.push(`${formatNumber(traffic.querysubCalls)}/s querysub addCalls`);
+    }
+
+    let pvParts: string[] = [];
+    let spec = info?.spec;
+    if (spec && spec.routeStart >= 0 && spec.routeEnd >= 0) {
+        pvParts.push(`${spec.routeStart.toFixed(3)}-${spec.routeEnd.toFixed(3)}`);
+    }
+    if (traffic && (traffic.pathValuesSent || traffic.pathValuesReceived)) {
+        pvParts.push(`↑${formatNumber(traffic.pathValuesSent)}/s ↓${formatNumber(traffic.pathValuesReceived)}/s values`);
+    }
+
+    return {
+        nodeId,
+        machineId,
+        ip: machineIp.get(machineId) || "",
+        networks: (machineNetworks.get(machineId) || []).join(" | "),
+        machineShort: machineId.slice(0, ID_CHARS),
+        threadPort: `${thread}:${parts?.port ?? "?"}`,
+        name,
+        data,
+        fn: fnParts.join("  "),
+        pv: pvParts.join("  "),
+    };
+}
+
+class NodeInfoTable extends qreact.Component<{
+    rows: NodeRow[];
+    selectedMachine: string;
+    machineColumns: { id: string; label: string }[];
+    nodeMachineLatency: Map<string, { [machineId: string]: { text: string; tooltip: string } }>;
+}> {
+    render() {
+        let rows = this.props.rows;
+        let selected = this.props.selectedMachine;
+        let machineColumns = this.props.machineColumns;
+        let nodeMachineLatency = this.props.nodeMachineLatency;
+        return <div className={css.vbox(0).fillWidth.overflowAuto.bord2(0, 0, 85)}>
+            <div className={css.hbox(0).hsl(0, 0, 96).colorhsl(0, 0, 20).boldStyle}>
+                {NODE_TABLE_COLUMNS.map(col =>
+                    <div className={css.width(col.width).flexShrink0.pad2(6).ellipsis}>{col.label}</div>
+                )}
+                {machineColumns.map(col =>
+                    <div className={css.width(MACHINE_LATENCY_WIDTH_PX).flexShrink0.pad2(6).ellipsis} title={`latency and path values to ${col.label}`}>→ {col.label}</div>
+                )}
+            </div>
+            {rows.map((row, i) => {
+                let firstOfMachine = i === 0 || rows[i - 1].machineId !== row.machineId;
+                let isSelected = row.machineId === selected;
+                let latencies = nodeMachineLatency.get(row.nodeId) || {};
+                return <div
+                    className={css.hbox(0).button.fillWidth.hsl(0, 0, isSelected ? 92 : 99)
+                        .borderTop(firstOfMachine ? "1px solid hsl(0, 0%, 80%)" : "1px solid hsl(0, 0%, 93%)")}
+                    onClick={() => selectedMachineParam.value = selected === row.machineId ? "" : row.machineId}
+                >
+                    {NODE_TABLE_COLUMNS.map(col => {
+                        // Per-machine columns (IP, machine id) only print on the first row of each group, so it reads clearly.
+                        let text = col.perMachine && !firstOfMachine ? "" : row[col.key];
+                        return <div
+                            className={css.width(col.width).flexShrink0.pad2(6).ellipsis.color(col.color || "hsl(0, 0%, 25%)")}
+                            title={text}
+                        >{text}</div>;
+                    })}
+                    {machineColumns.map(col => {
+                        let cell = latencies[col.id];
+                        return <div
+                            className={css.width(MACHINE_LATENCY_WIDTH_PX).flexShrink0.pad2(6).ellipsis.colorhsl(0, 0, 25)}
+                            title={cell?.tooltip || ""}
+                        >{cell?.text || ""}</div>;
+                    })}
+                </div>;
+            })}
+        </div>;
+    }
+}
+
+// Nodes that never reported their latencies — all we have is their nodeId (and possibly a DNS-resolved machine IP), so this is a much narrower table than NodeInfoTable, still grouped by machine.
+class UnresponsiveNodesTable extends qreact.Component<{ nodeIds: string[]; machineIp: Map<string, string> }> {
+    render() {
+        let rows = this.props.nodeIds.map(nodeId => ({ nodeId, machineId: machineIdOf(nodeId) }));
+        let sep = String.fromCharCode(1);
+        sort(rows, row => `${row.machineId}${sep}${threadLabel(row.nodeId)}`);
+        return <div className={css.vbox(0).fillWidth.overflowAuto.bord2(0, 0, 85)}>
+            <div className={css.hbox(0).hsl(0, 0, 96).colorhsl(0, 0, 20).boldStyle}>
+                <div className={css.width(130).flexShrink0.pad2(6).ellipsis}>IP</div>
+                <div className={css.width(96).flexShrink0.pad2(6).ellipsis}>Machine</div>
+                <div className={css.width(130).flexShrink0.pad2(6).ellipsis}>Thread:Port</div>
+                <div className={css.width(520).flexShrink0.pad2(6).ellipsis}>Node Id</div>
+            </div>
+            {rows.map((row, i) => {
+                let firstOfMachine = i === 0 || rows[i - 1].machineId !== row.machineId;
+                return <div
+                    className={css.hbox(0).fillWidth.hsl(0, 0, 99)
+                        .borderTop(firstOfMachine ? "1px solid hsl(0, 0%, 80%)" : "1px solid hsl(0, 0%, 93%)")}
+                >
+                    <div className={css.width(130).flexShrink0.pad2(6).ellipsis}>{firstOfMachine && this.props.machineIp.get(row.machineId) || ""}</div>
+                    <div className={css.width(96).flexShrink0.pad2(6).ellipsis}>{firstOfMachine && row.machineId.slice(0, ID_CHARS) || ""}</div>
+                    <div className={css.width(130).flexShrink0.pad2(6).ellipsis}>{threadLabel(row.nodeId)}</div>
+                    <div className={css.width(520).flexShrink0.pad2(6).ellipsis.colorhsl(0, 0, 45)} title={row.nodeId}>{row.nodeId}</div>
+                </div>;
+            })}
+        </div>;
+    }
+}
+
+export class LatencyGraphSection extends qreact.Component<{ nodeIds: string[]; infos: NodeAuthorityInfo[] }> {
+    render() {
+        let nodeIds = this.props.nodeIds;
+        let synced = RoutingTableSynced(getBrowserUrlNode());
+
+        let index = getFunctionRunnerIndex();
+        let runnerByNode = new Map<string, FunctionRunnerNodeInfo>();
+        for (let node of index?.nodes ?? []) {
+            runnerByNode.set(node.nodeId, node);
+        }
+        let infoByNode = new Map(this.props.infos.map(info => [info.nodeId, info]));
+
+        // One synced call per node for each data source; each resolves independently so the graph fills in progressively.
+        let trafficWindow = trafficWindowParam.value;
+        let latencyMaps = new Map<string, { [nodeId: string]: number }>();
+        let trafficMaps = new Map<string, TrafficStats>();
+        for (let nodeId of nodeIds) {
+            let latencies = synced.getNodeLatencies(nodeId);
+            if (latencies) latencyMaps.set(nodeId, latencies);
+            let traffic = synced.getNodeTrafficRates(nodeId, trafficWindow);
+            if (traffic) trafficMaps.set(nodeId, traffic);
+        }
+        // Only graph nodes that reported their latencies — ones that never respond probably don't exist.
+        let respondedSet = new Set(latencyMaps.keys());
+
+        // Group every thread by its machine; the graph shows one node per machine that has a responding thread.
+        let machineAllThreads = new Map<string, string[]>();
+        let machineRespondedThreads = new Map<string, string[]>();
+        let pushInto = (map: Map<string, string[]>, key: string, value: string) => {
+            let list = map.get(key);
+            if (!list) {
+                list = [];
+                map.set(key, list);
+            }
+            list.push(value);
+        };
+        for (let nodeId of nodeIds) {
+            let machineId = machineIdOf(nodeId);
+            pushInto(machineAllThreads, machineId, nodeId);
+            if (respondedSet.has(nodeId)) {
+                pushInto(machineRespondedThreads, machineId, nodeId);
+            }
+        }
+
+        // A machine's IP is the most common IP across its threads (they should all match, but resolve robustly).
+        let nodeIps = synced.getNodeIps(nodeIds);
+        let machineIp = new Map<string, string>();
+        for (let [machineId, threads] of machineAllThreads) {
+            let counts = new Map<string, number>();
+            for (let thread of threads) {
+                let ip = nodeIps?.[thread];
+                if (!ip) continue;
+                counts.set(ip, (counts.get(ip) || 0) + 1);
+            }
+            let bestIp = "";
+            let bestCount = 0;
+            for (let [ip, count] of counts) {
+                if (count > bestCount) {
+                    bestCount = count;
+                    bestIp = ip;
+                }
+            }
+            if (bestIp) machineIp.set(machineId, bestIp);
+        }
+
+        // The unique set of function-runner networks running on each machine (usually one, human-readable).
+        let machineNetworks = new Map<string, string[]>();
+        for (let [machineId, threads] of machineAllThreads) {
+            let unique = new Set<string>();
+            for (let thread of threads) {
+                for (let network of runnerByNode.get(thread)?.networks || []) {
+                    unique.add(network);
+                }
+            }
+            if (unique.size) machineNetworks.set(machineId, [...unique]);
+        }
+
+        // One latency column per machine: each row (node) gets its own min · median · max latency to that machine's
+        // threads (a machine has several threads, so a cell is a range, not one number).
+        let machineColumns = [...machineAllThreads.keys()].map(id => {
+            let networks = machineNetworks.get(id) || [];
+            let label = networks.length ? `${id.slice(0, ID_CHARS)} (${networks.join(" | ")})` : id.slice(0, ID_CHARS);
+            return { id, label, threads: machineAllThreads.get(id) || [] };
+        });
+        sort(machineColumns, column => column.id);
+        let nodeMachineLatency = new Map<string, { [machineId: string]: { text: string; tooltip: string } }>();
+        for (let nodeId of nodeIds) {
+            let sourceLatencies = latencyMaps.get(nodeId);
+            let traffic = trafficMaps.get(nodeId);
+            let byMachine: { [machineId: string]: { text: string; tooltip: string } } = {};
+            for (let column of machineColumns) {
+                let cell = machineLatencyCell({ sourceLatencies, threads: column.threads, traffic });
+                if (cell.text) byMachine[column.id] = cell;
+            }
+            nodeMachineLatency.set(nodeId, byMachine);
+        }
+
+        // Total bytes on each thread-pair link (both directions). Both endpoints report the same total, so take the max.
+        let pairKey = (a: string, b: string) => a < b ? `${a}|${b}` : `${b}|${a}`;
+        let pairTraffic = new Map<string, number>();
+        // Path values per thread pair, split by direction (fwd = lower id → higher id). Both endpoints report each
+        // direction (one as sent, one as received), so take the max of the two estimates.
+        let pairPv = new Map<string, { fwd: number; back: number }>();
+        for (let [reporter, traffic] of trafficMaps) {
+            for (let [peer, data] of Object.entries(traffic.perNode || {})) {
+                if (reporter === peer || !respondedSet.has(peer)) continue;
+                let key = pairKey(reporter, peer);
+                pairTraffic.set(key, Math.max(pairTraffic.get(key) || 0, (data?.sent || 0) + (data?.received || 0)));
+                let pv = pairPv.get(key);
+                if (!pv) {
+                    pv = { fwd: 0, back: 0 };
+                    pairPv.set(key, pv);
+                }
+                let sentRate = data?.pathValuesSent || 0;
+                let receivedRate = data?.pathValuesReceived || 0;
+                if (reporter < peer) {
+                    pv.fwd = Math.max(pv.fwd, sentRate);
+                    pv.back = Math.max(pv.back, receivedRate);
+                } else {
+                    pv.fwd = Math.max(pv.fwd, receivedRate);
+                    pv.back = Math.max(pv.back, sentRate);
+                }
+            }
+        }
+
+        // Machine-to-machine latency = minimum over all cross-machine thread-pair latencies; traffic = summed pair traffic.
+        let machinePairLatency = new Map<string, number>();
+        for (let [sourceId, latencies] of latencyMaps) {
+            let sourceMachine = machineIdOf(sourceId);
+            for (let [destId, latencyMs] of Object.entries(latencies)) {
+                if (!respondedSet.has(destId) || !Number.isFinite(latencyMs)) continue;
+                let destMachine = machineIdOf(destId);
+                if (sourceMachine === destMachine) continue;
+                let key = pairKey(sourceMachine, destMachine);
+                let existing = machinePairLatency.get(key);
+                machinePairLatency.set(key, existing === undefined ? latencyMs : Math.min(existing, latencyMs));
+            }
+        }
+        let machinePairTraffic = new Map<string, number>();
+        for (let [key, weight] of pairTraffic) {
+            let [a, b] = key.split("|");
+            let ma = machineIdOf(a);
+            let mb = machineIdOf(b);
+            if (ma === mb) continue;
+            let mk = pairKey(ma, mb);
+            machinePairTraffic.set(mk, (machinePairTraffic.get(mk) || 0) + weight);
+        }
+        // Sum thread-pair path value flows up to machine pairs, keeping direction (fwd = lower machine id → higher).
+        let machinePairPv = new Map<string, { fwd: number; back: number }>();
+        for (let [key, pv] of pairPv) {
+            let [a, b] = key.split("|");
+            let ma = machineIdOf(a);
+            let mb = machineIdOf(b);
+            if (ma === mb) continue;
+            let mk = pairKey(ma, mb);
+            let entry = machinePairPv.get(mk);
+            if (!entry) {
+                entry = { fwd: 0, back: 0 };
+                machinePairPv.set(mk, entry);
+            }
+            // The thread pair's fwd direction may be flipped relative to the machine pair's ordering.
+            if (ma < mb) {
+                entry.fwd += pv.fwd;
+                entry.back += pv.back;
+            } else {
+                entry.fwd += pv.back;
+                entry.back += pv.fwd;
+            }
+        }
+
+        let nodes: LatencyGraphNode[] = [...machineRespondedThreads.keys()].map(machineId => {
+            let allThreads = machineAllThreads.get(machineId) || [];
+            let totals = sumTraffic(allThreads, trafficMaps);
+            return {
+                id: machineId,
+                labelLines: machineLabelLines({ machineId, threads: allThreads, trafficMaps, ip: machineIp.get(machineId), networks: machineNetworks.get(machineId) || [] }),
+                weight: totals.valuesSent + totals.valuesReceived,
+            };
+        });
+        let links: LatencyGraphLink[] = [];
+        for (let [key, latencyMs] of machinePairLatency) {
+            let [source, destination] = key.split("|");
+            let pv = machinePairPv.get(key);
+            let extraLabel: LatencyGraphLabelLine | undefined;
+            if (pv && (pv.fwd || pv.back)) {
+                extraLabel = { text: `↑${formatNumber(pv.fwd)}/s ↓${formatNumber(pv.back)}/s values`, color: PATHVALUE_COLOR };
+            }
+            links.push({ source, destination, latencyMs, weight: machinePairTraffic.get(key) || 0, valueWeight: pv && pv.fwd + pv.back || 0, extraLabel });
+        }
+
+        // One row per thread node, grouped so a machine's threads sit together; the selected machine sorts to the top.
+        // Single composite key: selected-first, then machine, then thread — the low separator keeps segments ordered.
+        let rows = nodeIds.filter(nodeId => respondedSet.has(nodeId)).map(nodeId => buildNodeRow({ nodeId, runner: runnerByNode.get(nodeId), info: infoByNode.get(nodeId), traffic: trafficMaps.get(nodeId), machineIp, machineNetworks }));
+        let selected = selectedMachineParam.value;
+        let sep = String.fromCharCode(1);
+        sort(rows, row => `${row.machineId === selected ? 0 : 1}${sep}${row.machineId}${sep}${row.threadPort}`);
+
+        let unresponsiveNodeIds = nodeIds.filter(nodeId => !respondedSet.has(nodeId));
+
+        return <div className={css.vbox(8).fillWidth}>
+            <div className={css.hbox(14)}>
+                <h2 className={css.margin(0)}>Latency Graph ({machineRespondedThreads.size} machines · {respondedSet.size}/{nodeIds.length} nodes reported)</h2>
+                <div className={css.hbox(0).bord2(0, 0, 70)}>
+                    {([timeInMinute * 5, timeInMinute * 60]).map(windowSize => {
+                        let selected = trafficWindow === windowSize;
+                        return <div
+                            className={css.pad2(12, 6).cursor("pointer")
+                                .hsl(210, selected ? 70 : 0, selected ? 45 : 96).colorhsl(0, 0, selected ? 100 : 30)}
+                            onMouseDown={() => trafficWindowParam.value = windowSize}
+                        >{formatTime(windowSize)}</div>;
+                    })}
+                </div>
+            </div>
+            <div className={css.relative.fillWidth.height(LATENCY_GRAPH_HEIGHT_PX).bord2(0, 0, 85)}>
+                <LatencyGraph
+                    nodes={nodes}
+                    links={links}
+                    formatWeight={weight => formatNumber(weight) + "B/s"}
+                    selectedId={selected || undefined}
+                    onSelectNode={id => selectedMachineParam.value = selectedMachineParam.value === id ? "" : id}
+                />
+            </div>
+            <div className={css.colorhsl(0, 0, 50)}>Click a node to sort its information to the top of the table below.</div>
+            <h2 className={css.margin(0)}>Nodes ({rows.length})</h2>
+            <NodeInfoTable rows={rows} selectedMachine={selected} machineColumns={machineColumns} nodeMachineLatency={nodeMachineLatency} />
+            {unresponsiveNodeIds.length > 0 && <>
+                <h2 className={css.margin(0)}>Unresponsive Nodes ({unresponsiveNodeIds.length})</h2>
+                <UnresponsiveNodesTable nodeIds={unresponsiveNodeIds} machineIp={machineIp} />
+            </>}
+        </div>;
+    }
+}

package/src/diagnostics/misc-pages/PathValueServersSection.tsx

@@ -0,0 +1,130 @@
+module.allowclient = true;
+
+import { qreact } from "../../4-dom/qreact";
+import { css } from "typesafecss";
+import { getBrowserUrlNode } from "../../-f-node-discovery/NodeDiscovery";
+import { sort } from "socket-function/src/misc";
+import { formatNumber } from "socket-function/src/formatting/format";
+import { PATHVALUE_COLOR } from "../../misc/nodeCategoryColors";
+import { Table } from "../../5-diagnostics/Table";
+import type { SummaryEntry } from "sliftutils/treeSummary";
+import { PathValueDirection, PathValueSummaryState } from "../../0-path-value-core/PathValueStats";
+import { AuthorityRangeBar, ID_CHARS, NodeAuthorityInfo, RoutingTableSynced, machineIdOf, threadLabel } from "./RoutingTablePage";
+
+const PATH_SUMMARY_LIMIT = 100;
+const MACHINE_CELL_WIDTH_CH = ID_CHARS + 4;
+
+// One direction's top-N path breakdown for a server, heaviest first. Only mounted when a server row is expanded, so
+// the (heavy) tree is only ever fetched on demand.
+class PathSummaryTable extends qreact.Component<{ nodeId: string; direction: PathValueDirection }> {
+    render() {
+        let { nodeId, direction } = this.props;
+        let summaries: SummaryEntry<PathValueSummaryState>[] | undefined;
+        try {
+            summaries = RoutingTableSynced(getBrowserUrlNode()).getNodePathSummary(nodeId, direction, PATH_SUMMARY_LIMIT);
+        } catch (e: any) {
+            return <div className={css.colorhsl(0, 60, 40)}>{e.stack ?? String(e)}</div>;
+        }
+        if (!summaries) return <div className={css.colorhsl(0, 0, 50)}>Loading...</div>;
+        if (!summaries.length) return <div className={css.colorhsl(0, 0, 50)}>(none)</div>;
+        // getSummaries returns path-sorted; we want the heaviest paths first.
+        sort(summaries, entry => -entry.weight);
+        let rows = summaries.map(entry => ({
+            path: entry.path,
+            count: formatNumber(entry.weight),
+        }));
+        return <Table
+            rows={rows}
+            columns={{
+                path: { title: "Path" },
+                count: { title: "Count" },
+            }}
+        />;
+    }
+}
+
+// One row per path-value server, grouped by machine. Reads/writes lead the line; expanding reveals that server's
+// per-path breakdown for both directions.
+class AuthorityNodeRow extends qreact.Component<{ info: NodeAuthorityInfo; firstOfMachine: boolean }> {
+    state = {
+        expanded: false,
+    };
+    render() {
+        let info = this.props.info;
+        let spec = info.spec!;
+        let expanded = this.state.expanded;
+        let totals = RoutingTableSynced(getBrowserUrlNode()).getNodePathTotals(info.nodeId);
+        let machineId = machineIdOf(info.nodeId);
+        return <div
+            className={css.button.vbox(6).pad2(10).fillWidth.hsl(0, 0, 99)
+                .borderTop(this.props.firstOfMachine ? "2px solid hsl(0, 0%, 78%)" : "1px solid hsl(0, 0%, 90%)")}
+            onClick={() => this.state.expanded = !expanded}
+        >
+            <div className={css.hbox(10).fillWidth}>
+                <span>{expanded ? "▼" : "▶"}</span>
+                <span className={css.width(`${MACHINE_CELL_WIDTH_CH}ch`).flexShrink0.color(PATHVALUE_COLOR)} title="path values received / sent">
+                    ↓{totals ? formatNumber(totals.received) : "…"} ↑{totals ? formatNumber(totals.sent) : "…"}
+                </span>
+                <span className={css.width(`${MACHINE_CELL_WIDTH_CH}ch`).flexShrink0.colorhsl(0, 0, 45)} title={machineId}>
+                    {this.props.firstOfMachine ? machineId.slice(0, ID_CHARS) : ""}
+                </span>
+                <span className={css.boldStyle} title={info.nodeId}>{threadLabel(info.nodeId)}</span>
+                <span className={css.colorhsl(0, 0, 45)}>{spec.routeStart.toFixed(4)} - {spec.routeEnd.toFixed(4)}</span>
+                <AuthorityRangeBar start={spec.routeStart} end={spec.routeEnd} />
+                {spec.excludeDefault && <span className={css.colorhsl(0, 70, 35)}>(excludes default)</span>}
+            </div>
+            {expanded &&
+                <div className={css.hbox(16).wrap.fillWidth.alignItems("flex-start")} onClick={e => e.stopPropagation()}>
+                    <div className={css.vbox(4)}>
+                        <div className={css.boldStyle.color(PATHVALUE_COLOR)}>Received (↓) — top {PATH_SUMMARY_LIMIT} paths</div>
+                        <PathSummaryTable nodeId={info.nodeId} direction="received" />
+                    </div>
+                    <div className={css.vbox(4)}>
+                        <div className={css.boldStyle.color(PATHVALUE_COLOR)}>Sent (↑) — top {PATH_SUMMARY_LIMIT} paths</div>
+                        <PathSummaryTable nodeId={info.nodeId} direction="sent" />
+                    </div>
+                </div>
+            }
+        </div>;
+    }
+}
+
+// Invalidate: drop every cached synced call for this node so the whole page's data disappears and refetches. Clear:
+// wipe the in-memory path-value stats (totals and trees) on every node, then invalidate so the now-empty stats reload.
+function invalidateRoutingTable(): void {
+    RoutingTableSynced(getBrowserUrlNode()).resetAll();
+}
+async function clearAllPathStats(nodeIds: string[]): Promise<void> {
+    let synced = RoutingTableSynced(getBrowserUrlNode());
+    await Promise.all(nodeIds.map(nodeId => synced.clearNodePathStats.promise(nodeId).catch(() => { })));
+    synced.resetAll();
+}
+
+export class PathValueServersSection extends qreact.Component<{ infos: NodeAuthorityInfo[] }> {
+    render() {
+        let infos = this.props.infos;
+        let allNodeIds = infos.map(x => x.nodeId);
+        let routableInfos = infos.filter(x => x.spec && x.spec.routeStart >= 0 && x.spec.routeEnd >= 0);
+        // Group each server's threads under their machine (machine, then thread), so a machine's servers sit together.
+        let sep = String.fromCharCode(1);
+        sort(routableInfos, x => `${machineIdOf(x.nodeId)}${sep}${threadLabel(x.nodeId)}`);
+
+        let buttonClass = css.pad2(12, 8).button.bord2(0, 0, 20).hsl(0, 0, 100).whiteSpace("nowrap");
+        return <div className={css.vbox(8).fillWidth}>
+            <div className={css.hbox(12).alignItems("center")}>
+                <h2 className={css.margin(0)}>Path Value Servers ({routableInfos.length})</h2>
+                <button className={buttonClass} onClick={() => invalidateRoutingTable()}>Invalidate</button>
+                <button className={buttonClass} onClick={() => void clearAllPathStats(allNodeIds)}>Clear stats</button>
+            </div>
+            <div className={css.fontSize(13).colorhsl(0, 0, 45)}>
+                Path values each server has received (↓) and sent (↑) since startup or the last clear. Expand a server for its top {PATH_SUMMARY_LIMIT} paths in each direction.
+            </div>
+            <div className={css.vbox(0).fillWidth.bord2(0, 0, 88)}>
+                {routableInfos.map((info, i) => {
+                    let firstOfMachine = i === 0 || machineIdOf(routableInfos[i - 1].nodeId) !== machineIdOf(info.nodeId);
+                    return <AuthorityNodeRow key={info.nodeId} info={info} firstOfMachine={firstOfMachine} />;
+                })}
+            </div>
+        </div>;
+    }
+}