fix: repair EM observation web charts

2026-08-07 09:46:51 +08:00
parent 8b82467618
commit 05cfd673f5
6 changed files with 1036 additions and 14 deletions
@@ -21,13 +21,34 @@ main { max-width: 1500px; margin: auto; padding: 22px 30px 36px; }
 .summary-value { border-bottom: 1px solid var(--grid); padding: 4px 0; } .summary-value small { display: block; color: #66707a; }
 .world-stack { position: relative; width: 100%; min-height: 520px; border: 1px solid var(--grid); overflow: hidden; background: #fff; }
 #occupancy-grid, #world-overlay { position: absolute; inset: 0; width: 100%; height: 100%; } #world-overlay { pointer-events: none; }
-#ls-st, #kinematics { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; }
+main > section[hidden] { display: none !important; }
+#ls-st:not([hidden]), #kinematics:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; }
 .chart { min-height: 280px; border: 1px solid var(--grid); padding: 8px; } .chart svg { display: block; width: 100%; height: 244px; }
 .chart-title { font-size: 14px; font-weight: 600; } .chart-note { min-height: 20px; color: #66707a; font-size: 12px; }
 .chart-grid { stroke: var(--grid); stroke-width: .55; } .chart-axis { stroke: #59636d; stroke-width: .8; } .chart-data { fill: none; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
 .chart-solid { stroke: var(--current-trajectory); } .chart-dashed { stroke: var(--previous-trajectory); stroke-dasharray: 5 4; } .chart-limit { stroke: var(--failure); stroke-dasharray: 3 3; }
 .axis-label { fill: #48515b; font: 11px sans-serif; } .axis-tick { fill: #66707a; font: 10px sans-serif; }
-.world-line { fill: none; stroke-width: 1.1; vector-effect: non-scaling-stroke; } .world-static { stroke: #8d959d; } .world-future { stroke: #b6bec6; stroke-dasharray: 5 4; } .world-active { stroke: #1769aa; } .world-previous { stroke: #8d959d; stroke-dasharray: 5 4; } .world-marker { fill: #d87918; stroke: #ffffff; stroke-width: .8; }
+.axis-label-x, .axis-label-y { fill: #48515b; font: 11px sans-serif; } .axis-tick-x, .axis-tick-y { fill: #66707a; font: 10px sans-serif; }
+.chart-annotation-line { stroke: var(--handoff); stroke-width: .8; stroke-dasharray: 2 2; }
+.chart-annotation-point { fill: var(--handoff); stroke: #ffffff; stroke-width: .6; }
+.chart-annotation-label { fill: var(--handoff); font: 10px sans-serif; }
+.world-line { fill: none; vector-effect: non-scaling-stroke; }
+.world-static { stroke: #8d959d; stroke-width: .9; }
+.world-future { stroke: #b6bec6; stroke-dasharray: 5 4; stroke-width: .85; }
+.world-active { stroke: #1769aa; stroke-width: 1.1; }
+.world-previous { stroke: #8d959d; stroke-dasharray: 5 4; stroke-width: .85; }
+.world-coarse { stroke: #9aa1a8; stroke-opacity: .48; stroke-dasharray: 5 4; stroke-width: .85; }
+.world-local-g2 { stroke: #4f5963; stroke-width: .95; }
+.world-segment-active { stroke: #5d91bd; stroke-opacity: .62; stroke-width: 1.0; }
+.world-direction-inactive { stroke: #c4cad0; stroke-opacity: .52; stroke-dasharray: 4 4; stroke-width: .8; }
+.world-current { stroke: #1769aa; stroke-width: 1.15; }
+.world-marker { fill: #d87918; stroke: #ffffff; stroke-width: .8; }
+.marker-vehicle .vehicle-outline { fill: none; stroke: #20252b; stroke-width: .7; }
+.marker-vehicle .vehicle-heading { stroke: #20252b; stroke-width: .8; }
+.marker-plan-start { fill: #3f7d46; stroke: #ffffff; stroke-width: .6; }
+.marker-gear-switch { fill: #d87918; stroke: #ffffff; stroke-width: .7; }
+.marker-final-goal { fill: #1769aa; stroke: #ffffff; stroke-width: .7; }
+.world-empty-state { fill: #66707a; font-size: .42; }
 .history-panel, .configuration-panel { margin-bottom: 26px; } #cycle-history { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 12px; } th, td { padding: 6px 8px; border-bottom: 1px solid var(--grid); text-align: left; white-space: nowrap; } th { color: #59636d; font-weight: 600; }
 .config-group { margin: 13px 0; border-top: 1px solid var(--grid); } .config-group h3 { margin: 8px 0; font-size: 13px; } .config-entry { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(130px, 1fr) minmax(90px, 1fr) 70px; gap: 8px; padding: 4px 0; border-bottom: 1px dotted #e5e8eb; } .raw { color: #66707a; font-family: ui-monospace, Consolas, monospace; }
 .failure { color: var(--failure); } .notice { color: var(--handoff); }
@@ -25,7 +25,7 @@

  function getBounds() {
    const values = [];
-    const include = points => safeArray(points).forEach(point => { if (finite(point.x) && finite(point.y)) values.push(point); });
+    const include = points => safeArray(points).forEach(point => { if (point && finite(point.x) && finite(point.y)) values.push(point); });
    const snapshot = state.staticSnapshot || {};
    include([ { x: snapshot.worldBounds && snapshot.worldBounds.xMin, y: snapshot.worldBounds && snapshot.worldBounds.yMin }, { x: snapshot.worldBounds && snapshot.worldBounds.xMax, y: snapshot.worldBounds && snapshot.worldBounds.yMax } ]);
    safeArray(snapshot.staticPolylines).forEach(line => include(line.points)); safeArray(snapshot.directionSegments).forEach(line => include(line.points)); safeArray(snapshot.staticMarkers).forEach(marker => include([marker.position]));
@@ -52,21 +52,89 @@
    const bounds = getBounds(); drawOccupancy(bounds); overlay.replaceChildren(); overlay.setAttribute("viewBox", `${bounds.xMin} ${-bounds.yMax} ${bounds.xMax - bounds.xMin} ${bounds.yMax - bounds.yMin}`); overlay.setAttribute("preserveAspectRatio", "xMidYMid meet");
    const snapshot = state.staticSnapshot || {}; const frame = state.frame || {};
    const addLine = (line, css) => { const path = worldPath(line.points); if (path) overlay.append(svg("path", { d: path, class: "world-line " + css })); };
-    safeArray(snapshot.staticPolylines).forEach(line => addLine(line, "world-static"));
-    safeArray(snapshot.directionSegments).forEach(segment => addLine(segment, segment.segmentIndex === frame.activeSegmentIndex ? "world-active" : segment.segmentIndex < frame.activeSegmentIndex ? "world-static" : "world-future"));
-    safeArray(frame.dynamicPolylines).forEach(line => addLine(line, line.lineStyle === 1 ? "world-previous" : "world-active"));
-    safeArray(snapshot.staticMarkers).concat(safeArray(frame.dynamicMarkers)).forEach(marker => { if (!marker.position || !finite(marker.position.x) || !finite(marker.position.y)) return; const diamond = svg("path", { d: `M ${marker.position.x} ${-marker.position.y - .18} L ${marker.position.x + .18} ${-marker.position.y} L ${marker.position.x} ${-marker.position.y + .18} L ${marker.position.x - .18} ${-marker.position.y} Z`, class: "world-marker" }); overlay.append(diamond); const label = svg("text", { x: marker.position.x + .2, y: -marker.position.y - .2, fill: "#20252b", "font-size": ".32" }); label.textContent = marker.labelChinese || ""; overlay.append(label); });
-    if (frame.vehiclePose && finite(frame.vehiclePose.x) && finite(frame.vehiclePose.y)) overlay.append(svg("circle", { cx: frame.vehiclePose.x, cy: -frame.vehiclePose.y, r: ".18", fill: "#20252b" }));
+    const staticClass = line => { const kind = String(line.kind || "").toLowerCase(); if (kind === "global" || kind === "coarse") return "world-coarse"; if (kind.includes("local-g2") || kind.includes("g2")) return "world-local-g2"; return "world-static"; };
+    const dynamicClass = line => { const kind = String(line.kind || "").toLowerCase(); if (kind === "current") return "world-current"; if (kind === "previous" || line.lineStyle === 1) return "world-previous"; return "world-current"; };
+    safeArray(snapshot.staticPolylines).forEach(line => addLine(line, staticClass(line)));
+    safeArray(snapshot.directionSegments).forEach(segment => addLine(segment, segment.segmentIndex === frame.activeSegmentIndex ? "world-segment-active" : "world-direction-inactive"));
+    safeArray(frame.dynamicPolylines).forEach(line => addLine(line, dynamicClass(line)));
+    const hasPath = safeArray(snapshot.staticPolylines).concat(safeArray(snapshot.directionSegments), safeArray(frame.dynamicPolylines))
+      .some(line => safeArray(line && line.points).some(point => point && finite(point.x) && finite(point.y)));
+    const appendMarker = marker => {
+      if (!marker.position || !finite(marker.position.x) || !finite(marker.position.y)) return;
+      const x = marker.position.x, y = -marker.position.y; const kind = String(marker.kind || "").toLowerCase();
+      if (kind === "vehicle") {
+        const pose = frame.vehiclePose; const heading = pose && finite(pose.headingRadians) ? pose.headingRadians : 0;
+        const cos = Math.cos(heading), sin = Math.sin(heading);
+        const corners = [[.38, .18], [-.38, .18], [-.38, -.18], [.38, -.18]].map(([dx, dy]) => {
+          const wx = marker.position.x + dx * cos - dy * sin; const wy = marker.position.y + dx * sin + dy * cos; return `${wx} ${-wy}`;
+        });
+        const group = svg("g", { class: "marker-vehicle" });
+        group.append(svg("path", { d: `M ${corners[0]} L ${corners[1]} L ${corners[2]} L ${corners[3]} Z`, class: "vehicle-outline" }));
+        group.append(svg("line", { x1: x, y1: y, x2: x + .22 * cos, y2: y - .22 * sin, class: "vehicle-heading" }));
+        overlay.append(group);
+      } else if (kind === "plan-start") {
+        overlay.append(svg("circle", { cx: x, cy: y, r: ".12", class: "marker-plan-start" }));
+      } else if (kind === "gear-switch" || kind === "gear-switch-end") {
+        const size = ".14"; overlay.append(svg("path", { d: `M ${x} ${y - size} L ${x + size} ${y} L ${x} ${y + size} L ${x - size} ${y} Z`, class: "marker-gear-switch" }));
+      } else if (kind === "final-goal") {
+        const size = ".13"; overlay.append(svg("path", { d: `M ${x - size} ${y - size} L ${x + size} ${y - size} L ${x + size} ${y + size} L ${x - size} ${y + size} Z`, class: "marker-final-goal" }));
+      } else {
+        const size = ".18"; overlay.append(svg("path", { d: `M ${x} ${y - size} L ${x + size} ${y} L ${x} ${y + size} L ${x - size} ${y} Z`, class: "world-marker" }));
+      }
+      const label = svg("text", { x: x + .2, y: y - .2, fill: "#20252b", "font-size": ".32" }); label.textContent = marker.labelChinese || ""; overlay.append(label);
+    };
+    safeArray(snapshot.staticMarkers).concat(safeArray(frame.dynamicMarkers)).forEach(appendMarker);
+    if (!hasPath) {
+      const empty = svg("text", { x: (bounds.xMin + bounds.xMax) / 2, y: -((bounds.yMin + bounds.yMax) / 2), class: "world-empty-state", "text-anchor": "middle" });
+      empty.textContent = "未收到 Local G2 路径"; overlay.append(empty);
+    }
  }

-  function range(points) { const flat = safeArray(points).filter(point => finite(point.x) && finite(point.y)); if (!flat.length) return { x0: 0, x1: 1, y0: 0, y1: 1 }; let x0 = Math.min(...flat.map(point => point.x)), x1 = Math.max(...flat.map(point => point.x)), y0 = Math.min(...flat.map(point => point.y)), y1 = Math.max(...flat.map(point => point.y)); const xPad = Math.max(x1 - x0, 1) * .05, yPad = Math.max(y1 - y0, 1) * .08; return { x0: x0 - xPad, x1: x1 + xPad, y0: y0 - yPad, y1: y1 + yPad }; }
+  function niceDomain(values, padding = .05, unitFloor = 1e-6) {
+    const flat = safeArray(values).filter(finite);
+    if (!flat.length) return { min: 0, max: 1 };
+    let min = Math.min(...flat), max = Math.max(...flat);
+    const span = max - min;
+    if (span < unitFloor) {
+      const pad = Math.max(Math.abs(min) * padding, unitFloor); min -= pad; max += pad;
+    } else {
+      const pad = span * padding; min -= pad; max += pad;
+    }
+    const tickSpan = max - min;
+    if (tickSpan > 0) {
+      const roughStep = tickSpan / 4;
+      const magnitude = Math.pow(10, Math.floor(Math.log10(roughStep)));
+      const normalized = roughStep / magnitude;
+      const step = normalized >= 5 ? 5 : normalized >= 2 ? 2 : 1;
+      const niceStep = step * magnitude; min = Math.floor(min / niceStep) * niceStep; max = Math.ceil(max / niceStep) * niceStep;
+    }
+    if (!(max > min)) max = min + 1;
+    return { min, max };
+  }
+  function formatTick(value) {
+    if (!finite(value)) return "";
+    if (value === 0) return "0";
+    const abs = Math.abs(value); const precision = abs >= 100 ? 1 : abs >= 1 ? 2 : 4;
+    return Number(value.toFixed(precision)).toString();
+  }
  function renderChart(id, chart) {
    const host = document.getElementById(id); if (!host) return; host.replaceChildren(); const title = element("div", "chart-title", chart ? chart.chineseTitle : id); const noteText = id === "jerk-t" ? "末点后无时间区间" : chart ? chart.noteChinese : "等待当前周期数据"; const note = element("div", "chart-note", noteText); host.append(title, note);
-    const all = chart ? safeArray(chart.series).flatMap(series => safeArray(series.points)) : []; const domain = range(all); const width = 640, height = 244, left = 52, right = 16, top = 8, bottom = 36; const sx = value => left + (value - domain.x0) * (width - left - right) / (domain.x1 - domain.x0); const sy = value => height - bottom - (value - domain.y0) * (height - top - bottom) / (domain.y1 - domain.y0); const graph = svg("svg", { viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": chart ? chart.chineseTitle : id });
-    for (let tick = 0; tick <= 4; tick += 1) { const x = left + tick * (width - left - right) / 4, y = top + tick * (height - top - bottom) / 4; graph.append(svg("line", { x1: x, y1: top, x2: x, y2: height - bottom, class: "chart-grid" }), svg("line", { x1: left, y1: y, x2: width - right, y2: y, class: "chart-grid" })); const xt = svg("text", { x, y: height - bottom + 14, class: "axis-tick", "text-anchor": "middle" }); xt.textContent = (domain.x0 + tick * (domain.x1 - domain.x0) / 4).toPrecision(3); graph.append(xt); }
+    const all = chart ? safeArray(chart.series).flatMap(series => safeArray(series.points)) : [];
+    const xDomain = niceDomain(all.map(point => point.x)), yDomain = niceDomain(all.map(point => point.y));
+    const domain = { x0: xDomain.min, x1: xDomain.max, y0: yDomain.min, y1: yDomain.max };
+    const width = 640, height = 244, left = 58, right = 16, top = 8, bottom = 36;
+    const plotWidth = width - left - right, plotHeight = height - top - bottom;
+    const sx = value => left + (value - domain.x0) * plotWidth / (domain.x1 - domain.x0); const sy = value => height - bottom - (value - domain.y0) * plotHeight / (domain.y1 - domain.y0); const graph = svg("svg", { viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": chart ? chart.chineseTitle : id });
+    for (let tick = 0; tick <= 4; tick += 1) {
+      const x = left + tick * plotWidth / 4, y = top + tick * plotHeight / 4;
+      graph.append(svg("line", { x1: x, y1: top, x2: x, y2: height - bottom, class: "chart-grid" }), svg("line", { x1: left, y1: y, x2: width - right, y2: y, class: "chart-grid" }));
+      const xt = svg("text", { x, y: height - bottom + 14, class: "axis-tick axis-tick-x", "text-anchor": "middle" }); xt.textContent = formatTick(domain.x0 + tick * (domain.x1 - domain.x0) / 4); graph.append(xt);
+      const yt = svg("text", { x: left - 7, y, class: "axis-tick axis-tick-y", "text-anchor": "end", "dominant-baseline": "middle" }); yt.textContent = formatTick(domain.y1 - tick * (domain.y1 - domain.y0) / 4); graph.append(yt);
+    }
    graph.append(svg("line", { x1: left, y1: top, x2: left, y2: height - bottom, class: "chart-axis" }), svg("line", { x1: left, y1: height - bottom, x2: width - right, y2: height - bottom, class: "chart-axis" }));
-    safeArray(chart && chart.series).forEach(series => { const points = safeArray(series.points).filter(point => finite(point.x) && finite(point.y)); if (!points.length) return; const d = points.map((point, index) => (index ? "L" : "M") + sx(point.x) + " " + sy(point.y)).join(" "); const lineClass = series.lineStyle === 1 ? "chart-dashed" : series.lineStyle === 2 ? "chart-limit" : "chart-solid"; graph.append(svg("path", { d, class: "chart-data " + lineClass })); });
-    const xLabel = svg("text", { x: (left + width - right) / 2, y: height - 4, class: "axis-label", "text-anchor": "middle" }); xLabel.textContent = chart ? chart.xAxisLabel : "x"; const yLabel = svg("text", { x: 13, y: (top + height - bottom) / 2, class: "axis-label", transform: `rotate(-90 13 ${(top + height - bottom) / 2})`, "text-anchor": "middle" }); yLabel.textContent = chart ? chart.yAxisLabel : "y"; graph.append(xLabel, yLabel); host.append(graph);
+    safeArray(chart && chart.series).forEach(series => { const points = safeArray(series.points).filter(point => finite(point.x) && finite(point.y)); if (!points.length) return; const d = points.map((point, index) => (index ? "L" : "M") + sx(point.x) + " " + sy(point.y)).join(" "); const kind = String(series.kind || "").toLowerCase(); const lineClass = kind === "limit" || series.lineStyle === 2 ? "chart-limit" : kind === "previous" || series.lineStyle === 1 ? "chart-dashed" : "chart-solid"; graph.append(svg("path", { d, class: "chart-data " + lineClass })); });
+    safeArray(chart && chart.annotations).forEach(annotation => { if (!finite(annotation.x)) return; const ax = sx(annotation.x); graph.append(svg("line", { x1: ax, y1: top, x2: ax, y2: height - bottom, class: "chart-annotation-line" })); if (finite(annotation.y)) graph.append(svg("circle", { cx: ax, cy: sy(annotation.y), r: 3, class: "chart-annotation-point" })); const label = svg("text", { x: Math.min(ax + 4, width - right - 2), y: top + 10, class: "chart-annotation-label" }); label.textContent = annotation.labelChinese || ""; graph.append(label); });
+    const xLabel = svg("text", { x: (left + width - right) / 2, y: height - 4, class: "axis-label axis-label-x", "text-anchor": "middle" }); xLabel.textContent = chart ? chart.xAxisLabel : "x"; const yLabel = svg("text", { x: 13, y: (top + height - bottom) / 2, class: "axis-label axis-label-y", transform: `rotate(-90 13 ${(top + height - bottom) / 2})`, "text-anchor": "middle" }); yLabel.textContent = chart ? chart.yAxisLabel : "y"; graph.append(xLabel, yLabel); host.append(graph);
  }

  function renderOverview() { renderWorld(); const summary = document.getElementById("overview-summary"); summary.replaceChildren(); const frame = state.frame || {}; safeArray(frame.statusValues).concat([{ chineseName: "活动方向段", rawName: "SegmentIndex", value: String(frame.activeSegmentIndex ?? "不可用"), unit: "", severity: "normal" }, { chineseName: "方向", rawName: "Direction", value: frame.activeDirection || "不可用", unit: "", severity: "normal" }]).forEach(value => { const cell = element("div", "summary-value " + (value.severity || "")); const name = element("small", "", `${value.chineseName || "不可用"} · ${value.rawName || ""}`); const data = element("div", "", `${value.value || "不可用"} ${value.unit || ""}`.trim()); cell.append(name, data); summary.append(cell); }); }
@@ -79,5 +147,17 @@
  function receiveFrame(payload) { state.frame = payload.snapshot || null; state.history = safeArray(payload.history); state.lastFrameAt = Date.now(); if (!state.ended) setLiveState(state.frame && state.frame.sessionStateChinese || "运行中"); renderAll(); }
  function startEvents() { const events = new EventSource(authorized("/api/events")); events.addEventListener("frame", event => { try { receiveFrame(JSON.parse(event.data)); } catch (error) { state.redrawEnabled[state.activeTab] = false; setLiveState("页面绘图异常", "failure"); } }); events.addEventListener("end", () => { state.ended = true; events.close(); setLiveState("会话已结束"); }); events.onerror = () => { if (!state.ended) setLiveState("连接中断，正在重连", "notice"); }; }
  async function boot() { installTabs(); ["overview", "ls-st", "kinematics", "history-config"].forEach(tab => { state.redrawEnabled[tab] = true; }); try { const response = await fetch(authorized("/api/bootstrap"), { cache: "no-store" }); if (!response.ok) throw new Error("bootstrap failed"); const bootstrap = await response.json(); state.staticSnapshot = bootstrap.staticSnapshot || bootstrap; state.refreshRateHz = finite(bootstrap.refreshRateHz) && bootstrap.refreshRateHz > 0 ? bootstrap.refreshRateHz : 10; renderAll(); startEvents(); window.setInterval(updateConnectionState, 250); } catch (error) { setLiveState("页面绘图异常", "failure"); } }
-  window.addEventListener("error", () => { state.redrawEnabled[state.activeTab] = false; setLiveState("页面绘图异常", "failure"); }); window.addEventListener("unhandledrejection", () => { state.redrawEnabled[state.activeTab] = false; setLiveState("页面绘图异常", "failure"); }); boot();
+  window.addEventListener("error", () => { state.redrawEnabled[state.activeTab] = false; setLiveState("页面绘图异常", "failure"); }); window.addEventListener("unhandledrejection", () => { state.redrawEnabled[state.activeTab] = false; setLiveState("页面绘图异常", "failure"); });
+  if (window.__TRAJECTORY_VISUALIZATION_TEST__ === true) {
+    ["overview", "ls-st", "kinematics", "history-config"].forEach(tab => { state.redrawEnabled[tab] = true; });
+    window.__trajectoryVisualizationTestHooks = Object.freeze({
+      setBootstrap(snapshot) { state.staticSnapshot = snapshot || null; },
+      receiveFrame,
+      renderActiveTab,
+      installTabs
+    });
+    installTabs();
+  } else {
+    boot();
+  }
 })();
@@ -20,7 +20,23 @@ internal static class WebAssetChecks
        Verification.True(html.Contains("生效配置"), "configuration panel");
        Verification.True(css.Contains("--current-trajectory: #1769aa"), "scientific current color");
        Verification.True(css.Contains("stroke-width: 1.1"), "thin scientific line");
+        Verification.True(css.Contains("main > section[hidden] { display: none !important; }"),
+            "hidden sections cannot be overridden by grid rules");
+        Verification.True(css.Contains(".axis-tick-y"), "SVG y ticks have a semantic class");
+        Verification.True(css.Contains(".axis-label-y"), "SVG y labels have a semantic class");
+        Verification.True(css.Contains(".world-empty-state"), "empty overview has a semantic state");
+        Verification.True(css.Contains(".world-coarse"), "coarse path semantic class");
+        Verification.True(css.Contains(".world-local-g2"), "Local G2 semantic class");
+        Verification.True(css.Contains(".world-segment-active"), "active direction semantic class");
+        Verification.True(css.Contains(".world-current"), "current trajectory semantic class");
+        Verification.True(css.Contains(".marker-vehicle"), "vehicle marker semantic class");
+        Verification.True(css.Contains(".marker-plan-start"), "plan start marker semantic class");
+        Verification.True(css.Contains(".marker-gear-switch"), "gear-switch marker semantic class");
+        Verification.True(css.Contains(".marker-final-goal"), "final goal marker semantic class");
        Verification.True(js.Contains("末点后无时间区间"), "jerk terminal explanation");
+        Verification.True(js.Contains("__TRAJECTORY_VISUALIZATION_TEST__"), "test hook flag is explicit");
+        Verification.True(js.Contains("Object.freeze"), "test hooks are frozen");
+        Verification.True(js.Contains("未收到 Local G2 路径"), "empty overview names the missing source");
        Verification.True(html.Contains("occupancy-grid"), "single occupancy canvas exists");
        Verification.True(html.Contains("world-overlay"), "SVG trajectory overlay exists");
        Verification.True(js.Contains("atob"), "compact occupancy bitset is decoded in browser");
@@ -0,0 +1,333 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { test } from "node:test";
+import { JSDOM } from "jsdom";
+
+const webDir = new URL("../../TrajectoryPlanningVisualization/Web/", import.meta.url);
+const readWebFile = (name) => readFileSync(new URL(name, webDir), "utf8");
+
+function makeStaticSnapshot({ empty = false } = {}) {
+  return {
+    sessionNameChinese: "合成轨迹规划观察",
+    worldBounds: { xMin: 0, xMax: 12, yMin: 0, yMax: 8 },
+    occupancyGrid: null,
+    staticPolylines: empty
+      ? []
+      : [
+          {
+            id: "global",
+            legendChinese: "全局参考路径",
+            kind: "global",
+            lineStyle: 0,
+            points: [
+              { x: 0, y: 1 },
+              { x: 3, y: 1 },
+              { x: 6, y: 2 },
+              { x: 8, y: 4 },
+              { x: 11, y: 6 }
+            ]
+          },
+          {
+            id: "local-g2",
+            legendChinese: "完整 Local G2 路径",
+            kind: "local-g2",
+            lineStyle: 0,
+            points: [
+              { x: 0.2, y: 1 },
+              { x: 3.2, y: 1.1 },
+              { x: 6.1, y: 2.1 },
+              { x: 8.1, y: 4.1 },
+              { x: 10.9, y: 5.9 }
+            ]
+          }
+        ],
+    staticMarkers: empty
+      ? []
+      : [
+          { id: "gear-1", kind: "gear-switch", labelChinese: "换向 1", position: { x: 6, y: 2 } },
+          { id: "gear-1-end", kind: "gear-switch-end", labelChinese: "换向点 1 / s_end", position: { x: 6, y: 2 } },
+          { id: "final-goal", kind: "final-goal", labelChinese: "终点 / s_end", position: { x: 11, y: 6 } }
+        ],
+    directionSegments: empty
+      ? []
+      : [
+          {
+            segmentIndex: 0,
+            direction: "forward",
+            startsAtGearSwitch: false,
+            endsAtGearSwitch: true,
+            points: [
+              { x: 0, y: 1 },
+              { x: 3, y: 1 },
+              { x: 6, y: 2 }
+            ]
+          },
+          {
+            segmentIndex: 1,
+            direction: "reverse",
+            startsAtGearSwitch: true,
+            endsAtGearSwitch: false,
+            points: [
+              { x: 6, y: 2 },
+              { x: 8, y: 4 },
+              { x: 11, y: 6 }
+            ]
+          }
+        ],
+    configurationGroups: []
+  };
+}
+
+function chart(id, title, xAxis, yAxis, points, annotations = []) {
+  return {
+    id,
+    chineseTitle: title,
+    xAxisLabel: xAxis,
+    yAxisLabel: yAxis,
+    noteChinese: "",
+    series: [
+      {
+        id: id + "-current",
+        legend: "当前轨迹",
+        lineStyle: 0,
+        points: points.map(([x, y]) => ({ x, y }))
+      }
+    ],
+    annotations
+  };
+}
+
+function makeDynamicSnapshot({ empty = false } = {}) {
+  if (empty) {
+    return {
+      sequence: 1,
+      observedAtUtc: "2026-08-06T00:00:00Z",
+      sessionStateChinese: "运行中",
+      activeSegmentIndex: 0,
+      activeDirection: "forward",
+      vehiclePose: null,
+      dynamicPolylines: [],
+      dynamicMarkers: [],
+      charts: [],
+      statusValues: [],
+      cycleSummary: {
+        cycleVersion: 1,
+        occurredAtUtc: "2026-08-06T00:00:00Z",
+        status: "成功",
+        published: true,
+        planningElapsedMilliseconds: 4.2,
+        segmentIndex: 0,
+        direction: "forward",
+        longitudinalMode: "full",
+        terminalType: "goal",
+        terminalVelocity: 0,
+        terminalAcceleration: 0,
+        failureReason: ""
+      }
+    };
+  }
+
+  return {
+    sequence: 1,
+    observedAtUtc: "2026-08-06T00:00:00Z",
+    sessionStateChinese: "合成数据运行中",
+    activeSegmentIndex: 0,
+    activeDirection: "forward",
+    vehiclePose: { x: 2, y: 1, headingRadians: 0 },
+    dynamicPolylines: [
+      {
+        id: "previous",
+        legendChinese: "上一轮轨迹",
+        kind: "previous",
+        lineStyle: 1,
+        points: [
+          { x: 1, y: 1 },
+          { x: 2.5, y: 1 },
+          { x: 4, y: 1.3 }
+        ]
+      },
+      {
+        id: "current",
+        legendChinese: "当前轨迹",
+        kind: "current",
+        lineStyle: 0,
+        points: [
+          { x: 2, y: 1 },
+          { x: 3.8, y: 1.2 },
+          { x: 5.8, y: 1.9 }
+        ]
+      }
+    ],
+    dynamicMarkers: [
+      { id: "vehicle", kind: "vehicle", labelChinese: "车辆", position: { x: 2, y: 1 } },
+      { id: "plan-start", kind: "plan-start", labelChinese: "计划起点", position: { x: 2, y: 1 } },
+      { id: "gear-switch-end", kind: "gear-switch-end", labelChinese: "换向点 1 / s_end", position: { x: 6, y: 2 } }
+    ],
+    charts: [
+      chart("ls", "横向偏移", "ReferenceS (m)", "l (m)", [[0, 0.05], [2, 0.08], [4, 0.02]], [
+        { id: "ls-s-end", kind: "s-end", labelChinese: "s_end", x: 4 }
+      ]),
+      chart("st", "时空轨迹", "t (s)", "PathS (m)", [[0, 0], [1, 1.2], [2, 3]], [
+        { id: "st-s-end", kind: "s-end", labelChinese: "s_end", x: 2 }
+      ])
+    ],
+    statusValues: [],
+    cycleSummary: {
+      cycleVersion: 1,
+      occurredAtUtc: "2026-08-06T00:00:00Z",
+      status: "成功",
+      published: true,
+      planningElapsedMilliseconds: 4.2,
+      segmentIndex: 0,
+      direction: "forward",
+      longitudinalMode: "full",
+      terminalType: "goal",
+      terminalVelocity: 0,
+      terminalAcceleration: 0,
+      failureReason: ""
+    }
+  };
+}
+
+function fakeContext() {
+  return {
+    setTransform() {},
+    clearRect() {},
+    fillRect() {}
+  };
+}
+
+function loadApp({ staticSnapshot = makeStaticSnapshot(), dynamicSnapshot = makeDynamicSnapshot() } = {}) {
+  const dom = new JSDOM(readWebFile("index.html"), {
+    runScripts: "outside-only",
+    pretendToBeVisual: true,
+    url: "http://127.0.0.1/observation?token=test"
+  });
+  const { window } = dom;
+  window.devicePixelRatio = 1;
+  window.__TRAJECTORY_VISUALIZATION_TEST__ = true;
+  window.__fetchCalled = false;
+  window.__eventSourceCreated = false;
+  window.fetch = async () => {
+    window.__fetchCalled = true;
+    throw new Error("test mode must not fetch");
+  };
+  window.EventSource = class {
+    constructor() {
+      window.__eventSourceCreated = true;
+    }
+
+    close() {}
+  };
+  const style = window.document.createElement("style");
+  style.textContent = readWebFile("app.css");
+  window.document.head.append(style);
+  window.HTMLCanvasElement.prototype.getContext = () => fakeContext();
+  window.eval(readWebFile("app.js"));
+
+  if (window.__trajectoryVisualizationTestHooks) {
+    const hooks = window.__trajectoryVisualizationTestHooks;
+    hooks.setBootstrap(staticSnapshot);
+    hooks.receiveFrame({ snapshot: dynamicSnapshot, history: [] });
+  }
+
+  return dom;
+}
+
+test("tab switching hides inactive sections despite CSS grid rules", () => {
+  const dom = loadApp();
+  const { document, getComputedStyle } = dom.window;
+  const overview = document.querySelector("#overview");
+  const lsSt = document.querySelector("#ls-st");
+  const kinematics = document.querySelector("#kinematics");
+
+  assert.equal(overview.hidden, false);
+  assert.notEqual(getComputedStyle(overview).display, "none");
+
+  document.querySelector('button[data-tab="ls-st"]').click();
+
+  assert.equal(overview.hidden, true);
+  assert.equal(getComputedStyle(overview).display, "none");
+  assert.equal(lsSt.hidden, false);
+  assert.notEqual(getComputedStyle(lsSt).display, "none");
+  assert.equal(kinematics.hidden, true);
+  assert.equal(getComputedStyle(kinematics).display, "none");
+});
+
+test("ST chart renders y ticks, units, and s_end annotation", () => {
+  const dom = loadApp();
+  const { document } = dom.window;
+  document.querySelector('button[data-tab="ls-st"]').click();
+
+  const yTicks = document.querySelectorAll("#st .axis-tick-y");
+  const xTicks = document.querySelectorAll("#st .axis-tick-x");
+  const yLabel = document.querySelector("#st .axis-label-y");
+  const xLabel = document.querySelector("#st .axis-label-x");
+
+  assert.ok(yTicks.length >= 4, "ST renders y tick text");
+  assert.ok(xTicks.length >= 4, "ST renders x tick text");
+  assert.ok([...yTicks].every(tick => tick.textContent.length > 0), "y ticks have readable values");
+  assert.equal(yLabel.textContent, "PathS (m)");
+  assert.equal(xLabel.textContent, "t (s)");
+  assert.ok(document.querySelector("#st .chart-annotation-label")?.textContent.includes("s_end"));
+});
+
+test("ST PathS polyline rises and semantic world layers are ordered", () => {
+  const dom = loadApp();
+  const { document } = dom.window;
+  document.querySelector('button[data-tab="ls-st"]').click();
+  const stPath = document.querySelector("#st path.chart-data");
+  assert.ok(stPath, "ST chart has a polyline");
+  const segments = stPath.getAttribute("d").split(/(?=[ML])/).filter(Boolean);
+  const yValues = segments.map(segment => Number(segment.slice(1).trim().split(/[\s,]+/)[1]));
+  assert.ok(yValues.length >= 3, "ST polyline has at least three rendered points");
+  assert.ok(yValues[1] < yValues[0] && yValues[2] < yValues[1],
+    "ST PathS increases upward in rendered pixel coordinates");
+
+  document.querySelector('button[data-tab="overview"]').click();
+  const overlay = document.querySelector("#world-overlay");
+  const paths = [...overlay.querySelectorAll("path")];
+  const layerClasses = ["world-coarse", "world-local-g2", "world-segment-active", "world-previous", "world-current"];
+  const indices = layerClasses.map(className => paths.findIndex(path => path.classList.contains(className)));
+  layerClasses.forEach((className, index) => assert.ok(indices[index] !== -1, className + " exists"));
+  for (let index = 1; index < indices.length; index += 1) {
+    assert.ok(indices[index - 1] < indices[index], "semantic world layer order is preserved");
+  }
+});
+
+test("vehicle, plan start, gear switch, and final goal use semantic markers", () => {
+  const dom = loadApp();
+  const { document } = dom.window;
+  const overlay = document.querySelector("#world-overlay");
+
+  for (const className of ["marker-vehicle", "marker-plan-start", "marker-gear-switch", "marker-final-goal"]) {
+    assert.ok(overlay.querySelector("." + className), className + " is rendered");
+  }
+  assert.equal(overlay.querySelectorAll(".marker-vehicle circle").length, 0,
+    "vehicle marker is not a fixed pixel circle");
+});
+
+test("empty overview names the missing Local G2 source", () => {
+  const dom = loadApp({
+    staticSnapshot: makeStaticSnapshot({ empty: true }),
+    dynamicSnapshot: makeDynamicSnapshot({ empty: true })
+  });
+  const emptyState = dom.window.document.querySelector("#world-overlay .world-empty-state");
+
+  assert.ok(emptyState, "empty overview renders a visible state");
+  assert.match(emptyState.textContent, /未收到.*Local G2 路径/);
+});
+
+test("test mode exposes frozen hooks without fetch or SSE", () => {
+  const dom = loadApp();
+  const { window } = dom;
+
+  assert.equal(window.__fetchCalled, false);
+  assert.equal(window.__eventSourceCreated, false);
+  assert.ok(window.__trajectoryVisualizationTestHooks, "test hooks are exposed");
+  assert.equal(Object.isFrozen(window.__trajectoryVisualizationTestHooks), true);
+  for (const name of ["setBootstrap", "receiveFrame", "renderActiveTab", "installTabs"]) {
+    assert.equal(typeof window.__trajectoryVisualizationTestHooks[name], "function", name + " hook exists");
+  }
+  assert.equal("state" in window.__trajectoryVisualizationTestHooks, false);
+});
@@ -0,0 +1,558 @@
+{
+  "name": "trajectory-planning-visualization-web-dom-tests",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "trajectory-planning-visualization-web-dom-tests",
+      "devDependencies": {
+        "jsdom": "29.1.1"
+      },
+      "engines": {
+        "node": ">=24"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.1.11",
+      "resolved": "https://registry.npmmirror.com/@asamuzakjp/css-color/-/css-color-5.1.11.tgz",
+      "integrity": "sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@csstools/css-calc": "^3.2.0",
+        "@csstools/css-color-parser": "^4.1.0",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/@asamuzakjp/dom-selector/-/dom-selector-7.1.1.tgz",
+      "integrity": "sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/generational-cache": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@asamuzakjp/generational-cache/-/generational-cache-1.0.1.tgz",
+      "integrity": "sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmmirror.com/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/color-helpers/-/color-helpers-6.1.0.tgz",
+      "integrity": "sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-calc/-/css-calc-3.3.0.tgz",
+      "integrity": "sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-color-parser/-/css-color-parser-4.1.10.tgz",
+      "integrity": "sha512-UZhQLIUyJaaMepqehrCODwCg2KW25vFvLWBmqYFaPclYvvxzj/sG8LBOhBFCp11i9uE7t1EyS+RAoV9tztPFyw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.1.0",
+        "@csstools/css-calc": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.7.tgz",
+      "integrity": "sha512-fQ+05118eQS1cofO3aJpB5efgpBZMvIzwr/sbC8kDLVA5XLG8q1kJV5yzrUAI1f7lvhPnm8fgIjzFB8/O/5Dig==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmmirror.com/@exodus/bytes/-/bytes-1.15.1.tgz",
+      "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsdom": {
+      "version": "29.1.1",
+      "resolved": "https://registry.npmmirror.com/jsdom/-/jsdom-29.1.1.tgz",
+      "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^5.1.11",
+        "@asamuzakjp/dom-selector": "^7.1.1",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.3",
+        "@exodus/bytes": "^1.15.0",
+        "css-tree": "^3.2.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.3.5",
+        "parse5": "^8.0.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.1",
+        "undici": "^7.25.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.1",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmmirror.com/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tldts": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmmirror.com/tldts/-/tldts-7.4.10.tgz",
+      "integrity": "sha512-GgouD1B+sWwvkaEq8vXC15DjQitxbvs12oIXELpconwm+Tg3zfcEv4jgzq3vtKverDXsg3VI8aRgNL2Nra0Iog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.4.10"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmmirror.com/tldts-core/-/tldts-core-7.4.10.tgz",
+      "integrity": "sha512-KnQjp53ZekKgm/r3l+u8kJGGzYgrWdP8+Mql7a4vijh2WE0IrZWspQj/TpTxDho/YxO+AnOZnIjQcCD+q6iJsw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-6.0.2.tgz",
+      "integrity": "sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/undici": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmmirror.com/undici/-/undici-7.29.0.tgz",
+      "integrity": "sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
@@ -0,0 +1,14 @@
+{
+  "name": "trajectory-planning-visualization-web-dom-tests",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "node --test dashboard.dom.test.mjs"
+  },
+  "devDependencies": {
+    "jsdom": "29.1.1"
+  },
+  "engines": {
+    "node": ">=24"
+  }
+}