diff --git a/.github/agents/ui-specialist.md b/.github/agents/ui-specialist.md
index fe03d30758..961f2bbb39 100644
--- a/.github/agents/ui-specialist.md
+++ b/.github/agents/ui-specialist.md
@@ -121,9 +121,10 @@ When a feature is unavailable due to insufficient data (not insufficient permiss
 ### Jinja2 Template Safety
 
 - [ ] Sensor/asset IDs embedded in JS use `{{ sensor.id }}` (integer, safe), not `.name` or freeform text
-- [ ] User-supplied values displayed in HTML use `{{ value | e }}` or `{{ value | safe }}` (only for pre-sanitised server values like `sensor._ui_unit | safe`)
-- [ ] `availableUnitsRawJSON.replace(/'/g,
-  '"')` pattern is used for JSON embedded via template — this is the established workaround for Flask's single-quote JSON serialisation
+- [ ] User-supplied values displayed in HTML rely on Jinja's auto-escaping (`{{ value }}`), never `{{ value | safe }}`
+- [ ] Data embedded in a `<script>` uses `{{ value | tojson }}`, which yields valid JavaScript and cannot close the script element;
+  never a Python dict or list rendered with `| safe`, nor either of those inside a JavaScript string literal
+- [ ] JavaScript sets user-supplied text with `textContent`, or passes it through `escapeHtml` (from `ui-utils.js`) when building markup for `innerHTML`
 
 ## Domain Knowledge
 
diff --git a/.github/instructions/ui-terminology.instructions.md b/.github/instructions/ui-terminology.instructions.md
index 8389ed033e..19df36c027 100644
--- a/.github/instructions/ui-terminology.instructions.md
+++ b/.github/instructions/ui-terminology.instructions.md
@@ -30,8 +30,10 @@ Never expose internal role names (e.g. `account-admin`, `admin`) in UI text. Use
 ## Jinja2 template safety
 
 - Sensor/asset IDs embedded in JavaScript use `{{ sensor.id }}` (integer — safe), not `.name` or freeform text.
-- User-supplied values displayed in HTML use `{{ value | e }}` for auto-escaping.
-- Only use `{{ value | safe }}` for pre-sanitised server values (e.g. `sensor._ui_unit | safe`).
+- User-supplied values displayed in HTML rely on Jinja's auto-escaping (`{{ value }}`); do not mark them `| safe`.
+- Data embedded in a `<script>` uses `{{ value | tojson }}`, which yields valid JavaScript and cannot close the script element.
+  Never render a Python dict or list with `| safe` there, nor place either inside a JavaScript string literal.
+- In JavaScript, set user-supplied text with `textContent`, or pass it through `escapeHtml` (from `ui-utils.js`) when building markup for `innerHTML`.
 
 ## Toast vs. inline alert
 
diff --git a/documentation/changelog.rst b/documentation/changelog.rst
index 096056f7fd..65796826e0 100644
--- a/documentation/changelog.rst
+++ b/documentation/changelog.rst
@@ -52,6 +52,7 @@ Infrastructure / Support
 * Speed up ``GET /api/v3_0/assets`` on large catalogs by eager-loading the ``owner``, ``generic_asset_type`` and ``child_assets`` relations alongside the already eager-loaded ``sensors``, instead of lazy-loading each of them once per asset, which made the SQL statement count grow linearly with the number of assets returned [see `PR #2515 <https://www.github.com/FlexMeasures/flexmeasures/pull/2515>`_]
 * Speed up app boot by ~1s by dropping the ``inflect`` dependency in favor of the already-used, much lighter ``inflection`` package; API error messages that list several values, such as the permissions a request requires or the units a quantity accepts, no longer place a comma before the final "and" or "or" [see `PR #2514 <https://www.github.com/FlexMeasures/flexmeasures/pull/2514>`_]
 * The UI's JavaScript modules can now be tested, by running them in a headless browser from pytest, without adding a Node.js toolchain [see `PR #2435 <https://www.github.com/FlexMeasures/flexmeasures/pull/2435>`_]
+* Test much more of the UI's JavaScript, and move the asset tree's layout and the flex-context editor's logic out of their templates into modules, so that they can be tested too [see `PR #2574 <https://www.github.com/FlexMeasures/flexmeasures/pull/2574>`_]
 * Add ``FLEXMEASURES_DEPRECATION_AND_SUNSET`` so hosts can configure deprecation and sunset dates and information links per deprecated API version [see `PR #2362 <https://github.com/FlexMeasures/flexmeasures/pull/2362>`_].
 * A CLI command that is called with an invalid option value now logs one error line, so that a cron job which captures only the log file still records why the command failed, where previously Click reported it on stderr alone and nothing was written [see `PR #2544 <https://www.github.com/FlexMeasures/flexmeasures/pull/2544>`_]
 * Settings that a plugin declares in its ``__settings__`` can now be set as environment variables, next to being set in the config file (which still wins), can declare a ``default`` to fall back to, and are reported as missing with a message that says whether such a default applies or the setting stays unset [see `PR #2501 <https://www.github.com/FlexMeasures/flexmeasures/pull/2501>`_]
@@ -68,6 +69,7 @@ Bugfixes
 * An asset's status page showed only some of the sensors it reported on, in an order that changed between reloads, and it reported on fixed quantities from the flex-context, which have no data to be up to date with [see `PR #2489 <https://www.github.com/FlexMeasures/flexmeasures/pull/2489>`_]
 * Saving an asset chart as PNG or SVG drew the legend over the graph whenever it listed more sensors than fit beside a subplot; the exported image now makes room for every entry beside its own plot, without shrinking the plot, and spells out the sensor names that the on-screen legend abbreviates [see `PR #2517 <https://www.github.com/FlexMeasures/flexmeasures/pull/2517>`_]
 * Asset type groups were named by a pluralization that mangled acronyms and nouns ending in -y, so the asset pages listed ``PVS``, ``EVS``, ``CHPS`` and ``Factorys``; they now read ``PVs``, ``EVs``, ``CHPs`` and ``Factories`` [see `PR #2514 <https://www.github.com/FlexMeasures/flexmeasures/pull/2514>`_]
+* A new commitment's prices now default to the currency of the price sensors in the flex-context, where they fell back to EUR unless a fixed price was set [see `PR #2574 <https://www.github.com/FlexMeasures/flexmeasures/pull/2574>`_]
 
 Automations, in detail
 -----------------------
diff --git a/flexmeasures/data/models/time_series.py b/flexmeasures/data/models/time_series.py
index fcfc28d45c..922611dee7 100644
--- a/flexmeasures/data/models/time_series.py
+++ b/flexmeasures/data/models/time_series.py
@@ -632,13 +632,6 @@ def timerange(self) -> dict[str, datetime_type]:
         start, end = get_timerange([self.id])
         return dict(start=start, end=end)
 
-    @property
-    def _ui_unit(self) -> str:
-        """Used to customize how the sensor unit is shown in the UI."""
-        if self.unit == "":
-            return '<span title="A sensor recording numbers rather than physical or economical quantities.">dimensionless</span>'
-        return self.unit
-
     def __repr__(self) -> str:
         return f"<Sensor {self.id}: {self.name}, unit: {self.unit if self.unit != '' else 'dimensionless'} res.: {self.event_resolution}>"
 
diff --git a/flexmeasures/ui/static/js/asset-tree.js b/flexmeasures/ui/static/js/asset-tree.js
new file mode 100644
index 0000000000..6efd6db008
--- /dev/null
+++ b/flexmeasures/ui/static/js/asset-tree.js
@@ -0,0 +1,447 @@
+/**
+ * Layout of the asset tree shown on the asset context page ("Structure" tab).
+ *
+ * The page (see `show_tree` in _macros.html) owns the ECharts instance and the zoom interactions;
+ * this module turns the flat list of assets into the graph series to draw,
+ * so that the layout can be reasoned about, and tested, without a browser page or ECharts.
+ *
+ * Layout policy, per parent whose children are leaves ("a family"):
+ * keep the leaf children in ONE row until the canvas width is exhausted (at the 50px reference box),
+ * then use TWO balanced rows (top row at most 1 wider than the bottom), never more;
+ * when even two rows don't fit the width, the box size shrinks below the reference,
+ * i.e. the whole tree zooms out (wheel-zoom recovers detail).
+ * Non-leaf children and the "Add asset" action node each get their own row, recursively.
+ *
+ * Family connectors are routed to invisible "port" nodes on the top/bottom edge of each leaf box,
+ * so top-row connectors arrive from above and bottom-row connectors from below,
+ * keeping the lane between the two rows clean.
+ * Parents connect from their side.
+ */
+
+export const BOX_REF = 50; // reference (minimum comfortable) box size
+const GAP_RATIO = 0.28; // vertical gap as a fraction of box size
+
+export const ZOOM_MIN = 0.3;
+export const ZOOM_MAX = 2.5;
+export const ZOOM_STEP = 0.2;
+
+// The id the server gives the "Add asset" action node (see add_child_asset in views/assets/utils.py).
+const ADD_ASSET_ID = "new";
+
+const INVISIBLE = {
+  color: "rgba(0,0,0,0)",
+  borderWidth: 0,
+  shadowBlur: 0,
+  shadowColor: "transparent",
+  shadowOffsetX: 0,
+  shadowOffsetY: 0,
+};
+
+/**
+ * Keep a zoom factor within the supported range, rounded to hundredths.
+ *
+ * @param {number} zoom - The zoom factor asked for.
+ * @returns {number} - The zoom factor to use.
+ */
+export function clampZoom(zoom) {
+  return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(zoom * 100) / 100));
+}
+
+/**
+ * Build a hierarchy from the flat list of assets.
+ *
+ * An asset whose parent is not in the list is shown as a root.
+ *
+ * @param {Object[]} assets - Assets, each with an `id`, `name` and `parent` (the parent's id, or null).
+ * @returns {{assetMap: Object, rootNodes: Object[]}} - The nodes by id, and the roots of the hierarchy.
+ */
+export function buildAssetHierarchy(assets) {
+  const assetMap = {};
+  const rootNodes = [];
+
+  assets.forEach((asset) => {
+    assetMap[asset.id] = {
+      name: asset.name,
+      ...asset,
+      children: [],
+    };
+  });
+
+  assets.forEach((asset) => {
+    if (asset.parent !== null && asset.parent !== undefined && assetMap[asset.parent]) {
+      assetMap[asset.parent].children.push(assetMap[asset.id]);
+    } else {
+      rootNodes.push(assetMap[asset.id]);
+    }
+  });
+
+  return { assetMap, rootNodes };
+}
+
+/**
+ * Wrap a name into at most `maxLines` lines, breaking on spaces where possible and ellipsising the overflow.
+ *
+ * We do this ourselves rather than rely on ECharts' rich-text width wrapping,
+ * which proved unreliable for long names (they would overflow the box horizontally).
+ *
+ * @param {string} name - The name to wrap.
+ * @param {number} charsPerLine - How many characters fit on one line.
+ * @param {number} maxLines - How many lines fit in the box.
+ * @returns {string} - The lines, joined by newlines.
+ */
+export function wrapName(name, charsPerLine, maxLines) {
+  const words = String(name).split(/\s+/);
+  let lines = [];
+  let cur = "";
+  function pushHardWrapped(word) {
+    while (word.length > charsPerLine) {
+      lines.push(word.slice(0, charsPerLine));
+      word = word.slice(charsPerLine);
+    }
+    return word;
+  }
+  for (let i = 0; i < words.length; i++) {
+    let w = words[i];
+    const candidate = cur ? cur + " " + w : w;
+    if (candidate.length <= charsPerLine) {
+      cur = candidate;
+    } else {
+      if (cur) {
+        lines.push(cur);
+        cur = "";
+      }
+      if (w.length > charsPerLine) {
+        w = pushHardWrapped(w);
+      }
+      cur = w;
+    }
+  }
+  if (cur) lines.push(cur);
+  if (lines.length > maxLines) {
+    lines = lines.slice(0, maxLines);
+    const last = lines[maxLines - 1];
+    lines[maxLines - 1] = last.slice(0, Math.max(1, charsPerLine - 1)).trimEnd() + "…";
+  }
+  return lines.join("\n");
+}
+
+function isAddAsset(node) {
+  return node.id === ADD_ASSET_ID;
+}
+
+// Leaf children go into the family grid; internal children and the "Add asset" button each get their own row.
+function splitKids(node) {
+  const kids = node.children || [];
+  return {
+    gridKids: kids.filter((k) => !(k.children || []).length && !isAddAsset(k)),
+    rowKids: kids.filter((k) => (k.children || []).length || isAddAsset(k)),
+  };
+}
+
+function depthOf(node) {
+  let d = 0;
+  (node.children || []).forEach((k) => {
+    d = Math.max(d, 1 + depthOf(k));
+  });
+  return d;
+}
+
+/**
+ * Lay out the tree and return the ECharts option that draws it.
+ *
+ * Zoom is applied by re-rendering the tree at a new scale (node sizes + layout margins)
+ * while the canvas stays a fixed size,
+ * so the tree shrinks or grows within the gray area like a map, and the area itself never changes size.
+ *
+ * @param {Object[]} rootNodes - Roots of the hierarchy, as returned by buildAssetHierarchy.
+ * @param {Object} assetMap - Nodes by id, as returned by buildAssetHierarchy.
+ * @param {Object} options
+ * @param {number} options.width - Width of the canvas, in pixels.
+ * @param {number} options.viewportHeight - Height of the canvas, in pixels.
+ * @param {number} [options.zoomFactor] - Current zoom level.
+ * @param {*} [options.currentAssetId] - Id of the asset whose page this is, which is highlighted.
+ * @param {boolean} [options.animate] - Pass false to skip the update animation, e.g. during continuous wheel-zoom.
+ * @returns {Object} - The ECharts option.
+ */
+export function buildAssetTreeOption(rootNodes, assetMap, options) {
+  const { width: W, viewportHeight: viewportH, zoomFactor = 1, currentAssetId, animate } = options;
+
+  // One x position per tree level (ancestors -> current -> children -> grandchildren);
+  // the deepest level's grid columns extend to the right from there.
+  let levels = 1;
+  rootNodes.forEach((rt) => {
+    levels = Math.max(levels, 1 + depthOf(rt));
+  });
+  const colPitch = levels > 1 ? Math.min((0.6 * W) / (levels - 1), 0.3 * W) : 0;
+  function colX(d) {
+    return 0.08 * W + d * colPitch;
+  }
+
+  // Horizontal room for a grid block whose leaf column sits at level d.
+  function gridBudget(d) {
+    return W - colX(d) - 8;
+  }
+  function colsFitAt(d) {
+    return Math.max(1, Math.floor((gridBudget(d) - BOX_REF * 0.5) / (BOX_REF * 1.35)) + 1);
+  }
+  // One row while it fits; else two balanced rows, top at most 1 wider.
+  function colsFor(n, d) {
+    if (!n) return 1;
+    const fit = colsFitAt(d);
+    return n <= fit ? n : Math.ceil(n / 2);
+  }
+
+  // Pre-pass: total rows (drives the vertical fit) and the widest grid block (drives the horizontal cap on the box size).
+  let hCap = Infinity;
+  function rowsOf(node, d) {
+    const s = splitKids(node);
+    if (!s.gridKids.length && !s.rowKids.length) return 1;
+    let r = 0;
+    if (s.gridKids.length) {
+      const cols = colsFor(s.gridKids.length, d + 1);
+      r += Math.ceil(s.gridKids.length / cols);
+      hCap = Math.min(hCap, gridBudget(d + 1) / ((cols - 1) * 1.35 + 0.5));
+    }
+    s.rowKids.forEach((k) => {
+      r += rowsOf(k, d + 1);
+    });
+    return Math.max(r, 1);
+  }
+  let totalRows = 0;
+  rootNodes.forEach((rt) => {
+    totalRows += rowsOf(rt, 0);
+  });
+
+  // Box size: fit the viewport vertically, clamped to a legible range,
+  // then capped so the widest grid block still fits the width.
+  // Two rows is the maximum,
+  // so very wide families lower the box size (the tree zooms out) instead of wrapping further.
+  const fitBox = (viewportH * 0.92) / Math.max(totalRows + 1, 5) / (1 + GAP_RATIO);
+  const BOX_SIZE = Math.round(
+    Math.min(Math.max(BOX_REF, Math.min(104, fitBox)), Math.max(20, hCap))
+  );
+  const slotY = BOX_SIZE * (1 + GAP_RATIO); // vertical row pitch
+  const colGapX = BOX_SIZE * 1.35; // horizontal grid column pitch
+  const blockGap = slotY * 0.55; // gap between family blocks
+
+  // Labels (text + icon) are drawn by ECharts at a fixed on-screen size, unaffected by the view's zoom transform,
+  // so derive all label metrics from the EFFECTIVE on-screen box size instead.
+  // Since every zoom step re-renders, zooming in re-wraps names at a larger, more legible size,
+  // and zooming out shrinks them with the box instead of letting them pour out of it.
+  const BOX_EFF = BOX_SIZE * zoomFactor;
+  const SHOW_LABELS = BOX_EFF >= 24; // below this, text is just noise
+  const ICON_SIZE = Math.max(4, Math.floor(BOX_EFF * 0.26));
+  const FONT_SIZE = Math.max(6, Math.round(BOX_EFF * 0.13));
+  const LINE_H = FONT_SIZE + 2;
+
+  // How many text lines fit under the icon, inside the box?
+  const textBudget = BOX_EFF - ICON_SIZE - 10;
+  const MAX_LINES = Math.min(3, Math.max(1, Math.floor(textBudget / LINE_H)));
+  // Approx chars per line at this font (~0.56em average glyph width).
+  const charsPerLine = Math.max(4, Math.floor((BOX_EFF - 12) / (FONT_SIZE * 0.56)));
+
+  // Per-node style: white round rects, gold current asset, green "Add asset" button.
+  function nodeStyles(node) {
+    const isCurrent = node.id === currentAssetId;
+    const isAdd = isAddAsset(node);
+
+    const displayName = wrapName(node.name, charsPerLine, MAX_LINES);
+    const rich = {
+      text: {
+        width: BOX_EFF - 6,
+        overflow: "truncate",
+        align: "center",
+        fontSize: FONT_SIZE,
+        lineHeight: LINE_H,
+        padding: [2, 0, 0, 0],
+      },
+    };
+    if (node.icon) {
+      rich["icon_" + node.id] = {
+        backgroundColor: { image: node.icon },
+        height: ICON_SIZE,
+        width: ICON_SIZE,
+        align: "center",
+      };
+    }
+
+    return {
+      symbol: "roundRect",
+      symbolSize: isCurrent ? [BOX_SIZE * 1.08, BOX_SIZE * 1.08] : [BOX_SIZE, BOX_SIZE],
+      label: {
+        show: SHOW_LABELS,
+        position: "inside",
+        color: isCurrent ? "#000000" : isAdd ? "#ffffff" : "#1e293b",
+        fontSize: FONT_SIZE,
+        fontWeight: isCurrent ? "bold" : "600",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        // A function rather than a template string,
+        // so that ECharts does not substitute its template variables ({a}, {b}, {c}) in asset names.
+        formatter: () =>
+          node.icon
+            ? "{icon_" + node.id + "|}\n{text|" + displayName + "}"
+            : "{text|" + displayName + "}",
+        rich: rich,
+      },
+      itemStyle: {
+        color: isCurrent ? "#fcd34d" : isAdd ? "#10b981" : "#ffffff",
+        borderColor: isCurrent ? "#f59e0b" : isAdd ? "#047857" : "#cbd5e1",
+        borderWidth: isCurrent ? 3 : 1,
+        borderRadius: 8,
+        shadowColor: "rgba(0, 0, 0, 0.2)",
+        shadowBlur: 10,
+        shadowOffsetX: 2,
+        shadowOffsetY: 6,
+      },
+    };
+  }
+
+  const nodes = [];
+  const links = [];
+
+  // Place a node; if `port` is given, route the connector from the parent to an invisible port node
+  // on the box's top/bottom edge instead of to the box itself.
+  function pushNode(node, x, y, port) {
+    nodes.push(
+      Object.assign(
+        {
+          id: String(node.id),
+          name: node.name,
+          x: x,
+          y: y,
+          link: node.link,
+          tooltip: node.tooltip,
+        },
+        nodeStyles(node)
+      )
+    );
+    if (node.parent === undefined || node.parent === null || !assetMap[node.parent]) {
+      return;
+    }
+    if (port) {
+      const pid = "port-" + node.id;
+      nodes.push({
+        id: pid,
+        name: "",
+        x: port.x,
+        y: port.y,
+        symbol: "circle",
+        symbolSize: 0.1,
+        silent: true,
+        label: { show: false },
+        itemStyle: INVISIBLE,
+      });
+      links.push({
+        source: String(node.parent),
+        target: pid,
+        lineStyle: { curveness: port.curveness },
+      });
+    } else {
+      links.push({ source: String(node.parent), target: String(node.id) });
+    }
+  }
+
+  // Recursively lay out `node` (at tree level `d`) and its subtree, starting at vertical offset topY.
+  // Returns the block height and the node's own center y.
+  function layoutSubtree(node, d, topY) {
+    const s = splitKids(node);
+    if (!s.gridKids.length && !s.rowKids.length) {
+      const cy = topY + slotY / 2;
+      pushNode(node, colX(d), cy);
+      return { height: slotY, centerY: cy };
+    }
+    let y = topY;
+    const centers = [];
+    if (s.gridKids.length) {
+      const cols = colsFor(s.gridKids.length, d + 1);
+      const rows = Math.ceil(s.gridKids.length / cols);
+      s.gridKids.forEach((k, i) => {
+        const col = i % cols;
+        const row = Math.floor(i / cols);
+        const x = colX(d + 1) + col * colGapX;
+        const ky = y + slotY / 2 + row * slotY;
+        const topRow = row === 0;
+        pushNode(k, x, ky, {
+          x: x,
+          y: topRow ? ky - BOX_SIZE / 2 : ky + BOX_SIZE / 2,
+          curveness: topRow ? 0.18 : -0.18,
+        });
+      });
+      const blockH = rows * slotY;
+      centers.push(y + blockH / 2);
+      y += blockH + blockGap;
+    }
+    s.rowKids.forEach((k) => {
+      const sub = layoutSubtree(k, d + 1, y);
+      centers.push(sub.centerY);
+      y += sub.height + blockGap;
+    });
+    y -= blockGap; // drop the trailing gap
+    const centerY = centers.reduce((a, b) => a + b, 0) / centers.length;
+    pushNode(node, colX(d), centerY);
+    return { height: y - topY, centerY: centerY };
+  }
+
+  let cursorY = slotY * 0.5;
+  rootNodes.forEach((rt) => {
+    cursorY += layoutSubtree(rt, 0, cursorY).height + blockGap;
+  });
+  const contentH = cursorY - blockGap + slotY * 0.5;
+
+  // Invisible pin nodes make the layout's bounding box deterministic:
+  // exactly the canvas width by at least the viewport height.
+  // The graph view fits that box into the canvas,
+  // so the transform is identity while the content fits, and a uniform zoom-out once the content is taller than the viewport.
+  [
+    [0, 0],
+    [W, Math.max(contentH, viewportH)],
+  ].forEach((p, i) => {
+    nodes.push({
+      id: "__pin" + i,
+      name: "",
+      x: p[0],
+      y: p[1],
+      symbol: "circle",
+      symbolSize: 0.1,
+      silent: true,
+      label: { show: false },
+      itemStyle: INVISIBLE,
+    });
+  });
+
+  return {
+    tooltip: {
+      trigger: "item",
+      triggerOn: "mousemove",
+      backgroundColor: "rgba(255, 255, 255, 0.95)",
+      borderColor: "#e2e8f0",
+      borderWidth: 1,
+      textStyle: { color: "#334155" },
+      formatter: function (params) {
+        return params.data.tooltip || params.name;
+      },
+    },
+    series: [
+      {
+        type: "graph",
+        layout: "none",
+        data: nodes,
+        links: links,
+        // Drag to pan; wheel and +/- buttons drive series.zoom.
+        roam: "move",
+        zoom: zoomFactor,
+        // Scale node symbols 1:1 with the view zoom.
+        nodeScaleRatio: 1,
+        edgeSymbol: ["none", "none"],
+        animationDuration: 550,
+        // No update animation during continuous wheel-zoom, so the tree follows the wheel without lagging behind.
+        animationDurationUpdate: animate === false ? 0 : 400,
+        lineStyle: {
+          color: "#94a3b8",
+          width: 2,
+          curveness: 0.15,
+        },
+      },
+    ],
+  };
+}
diff --git a/flexmeasures/ui/static/js/daterange-utils.js b/flexmeasures/ui/static/js/daterange-utils.js
index 84616101e3..59ab2e9345 100644
--- a/flexmeasures/ui/static/js/daterange-utils.js
+++ b/flexmeasures/ui/static/js/daterange-utils.js
@@ -227,6 +227,9 @@ export function encodeUrlQuery(rawUrl) {
     const [path, query] = rawUrl.split("?");
     if (!query) return rawUrl;  // No query to encode
 
-    const params = new URLSearchParams(query);
+    // URLSearchParams reads a literal "+" as an encoded space, as in form submissions,
+    // which would turn the offset in "+02:00" into " 02:00" before re-encoding it.
+    // Escaping it first keeps it a plus sign.
+    const params = new URLSearchParams(query.replaceAll("+", "%2B"));
     return `${path}?${params.toString()}`;
 }
diff --git a/flexmeasures/ui/static/js/flex-context-utils.js b/flexmeasures/ui/static/js/flex-context-utils.js
new file mode 100644
index 0000000000..30a396323e
--- /dev/null
+++ b/flexmeasures/ui/static/js/flex-context-utils.js
@@ -0,0 +1,216 @@
+/**
+ * Helpers for the flex-context editor on the asset context page (assets/asset_context.html).
+ *
+ * These hold the editor's decisions that do not need the page:
+ * which fields take which kinds of values, what is sent on saving,
+ * and how commitment values are read from and written to text.
+ * The page keeps the DOM and the state; the schema is passed in rather than read from the page,
+ * so each decision can be tested on its own.
+ */
+
+// Pulls the currency code out of a price unit, e.g. "EUR" from "EUR/MWh" or "12 KRW/kW".
+const PRICE_UNIT_PATTERN = /([A-Z]{3})\/[kMG]?W/;
+
+/**
+ * Whether a field only takes sensors, and so offers no "Fixed value" tab in the editor.
+ *
+ * @param {Object} schemaSpecs - The UI flex-context schema, by field name.
+ * @param {string} fieldName - The field to ask about.
+ * @returns {boolean}
+ */
+export function isSensorOnlyField(schemaSpecs, fieldName) {
+  // typeTwo = a single sensor reference, typeFour = a list of sensors.
+  const backendType = schemaSpecs[fieldName]?.["types"]?.["backend"];
+  return backendType === "typeTwo" || backendType === "typeFour";
+}
+
+/**
+ * Whether a field holds a list of sensors.
+ *
+ * Such fields (e.g. inflexible-consumption and inflexible-production) keep their card active,
+ * so several sensors can be added in a row.
+ *
+ * @param {Object} schemaSpecs - The UI flex-context schema, by field name.
+ * @param {string} fieldName - The field to ask about.
+ * @returns {boolean}
+ */
+export function isSensorListField(schemaSpecs, fieldName) {
+  return schemaSpecs[fieldName]?.["types"]?.["backend"] === "typeFour";
+}
+
+/**
+ * The sensor id of one entry of a sensor list field.
+ *
+ * Entries are sensor references ({"sensor": <id>}, possibly with source filters);
+ * the deprecated inflexible-device-sensors field holds bare ids.
+ *
+ * @param {Object|number} entry - A sensor reference, or a bare sensor id.
+ * @returns {number} - The sensor id.
+ */
+export function entrySensorId(entry) {
+  return typeof entry === "object" && entry !== null ? entry["sensor"] : entry;
+}
+
+// Fields managed by the commodity tab bar rather than as cards.
+const STRUCTURAL_FIELDS = ["commodities", "commodity"];
+
+/**
+ * Whether a field is managed by the commodity tab bar, rather than shown as a card.
+ *
+ * @param {string} fieldName - The field to ask about.
+ * @returns {boolean}
+ */
+export function isStructuralField(fieldName) {
+  return STRUCTURAL_FIELDS.includes(fieldName);
+}
+
+/**
+ * Whether a field can be set in the commodity scope the editor is working on.
+ *
+ * The editor works either on the top-level flex-context (the electricity commodity),
+ * or on one entry of its "commodities" list, which takes only the fields marked per-commodity.
+ *
+ * @param {Object} schemaSpecs - The UI flex-context schema, by field name.
+ * @param {string} fieldName - The field to ask about.
+ * @param {?number} activeCommodityIndex - Index into "commodities", or null for the top level.
+ * @returns {boolean}
+ */
+export function isFieldAvailableInScope(schemaSpecs, fieldName, activeCommodityIndex) {
+  if (isStructuralField(fieldName)) {
+    return false;
+  }
+  if (activeCommodityIndex === null) {
+    return true;
+  }
+  return schemaSpecs[fieldName]?.["per-commodity"] === true;
+}
+
+/**
+ * The part of the flex-context that the editor is working on.
+ *
+ * @param {Object} flexContext - The whole flex-context of the asset.
+ * @param {?number} activeCommodityIndex - Index into "commodities", or null for the top level.
+ * @returns {Object} - The top-level flex-context, or one of its commodity contexts.
+ */
+export function getActiveContext(flexContext, activeCommodityIndex) {
+  if (activeCommodityIndex === null) {
+    return flexContext;
+  }
+  return flexContext["commodities"][activeCommodityIndex];
+}
+
+/**
+ * Prepare a flex-context for saving, in place.
+ *
+ * Fields the schema does not know are taken out, sparing the structural ones
+ * (the commodities list itself is not part of the UI schema),
+ * and so are fields left empty.
+ *
+ * @param {Object} flexContext - The whole flex-context of the asset, which is modified.
+ * @param {Object} schema - Default values by field name; its keys are the fields that may be saved.
+ * @returns {Object} - The same flex-context, for convenience.
+ */
+export function cleanFlexContext(flexContext, schema) {
+  function cleanContext(context, isCommodityContext) {
+    for (const key in context) {
+      if (isCommodityContext && key === "commodity") {
+        continue;
+      }
+      if (!isCommodityContext && key === "commodities") {
+        continue;
+      }
+      if (!Object.prototype.hasOwnProperty.call(schema, key)) {
+        delete context[key];
+      }
+    }
+
+    for (const [key, value] of Object.entries(context)) {
+      if (value === null || value === "" || (Array.isArray(value) && value.length === 0)) {
+        delete context[key];
+      }
+    }
+  }
+
+  cleanContext(flexContext, false);
+  if (flexContext["commodities"]) {
+    for (const commodityContext of flexContext["commodities"]) {
+      cleanContext(commodityContext, true);
+    }
+  }
+  return flexContext;
+}
+
+/**
+ * The currency code in a price unit, if any.
+ *
+ * @param {string} text - A unit or a quantity, e.g. "EUR/MWh" or "12 EUR/MWh".
+ * @returns {?string} - The currency code, e.g. "EUR", or null.
+ */
+export function currencyInUnit(text) {
+  const currencyMatch = (text || "").match(PRICE_UNIT_PATTERN);
+  return currencyMatch ? currencyMatch[1] : null;
+}
+
+/**
+ * Look for the currency the flex-context already prices in.
+ *
+ * The scheduler requires all prices to share one currency,
+ * so a new price should follow any price already set.
+ * Fixed values say so directly;
+ * for sensor references, the caller has to look up the sensor's unit.
+ *
+ * @param {Object} flexContext - The whole flex-context of the asset.
+ * @returns {{currency: ?string, priceSensorIds: number[]}} -
+ *     The currency of the first fixed price found (null if none),
+ *     and the ids of sensors referenced by price fields, to fall back on.
+ */
+export function findFlexContextCurrency(flexContext) {
+  const contexts = [flexContext, ...(flexContext["commodities"] || [])];
+  const priceSensorIds = [];
+  for (const context of contexts) {
+    for (const [key, value] of Object.entries(context || {})) {
+      if (typeof value === "string") {
+        const currency = currencyInUnit(value);
+        if (currency) {
+          return { currency: currency, priceSensorIds: priceSensorIds };
+        }
+      }
+      if (key.includes("price") && value !== null && typeof value === "object" && value["sensor"]) {
+        priceSensorIds.push(value["sensor"]);
+      }
+    }
+  }
+  return { currency: null, priceSensorIds: priceSensorIds };
+}
+
+/**
+ * Turn free text into a commitment value.
+ *
+ * "sensor 536" (any casing) becomes a sensor reference; anything else is kept as a fixed quantity string.
+ *
+ * @param {string} raw - The text as typed.
+ * @returns {Object|string} - A sensor reference, or the trimmed text.
+ */
+export function parseCommitmentValue(raw) {
+  const sensorMatch = raw.trim().toLowerCase().match(/^sensor\s+(\d+)$/);
+  if (sensorMatch) {
+    return { sensor: parseInt(sensorMatch[1], 10) };
+  }
+  return raw.trim();
+}
+
+/**
+ * Describe a commitment value in plain text, the inverse of parseCommitmentValue.
+ *
+ * @param {*} value - A sensor reference or a fixed quantity string.
+ * @returns {?string} - The description, or null when the value is not set.
+ */
+export function describeCommitmentValue(value) {
+  if (value === undefined || value === null || value === "") {
+    return null;
+  }
+  if (typeof value === "object" && value["sensor"]) {
+    return `sensor ${value["sensor"]}`;
+  }
+  return String(value);
+}
diff --git a/flexmeasures/ui/static/js/ui-utils.js b/flexmeasures/ui/static/js/ui-utils.js
index 314050d6c3..7ed4699cf8 100644
--- a/flexmeasures/ui/static/js/ui-utils.js
+++ b/flexmeasures/ui/static/js/ui-utils.js
@@ -1,5 +1,35 @@
 export const apiBasePath = window.location.origin;
 
+/**
+ * Escape text for use in HTML, as element content or as a quoted attribute value.
+ *
+ * Names, units and descriptions are whatever a user typed,
+ * so they must be escaped wherever they are built into markup rather than set as textContent.
+ *
+ * @param {*} value - The text to escape; null and undefined become the empty string.
+ * @returns {string} - The escaped text.
+ */
+export function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+/**
+ * Markup for a sensor unit, explaining the empty unit of a dimensionless sensor.
+ *
+ * @param {string} unit - The sensor's unit.
+ * @returns {string} - HTML.
+ */
+export function unitHtml(unit) {
+  return unit === ""
+    ? '<span title="A sensor recording numbers rather than physical or economical quantities.">dimensionless</span>'
+    : escapeHtml(unit);
+}
+
 // Fetch Account Details
 export async function getAccount(accountId) {
   const cacheKey = `account_${accountId}`;
@@ -54,18 +84,66 @@ export async function getSensor(id) {
   return sensor;
 }
 
+/**
+ * Convert the Python representation of a dict (as Jinja renders one) to JSON.
+ *
+ * Only what `repr` writes for JSON-like data is handled:
+ * strings in either quote style, with Python's escapes, and the constants None, True and False.
+ * Those constants are only replaced outside strings, so a value such as "Nonetheless" survives.
+ *
+ * @param {string} text - The Python representation.
+ * @returns {string} - The same data as JSON.
+ */
+export function pythonReprToJSON(text) {
+  const constants = { None: "null", True: "true", False: "false" };
+  const escapes = { n: "\n", t: "\t", r: "\r", b: "\b", f: "\f", 0: "\0" };
+  let out = "";
+  let i = 0;
+  while (i < text.length) {
+    const ch = text[i];
+    if (ch === "'" || ch === '"') {
+      let value = "";
+      let j = i + 1;
+      while (j < text.length && text[j] !== ch) {
+        if (text[j] === "\\") {
+          const next = text[j + 1];
+          const hexLength = { x: 2, u: 4, U: 8 }[next];
+          if (hexLength) {
+            value += String.fromCodePoint(parseInt(text.slice(j + 2, j + 2 + hexLength), 16));
+            j += 2 + hexLength;
+          } else {
+            value += next in escapes ? escapes[next] : next;
+            j += 2;
+          }
+          continue;
+        }
+        value += text[j];
+        j++;
+      }
+      out += JSON.stringify(value);
+      i = j + 1;
+      continue;
+    }
+    const word = /^[A-Za-z_]\w*/.exec(text.slice(i));
+    if (word) {
+      out += constants[word[0]] ?? word[0];
+      i += word[0].length;
+      continue;
+    }
+    out += ch;
+    i++;
+  }
+  return out;
+}
+
 export function processResourceRawJSON(schema, rawJSON, allowExtra = false) {
   /*
-    allowExtra - whether to allow extra fields in the rawJSON that are not in the schema. 
+    rawJSON - the resource's fields, either as an object or as the Python representation of a dict.
+    allowExtra - whether to allow extra fields in the rawJSON that are not in the schema.
     If false, those fields will be ignored.
   */
-  let processedJSON = rawJSON.replace(/'/g, '"');
-  // change None to null, True to true and False to false
-  processedJSON = processedJSON.replaceAll("None", "null");
-  processedJSON = processedJSON.replaceAll("True", "true");
-  processedJSON = processedJSON.replaceAll("False", "false");
-  // update the assetFlexModel fields
-  processedJSON = JSON.parse(processedJSON);
+  const processedJSON =
+    typeof rawJSON === "string" ? JSON.parse(pythonReprToJSON(rawJSON)) : rawJSON;
   const extraFields = {};
 
   for (const [key, value] of Object.entries(processedJSON)) {
@@ -120,15 +198,11 @@ export async function renderSensor(sensorId) {
                 <b>Sensor:</b> <a href="${apiBasePath}/sensors/${
                   sensorData.id
                 }">${sensorData.id}</a>,
-                <b>Unit:</b> ${
-                  sensorData.unit === ""
-                    ? '<span title="A sensor recording numbers rather than physical or economical quantities.">dimensionless</span>'
-                    : sensorData.unit
-                },
-                <b>Name:</b> ${sensorData.name},
+                <b>Unit:</b> ${unitHtml(sensorData.unit)},
+                <b>Name:</b> ${escapeHtml(sensorData.name)},
                 <div style="padding-top: 1px;"></div>
-                <b>Asset:</b> ${Asset.name},
-                <b>Account:</b> ${Account?.name ? Account.name : "PUBLIC"}
+                <b>Asset:</b> ${escapeHtml(Asset.name)},
+                <b>Account:</b> ${Account?.name ? escapeHtml(Account.name) : "PUBLIC"}
             </div>
         </div>
     `;
@@ -205,19 +279,15 @@ export function renderSensorSearchResults(
     col.innerHTML = `
                 <div class="card m-0">
                     <div class="card-body p-0 result-sensor-card">
-                        <h5 class="card-title">${sensor.name}</h5>
+                        <h5 class="card-title">${escapeHtml(sensor.name)}</h5>
                         <p class="card-text">
                             <b>ID:</b> <a href="${apiBasePath}/sensors/${
                               sensor.id
                             }">${sensor.id}</a>,
-                            <b>Unit:</b> ${
-                              sensor.unit === ""
-                                ? '<span title="A sensor recording numbers rather than physical or economical quantities.">dimensionless</span>'
-                                : sensor.unit
-                            },
-                            <b>Asset:</b> ${Asset.name},
+                            <b>Unit:</b> ${unitHtml(sensor.unit)},
+                            <b>Asset:</b> ${escapeHtml(Asset.name)},
                             <b>Account:</b> ${
-                              Account?.name ? Account.name : "PUBLIC"
+                              Account?.name ? escapeHtml(Account.name) : "PUBLIC"
                             }
                         </p>
                     </div>
diff --git a/flexmeasures/ui/templates/_macros.html b/flexmeasures/ui/templates/_macros.html
index 0e93494556..c2782b4b50 100644
--- a/flexmeasures/ui/templates/_macros.html
+++ b/flexmeasures/ui/templates/_macros.html
@@ -1,4 +1,4 @@
-{% macro show_tree(assets, current_asset_name) %}
+{% macro show_tree(assets, current_asset_id) %}
   <div class="container pb-4" style="position: relative;">
     {# touch-action: none keeps the browser from scrolling/zooming the page
        on touch gestures inside the tree, so one-finger drags pan the chart
@@ -18,35 +18,15 @@
   </div>
 
 <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
-<script type="text/javascript">
-  window.onload = function(){
-
-  let assets = {{ assets | safe }};
-  let currentAssetName = {{ current_asset_name | tojson }};
-
-      // 1. Build hierarchy from flat list
-      let assetMap = {};
-      let rootNodes = [];
+<script type="module">
+  import { buildAssetHierarchy, buildAssetTreeOption, clampZoom, ZOOM_STEP } from "{{ url_for('flexmeasures_ui.static', filename='js/asset-tree.js') }}?v={{ flexmeasures_version }}";
 
-      assets.forEach(asset => {
-        assetMap[asset.id] = {
-          name: asset.name,
-          ...asset,
-          children: []
-        };
-      });
+  window.onload = function(){
 
-      assets.forEach(asset => {
-        if (asset.parent === null || asset.parent === undefined) {
-          rootNodes.push(assetMap[asset.id]);
-        } else {
-          if (assetMap[asset.parent]) {
-            assetMap[asset.parent].children.push(assetMap[asset.id]);
-          } else {
-            rootNodes.push(assetMap[asset.id]);
-          }
-        }
-      });
+      // tojson rather than the Python representation, so the list is valid JavaScript,
+      // and so an asset name cannot close this script element.
+      const { assetMap, rootNodes } = buildAssetHierarchy({{ assets | tojson }});
+      const currentAssetId = {{ current_asset_id | tojson }};
 
       var scrollDom = document.getElementById('view-scroll');
       var chartDom = document.getElementById('view');
@@ -59,348 +39,20 @@
       // itself never changes size.
       var zoomFactor = 1;
 
-      // ------------------------------------------------------------------
-      // Layout policy, per parent whose children are leaves ("a family"):
-      // keep the leaf children in ONE row until the canvas width is
-      // exhausted (at the 50px reference box), then use TWO balanced rows
-      // (top row at most 1 wider than the bottom), never more; when even
-      // two rows don't fit the width, the box size shrinks below the
-      // reference, i.e. the whole tree zooms out (wheel-zoom recovers
-      // detail). Non-leaf children and the "Add asset" action node each
-      // get their own row, recursively.
-      //
-      // Family connectors are routed to invisible "port" nodes on the
-      // top/bottom edge of each leaf box, so top-row connectors arrive
-      // from above and bottom-row connectors from below, keeping the lane
-      // between the two rows clean. Parents connect from their side.
-      // ------------------------------------------------------------------
-      var BOX_REF = 50;      // reference (minimum comfortable) box size
-      var GAP_RATIO = 0.28;  // vertical gap as a fraction of box size
-
-      function isAddAsset(node) { return node.name === 'Add asset'; }
-
-      // Leaf children go into the family grid; internal children and the
-      // "Add asset" button each get their own row.
-      function splitKids(node) {
-        var kids = node.children || [];
-        return {
-          gridKids: kids.filter(function(k) { return !(k.children || []).length && !isAddAsset(k); }),
-          rowKids: kids.filter(function(k) { return (k.children || []).length || isAddAsset(k); })
-        };
-      }
-
-      function depthOf(node) {
-        var d = 0;
-        (node.children || []).forEach(function(k) { d = Math.max(d, 1 + depthOf(k)); });
-        return d;
-      }
-
+      // The layout itself lives in asset-tree.js.
       function updateChart(animate) {
         var viewportH = scrollDom.clientHeight;
         // Keep the drawing canvas the SAME size as the gray container at
         // every zoom level; zooming happens inside the canvas.
         chartDom.style.height = viewportH + 'px';
         myChart.resize();
-        var W = chartDom.clientWidth || 1000;
-
-        // One x position per tree level (ancestors -> current -> children
-        // -> grandchildren); the deepest level's grid columns extend to
-        // the right from there.
-        var levels = 1;
-        rootNodes.forEach(function(rt) { levels = Math.max(levels, 1 + depthOf(rt)); });
-        var colPitch = levels > 1 ? Math.min(0.60 * W / (levels - 1), 0.30 * W) : 0;
-        function colX(d) { return 0.08 * W + d * colPitch; }
-
-        // Horizontal room for a grid block whose leaf column sits at level d.
-        function gridBudget(d) { return W - colX(d) - 8; }
-        function colsFitAt(d) {
-          return Math.max(1, Math.floor((gridBudget(d) - BOX_REF * 0.5) / (BOX_REF * 1.35)) + 1);
-        }
-        // One row while it fits; else two balanced rows, top at most 1 wider.
-        function colsFor(n, d) {
-          if (!n) return 1;
-          var fit = colsFitAt(d);
-          return n <= fit ? n : Math.ceil(n / 2);
-        }
-
-        // Pre-pass: total rows (drives the vertical fit) and the widest
-        // grid block (drives the horizontal cap on the box size).
-        var hCap = Infinity;
-        function rowsOf(node, d) {
-          var s = splitKids(node);
-          if (!s.gridKids.length && !s.rowKids.length) return 1;
-          var r = 0;
-          if (s.gridKids.length) {
-            var cols = colsFor(s.gridKids.length, d + 1);
-            r += Math.ceil(s.gridKids.length / cols);
-            hCap = Math.min(hCap, gridBudget(d + 1) / ((cols - 1) * 1.35 + 0.5));
-          }
-          s.rowKids.forEach(function(k) { r += rowsOf(k, d + 1); });
-          return Math.max(r, 1);
-        }
-        var totalRows = 0;
-        rootNodes.forEach(function(rt) { totalRows += rowsOf(rt, 0); });
-
-        // Box size: fit the viewport vertically, clamped to a legible
-        // range, then capped so the widest grid block still fits the
-        // width. Two rows is the maximum, so very wide families lower the
-        // box size (the tree zooms out) instead of wrapping further.
-        var fitBox = (viewportH * 0.92 / Math.max(totalRows + 1, 5)) / (1 + GAP_RATIO);
-        var BOX_SIZE = Math.round(Math.min(
-          Math.max(BOX_REF, Math.min(104, fitBox)),
-          Math.max(20, hCap)
-        ));
-        var slotY = BOX_SIZE * (1 + GAP_RATIO);   // vertical row pitch
-        var colGapX = BOX_SIZE * 1.35;            // horizontal grid column pitch
-        var blockGap = slotY * 0.55;              // gap between family blocks
-
-        // Labels (text + icon) are drawn by ECharts at a fixed on-screen
-        // size, unaffected by the view's zoom transform - so derive all
-        // label metrics from the EFFECTIVE on-screen box size instead.
-        // Since every zoom step re-renders, zooming in re-wraps names at a
-        // larger, more legible size, and zooming out shrinks them with the
-        // box instead of letting them pour out of it.
-        var BOX_EFF = BOX_SIZE * zoomFactor;
-        var SHOW_LABELS = BOX_EFF >= 24;  // below this, text is just noise
-        var ICON_SIZE = Math.max(4, Math.floor(BOX_EFF * 0.26));
-        var FONT_SIZE = Math.max(6, Math.round(BOX_EFF * 0.13));
-        var LINE_H = FONT_SIZE + 2;
-
-        // How many text lines fit under the icon, inside the box?
-        var textBudget = BOX_EFF - ICON_SIZE - 10;
-        var MAX_LINES = Math.min(3, Math.max(1, Math.floor(textBudget / LINE_H)));
-        // Approx chars per line at this font (~0.56em average glyph width).
-        var charsPerLine = Math.max(4, Math.floor((BOX_EFF - 12) / (FONT_SIZE * 0.56)));
-
-        // Deterministically wrap a name into at most MAX_LINES lines, breaking on
-        // spaces where possible and ellipsising the overflow. We do this ourselves
-        // rather than rely on ECharts' rich-text width wrapping, which proved
-        // unreliable for long names (they would overflow the box horizontally).
-        function wrapName(name) {
-          var words = String(name).split(/\s+/);
-          var lines = [];
-          var cur = '';
-          function pushHardWrapped(word) {
-            while (word.length > charsPerLine) {
-              lines.push(word.slice(0, charsPerLine));
-              word = word.slice(charsPerLine);
-            }
-            return word;
-          }
-          for (var i = 0; i < words.length; i++) {
-            var w = words[i];
-            var candidate = cur ? (cur + ' ' + w) : w;
-            if (candidate.length <= charsPerLine) {
-              cur = candidate;
-            } else {
-              if (cur) { lines.push(cur); cur = ''; }
-              if (w.length > charsPerLine) { w = pushHardWrapped(w); }
-              cur = w;
-            }
-          }
-          if (cur) lines.push(cur);
-          if (lines.length > MAX_LINES) {
-            lines = lines.slice(0, MAX_LINES);
-            var last = lines[MAX_LINES - 1];
-            lines[MAX_LINES - 1] = last.slice(0, Math.max(1, charsPerLine - 1)).trimEnd() + '…';
-          }
-          return lines.join('\n');
-        }
-
-        // Per-node style (same look as before: white round rects, gold
-        // current asset, green "Add asset" button).
-        function nodeStyles(node) {
-          var isCurrent = node.name === currentAssetName;
-          var isAdd = isAddAsset(node);
-
-          var displayName = wrapName(node.name);
-          var rich = {
-            text: {
-              width:      BOX_EFF - 6,
-              overflow:   'truncate',
-              align:      'center',
-              fontSize:   FONT_SIZE,
-              lineHeight: LINE_H,
-              padding:    [2, 0, 0, 0]
-            }
-          };
-          if (node.icon) {
-            rich['icon_' + node.id] = {
-              backgroundColor: { image: node.icon },
-              height: ICON_SIZE,
-              width:  ICON_SIZE,
-              align:  'center'
-            };
-          }
-
-          return {
-            symbol: 'roundRect',
-            symbolSize: isCurrent
-              ? [BOX_SIZE * 1.08, BOX_SIZE * 1.08]
-              : [BOX_SIZE, BOX_SIZE],
-            label: {
-              show:       SHOW_LABELS,
-              position:   'inside',
-              color:      isCurrent ? '#000000' : (isAdd ? '#ffffff' : '#1e293b'),
-              fontSize:   FONT_SIZE,
-              fontWeight: isCurrent ? 'bold' : '600',
-              fontFamily: 'system-ui, -apple-system, sans-serif',
-              formatter: (function(n, dn) {
-                return function() {
-                  return n.icon
-                    ? ('{icon_' + n.id + '|}\n{text|' + dn + '}')
-                    : ('{text|' + dn + '}');
-                };
-              })(node, displayName),
-              rich: rich
-            },
-            itemStyle: {
-              color:       isCurrent ? '#fcd34d' : (isAdd ? '#10b981' : '#ffffff'),
-              borderColor: isCurrent ? '#f59e0b' : (isAdd ? '#047857' : '#cbd5e1'),
-              borderWidth: isCurrent ? 3 : 1,
-              borderRadius: 8,
-              shadowColor:   'rgba(0, 0, 0, 0.2)',
-              shadowBlur:    10,
-              shadowOffsetX: 2,
-              shadowOffsetY: 6
-            }
-          };
-        }
-
-        var nodes = [];
-        var links = [];
-
-        var INVISIBLE = {
-          color: 'rgba(0,0,0,0)', borderWidth: 0, shadowBlur: 0,
-          shadowColor: 'transparent', shadowOffsetX: 0, shadowOffsetY: 0
-        };
-
-        // Place a node; if `port` is given, route the connector from the
-        // parent to an invisible port node on the box's top/bottom edge
-        // instead of to the box itself.
-        function pushNode(node, x, y, port) {
-          nodes.push(Object.assign({
-            id: String(node.id), name: node.name, x: x, y: y,
-            link: node.link, tooltip: node.tooltip
-          }, nodeStyles(node)));
-          if (node.parent === undefined || node.parent === null || !assetMap[node.parent]) {
-            return;
-          }
-          if (port) {
-            var pid = 'port-' + node.id;
-            nodes.push({
-              id: pid, name: '', x: port.x, y: port.y,
-              symbol: 'circle', symbolSize: 0.1, silent: true,
-              label: { show: false },
-              itemStyle: INVISIBLE
-            });
-            links.push({
-              source: String(node.parent), target: pid,
-              lineStyle: { curveness: port.curveness }
-            });
-          } else {
-            links.push({ source: String(node.parent), target: String(node.id) });
-          }
-        }
-
-        // Recursively lay out `node` (at tree level `d`) and its subtree,
-        // starting at vertical offset topY. Returns the block height and
-        // the node's own center y.
-        function layoutSubtree(node, d, topY) {
-          var s = splitKids(node);
-          if (!s.gridKids.length && !s.rowKids.length) {
-            var cy = topY + slotY / 2;
-            pushNode(node, colX(d), cy);
-            return { height: slotY, centerY: cy };
-          }
-          var y = topY;
-          var centers = [];
-          if (s.gridKids.length) {
-            var cols = colsFor(s.gridKids.length, d + 1);
-            var rows = Math.ceil(s.gridKids.length / cols);
-            s.gridKids.forEach(function(k, i) {
-              var col = i % cols, row = Math.floor(i / cols);
-              var x = colX(d + 1) + col * colGapX;
-              var ky = y + slotY / 2 + row * slotY;
-              var topRow = row === 0;
-              pushNode(k, x, ky, {
-                x: x,
-                y: topRow ? ky - BOX_SIZE / 2 : ky + BOX_SIZE / 2,
-                curveness: topRow ? 0.18 : -0.18
-              });
-            });
-            var blockH = rows * slotY;
-            centers.push(y + blockH / 2);
-            y += blockH + blockGap;
-          }
-          s.rowKids.forEach(function(k) {
-            var sub = layoutSubtree(k, d + 1, y);
-            centers.push(sub.centerY);
-            y += sub.height + blockGap;
-          });
-          y -= blockGap; // drop the trailing gap
-          var centerY = centers.reduce(function(a, b) { return a + b; }, 0) / centers.length;
-          pushNode(node, colX(d), centerY);
-          return { height: y - topY, centerY: centerY };
-        }
-
-        var cursorY = slotY * 0.5;
-        rootNodes.forEach(function(rt) {
-          cursorY += layoutSubtree(rt, 0, cursorY).height + blockGap;
-        });
-        var contentH = cursorY - blockGap + slotY * 0.5;
-
-        // Invisible pin nodes make the layout's bounding box deterministic:
-        // exactly the canvas width by at least the viewport height. The
-        // graph view fits that box into the canvas, so the transform is
-        // identity while the content fits, and a uniform zoom-out once the
-        // content is taller than the viewport.
-        [[0, 0], [W, Math.max(contentH, viewportH)]].forEach(function(p, i) {
-          nodes.push({
-            id: '__pin' + i, name: '', x: p[0], y: p[1],
-            symbol: 'circle', symbolSize: 0.1, silent: true,
-            label: { show: false }, itemStyle: INVISIBLE
-          });
-        });
-
-        var option = {
-          tooltip: {
-            trigger: 'item',
-            triggerOn: 'mousemove',
-            backgroundColor: 'rgba(255, 255, 255, 0.95)',
-            borderColor: '#e2e8f0',
-            borderWidth: 1,
-            textStyle: { color: '#334155' },
-            formatter: function(params) {
-              return params.data.tooltip || params.name;
-            }
-          },
-          series: [
-            {
-              type: 'graph',
-              layout: 'none',
-              data: nodes,
-              links: links,
-              // Drag to pan; wheel and +/- buttons drive series.zoom below.
-              roam: 'move',
-              zoom: zoomFactor,
-              // Scale node symbols 1:1 with the view zoom.
-              nodeScaleRatio: 1,
-              edgeSymbol: ['none', 'none'],
-              animationDuration: 550,
-              // No update animation during continuous wheel-zoom, so the tree
-              // follows the wheel without lagging behind.
-              animationDurationUpdate: animate === false ? 0 : 400,
-              lineStyle: {
-                color: '#94a3b8',
-                width: 2,
-                curveness: 0.15
-              }
-            }
-          ]
-        };
-
-        myChart.setOption(option);
+        myChart.setOption(buildAssetTreeOption(rootNodes, assetMap, {
+          width: chartDom.clientWidth || 1000,
+          viewportHeight: viewportH,
+          zoomFactor: zoomFactor,
+          currentAssetId: currentAssetId,
+          animate: animate,
+        }));
       }
 
       updateChart();
@@ -432,9 +84,8 @@
       // Zoom re-renders the tree at a new scale (node sizes + layout margins)
       // while the canvas stays a fixed size - so the tree shrinks/grows WITHIN
       // the gray area (like a map), rather than the area itself changing size.
-      var ZOOM_MIN = 0.3, ZOOM_MAX = 2.5, ZOOM_STEP = 0.2;
       function setZoom(z, animate) {
-        zoomFactor = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(z * 100) / 100));
+        zoomFactor = clampZoom(z);
         updateChart(animate);
       }
       // Reset zoom AND any drag-pan offset (clear() drops the roam state).
diff --git a/flexmeasures/ui/templates/assets/asset_context.html b/flexmeasures/ui/templates/assets/asset_context.html
index 5070b607d9..57e2d4b8f1 100644
--- a/flexmeasures/ui/templates/assets/asset_context.html
+++ b/flexmeasures/ui/templates/assets/asset_context.html
@@ -71,8 +71,8 @@ <h1>
                 <!-- Structure Content -->
                 <div class="tab-pane fade {% if assets|length > 2 %}show active{% endif %}" id="structure">
                     <div class="col-sm-12">
-                        {% from "_macros.html" import show_tree %}
-                        {{ show_tree(assets, asset.name) }}
+                        {% from "_macros.html" import show_tree with context %}
+                        {{ show_tree(assets, asset.id) }}
                     </div>
                 </div>
 
@@ -215,7 +215,7 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-context</h5>
 
 <script>
     function openSensorsModal() {
-        const sensors = {{ current_asset_sensors | safe }};
+        const sensors = {{ current_asset_sensors | tojson }};
         document.getElementById("modalTitle").innerText = "Sensors for " + {{ asset.name | tojson }};
         let tableHead = document.getElementById("modalTableHead");
         let tableBody = document.getElementById("modalTableBody");
@@ -254,12 +254,18 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-context</h5>
                     if (key === "name") {
                         // Create an anchor element
                         let a = document.createElement("a");
-                        a.innerHTML = sensor[key] !== undefined ? sensor[key] : "N/A";
+                        // As text: a sensor name is whatever its creator typed.
+                        a.textContent = sensor[key] !== undefined ? sensor[key] : "N/A";
                         // Set the href; you can modify this as needed, for example using sensor.link if available
                         a.href = sensor.link;
                         td.appendChild(a);
+                    } else if (key === "unit" && sensor[key] === "") {
+                        const dimensionless = document.createElement("span");
+                        dimensionless.title = "A sensor recording numbers rather than physical or economical quantities.";
+                        dimensionless.textContent = "dimensionless";
+                        td.appendChild(dimensionless);
                     } else {
-                        td.innerHTML = sensor[key] !== undefined ? sensor[key] : "N/A";
+                        td.textContent = sensor[key] !== undefined ? sensor[key] : "N/A";
                     }
                     row.appendChild(td);
                 });
@@ -314,10 +320,15 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-context</h5>
 
 <script type="module">
     import {
-        getFlexFieldTitle, renderSensor, getAsset, createReactiveState,
+        getFlexFieldTitle, renderSensor, getAsset, getSensor, createReactiveState,
         apiBasePath, processResourceRawJSON, convertHtmlToElement, renderSensorSearchResults,
         extractApiErrorMessage
     } from "{{ url_for('flexmeasures_ui.static', filename='js/ui-utils.js') }}?v={{ flexmeasures_version }}";
+    import * as flexContextUtils from "{{ url_for('flexmeasures_ui.static', filename='js/flex-context-utils.js') }}?v={{ flexmeasures_version }}";
+    const {
+        entrySensorId, isStructuralField, cleanFlexContext, findFlexContextCurrency, currencyInUnit,
+        parseCommitmentValue, describeCommitmentValue
+    } = flexContextUtils;
 
     let hasInitialized = false;
     const senSearchResEle = document.getElementById("sensorsSearchResults")
@@ -326,9 +337,7 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-context</h5>
     const flexSelect = document.getElementById('flexSelect');
     const flexInfoContainer = document.getElementById('flexInfoContainer');
     const flexOptionsContainer = document.getElementById('flexOptionsContainer');
-    let availableUnitsRawJSON = "{{ available_units | safe }}";
-    availableUnitsRawJSON = availableUnitsRawJSON.replace(/'/g, '"');
-    const availableUnits = JSON.parse(availableUnitsRawJSON);
+    const availableUnits = {{ available_units | tojson }};
 
     // Flex-context fields defined on ancestor assets (nearest first), which apply
     // when scheduling this asset unless shadowed by a field set here.
@@ -347,23 +356,14 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-context</h5>
         assetFlexContextSchema[key] = value["default"];
     }
 
-    // Sensor-only fields offer no "Fixed value" tab in the editor.
-    // typeTwo = a single sensor reference, typeFour = a list of sensors.
+    // Sensor-only fields offer no "Fixed value" tab in the editor (see flex-context-utils.js).
     function isSensorOnlyField(fieldName) {
-        const backendType = schemaSpecs[fieldName]?.["types"]?.["backend"];
-        return backendType === "typeTwo" || backendType === "typeFour";
+        return flexContextUtils.isSensorOnlyField(schemaSpecs, fieldName);
     }
 
-    // Multi-sensor list fields (e.g. inflexible-consumption/inflexible-production)
-    // keep their card active so several sensors can be added in a row.
+    // Multi-sensor list fields keep their card active so several sensors can be added in a row.
     function isSensorListField(fieldName) {
-        return schemaSpecs[fieldName]?.["types"]?.["backend"] === "typeFour";
-    }
-
-    // Entries of sensor list fields are sensor references ({"sensor": <id>}, possibly
-    // with source filters); the deprecated inflexible-device-sensors field holds bare ids.
-    function entrySensorId(entry) {
-        return (typeof entry === "object" && entry !== null) ? entry["sensor"] : entry;
+        return flexContextUtils.isSensorListField(schemaSpecs, fieldName);
     }
 
     // ============== Commodity scope BEGIN ============== //
@@ -372,24 +372,12 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-context</h5>
     // "commodities" list (activeCommodityIndex is that entry's index).
     let activeCommodityIndex = null;
 
-    // Fields managed by the commodity tab bar rather than as cards.
-    const structuralFields = ["commodities", "commodity"];
-
     function getActiveContext(assetFlexContext) {
-        if (activeCommodityIndex === null) {
-            return assetFlexContext;
-        }
-        return assetFlexContext["commodities"][activeCommodityIndex];
+        return flexContextUtils.getActiveContext(assetFlexContext, activeCommodityIndex);
     }
 
     function isFieldAvailableInScope(fieldName) {
-        if (structuralFields.includes(fieldName)) {
-            return false;
-        }
-        if (activeCommodityIndex === null) {
-            return true;
-        }
-        return schemaSpecs[fieldName]?.["per-commodity"] === true;
+        return flexContextUtils.isFieldAvailableInScope(schemaSpecs, fieldName, activeCommodityIndex);
     }
 
     function switchCommodityScope(newIndex) {
@@ -470,7 +458,13 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-context</h5>
         });
     }
     // ============== Commodity scope END ============== //
-    const [assetFlexContextRawJSON, extraFields] = processResourceRawJSON({ ...assetFlexContextSchema }, "{{ asset.flex_context | safe }}", true);
+    const [assetFlexContextRawJSON, extraFields] = processResourceRawJSON(
+        { ...assetFlexContextSchema },
+        // As JSON rather than as the Python representation inside a string literal,
+        // which a double quote in any value (such as a commitment's name) would end early.
+        {{ (asset.flex_context or {}) | tojson }},
+        true,
+    );
 
     const spinnerElement = document.getElementById('spinnerElement');
     const sensorsApiUrl = `${apiBasePath}/api/v3_0/sensors?page=1&per_page=100&asset_id={{ site_asset.id }}`;
@@ -528,41 +522,7 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-context</h5>
 
     async function updateFlexContext() {
         const apiURL = apiBasePath + "/api/v3_0/assets/{{ asset.id }}";
-        let data = getFlexContext();
-
-        function cleanContext(context, isCommodityContext) {
-            // Take out keys that are not in the specs, sparing structural keys
-            // (the commodities list itself is not part of the UI schema).
-            for (const key in context) {
-                if (isCommodityContext && key === "commodity") {
-                    continue;
-                }
-                if (!isCommodityContext && key === "commodities") {
-                    continue;
-                }
-                if (!assetFlexContextSchema.hasOwnProperty(key)) {
-                    delete context[key];
-                }
-            }
-
-            // Clean null values
-            for (const [key, value] of Object.entries(context)) {
-                if (
-                    value === null ||
-                    value === "" ||
-                    (Array.isArray(value) && value.length === 0)
-                ) {
-                    delete context[key];
-                }
-            }
-        }
-
-        cleanContext(data, false);
-        if (data["commodities"]) {
-            for (const commodityContext of data["commodities"]) {
-                cleanContext(commodityContext, true);
-            }
-        }
+        const data = cleanFlexContext(getFlexContext(), assetFlexContextSchema);
 
         const requestBody = JSON.stringify({ flex_context: JSON.stringify(data) });
 
@@ -961,7 +921,7 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-context</h5>
         const activeContext = getActiveContext(assetFlexContext);
 
         for (const [key, value] of Object.entries(activeContext)) {
-            if (value !== null && !structuralFields.includes(key)) {
+            if (value !== null && !isStructuralField(key)) {
                 const fieldCard = await renderFlexContextCard(key);
                 flexContextFormEle.appendChild(fieldCard);
             }
@@ -1189,30 +1149,18 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-context</h5>
     // The scheduler requires all prices to share one currency, so derive the
     // default from price fields already in the flex-context (falling back to EUR).
     async function activeCurrency() {
-        const assetFlexContext = getFlexContext();
-        const contexts = [assetFlexContext, ...(assetFlexContext["commodities"] || [])];
-        const priceSensorIds = [];
-        for (const context of contexts) {
-            for (const [key, value] of Object.entries(context || {})) {
-                if (typeof value === "string") {
-                    const currencyMatch = value.match(/([A-Z]{3})\/[kMG]?W/);
-                    if (currencyMatch) {
-                        return currencyMatch[1];
-                    }
-                }
-                if (key.includes("price") && value !== null && typeof value === "object" && value["sensor"]) {
-                    priceSensorIds.push(value["sensor"]);
-                }
-            }
+        const { currency, priceSensorIds } = findFlexContextCurrency(getFlexContext());
+        if (currency) {
+            return currency;
         }
         // No fixed price values found: best effort, look up the unit of
         // sensor-referenced price fields (getSensor caches in localStorage).
         for (const sensorId of priceSensorIds) {
             try {
                 const sensor = await getSensor(sensorId);
-                const currencyMatch = (sensor["unit"] || "").match(/([A-Z]{3})\/[kMG]?W/);
-                if (currencyMatch) {
-                    return currencyMatch[1];
+                const sensorCurrency = currencyInUnit(sensor["unit"]);
+                if (sensorCurrency) {
+                    return sensorCurrency;
                 }
             } catch (error) {
                 // Ignore lookup failures; worst case we fall back to EUR.
@@ -1257,27 +1205,6 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-context</h5>
         setFlexContext(assetFlexContext);
     }
 
-    // Turn free text into a commitment value: "sensor 536" (any casing) becomes
-    // a sensor reference, anything else is kept as a fixed quantity string.
-    function parseCommitmentValue(raw) {
-        const sensorMatch = raw.trim().toLowerCase().match(/^sensor\s+(\d+)$/);
-        if (sensorMatch) {
-            return { "sensor": parseInt(sensorMatch[1], 10) };
-        }
-        return raw.trim();
-    }
-
-    // Returns a plain-text description, or null when the value is not set.
-    function describeCommitmentValue(value) {
-        if (value === undefined || value === null || value === "") {
-            return null;
-        }
-        if (typeof value === "object" && value["sensor"]) {
-            return `sensor ${value["sensor"]}`;
-        }
-        return String(value);
-    }
-
     function renderCommitmentsEditor() {
         const container = document.createElement("div");
         container.id = "flex-input-options";
diff --git a/flexmeasures/ui/templates/assets/asset_graph.html b/flexmeasures/ui/templates/assets/asset_graph.html
index 115f90f410..2fbca08bdc 100644
--- a/flexmeasures/ui/templates/assets/asset_graph.html
+++ b/flexmeasures/ui/templates/assets/asset_graph.html
@@ -401,7 +401,7 @@ <h6 class="card-title fw-bold pb-2">Field setting</h6>
 <script type="module">
     import {
         getFlexFieldTitle, renderSensor, getAsset, getAccount, getSensor, createReactiveState,
-        apiBasePath, processResourceRawJSON, convertHtmlToElement, moveArrayItem
+        apiBasePath, processResourceRawJSON, convertHtmlToElement, moveArrayItem, escapeHtml, unitHtml
     } from "{{ url_for('flexmeasures_ui.static', filename='js/ui-utils.js') }}?v={{ flexmeasures_version }}";
 
     import { renderAssetPlotCard, renderSensorCard, renderSensorsList } from "{{ url_for('flexmeasures_ui.static', filename='js/components.js') }}?v={{ flexmeasures_version }}";
@@ -1051,10 +1051,10 @@ <h6 class="card-title fw-bold pb-2">Field setting</h6>
                     }
                     if (!asset || !asset.name) {
                         unavailablePlotCount += 1;
-                        plotHeader.innerHTML = `<b>Asset ${plot.asset}: ${plot["flex-model"] || plot["flex-context"]} (Not available)</b>`;
+                        plotHeader.innerHTML = `<b>Asset ${escapeHtml(plot.asset)}: ${escapeHtml(plot["flex-model"] || plot["flex-context"])} (Not available)</b>`;
                         plotHeader.classList.add("text-warning");
                     } else {
-                        plotHeader.innerHTML = `<b>${asset.name}: ${plot["flex-model"] || plot["flex-context"]}</b>`;
+                        plotHeader.innerHTML = `<b>${escapeHtml(asset.name)}: ${escapeHtml(plot["flex-model"] || plot["flex-context"])}</b>`;
                     }
                     const assetPlotContent = await renderAssetPlotCard(plot, removePlotOrSensor, index, plotIndex);
                     plotContainer.appendChild(plotHeader);
@@ -1351,15 +1351,15 @@ <h6 class="card-title fw-bold pb-2">Field setting</h6>
                 col.innerHTML = `
             <div class="card m-0">
                 <div class="card-body p-0 sensor-card">
-                    <h5 class="card-title">${sensor.name}</h5>
+                    <h5 class="card-title">${escapeHtml(sensor.name)}</h5>
                     <p class="card-text">
                         <b>ID:</b> <a href="${apiBasePath}/sensors/${sensor.id}">${sensor.id}</a>,
-                        <b>Unit:</b> ${sensor.unit === '' ? '<span title="A sensor recording numbers rather than physical or economical quantities.">dimensionless</span>' : sensor.unit},
-                        <b>Asset:</b> ${Asset.name},
-                        <b>Account:</b> ${Account?.name ? Account.name : "PUBLIC"}
+                        <b>Unit:</b> ${unitHtml(sensor.unit)},
+                        <b>Asset:</b> ${escapeHtml(Asset.name)},
+                        <b>Account:</b> ${Account?.name ? escapeHtml(Account.name) : "PUBLIC"}
                     </p>
                     ${activeCard() && activeCard().id === `graph_${graphIndex}`
-                        ? `<button class="btn btn-primary btn-sm" onclick="addSensorToExistingGraph(${graphIndex}, ${sensor.id})">Add to '${currentlySelectedGraphText}' Graph</button>`
+                        ? `<button class="btn btn-primary btn-sm" onclick="addSensorToExistingGraph(${graphIndex}, ${sensor.id})">Add to '${escapeHtml(currentlySelectedGraphText)}' Graph</button>`
                         : `<button class="btn btn-primary btn-sm" onclick="addSensorAsGraph(${sensor.id})">Add new Graph</button>`
                     }
                 </div>
@@ -1387,12 +1387,12 @@ <h5 class="card-title">${sensor.name}</h5>
                 col.innerHTML = `
                 <div class="card m-0">
                     <div class="card-body p-0 sensor-card">
-                        <h5 class="card-title">${sensor.name}</h5>
+                        <h5 class="card-title">${escapeHtml(sensor.name)}</h5>
                         <p class="card-text">
                             <b>ID:</b> <a href="${apiBasePath}/sensors/${sensor.id}">${sensor.id}</a>,
-                            <b>Unit:</b> ${sensor.unit === '' ? '<span title="A sensor recording numbers rather than physical or economical quantities.">dimensionless</span>' : sensor.unit},
-                            <b>Asset:</b> ${Asset.name},
-                            <b>Account:</b> ${Account?.name ? Account.name : "PUBLIC"}
+                            <b>Unit:</b> ${unitHtml(sensor.unit)},
+                            <b>Asset:</b> ${escapeHtml(Asset.name)},
+                            <b>Account:</b> ${Account?.name ? escapeHtml(Account.name) : "PUBLIC"}
                         </p>
                         <button class="btn btn-primary btn-sm" onclick="updateFlexContextFieldValue('sensor', ${sensor.id})">Add Sensor</button>
                     </div>
diff --git a/flexmeasures/ui/templates/assets/asset_properties.html b/flexmeasures/ui/templates/assets/asset_properties.html
index 7fd32d79cd..15ac821069 100644
--- a/flexmeasures/ui/templates/assets/asset_properties.html
+++ b/flexmeasures/ui/templates/assets/asset_properties.html
@@ -439,7 +439,8 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-model</h5>
 
         import {
             getFlexFieldTitle, renderFlexFieldOptions, renderSensor, createReactiveState, getAsset,
-            getAccount, getSensor, apiBasePath, renderSensorSearchResults, extractApiErrorMessage, processResourceRawJSON
+            getAccount, getSensor, apiBasePath, renderSensorSearchResults, extractApiErrorMessage, processResourceRawJSON,
+            escapeHtml
         } from "{{ url_for('flexmeasures_ui.static', filename='js/ui-utils.js') }}?v={{ flexmeasures_version }}";
 
         const sensorsApiUrl = `${apiBasePath}/api/v3_0/sensors?page=1&per_page=100&asset_id={{ site_asset.id }}`;
@@ -454,9 +455,7 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-model</h5>
         }
 
         // Parse available units
-        let availableUnitsRawJSON = "{{ available_units | safe }}";
-        availableUnitsRawJSON = availableUnitsRawJSON.replace(/'/g, '"');
-        const availableUnits = JSON.parse(availableUnitsRawJSON);
+        const availableUnits = {{ available_units | tojson }};
 
 
         // This variable is used to prevent reRenderForm from running on initial load
@@ -498,7 +497,7 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-model</h5>
             FlexModelFieldValidTypes[key] = validTypes;
         }
 
-        const [assetFlexModelRawJSON, extraFields] = processResourceRawJSON({ ...assetFlexModelSchema }, '{{ asset_flexmodel | safe }}', true);
+        const [assetFlexModelRawJSON, extraFields] = processResourceRawJSON({ ...assetFlexModelSchema }, {{ asset_flexmodel | tojson }}, true);
 
         document.addEventListener('DOMContentLoaded', async function () {
             const flexOptionsContainer = document.getElementById('flexOptionsContainer');
@@ -1155,7 +1154,7 @@ <h5 class="modal-title pe-2">Edit {{ asset.name }}'s flex-model</h5>
                                 <div class="col-4 ps-0">
                                     <select id="flexUnitsSelect" class="form-select">
                                         <option value="${null}" selected>Units</option>
-                                        ${availableUnits.map(unit => '<option value="' + unit + '">' + unit + '</option>').join('')}
+                                        ${availableUnits.map(unit => '<option value="' + escapeHtml(unit) + '">' + escapeHtml(unit) + '</option>').join('')}
                                     </select>
                                 </div>
                             </div>
diff --git a/flexmeasures/ui/templates/includes/graphs.html b/flexmeasures/ui/templates/includes/graphs.html
index b4cd89b481..bb8350974c 100644
--- a/flexmeasures/ui/templates/includes/graphs.html
+++ b/flexmeasures/ui/templates/includes/graphs.html
@@ -23,7 +23,7 @@
 
     // Import local js (the FM version is used for cache-busting, causing the browser to fetch the updated version from the server)
     import { convertToCSV } from "{{ url_for('flexmeasures_ui.static', filename='js/data-utils.js') }}?v={{ flexmeasures_version }}";
-    import { apiBasePath, pollJobStatus } from "{{ url_for('flexmeasures_ui.static', filename='js/ui-utils.js') }}?v={{ flexmeasures_version }}";
+    import { apiBasePath, pollJobStatus, escapeHtml } from "{{ url_for('flexmeasures_ui.static', filename='js/ui-utils.js') }}?v={{ flexmeasures_version }}";
     import { subtract, computeSimulationRanges, lastNMonths, encodeUrlQuery, getOffsetBetweenTimezonesForDate, toIsoStringWithOffset } from "{{ url_for('flexmeasures_ui.static', filename='js/daterange-utils.js') }}?v={{ flexmeasures_version }}";
     import { partition, updateBeliefs, beliefTimedelta, setAbortableTimeout } from "{{ url_for('flexmeasures_ui.static', filename='js/replay-utils.js') }}?v={{ flexmeasures_version }}";
     import { checkDSTTransitions, checkSourceMasking, checkStrictYAxisRanges } from "{{ url_for('flexmeasures_ui.static', filename='js/chart-data-utils.js') }}?v={{ flexmeasures_version }}";
@@ -1072,10 +1072,10 @@
                     const label = labelMap[kpi.downsample_function];
                     card.innerHTML = `
                   <div class="card-body d-flex flex-column justify-content-between">
-                      <h5 class="card-title">${kpi.title}</h5>
+                      <h5 class="card-title">${escapeHtml(kpi.title)}</h5>
                       <h5 class="card-text">
                           <strong>
-                              ${label}: ${kpi.downsample_value} ${kpi.unit}
+                              ${label}: ${escapeHtml(kpi.downsample_value)} ${escapeHtml(kpi.unit)}
                           </strong>
                       </h5>
                   </div>
diff --git a/flexmeasures/ui/templates/sensors/index.html b/flexmeasures/ui/templates/sensors/index.html
index 72813f5448..e1be07b621 100644
--- a/flexmeasures/ui/templates/sensors/index.html
+++ b/flexmeasures/ui/templates/sensors/index.html
@@ -288,7 +288,7 @@ <h5>Properties</h5>
                               </tr>
                               <tr>
                                   <th>Unit</th>
-                                  <td>{{ sensor._ui_unit | safe }}</td>
+                                  <td>{% if sensor.unit == "" %}<span title="A sensor recording numbers rather than physical or economical quantities.">dimensionless</span>{% else %}{{ sensor.unit }}{% endif %}</td>
                               </tr>
                               <tr>
                                   <th>Event resolution</th>
@@ -491,9 +491,7 @@ <h5 class="modal-title" id="SourceDetailsTitle">Data source</h5>
     document.getElementById('sourceDetailsButton')?.addEventListener('click', function () {
         showSourceDetails(this.dataset.sourceId);
     });
-    let availableUnitsRawJSON = "{{ available_units | safe }}";
-    availableUnitsRawJSON = availableUnitsRawJSON.replace(/'/g, '"');
-    const availableUnits = JSON.parse(availableUnitsRawJSON);
+    const availableUnits = {{ available_units | tojson }};
     
     const flexUnitsSelect = document.getElementById('flexUnitsSelect');
     
diff --git a/flexmeasures/ui/tests/js/README.md b/flexmeasures/ui/tests/js/README.md
index 1c43fd714c..4f680641db 100644
--- a/flexmeasures/ui/tests/js/README.md
+++ b/flexmeasures/ui/tests/js/README.md
@@ -18,6 +18,15 @@ def test_something(assert_js):
     )
 ```
 
+A few files, such as `flexmeasures.js` and `map-init.js`, are classic scripts rather than modules:
+their functions become globals, and they expect libraries such as jQuery or Leaflet on the page.
+Their tests put stand-ins for those libraries on `window`, then load the script with a `<script>` element
+(see `test_flexmeasures_js.py`).
+
+Logic that lives inline in a template cannot be reached this way.
+To test it, move it into a module under `flexmeasures/ui/static/js` and import that from the template,
+as `asset-tree.js` and `flex-context-utils.js` were moved out of `_macros.html` and `assets/asset_context.html`.
+
 Run them with the rest of the suite, or on their own:
 
 ```bash
diff --git a/flexmeasures/ui/tests/js/test_asset_tree.py b/flexmeasures/ui/tests/js/test_asset_tree.py
new file mode 100644
index 0000000000..ab97b6bbeb
--- /dev/null
+++ b/flexmeasures/ui/tests/js/test_asset_tree.py
@@ -0,0 +1,153 @@
+"""Tests for flexmeasures/ui/static/js/asset-tree.js, the layout of the asset tree on the asset context page."""
+
+# Builds an option for a list of assets, and helpers to find the drawn boxes in it.
+TREE = """
+import { buildAssetHierarchy, buildAssetTreeOption, wrapName, clampZoom, ZOOM_MIN, ZOOM_MAX } from "/js/asset-tree.js";
+const layout = (assets, options = {}) => {
+    const { assetMap, rootNodes } = buildAssetHierarchy(assets);
+    return buildAssetTreeOption(rootNodes, assetMap, {width: 1000, viewportHeight: 600, ...options});
+};
+const boxes = (option) => option.series[0].data.filter((n) => n.symbol === "roundRect");
+const box = (option, id) => boxes(option).find((n) => n.id === String(id));
+const leaves = (parent, n) => Array.from({length: n}, (_, i) => ({id: 100 + i, name: `leaf ${i}`, parent}));
+"""
+
+
+def test_hierarchy(assert_js):
+    assert_js("""
+        import { buildAssetHierarchy } from "/js/asset-tree.js";
+        const { assetMap, rootNodes } = buildAssetHierarchy([
+            {id: 2, name: "battery", parent: 1},
+            {id: 1, name: "site"},
+            {id: 3, name: "orphan", parent: 99},
+        ]);
+        eq("assets without a parent in the list are roots", rootNodes.map((n) => n.name), ["site", "orphan"]);
+        eq("children hang under their parent, whatever the order", assetMap[1].children.map((n) => n.name), ["battery"]);
+        eq("every asset is kept", Object.keys(assetMap).length, 3);
+        """)
+
+
+def test_every_asset_is_drawn_and_connected(assert_js):
+    assert_js(TREE + """
+        const option = layout([
+            {id: 1, name: "site"},
+            {id: 2, name: "building", parent: 1},
+            {id: 3, name: "battery", parent: 2},
+            {id: 4, name: "solar", parent: 2},
+            {id: "new", name: "Add asset", parent: 2},
+        ]);
+        eq("one box per asset", boxes(option).map((n) => n.id).sort(), ["1", "2", "3", "4", "new"]);
+        const links = option.series[0].links;
+        eq("the root has no connector of its own", links.filter((l) => l.target === "1").length, 0);
+        eq("the building connects to the site", links.filter((l) => l.source === "1").length, 1);
+        eq("the leaves connect to their parent through ports",
+           links.filter((l) => l.target.startsWith("port-")).map((l) => [l.source, l.target]).sort(),
+           [["2", "port-3"], ["2", "port-4"]]);
+        eq("the action node is connected directly", links.filter((l) => l.target === "new").length, 1);
+        check("children sit to the right of their parent",
+              box(option, 3).x > box(option, 2).x && box(option, 2).x > box(option, 1).x);
+        """)
+
+
+def test_a_small_family_stays_on_one_row(assert_js):
+    assert_js(TREE + """
+        const option = layout([{id: 1, name: "site"}, ...leaves(1, 4)]);
+        const ys = new Set([100, 101, 102, 103].map((id) => box(option, id).y));
+        eq("four leaves share one row", ys.size, 1);
+        eq("connectors arrive from above",
+           option.series[0].links.map((l) => l.lineStyle.curveness), [0.18, 0.18, 0.18, 0.18]);
+        """)
+
+
+def test_a_wide_family_wraps_onto_two_balanced_rows_and_no_more(assert_js):
+    assert_js(TREE + """
+        const count = (option, n) => {
+            const rows = {};
+            for (let i = 0; i < n; i++) {
+                const y = box(option, 100 + i).y;
+                rows[y] = (rows[y] || 0) + 1;
+            }
+            return Object.entries(rows).sort((a, b) => a[0] - b[0]).map(([, k]) => k);
+        };
+        eq("too many leaves for one row are split over two, the top one at most one wider",
+           count(layout([{id: 1, name: "site"}, ...leaves(1, 25)]), 25), [13, 12]);
+        const wide = layout([{id: 1, name: "site"}, ...leaves(1, 40)]);
+        eq("a wider family still keeps to two rows", count(wide, 40), [20, 20]);
+        check("and shrinks its boxes to fit the width instead",
+              boxes(wide).every((n) => n.x + n.symbolSize[0] / 2 <= 1000), JSON.stringify(boxes(wide).map((n) => n.x)));
+        const bottomRow = wide.series[0].links.filter((l) => l.lineStyle && l.lineStyle.curveness < 0);
+        eq("connectors to the bottom row arrive from below", bottomRow.length, 20);
+        eq("even a huge family keeps to two rows", count(layout([{id: 1, name: "site"}, ...leaves(1, 80)]), 80), [40, 40]);
+        """)
+
+
+def test_the_current_asset_is_highlighted_by_id(assert_js):
+    """Asset names are only unique among siblings, so a child may share its parent's name."""
+    assert_js(TREE + """
+        const option = layout([{id: 1, name: "Battery"}, {id: 2, name: "Battery", parent: 1}], {currentAssetId: 1});
+        eq("only the current asset is gold", [box(option, 1).itemStyle.color, box(option, 2).itemStyle.color],
+           ["#fcd34d", "#ffffff"]);
+        check("and drawn slightly larger", box(option, 1).symbolSize[0] > box(option, 2).symbolSize[0]);
+        """)
+
+
+def test_only_the_action_node_looks_like_a_button(assert_js):
+    """An asset may be called "Add asset" without turning into the button that adds one."""
+    assert_js(TREE + """
+        const option = layout([
+            {id: 1, name: "site"},
+            {id: 2, name: "Add asset", parent: 1},
+            {id: "new", name: "Add asset", parent: 1},
+        ]);
+        eq("the real asset is drawn as an asset", box(option, 2).itemStyle.color, "#ffffff");
+        eq("the action node is green", box(option, "new").itemStyle.color, "#10b981");
+        """)
+
+
+def test_labels_follow_the_zoom(assert_js):
+    assert_js(TREE + """
+        const assets = [{id: 1, name: "site", icon: "/icons/site.svg"}, ...leaves(1, 3)];
+        const normal = box(layout(assets), 1).label;
+        const zoomedIn = box(layout(assets, {zoomFactor: 2}), 1).label;
+        const crowded = [{id: 1, name: "site"}, ...leaves(1, 40)];
+        const zoomedOut = box(layout(crowded, {zoomFactor: ZOOM_MIN}), 1).label;
+        check("zooming in enlarges the text", zoomedIn.fontSize > normal.fontSize, `${zoomedIn.fontSize} vs ${normal.fontSize}`);
+        eq("zooming far out on small boxes hides the text", zoomedOut.show, false);
+        eq("the icon is placed above the name", normal.formatter(), "{icon_1|}\\n{text|site}");
+        eq("names are not read as ECharts templates", box(layout([{id: 1, name: "{b} and {c}"}]), 1).label.formatter(),
+           "{text|{b} and {c}}");
+        """)
+
+
+def test_zoom_changes_the_series_but_not_the_canvas(assert_js):
+    assert_js(TREE + """
+        const assets = [{id: 1, name: "site"}, ...leaves(1, 3)];
+        const pins = (option) => option.series[0].data.filter((n) => n.id.startsWith("__pin")).map((n) => [n.x, n.y]);
+        eq("pins span the canvas", pins(layout(assets)), [[0, 0], [1000, 600]]);
+        eq("whatever the zoom", pins(layout(assets, {zoomFactor: 2})), [[0, 0], [1000, 600]]);
+        eq("the zoom is handed to the series", layout(assets, {zoomFactor: 2}).series[0].zoom, 2);
+        eq("continuous zooming skips the animation", layout(assets, {animate: false}).series[0].animationDurationUpdate, 0);
+        eq("a zoom is kept within bounds", [clampZoom(0.01), clampZoom(100), clampZoom(1.234)], [ZOOM_MIN, ZOOM_MAX, 1.23]);
+        """)
+
+
+def test_a_tall_tree_extends_the_canvas_downward(assert_js):
+    assert_js(TREE + """
+        const assets = [{id: 1, name: "site"}];
+        for (let i = 2; i < 40; i++) assets.push({id: i, name: `building ${i}`, parent: 1}, {id: 1000 + i, name: "meter", parent: i});
+        const option = layout(assets);
+        const lowestPin = option.series[0].data.find((n) => n.id === "__pin1");
+        check("the pin sits below the viewport, so the view zooms out to fit",
+              lowestPin.y > 600, String(lowestPin.y));
+        """)
+
+
+def test_wrap_name(assert_js):
+    assert_js("""
+        import { wrapName } from "/js/asset-tree.js";
+        eq("a short name fits on one line", wrapName("PV", 10, 3), "PV");
+        eq("longer names break between words", wrapName("rooftop solar panels", 10, 3), "rooftop\\nsolar\\npanels");
+        eq("words longer than a line are cut", wrapName("supercalifragilistic", 8, 3), "supercal\\nifragili\\nstic");
+        eq("what does not fit ends in an ellipsis", wrapName("one two three four five", 5, 2), "one\\ntwo…");
+        eq("names need not be strings", wrapName(42, 5, 1), "42");
+        """)
diff --git a/flexmeasures/ui/tests/js/test_chart_data_cache.py b/flexmeasures/ui/tests/js/test_chart_data_cache.py
new file mode 100644
index 0000000000..fdb88cc387
--- /dev/null
+++ b/flexmeasures/ui/tests/js/test_chart_data_cache.py
@@ -0,0 +1,217 @@
+"""Tests for flexmeasures/ui/static/js/chart-data-cache.js and chart-data-fetch.js.
+
+The cache is exercised against a stand-in for `fetch`, which records what was asked for,
+and answers with one record per hour of the window asked for, in the compressed format the API sends.
+"""
+
+# Installs the stand-in for `fetch`, and helpers to build dates and records.
+# Hourly records for sensor 1, on UTC dates, so the tests do not depend on the browser's timezone.
+FAKE_API = """
+const requests = [];
+const HOUR = 3600 * 1000;
+window.fetch = async (url) => {
+    requests.push(url);
+    const query = new URLSearchParams(url.split("?")[1]);
+    const start = new Date(query.get("event_starts_after")).getTime();
+    const end = new Date(query.get("event_ends_before")).getTime();
+    const data = [];
+    for (let t = start; t < end; t += HOUR) data.push({sid: 1, src: 9, ts: t, val: t / HOUR, bh: 0, bt: t});
+    return {json: async () => ({
+        data: data,
+        sensors: {1: {name: "power", unit: "kW", event_resolution: 3600}},
+        sources: {9: {name: "meter", type: "user"}},
+    })};
+};
+const day = (d) => new Date(Date.UTC(2022, 0, d));
+const starts = (records) => records.map((r) => r.event_start);
+const hoursBetween = (a, b) => (b - a) / HOUR;
+"""
+
+
+def test_missing_ranges(assert_js):
+    assert_js("""
+        import { missingRanges } from "/js/chart-data-cache.js";
+        const day = (d) => new Date(Date.UTC(2022, 0, d));
+        const loaded = {start: day(10), end: day(17)};
+        eq("nothing loaded means everything is missing",
+           missingRanges(day(1), day(3), null), [{start: day(1), end: day(3)}]);
+        eq("a window inside the loaded one needs nothing", missingRanges(day(11), day(15), loaded), []);
+        eq("stepping forward needs only the new tail",
+           missingRanges(day(11), day(18), loaded), [{start: day(17), end: day(18)}]);
+        eq("stepping back needs only the new head",
+           missingRanges(day(9), day(16), loaded), [{start: day(9), end: day(10)}]);
+        eq("widening on both sides needs a head and a tail",
+           missingRanges(day(8), day(20), loaded),
+           [{start: day(8), end: day(10)}, {start: day(17), end: day(20)}]);
+        eq("a window that merely touches the loaded one is fetched whole",
+           missingRanges(day(17), day(20), loaded), [{start: day(17), end: day(20)}]);
+        eq("a window apart from the loaded one is fetched whole",
+           missingRanges(day(1), day(3), loaded), [{start: day(1), end: day(3)}]);
+        """)
+
+
+def test_effective_resolution_is_the_finest_non_instantaneous_one(assert_js):
+    assert_js("""
+        import { effectiveResolutionMs } from "/js/chart-data-cache.js";
+        const record = (seconds) => ({sensor: {event_resolution: seconds}});
+        eq("the finest resolution wins", effectiveResolutionMs([record(3600), record(900)]), 900000);
+        eq("instantaneous sensors are left out", effectiveResolutionMs([record(0), record(3600)]), 3600000);
+        eq("only instantaneous sensors means zero", effectiveResolutionMs([record(0)]), 0);
+        eq("no records means zero", effectiveResolutionMs([]), 0);
+        eq("records without a sensor are skipped", effectiveResolutionMs([{}, record(60)]), 60000);
+        eq("no records at all means zero", effectiveResolutionMs(undefined), 0);
+        """)
+
+
+def test_on_same_resampling_grid(assert_js):
+    assert_js("""
+        import { onSameResamplingGrid } from "/js/chart-data-cache.js";
+        const t = (minutes) => new Date(Date.UTC(2022, 0, 1) + minutes * 60000);
+        eq("whole hours are on an hourly grid", onSameResamplingGrid(t(0), t(120), t(600), 3600000), true);
+        eq("a window starting off the grid is not",
+           onSameResamplingGrid(t(0), t(30), t(600), 3600000), false);
+        eq("a window ending off the grid is not", onSameResamplingGrid(t(0), t(60), t(610), 3600000), false);
+        eq("7-minute steps do not line up with whole hours",
+           onSameResamplingGrid(t(0), t(60), t(120), 7 * 60000), false);
+        eq("without a resolution, anything goes", onSameResamplingGrid(t(0), t(7), t(13), 0), true);
+        """)
+
+
+def test_clip_to_window_keeps_events_overlapping_the_window(assert_js):
+    """The API selects events that overlap the window, not just those starting inside it."""
+    assert_js("""
+        import { clipToWindow } from "/js/chart-data-cache.js";
+        const HOUR = 3600000;
+        const hourly = (h) => ({event_start: h * HOUR, sensor: {event_resolution: 3600}});
+        const instant = (h) => ({event_start: h * HOUR, sensor: {event_resolution: 0}});
+        const kept = (records, from, until, resolution) =>
+            clipToWindow(records, new Date(from * HOUR), new Date(until * HOUR), resolution * HOUR)
+            .map((r) => r.event_start / HOUR);
+        eq("events inside [start, end) are kept", kept([hourly(1), hourly(2), hourly(3)], 1, 3, 1), [1, 2]);
+        eq("an event running across the start is kept", kept([hourly(0)], 0.5, 3, 1), [0]);
+        eq("an event ending exactly at the start is not", kept([hourly(0)], 1, 3, 1), []);
+        eq("instantaneous events count on both edges", kept([instant(1), instant(3), instant(4)], 1, 3, 1), [1, 3]);
+        eq("no records gives no records", clipToWindow(undefined, new Date(0), new Date(1), 1), []);
+        """)
+
+
+def test_dedupe_records(assert_js):
+    assert_js("""
+        import { dedupeRecords } from "/js/chart-data-cache.js";
+        const record = (sensor, start, source, beliefTime, value) =>
+            ({sensor: {id: sensor}, event_start: start, source: {id: source}, belief_time: beliefTime, event_value: value});
+        const records = [
+            record(1, 0, 9, 0, "first"),
+            record(1, 0, 9, 0, "repeat"),
+            record(2, 0, 9, 0, "other sensor"),
+            record(1, 0, 8, 0, "other source"),
+            record(1, 0, 9, 5, "other belief time"),
+        ];
+        eq("only the exact repeat is dropped, keeping the first",
+           dedupeRecords(records).map((r) => r.event_value),
+           ["first", "other sensor", "other source", "other belief time"]);
+        """)
+
+
+def test_build_chart_data_url(assert_js):
+    assert_js("""
+        import { buildChartDataUrl } from "/js/chart-data-fetch.js";
+        const start = new Date(Date.UTC(2022, 0, 1));
+        const end = new Date(Date.UTC(2022, 0, 2));
+        eq("the window is sent in UTC, compressed",
+           buildChartDataUrl("/api/v3_0/assets/1", {start, end}),
+           "/api/v3_0/assets/1/chart_data?event_starts_after=2022-01-01T00:00:00.000Z"
+           + "&event_ends_before=2022-01-02T00:00:00.000Z&compress_json=true");
+        check("every belief is asked for only when explicitly wanted",
+              buildChartDataUrl("/x", {start, end, mostRecentBeliefsOnly: false}).includes("most_recent_beliefs_only=false"));
+        check("the default leaves it to the API",
+              !buildChartDataUrl("/x", {start, end, mostRecentBeliefsOnly: true}).includes("most_recent_beliefs_only"));
+        """)
+
+
+def test_fetch_chart_data_decompresses_the_response(assert_js):
+    assert_js(FAKE_API + """
+        import { fetchChartData, fetchChartAnnotations } from "/js/chart-data-fetch.js";
+        const records = await fetchChartData("/api/v3_0/sensors/1", {start: day(1), end: day(2)});
+        eq("one record per hour of the day", records.length, 24);
+        eq("records come back in the chart format", records[0].sensor.name, "power");
+
+        window.fetch = async (url) => { requests.push(url); return {json: async () => [{content: "holiday"}]}; };
+        const annotations = await fetchChartAnnotations("/api/v3_0/assets/1", {start: day(1), end: day(2)});
+        eq("annotations are returned as sent", annotations, [{content: "holiday"}]);
+        check("annotations are asked for the same window",
+              requests.at(-1).startsWith("/api/v3_0/assets/1/chart_annotations?event_starts_after=2022-01-01T00:00:00.000Z"),
+              requests.at(-1));
+        """)
+
+
+def test_cache_fetches_only_what_it_lacks(assert_js):
+    assert_js(FAKE_API + """
+        import { createChartDataCache } from "/js/chart-data-cache.js";
+        const cache = createChartDataCache();
+
+        let records = await cache.load("/s", {start: day(10), end: day(17)});
+        eq("a first load fetches the whole week", requests.length, 1);
+        eq("and returns every hour of it", records.length, 7 * 24);
+
+        records = await cache.load("/s", {start: day(11), end: day(18)});
+        eq("stepping a day forward fetches only that day", requests.length, 2);
+        check("namely the new day", requests[1].includes("event_starts_after=2022-01-17T00:00:00.000Z"), requests[1]);
+        eq("the result covers exactly the new window", [records.length, Math.min(...starts(records))],
+           [7 * 24, day(11).getTime()]);
+
+        records = await cache.load("/s", {start: day(12), end: day(14)});
+        eq("narrowing is answered from memory", requests.length, 2);
+        eq("with exactly the narrower window", records.length, 2 * 24);
+
+        records = await cache.load("/s", {start: day(10), end: day(18)});
+        eq("widening back to what was browsed is answered from memory too", requests.length, 2);
+        eq("without repeating any record", new Set(starts(records)).size, records.length);
+
+        await cache.load("/s", {start: day(1), end: day(3)});
+        eq("a window apart from the held span is fetched whole", requests.length, 3);
+        await cache.load("/s", {start: day(12), end: day(14)});
+        eq("and replaces it, so going back fetches again", requests.length, 4);
+
+        cache.reset();
+        await cache.load("/s", {start: day(12), end: day(14)});
+        eq("after a reset, everything is fetched again", requests.length, 5);
+        """)
+
+
+def test_cache_extends_a_window_touching_the_held_span(assert_js):
+    """Stepping a selection on by exactly its own width keeps both spans."""
+    assert_js(FAKE_API + """
+        import { createChartDataCache } from "/js/chart-data-cache.js";
+        const cache = createChartDataCache();
+        await cache.load("/s", {start: day(10), end: day(17)});
+        await cache.load("/s", {start: day(17), end: day(24)});
+        await cache.load("/s", {start: day(10), end: day(24)});
+        eq("the two adjacent weeks together need no third request", requests.length, 2);
+        """)
+
+
+def test_cache_forgets_records_past_their_age(assert_js):
+    assert_js(FAKE_API + """
+        import { createChartDataCache } from "/js/chart-data-cache.js";
+        const cache = createChartDataCache({maxAgeMs: 30});
+        await cache.load("/s", {start: day(10), end: day(17)});
+        await cache.load("/s", {start: day(11), end: day(12)});
+        eq("fresh records are reused", requests.length, 1);
+        await new Promise((resolve) => setTimeout(resolve, 60));
+        await cache.load("/s", {start: day(11), end: day(12)});
+        eq("stale records are fetched afresh", requests.length, 2);
+        check("for just the window asked", requests[1].includes("event_starts_after=2022-01-11"), requests[1]);
+        """)
+
+
+def test_cache_does_not_reuse_records_off_the_resampling_grid(assert_js):
+    """A window offset from the held span by part of the resolution comes back on shifted timestamps."""
+    assert_js(FAKE_API + """
+        import { createChartDataCache } from "/js/chart-data-cache.js";
+        const cache = createChartDataCache();
+        await cache.load("/s", {start: day(10), end: day(17)});
+        const halfHourLater = new Date(day(11).getTime() + HOUR / 2);
+        await cache.load("/s", {start: halfHourLater, end: day(12)});
+        eq("the shifted window is fetched rather than cut from what is held", requests.length, 2);
+        """)
diff --git a/flexmeasures/ui/tests/js/test_chart_data_utils.py b/flexmeasures/ui/tests/js/test_chart_data_utils.py
index 97ceb8e129..c5f908e1fe 100644
--- a/flexmeasures/ui/tests/js/test_chart_data_utils.py
+++ b/flexmeasures/ui/tests/js/test_chart_data_utils.py
@@ -41,3 +41,77 @@ def test_seconds_valued_sensors_become_dates(assert_js):
               String(rows[0].event_value));
         eq("60 seconds is one minute past the epoch", rows[0].event_value.getTime(), 60000);
         """)
+
+
+# Captures the toasts a function shows, rather than rendering them.
+CAPTURE_TOASTS = """
+const toasts = [];
+window.showToast = (message, type) => toasts.push({message, type});
+"""
+
+
+def test_dst_transitions_are_pointed_out(assert_js):
+    assert_js(
+        CAPTURE_TOASTS + """
+        import { checkDSTTransitions } from "/js/chart-data-utils.js";
+        checkDSTTransitions(new Date(2022, 5, 1), new Date(2022, 5, 8));
+        eq("a week in summer says nothing", toasts.length, 0);
+        checkDSTTransitions(new Date(2022, 2, 24), new Date(2022, 2, 30));
+        check("a week around the spring transition mentions one",
+              toasts.length === 1 && toasts[0].message.includes("a daylight saving time (DST) transition"),
+              JSON.stringify(toasts));
+        checkDSTTransitions(new Date(2022, 0, 1), new Date(2022, 11, 31));
+        check("a year mentions both", toasts.length === 2 && toasts[1].message.includes(" 2 daylight saving"),
+              JSON.stringify(toasts));
+        """,
+        timezone="Europe/Amsterdam",
+    )
+
+
+def test_source_masking_is_pointed_out_on_heatmaps_only(assert_js):
+    """The daily heatmap shows only the most prevalent source."""
+    assert_js(CAPTURE_TOASTS + """
+        import { checkSourceMasking } from "/js/chart-data-utils.js";
+        const twoSources = [{source: {id: 1}}, {source: {id: 2}}];
+        checkSourceMasking(twoSources, "bar_chart");
+        eq("other chart types show every source, so say nothing", toasts.length, 0);
+        checkSourceMasking([{source: {id: 1}}, {source: {id: 1}}], "daily_heatmap");
+        eq("a single source hides nothing", toasts.length, 0);
+        checkSourceMasking(twoSources, "daily_heatmap");
+        eq("several sources on a heatmap are pointed out", toasts.length, 1);
+        """)
+
+
+def test_strict_y_axis_ranges(assert_js):
+    """Data outside a strict y-axis range is drawn clamped, so the viewer is told once."""
+    assert_js(CAPTURE_TOASTS + """
+        import { checkStrictYAxisRanges } from "/js/chart-data-utils.js";
+        const sensorsToShow = [
+            {title: "Prices", plots: [{sensor: 1}], "y-axis": {min: 0, max: 100}},
+            {title: "Loose", plots: [{sensor: 2}], "y-axis": [0, 10]},
+            {title: "Several", plots: [{sensors: [3, 4]}], "y-axis": {min: -5, max: 5}},
+        ];
+        const datum = (sensor, value) => ({sensor: {id: sensor}, event_value: value});
+
+        checkStrictYAxisRanges([datum(1, 50), datum(2, 500), datum(3, 0)], sensorsToShow);
+        eq("values inside the range, or on a non-strict axis, say nothing", toasts.length, 0);
+
+        checkStrictYAxisRanges([datum(1, 150)], sensorsToShow);
+        eq("a value above the range is pointed out", toasts.map((t) => t.type), ["warning"]);
+        check("naming the graph and its range", toasts[0].message.includes("'Prices'") && toasts[0].message.includes("(0 to 100)"),
+              toasts[0].message);
+
+        checkStrictYAxisRanges([datum(1, 150)], sensorsToShow);
+        eq("the same situation is not pointed out twice", toasts.length, 1);
+
+        checkStrictYAxisRanges([datum(4, -6)], sensorsToShow);
+        check("sensors listed together count too", toasts.length === 2 && toasts[1].message.includes("'Several'"),
+              JSON.stringify(toasts));
+
+        checkStrictYAxisRanges([], sensorsToShow);
+        checkStrictYAxisRanges([datum(4, -6)], sensorsToShow);
+        eq("once everything was back in range, a new excursion is pointed out again", toasts.length, 3);
+
+        checkStrictYAxisRanges([datum(1, 150)], undefined);
+        eq("without graphs to check, nothing is said", toasts.length, 3);
+        """)
diff --git a/flexmeasures/ui/tests/js/test_data_utils.py b/flexmeasures/ui/tests/js/test_data_utils.py
index 6d803d8bd0..6274f0af4e 100644
--- a/flexmeasures/ui/tests/js/test_data_utils.py
+++ b/flexmeasures/ui/tests/js/test_data_utils.py
@@ -60,3 +60,40 @@ def test_get_unique_values_ignores_records_without_the_key(assert_js):
         eq("only records without the key means nothing to report",
            getUniqueValues([{event_value: 1}], "source.id"), []);
         """)
+
+
+def test_convert_to_csv_writes_timestamps_in_local_time(assert_js):
+    assert_js(
+        """
+        import { convertToCSV } from "/js/data-utils.js";
+        const ms = Date.UTC(2022, 6, 1, 10);
+        const csv = convertToCSV([{event_start: ms, belief_time: ms, event_value: 3}]);
+        const [header, row] = csv.replace("data:text/csv;charset=utf-8,", "").split("\\n");
+        eq("the csv is a data URL", csv.startsWith("data:text/csv;charset=utf-8,"), true);
+        eq("the header lists the columns in order", header, "event_start,belief_time,event_value");
+        eq("timestamps are written with the viewer's offset",
+           row, "2022-07-01T12:00:00.000+02:00,2022-07-01T12:00:00.000+02:00,3");
+        """,
+        timezone="Europe/Amsterdam",
+    )
+
+
+def test_convert_to_csv_writes_horizons_as_durations(assert_js):
+    assert_js("""
+        import { convertToCSV } from "/js/data-utils.js";
+        const horizon = (ms) => convertToCSV([{belief_horizon: ms}]).split("\\n")[1];
+        eq("hours, minutes and seconds", horizon(3600000 + 2 * 60000 + 3000), "PT1H2M3S");
+        eq("a horizon of more than a day is still counted in hours", horizon(90000000), "PT25H");
+        eq("a negative horizon (a belief formed after the fact) keeps its sign", horizon(-1800000), "-PT30M");
+        """)
+
+
+def test_convert_to_csv_describes_nested_objects(assert_js):
+    assert_js("""
+        import { convertToCSV } from "/js/data-utils.js";
+        const csv = convertToCSV([
+            {sensor: {id: 1, description: "power (kW)"}, source: {id: 9}, event_value: null},
+        ]);
+        eq("a sensor or source is written as its description, or left empty",
+           csv.split("\\n")[1], "power (kW),,");
+        """)
diff --git a/flexmeasures/ui/tests/js/test_daterange_utils.py b/flexmeasures/ui/tests/js/test_daterange_utils.py
index 12a4220121..852dedb6e1 100644
--- a/flexmeasures/ui/tests/js/test_daterange_utils.py
+++ b/flexmeasures/ui/tests/js/test_daterange_utils.py
@@ -63,3 +63,130 @@ def test_count_dst_transitions_where_there_are_none(assert_js):
         """,
         timezone="Asia/Kolkata",
     )
+
+
+def test_this_month(assert_js):
+    assert_js("""
+        import { thisMonth } from "/js/daterange-utils.js";
+        const [first, last] = thisMonth(new Date(2022, 1, 15));
+        eq("the month starts on the 1st", [first.getMonth(), first.getDate()], [1, 1]);
+        eq("and ends on its last day", [last.getMonth(), last.getDate()], [1, 28]);
+        const [, leap] = thisMonth(new Date(2024, 1, 3));
+        eq("February of a leap year ends on the 29th", leap.getDate(), 29);
+        const [, december] = thisMonth(new Date(2022, 11, 31));
+        eq("December ends in the same year", [december.getFullYear(), december.getDate()], [2022, 31]);
+        """)
+
+
+def test_last_n_months(assert_js):
+    assert_js("""
+        import { lastNMonths } from "/js/daterange-utils.js";
+        const span = (date, n) => lastNMonths(date, n).map((d) => [d.getFullYear(), d.getMonth() + 1, d.getDate()]);
+        eq("one month is the current month", span(new Date(2022, 2, 15), 1), [[2022, 3, 1], [2022, 3, 31]]);
+        eq("three months run back to the 1st of two months earlier",
+           span(new Date(2022, 2, 31), 3), [[2022, 1, 1], [2022, 3, 31]]);
+        eq("a span can cross into the previous year", span(new Date(2022, 1, 10), 3), [[2021, 12, 1], [2022, 2, 28]]);
+        """)
+
+
+def test_offset_between_timezones(assert_js):
+    """The result follows getTimezoneOffset's sign convention: positive means the second zone is further west."""
+    assert_js("""
+        import { getOffsetBetweenTimezonesForDate } from "/js/daterange-utils.js";
+        const winter = new Date(Date.UTC(2022, 0, 15, 12));
+        const summer = new Date(Date.UTC(2022, 6, 15, 12));
+        eq("Amsterdam is an hour ahead of UTC in winter",
+           getOffsetBetweenTimezonesForDate(winter, "UTC", "Europe/Amsterdam"), -60);
+        eq("and two hours in summer", getOffsetBetweenTimezonesForDate(summer, "UTC", "Europe/Amsterdam"), -120);
+        eq("the order of the zones flips the sign",
+           getOffsetBetweenTimezonesForDate(winter, "Europe/Amsterdam", "UTC"), 60);
+        eq("offsets need not be whole hours", getOffsetBetweenTimezonesForDate(winter, "UTC", "Asia/Kolkata"), -330);
+        eq("New York is behind Amsterdam", getOffsetBetweenTimezonesForDate(winter, "Europe/Amsterdam", "America/New_York"), 360);
+        const midnight = new Date(Date.UTC(2022, 0, 15));
+        eq("midnight is not mistaken for the end of the day",
+           getOffsetBetweenTimezonesForDate(midnight, "UTC", "Europe/Amsterdam"), -60);
+        """)
+
+
+def test_simulation_ranges_for_hourly_data(assert_js):
+    assert_js(
+        """
+        import { computeSimulationRanges } from "/js/daterange-utils.js";
+        const ymd = (d) => [d.getFullYear(), d.getMonth() + 1, d.getDate()];
+        const describe = (ranges) => Object.fromEntries(
+            Object.entries(ranges).map(([label, [start, end]]) => [label, [ymd(start), ymd(end)]]));
+
+        // Wednesday 5 to Thursday 6 January 2022
+        const short = describe(computeSimulationRanges(new Date(2022, 0, 5), new Date(2022, 0, 6), "hour"));
+        eq("less than a week can move by a day or grow to its week", Object.keys(short), ["⇐ day", "Whole week", "day ⇒"]);
+        eq("its week runs Monday to Sunday", short["Whole week"], [[2022, 1, 3], [2022, 1, 9]]);
+        eq("a day back", short["⇐ day"], [[2022, 1, 4], [2022, 1, 5]]);
+
+        const week = describe(computeSimulationRanges(new Date(2022, 0, 3), new Date(2022, 0, 9), "hour"));
+        eq("a week can move by days and weeks, or shrink to a day",
+           Object.keys(week), ["⇐ week", "⇐ day", "One day", "day ⇒", "week ⇒"]);
+        eq("shrinking keeps the first day", week["One day"], [[2022, 1, 3], [2022, 1, 3]]);
+        eq("a week on", week["week ⇒"], [[2022, 1, 10], [2022, 1, 16]]);
+        """,
+        timezone="Europe/Amsterdam",
+    )
+
+
+def test_simulation_ranges_for_daily_data(assert_js):
+    assert_js(
+        """
+        import { computeSimulationRanges } from "/js/daterange-utils.js";
+        const ymd = (d) => [d.getFullYear(), d.getMonth() + 1, d.getDate()];
+        const describe = (ranges) => Object.fromEntries(
+            Object.entries(ranges).map(([label, [start, end]]) => [label, [ymd(start), ymd(end)]]));
+
+        const week = describe(computeSimulationRanges(new Date(2022, 0, 3), new Date(2022, 0, 9), "day"));
+        eq("a week of daily data moves by weeks, or grows to its month", Object.keys(week), ["⇐ week", "Whole month", "week ⇒"]);
+        eq("its month", week["Whole month"], [[2022, 1, 1], [2022, 1, 31]]);
+
+        // Thursday 6 to Wednesday 26 January 2022
+        const weeks = describe(computeSimulationRanges(new Date(2022, 0, 6), new Date(2022, 0, 26), "day"));
+        eq("several weeks move by weeks and months, or shrink to a week",
+           Object.keys(weeks), ["⇐ month", "⇐ week", "One week", "week ⇒", "month ⇒"]);
+        eq("shrinking picks the first full week", weeks["One week"], [[2022, 1, 10], [2022, 1, 16]]);
+        eq("a month back is the whole previous month", weeks["⇐ month"], [[2021, 12, 1], [2021, 12, 31]]);
+        eq("a month on is the whole next month", weeks["month ⇒"], [[2022, 2, 1], [2022, 2, 28]]);
+
+        const days = describe(computeSimulationRanges(new Date(2022, 0, 5), new Date(2022, 0, 6), "day"));
+        eq("less than a week of daily data behaves as for hourly data", Object.keys(days), ["⇐ day", "Whole week", "day ⇒"]);
+
+        let error = null;
+        try { computeSimulationRanges(new Date(2022, 0, 5), new Date(2022, 0, 6), "minute"); } catch (e) { error = e.message; }
+        eq("other resolutions are refused", error, "Unsupported minimum resolution: minute");
+        """,
+        timezone="Europe/Amsterdam",
+    )
+
+
+def test_simulation_ranges_step_whole_days_across_dst(assert_js):
+    """Stepping a day across the spring transition lands on midnight, not on 1 am or 11 pm."""
+    assert_js(
+        """
+        import { computeSimulationRanges } from "/js/daterange-utils.js";
+        const ranges = computeSimulationRanges(new Date(2022, 2, 26), new Date(2022, 2, 27), "hour");
+        const [start, end] = ranges["day ⇒"];
+        eq("the next day starts at midnight", [start.getDate(), start.getHours()], [27, 0]);
+        eq("and ends at midnight", [end.getDate(), end.getHours()], [28, 0]);
+        """,
+        timezone="Europe/Amsterdam",
+    )
+
+
+def test_encode_url_query(assert_js):
+    assert_js("""
+        import { encodeUrlQuery } from "/js/daterange-utils.js";
+        eq("the plus sign of a UTC offset is kept, encoded",
+           encodeUrlQuery("path?date=2025-06-16T00:00:00+02:00"), "path?date=2025-06-16T00%3A00%3A00%2B02%3A00");
+        const encoded = encodeUrlQuery("path?event_starts_after=2025-06-16T00:00:00+02:00&chart_type=bar_chart");
+        eq("the server reads back the same offset",
+           new URLSearchParams(encoded.split("?")[1]).get("event_starts_after"), "2025-06-16T00:00:00+02:00");
+        eq("a URL without a query is left alone", encodeUrlQuery("path"), "path");
+        eq("already encoded values are not encoded twice",
+           encodeUrlQuery("path?date=2025-06-16T00%3A00%3A00%2B02%3A00"), "path?date=2025-06-16T00%3A00%3A00%2B02%3A00");
+        eq("other parameters survive", encodeUrlQuery("path?a=1&b=x y"), "path?a=1&b=x+y");
+        """)
diff --git a/flexmeasures/ui/tests/js/test_flex_context_utils.py b/flexmeasures/ui/tests/js/test_flex_context_utils.py
new file mode 100644
index 0000000000..ce00f62e4c
--- /dev/null
+++ b/flexmeasures/ui/tests/js/test_flex_context_utils.py
@@ -0,0 +1,115 @@
+"""Tests for flexmeasures/ui/static/js/flex-context-utils.js, used by the flex-context editor."""
+
+# A few fields in the shape of UI_FLEX_CONTEXT_SCHEMA (see flexmeasures/data/schemas/scheduling/__init__.py).
+SCHEMA = """
+const schemaSpecs = {
+    "consumption-price": {"default": null, "types": {"backend": "typeOne"}, "per-commodity": true},
+    "site-power-capacity": {"default": null, "types": {"backend": "typeOne"}},
+    "aggregate-power": {"default": null, "types": {"backend": "typeTwo"}},
+    "inflexible-consumption": {"default": [], "types": {"backend": "typeFour"}},
+    "commitments": {"default": [], "types": {"backend": "typeFive"}, "per-commodity": true},
+};
+const schema = Object.fromEntries(Object.entries(schemaSpecs).map(([key, spec]) => [key, spec.default]));
+"""
+
+
+def test_field_kinds(assert_js):
+    assert_js(SCHEMA + """
+        import { isSensorOnlyField, isSensorListField } from "/js/flex-context-utils.js";
+        eq("a field taking a sensor or a value offers both",
+           isSensorOnlyField(schemaSpecs, "consumption-price"), false);
+        eq("a single sensor reference is sensor-only", isSensorOnlyField(schemaSpecs, "aggregate-power"), true);
+        eq("so is a list of sensors", isSensorOnlyField(schemaSpecs, "inflexible-consumption"), true);
+        eq("only the list is a list", [isSensorListField(schemaSpecs, "aggregate-power"),
+                                        isSensorListField(schemaSpecs, "inflexible-consumption")], [false, true]);
+        eq("an unknown field is neither", [isSensorOnlyField(schemaSpecs, "nope"), isSensorListField(schemaSpecs, "nope")],
+           [false, false]);
+        """)
+
+
+def test_entry_sensor_id(assert_js):
+    assert_js("""
+        import { entrySensorId } from "/js/flex-context-utils.js";
+        eq("a sensor reference", entrySensorId({sensor: 5, source: 2}), 5);
+        eq("a bare id, as the deprecated field held", entrySensorId(5), 5);
+        eq("nothing", entrySensorId(null), null);
+        """)
+
+
+def test_fields_available_per_commodity(assert_js):
+    """The top level takes every field, a commodity context only the per-commodity ones."""
+    assert_js(SCHEMA + """
+        import { isFieldAvailableInScope, isStructuralField, getActiveContext } from "/js/flex-context-utils.js";
+        eq("the top level takes any field", isFieldAvailableInScope(schemaSpecs, "site-power-capacity", null), true);
+        eq("a commodity does not take a site-wide field", isFieldAvailableInScope(schemaSpecs, "site-power-capacity", 0), false);
+        eq("but does take a per-commodity field", isFieldAvailableInScope(schemaSpecs, "consumption-price", 0), true);
+        eq("the commodity tab bar's own fields are never cards",
+           ["commodities", "commodity"].map((f) => isFieldAvailableInScope(schemaSpecs, f, null)), [false, false]);
+        eq("because they are structural", ["commodities", "commodity", "commitments"].map(isStructuralField), [true, true, false]);
+
+        const flexContext = {"site-power-capacity": "1 MW", commodities: [{commodity: "gas"}]};
+        eq("the top level is the flex-context itself", getActiveContext(flexContext, null), flexContext);
+        eq("a commodity is one entry of its list", getActiveContext(flexContext, 0), {commodity: "gas"});
+        """)
+
+
+def test_clean_flex_context_before_saving(assert_js):
+    assert_js(SCHEMA + """
+        import { cleanFlexContext } from "/js/flex-context-utils.js";
+        const flexContext = {
+            "site-power-capacity": "1 MW",
+            "consumption-price": "",
+            "inflexible-consumption": [],
+            "aggregate-power": null,
+            "not-a-field": "x",
+            "commodity": "electricity",
+            "commodities": [
+                {"commodity": "gas", "consumption-price": "30 EUR/MWh", "commitments": [], "not-a-field": 1},
+            ],
+        };
+        const cleaned = cleanFlexContext(flexContext, schema);
+        eq("empty and unknown fields are dropped, the structure is kept", cleaned, {
+            "site-power-capacity": "1 MW",
+            "commodities": [{"commodity": "gas", "consumption-price": "30 EUR/MWh"}],
+        });
+        check("the flex-context is cleaned in place", cleaned === flexContext);
+        eq("an empty list of commodities goes too", cleanFlexContext({commodities: []}, schema), {});
+        eq("inherited object members are no fields", cleanFlexContext({"constructor": "x", "toString": "y"}, schema), {});
+        """)
+
+
+def test_currency(assert_js):
+    """The scheduler requires all prices in one currency, so a new price follows those already set."""
+    assert_js("""
+        import { currencyInUnit, findFlexContextCurrency } from "/js/flex-context-utils.js";
+        eq("a price unit names its currency", currencyInUnit("EUR/MWh"), "EUR");
+        eq("so does a quantity", currencyInUnit("12.5 KRW/kW"), "KRW");
+        eq("a power unit does not", currencyInUnit("100 kW"), null);
+        eq("nor does nothing", currencyInUnit(undefined), null);
+
+        eq("a fixed price anywhere decides",
+           findFlexContextCurrency({"site-power-capacity": "1 MW", commodities: [{"consumption-price": "30 USD/MWh"}]}).currency,
+           "USD");
+        eq("sensor prices are collected for the caller to look up",
+           findFlexContextCurrency({"consumption-price": {sensor: 4}, "production-price": {sensor: 5}, "aggregate-power": {sensor: 6}}),
+           {currency: null, priceSensorIds: [4, 5]});
+        eq("an empty flex-context names nothing", findFlexContextCurrency({}), {currency: null, priceSensorIds: []});
+        """)
+
+
+def test_commitment_values(assert_js):
+    assert_js("""
+        import { parseCommitmentValue, describeCommitmentValue } from "/js/flex-context-utils.js";
+        eq("a sensor is referred to by id", parseCommitmentValue("sensor 536"), {sensor: 536});
+        eq("in any casing and spacing", parseCommitmentValue("  Sensor   7 "), {sensor: 7});
+        eq("anything else is a quantity", parseCommitmentValue(" 10 kW "), "10 kW");
+        eq("including text that merely mentions a sensor", parseCommitmentValue("sensor 5 kW"), "sensor 5 kW");
+
+        eq("a sensor reference reads back", describeCommitmentValue({sensor: 536}), "sensor 536");
+        eq("a quantity reads back", describeCommitmentValue("10 kW"), "10 kW");
+        eq("a number reads back", describeCommitmentValue(0), "0");
+        eq("an unset value reads as nothing", [undefined, null, ""].map(describeCommitmentValue), [null, null, null]);
+        for (const text of ["sensor 12", "0 EUR/MWh"]) {
+            eq(`"${text}" survives a round trip`, describeCommitmentValue(parseCommitmentValue(text)), text);
+        }
+        """)
diff --git a/flexmeasures/ui/tests/js/test_flexmeasures_js.py b/flexmeasures/ui/tests/js/test_flexmeasures_js.py
new file mode 100644
index 0000000000..716e8ec5b3
--- /dev/null
+++ b/flexmeasures/ui/tests/js/test_flexmeasures_js.py
@@ -0,0 +1,139 @@
+"""Tests for the helpers in flexmeasures/ui/static/js/flexmeasures.js.
+
+That file is a classic script rather than a module:
+every page loads it, and its functions become globals.
+It expects jQuery, Vega and a currency map on the page, so the tests put stand-ins there first.
+"""
+
+# Loads flexmeasures.js the way base.html does, with just enough of its dependencies to run its top level.
+LOAD_FLEXMEASURES_JS = """
+const chain = new Proxy(function () {}, {get: () => chain, apply: () => chain});
+window.$ = chain;
+window.vegaFormatters = {};
+window.vega = {expressionFunction: (name, formatter) => { window.vegaFormatters[name] = formatter; }};
+window.currencySymbolMap = {EUR: "€", USD: "$", KRW: "₩"};
+await new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = "/js/flexmeasures.js";
+    script.onload = resolve;
+    script.onerror = () => reject(new Error("could not load flexmeasures.js"));
+    document.head.append(script);
+});
+"""
+
+
+def test_number_with_commas(assert_js):
+    assert_js(LOAD_FLEXMEASURES_JS + """
+        eq("thousands are separated", numberWithCommas(1234567), "1,234,567");
+        eq("decimals are left alone", numberWithCommas(1234.5678), "1,234.5678");
+        eq("small numbers are unchanged", numberWithCommas(999), "999");
+        eq("negative numbers too", numberWithCommas(-1234), "-1,234");
+        """)
+
+
+def test_currency_codes_become_symbols(assert_js):
+    assert_js(LOAD_FLEXMEASURES_JS + """
+        eq("a currency code in a unit is replaced", convertCurrencyCodeToSymbol("EUR/MWh"), "€/MWh");
+        eq("every code is replaced", replaceMultiple("EUR or USD", currencySymbolMap), "€ or $");
+        eq("units without currency are unchanged", convertCurrencyCodeToSymbol("kW"), "kW");
+        """)
+
+
+def test_time_ago(assert_js):
+    assert_js(LOAD_FLEXMEASURES_JS + """
+        const ago = (seconds) => getTimeAgo(Date.now() - seconds * 1000);
+        eq("seconds", ago(30), "30 seconds ago");
+        eq("one minute", ago(60), "1 minute ago");
+        eq("minutes", ago(125), "2 minutes ago");
+        eq("one hour", ago(3600), "1 hour ago");
+        eq("hours", ago(5 * 3600 + 10), "5 hours ago");
+        eq("one day", ago(86400), "1 day ago");
+        eq("days", ago(3 * 86400), "3 days ago");
+        """)
+
+
+def test_human_friendly_delta_for_past_moments(assert_js):
+    assert_js(LOAD_FLEXMEASURES_JS + """
+        const ago = (seconds) => getHumanFriendlyDeltaOrTimeStr(new Date(Date.now() - seconds * 1000).toISOString());
+        eq("a moment ago", ago(2), "just now");
+        eq("seconds", ago(30), "30 seconds ago");
+        eq("one minute", ago(90), "1 minute ago");
+        eq("minutes", ago(20 * 60), "20 minutes ago");
+        eq("one hour", ago(3600 + 60), "1 hour ago");
+        eq("hours", ago(5 * 3600), "5 hours ago");
+        eq("a day", ago(30 * 3600), "yesterday");
+        eq("days", ago(3 * 86400 + 60), "3 days ago");
+        const old = new Date(Date.UTC(2020, 4, 22, 10));
+        check("a week or more shows the date",
+              getHumanFriendlyDeltaOrTimeStr(old.toISOString()).includes("2020"),
+              getHumanFriendlyDeltaOrTimeStr(old.toISOString()));
+        check("optionally without the time",
+              !getHumanFriendlyDeltaOrTimeStr(old.toISOString(), {dateOnlyForOlder: true}).includes("@"),
+              getHumanFriendlyDeltaOrTimeStr(old.toISOString(), {dateOnlyForOlder: true}));
+        """)
+
+
+def test_humanize_iso_duration(assert_js):
+    assert_js(LOAD_FLEXMEASURES_JS + """
+        eq("hours", humanizeIsoDuration("PT1H"), "1 hour");
+        eq("plural", humanizeIsoDuration("PT15M"), "15 minutes");
+        eq("several units", humanizeIsoDuration("P1DT2H30M"), "1 day 2 hours 30 minutes");
+        eq("weeks", humanizeIsoDuration("P2W"), "2 weeks");
+        eq("fractional seconds", humanizeIsoDuration("PT1.5S"), "1.5 seconds");
+        eq("months are not minutes", humanizeIsoDuration("P1M"), "1 month");
+        eq("anything else is shown as is", humanizeIsoDuration("every hour"), "every hour");
+        eq("non-strings are passed through", humanizeIsoDuration(3600), 3600);
+        """)
+
+
+def test_unpack_data(assert_js):
+    """The stats endpoint sends each source's statistics as a list of key-value pairs."""
+    assert_js(LOAD_FLEXMEASURES_JS + """
+        const errors = [];
+        console.error = (...args) => errors.push(args[0]);
+        eq("pairs become objects",
+           unpackData({"All sources": [["Min value", 1], ["Max value", 5]]}),
+           {"All sources": {"Min value": 1, "Max value": 5}});
+        eq("anything else is kept, and reported",
+           unpackData({odd: "not pairs"}), {odd: "not pairs"});
+        eq("once", errors.length, 1);
+        """)
+
+
+def test_latest_belief_name(assert_js):
+    assert_js(LOAD_FLEXMEASURES_JS + """
+        const stats = {
+            "forecaster (ID: 3)": {"Last recorded": "2024-01-02T00:00:00+00:00"},
+            "meter (ID: 1)": {"Last recorded": "2024-01-03T00:00:00+00:00"},
+            "old (ID: 2)": {"Last recorded": "2023-01-01T00:00:00+00:00"},
+        };
+        eq("the source that recorded most recently is picked", getLatestBeliefName(stats), "meter (ID: 1)");
+        eq("no sources, no pick", getLatestBeliefName({}), null);
+        """)
+
+
+def test_source_id_from_key(assert_js):
+    assert_js(LOAD_FLEXMEASURES_JS + """
+        eq("the id is read from the end of the key", sourceIdFromKey("forecaster (ID: 12)"), "12");
+        eq("an id elsewhere in the name does not count", sourceIdFromKey("the (ID: 12) forecaster"), null);
+        eq("the key covering every source has no id", sourceIdFromKey(ALL_SOURCES_KEY), null);
+        """)
+
+
+def test_timezone_format(assert_js):
+    """The Vega formatter shows the viewer's offset, followed by the zone the chart is in."""
+    assert_js(
+        LOAD_FLEXMEASURES_JS + """
+        const format = vegaFormatters["timezoneFormat"];
+        eq("summer time", format(new Date(2022, 6, 1), ["Europe/Amsterdam"]), "+02:00 (Europe/Amsterdam)");
+        eq("winter time", format(new Date(2022, 0, 1), ["Europe/Amsterdam"]), "+01:00 (Europe/Amsterdam)");
+        """,
+        timezone="Europe/Amsterdam",
+    )
+    assert_js(
+        LOAD_FLEXMEASURES_JS + """
+        const format = vegaFormatters["timezoneFormat"];
+        eq("west of UTC, and not a whole hour", format(new Date(2022, 0, 1), ["America/St_Johns"]), "-03:30 (America/St_Johns)");
+        """,
+        timezone="America/St_Johns",
+    )
diff --git a/flexmeasures/ui/tests/js/test_map_init.py b/flexmeasures/ui/tests/js/test_map_init.py
new file mode 100644
index 0000000000..a01b76077a
--- /dev/null
+++ b/flexmeasures/ui/tests/js/test_map_init.py
@@ -0,0 +1,54 @@
+"""Tests for the tree layout in flexmeasures/ui/static/js/map-init.js.
+
+Like flexmeasures.js, map-init.js is a classic script whose functions become globals.
+Leaflet is only needed to turn the positions into points, so a stand-in suffices.
+"""
+
+LOAD_MAP_INIT = """
+window.L = {point: (p) => p};
+await new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = "/js/map-init.js";
+    script.onload = resolve;
+    script.onerror = () => reject(new Error("could not load map-init.js"));
+    document.head.append(script);
+});
+const marker = (id, parentId) => ({options: {id, parentId}});
+"""
+
+
+def test_a_tree_is_centered_on_the_cluster(assert_js):
+    assert_js(LOAD_MAP_INIT + """
+        const positions = computeCenteredTreeLayout(
+            [marker(1, null), marker(2, 1), marker(3, 1)], {x: 100, y: 200});
+        eq("the parent sits above its children, midway", positions[0], {x: 100, y: 150});
+        eq("the children sit side by side, one level down", [positions[1], positions[2]], [{x: 75, y: 250}, {x: 125, y: 250}]);
+        """)
+
+
+def test_trees_sit_side_by_side(assert_js):
+    assert_js(LOAD_MAP_INIT + """
+        const positions = computeCenteredTreeLayout(
+            [marker(1, null), marker(2, 1), marker(3, 1), marker(4, null), marker(5, 4), marker(6, 4)], {x: 0, y: 0});
+        const xs = positions.map((p) => p.x);
+        check("the second tree lies entirely to the right of the first",
+              Math.max(...xs.slice(0, 3)) < Math.min(...xs.slice(3)), JSON.stringify(positions));
+        eq("the forest is centered", Math.min(...xs) + Math.max(...xs), 0);
+        eq("both trees keep their shape", [xs[2] - xs[1], xs[5] - xs[4]], [50, 50]);
+        """)
+
+
+def test_markers_whose_parent_has_no_marker_are_still_grouped(assert_js):
+    """A parent without a location has no marker, but its children still form one family."""
+    assert_js(LOAD_MAP_INIT + """
+        const positions = computeCenteredTreeLayout([marker(2, 9), marker(3, 9)], {x: 0, y: 0});
+        eq("siblings are placed side by side", positions, [{x: -25, y: 50}, {x: 25, y: 50}]);
+        """)
+
+
+def test_custom_spacing(assert_js):
+    assert_js(LOAD_MAP_INIT + """
+        const positions = computeCenteredTreeLayout(
+            [marker(1, null), marker(2, 1), marker(3, 1)], {x: 0, y: 0}, 10, 20);
+        eq("the spacing is honoured", positions, [{x: 0, y: -10}, {x: -5, y: 10}, {x: 5, y: 10}]);
+        """)
diff --git a/flexmeasures/ui/tests/js/test_replay_utils.py b/flexmeasures/ui/tests/js/test_replay_utils.py
new file mode 100644
index 0000000000..6da6fbc0bd
--- /dev/null
+++ b/flexmeasures/ui/tests/js/test_replay_utils.py
@@ -0,0 +1,53 @@
+"""Tests for flexmeasures/ui/static/js/replay-utils.js."""
+
+
+def test_partition(assert_js):
+    assert_js("""
+        import { partition } from "/js/replay-utils.js";
+        eq("elements passing the test go left, the others right",
+           partition([1, 2, 3, 4, 5], (x) => x % 2 === 0), [[2, 4], [1, 3, 5]]);
+        eq("the decision function also gets the index",
+           partition(["a", "b", "c"], (x, i) => i < 1), [["a"], ["b", "c"]]);
+        eq("an empty array gives two empty arrays", partition([], () => true), [[], []]);
+        """)
+
+
+def test_update_beliefs_keeps_the_most_recent_belief_per_event(assert_js):
+    """The replay adds beliefs as time moves on, replacing older beliefs about the same event."""
+    assert_js("""
+        import { updateBeliefs } from "/js/replay-utils.js";
+        const belief = (sensor, start, source, value) =>
+            ({sensor: {id: sensor}, event_start: start, source: {id: source}, event_value: value});
+        const old = [belief(1, 0, 9, "old"), belief(1, 1, 9, "untouched")];
+        const updated = updateBeliefs(old, [
+            belief(1, 0, 9, "newer"),
+            belief(1, 0, 9, "newest"),
+            belief(1, 0, 8, "other source"),
+            belief(2, 0, 9, "other sensor"),
+        ]);
+        const byKey = Object.fromEntries(updated.map((b) => [`${b.sensor.id}_${b.event_start}_${b.source.id}`, b.event_value]));
+        eq("the latest of the new beliefs replaces the old one", byKey["1_0_9"], "newest");
+        eq("events without new beliefs keep their old one", byKey["1_1_9"], "untouched");
+        eq("beliefs by another source are kept apart", byKey["1_0_8"], "other source");
+        eq("beliefs about another sensor are kept apart", byKey["2_0_9"], "other sensor");
+        eq("one belief per sensor, event and source", updated.length, 4);
+        """)
+
+
+def test_abortable_timeout(assert_js):
+    assert_js("""
+        import { setAbortableTimeout } from "/js/replay-utils.js";
+        const fired = [];
+        const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+        setAbortableTimeout(() => fired.push("plain"), 5);
+        const aborted = new AbortController();
+        setAbortableTimeout(() => fired.push("aborted"), 5, aborted.signal);
+        aborted.abort();
+        const kept = new AbortController();
+        setAbortableTimeout(() => fired.push("kept"), 5, kept.signal);
+        await wait(40);
+        kept.abort();  // too late to matter
+
+        eq("timers fire unless aborted first", fired.sort(), ["kept", "plain"]);
+        """)
diff --git a/flexmeasures/ui/tests/js/test_ui_utils_helpers.py b/flexmeasures/ui/tests/js/test_ui_utils_helpers.py
new file mode 100644
index 0000000000..38eca35370
--- /dev/null
+++ b/flexmeasures/ui/tests/js/test_ui_utils_helpers.py
@@ -0,0 +1,232 @@
+"""Tests for the helpers in flexmeasures/ui/static/js/ui-utils.js that need no page around them."""
+
+CAPTURE_TOASTS = """
+const toasts = [];
+window.showToast = (message, type) => toasts.push({message, type});
+"""
+
+
+def test_move_array_item(assert_js):
+    assert_js("""
+        import { moveArrayItem } from "/js/ui-utils.js";
+        const items = ["a", "b", "c"];
+        eq("moving up swaps with the item before", moveArrayItem(items, 1, "up"), ["b", "a", "c"]);
+        eq("moving down swaps with the item after", moveArrayItem(items, 1, "down"), ["a", "c", "b"]);
+        eq("the first item cannot move up", moveArrayItem(items, 0, "up"), items);
+        eq("the last item cannot move down", moveArrayItem(items, 2, "down"), items);
+        eq("the original is untouched", items, ["a", "b", "c"]);
+        check("a new array is returned", moveArrayItem(items, 0, "up") !== items);
+        """)
+
+
+def test_flatten_error_payload(assert_js):
+    assert_js("""
+        import { flattenErrorPayload } from "/js/ui-utils.js";
+        eq("a plain message stays as it is", flattenErrorPayload("Not found"), ["Not found"]);
+        eq("nothing gives nothing", flattenErrorPayload(null), []);
+        eq("nested fields are named by their path",
+           flattenErrorPayload({flex_context: {"site-power-capacity": ["Not a valid quantity."]}}),
+           ["\\n <b>flex_context.site-power-capacity</b>: Not a valid quantity."]);
+        eq("each message in a list is kept",
+           flattenErrorPayload({name: ["Too short.", "Not unique."]}).length, 2);
+        """)
+
+
+def test_extract_api_error_message(assert_js):
+    """Marshmallow errors arrive under message.json, other errors under message or error."""
+    assert_js("""
+        import { extractApiErrorMessage } from "/js/ui-utils.js";
+        eq("validation errors are preferred",
+           extractApiErrorMessage({message: {json: {name: ["Missing data for required field."]}}, status: 422}),
+           "<b>name</b>: Missing data for required field.");
+        eq("then a message", extractApiErrorMessage({message: "Asset not found", status: 404}), "Asset not found");
+        eq("then an error", extractApiErrorMessage({error: "Forbidden"}), "Forbidden");
+        eq("several messages are joined",
+           extractApiErrorMessage({message: {json: {a: ["x"], b: ["y"]}}}), "<b>a</b>: x; <b>b</b>: y");
+        eq("without a body, the fallback is used", extractApiErrorMessage(null, "Bad Gateway"), "Bad Gateway");
+        eq("without either, something is still said", extractApiErrorMessage(undefined), "Unknown error");
+        eq("an empty body falls back too", extractApiErrorMessage({}, "Bad Request"), "Bad Request");
+        """)
+
+
+def test_reactive_state(assert_js):
+    assert_js("""
+        import { createReactiveState } from "/js/ui-utils.js";
+        const rendered = [];
+        const [get, set] = createReactiveState(1, (value) => rendered.push(value));
+        eq("the initial value is rendered right away", rendered, [1]);
+        set(2);
+        eq("setting a value renders it", [get(), rendered], [2, [1, 2]]);
+        set((previous) => previous * 10);
+        eq("a function is applied to the current value", get(), 20);
+        const [getQuiet, setQuiet] = createReactiveState("a");
+        setQuiet("b");
+        eq("a render function is optional", getQuiet(), "b");
+        """)
+
+
+def test_convert_html_to_element(assert_js):
+    assert_js("""
+        import { convertHtmlToElement } from "/js/ui-utils.js";
+        const element = convertHtmlToElement("  <div class='card'><b>hi</b></div>  ");
+        eq("surrounding whitespace does not become the element", element.tagName, "DIV");
+        eq("the markup is kept", element.querySelector("b").textContent, "hi");
+        """)
+
+
+def test_python_repr_to_json(assert_js):
+    """Jinja renders a dict as its Python representation, which the page has to read back."""
+    assert_js("""
+        import { pythonReprToJSON } from "/js/ui-utils.js";
+        const read = (repr) => JSON.parse(pythonReprToJSON(repr));
+        eq("the constants are translated",
+           read("{'a': None, 'b': True, 'c': False, 'd': 1.5}"), {a: null, b: true, c: false, d: 1.5});
+        eq("constants inside strings are left alone",
+           read("{'note': 'None of this is True'}"), {note: "None of this is True"});
+        eq("an apostrophe survives, as Python writes it", read(`{'name': "Bob's contract"}`), {name: "Bob's contract"});
+        eq("both kinds of quote survive", read(`{'name': 'Bob\\\\'s "big" contract'}`), {name: `Bob's "big" contract`});
+        eq("escapes are read", read("{'a': 'line\\\\nbreak', 'b': '\\\\\\\\', 'c': 'caf\\\\xe9'}"), {a: "line\\nbreak", b: "\\\\", c: "café"});
+        eq("nesting is kept", read("{'commitments': [{'name': 'x', 'baseline': {'sensor': 3}}]}"),
+           {commitments: [{name: "x", baseline: {sensor: 3}}]});
+        """)
+
+
+def test_process_resource_raw_json(assert_js):
+    assert_js("""
+        import { processResourceRawJSON } from "/js/ui-utils.js";
+        const schema = {"soc-min": null, "soc-max": null};
+        const [values, extra] = processResourceRawJSON(schema, "{'soc-min': '10 kWh', 'foo': 'bar'}", true);
+        eq("the stored values are returned", values, {"soc-min": "10 kWh", foo: "bar"});
+        eq("fields the schema does not know are reported", extra, {foo: "bar"});
+        eq("the schema takes the stored values", schema, {"soc-min": "10 kWh", "soc-max": null, foo: "bar"});
+
+        const [fromObject] = processResourceRawJSON({}, {"site-power-capacity": "1 MW"}, true);
+        eq("stored values may also be passed as an object", fromObject, {"site-power-capacity": "1 MW"});
+
+        const [quoted] = processResourceRawJSON({}, `{'commitments': [{'name': "Bob's"}], 'note': 'Nonetheless'}`, true);
+        eq("values are not mangled", quoted, {commitments: [{name: "Bob's"}], note: "Nonetheless"});
+        """)
+
+
+def test_resources_are_fetched_once_and_then_cached(assert_js):
+    assert_js("""
+        import { getAsset, getSensor, getAccount } from "/js/ui-utils.js";
+        localStorage.clear();
+        const requests = [];
+        window.fetch = async (url) => { requests.push(url); return {json: async () => ({id: requests.length, url})}; };
+
+        const first = await getSensor(5);
+        const again = await getSensor(5);
+        eq("a sensor is fetched from the API", requests.length, 1);
+        check("at its endpoint", requests[0].endsWith("/api/v3_0/sensors/5"), requests[0]);
+        eq("and then answered from the cache", again, first);
+
+        await getAccount(2);
+        await getAccount(2);
+        eq("so is an account", requests.length, 2);
+
+        await getAsset(3);
+        await getAsset(3);
+        eq("and an asset", requests.length, 3);
+        await getAsset(3, false);
+        eq("unless the cache is explicitly bypassed", requests.length, 4);
+        localStorage.clear();
+        """)
+
+
+def test_poll_job_status_until_finished(assert_js):
+    assert_js(CAPTURE_TOASTS + """
+        import { pollJobStatus } from "/js/ui-utils.js";
+        const answers = [{status: "queued"}, {status: "STARTED", message: "Ingesting"}, {status: "finished"}];
+        const requests = [];
+        window.fetch = async (url) => {
+            requests.push(url);
+            return {ok: true, json: async () => answers[Math.min(requests.length - 1, answers.length - 1)]};
+        };
+        const done = new Promise((resolve) => pollJobStatus("a b", {intervalMs: 5, onFinished: resolve}));
+        const finished = await done;
+        eq("the job's own endpoint is polled, with its id encoded",
+           requests[0].endsWith("/api/v3_0/jobs/a%20b"), true);
+        eq("polling stops when the job is done", finished.status, "finished");
+        eq("the viewer is kept informed", toasts.map((t) => t.message), ["Processing…", "Ingesting", "Job completed successfully."]);
+        const polled = requests.length;
+        await new Promise((resolve) => setTimeout(resolve, 30));
+        eq("and nothing is polled afterwards", requests.length, polled);
+        """)
+
+
+def test_poll_job_status_reports_failure(assert_js):
+    assert_js(CAPTURE_TOASTS + """
+        import { pollJobStatus } from "/js/ui-utils.js";
+        window.fetch = async () => ({ok: true, json: async () => ({status: "FAILED", message: "Bad data in row 3"})});
+        const failed = await new Promise((resolve) => pollJobStatus("x", {intervalMs: 5, onFailed: resolve}));
+        eq("the failure is passed on", failed.message, "Bad data in row 3");
+        eq("and shown", toasts.at(-1), {message: "Bad data in row 3", type: "error"});
+
+        window.fetch = async () => ({ok: false, status: 502, statusText: "Bad Gateway"});
+        const unreachable = await new Promise((resolve) => pollJobStatus("x", {intervalMs: 5, onFailed: resolve}));
+        eq("an unreachable endpoint counts as a failure without a job", unreachable, null);
+        check("and says so", toasts.at(-1).message.includes("HTTP 502"), toasts.at(-1).message);
+        """)
+
+
+def test_poll_job_status_can_be_stopped(assert_js):
+    assert_js(CAPTURE_TOASTS + """
+        import { pollJobStatus } from "/js/ui-utils.js";
+        let polls = 0;
+        window.fetch = async () => { polls++; return {ok: true, json: async () => ({status: "QUEUED"})}; };
+        const controller = new AbortController();
+        const stop = pollJobStatus("x", {intervalMs: 5, signal: controller.signal});
+        await new Promise((resolve) => setTimeout(resolve, 30));
+        controller.abort();
+        const atAbort = polls;
+        await new Promise((resolve) => setTimeout(resolve, 30));
+        eq("aborting the signal stops polling", polls, atAbort);
+        check("after having polled more than once", atAbort > 1, String(atAbort));
+        eq("a stop function is returned too", typeof stop, "function");
+        """)
+
+
+def test_escape_html(assert_js):
+    assert_js("""
+        import { escapeHtml, unitHtml } from "/js/ui-utils.js";
+        eq("markup becomes text", escapeHtml(`<img src=x onerror="alert('hi')"> & more`),
+           "&lt;img src=x onerror=&quot;alert(&#39;hi&#39;)&quot;&gt; &amp; more");
+        eq("nothing becomes the empty string", [escapeHtml(null), escapeHtml(undefined)], ["", ""]);
+        eq("numbers are written as they are", escapeHtml(4.5), "4.5");
+
+        const holder = document.createElement("div");
+        holder.innerHTML = `<b title="${escapeHtml('" onmouseover="x')}">${escapeHtml("<i>name</i>")}</b>`;
+        eq("an escaped value stays inside its attribute", holder.firstChild.getAttributeNames(), ["title"]);
+        eq("and inside its element", holder.firstChild.children.length, 0);
+
+        eq("a unit is escaped", unitHtml("<b>kW</b>"), "&lt;b&gt;kW&lt;/b&gt;");
+        check("an empty unit is explained", unitHtml("").includes(">dimensionless</span>"), unitHtml(""));
+        """)
+
+
+def test_process_resource_raw_json_reads_json_too(assert_js):
+    """The API sends a flex-context or flex-model as a JSON string, which the asset graph page passes on."""
+    assert_js("""
+        import { processResourceRawJSON } from "/js/ui-utils.js";
+        const [values] = processResourceRawJSON({}, JSON.stringify({"prefer-charging-sooner": true, "soc-min": null, name: "Bob's"}), true);
+        eq("JSON is read as it is", values, {"prefer-charging-sooner": true, "soc-min": null, name: "Bob's"});
+        """)
+
+
+def test_rendered_sensors_show_names_as_text(assert_js):
+    assert_js("""
+        import { renderSensor } from "/js/ui-utils.js";
+        localStorage.clear();
+        const hostile = "<img src=x onerror=window.__ran=1>";
+        window.fetch = async (url) => ({json: async () =>
+            url.includes("/sensors/") ? {id: 1, name: hostile, unit: "", generic_asset_id: 2}
+            : url.includes("/assets/") ? {id: 2, name: hostile, account_id: 3}
+            : {id: 3, name: hostile}});
+        const holder = document.createElement("div");
+        holder.innerHTML = await renderSensor(1);
+        eq("no element is made from a name", holder.querySelectorAll("img").length, 0);
+        check("the names are shown as they were typed", holder.textContent.includes(hostile), holder.textContent);
+        check("a dimensionless sensor says so", holder.textContent.includes("dimensionless"), holder.textContent);
+        localStorage.clear();
+        """)
diff --git a/flexmeasures/ui/utils/view_utils.py b/flexmeasures/ui/utils/view_utils.py
index 6954181a27..7c43caeb09 100644
--- a/flexmeasures/ui/utils/view_utils.py
+++ b/flexmeasures/ui/utils/view_utils.py
@@ -3,10 +3,10 @@
 from __future__ import annotations
 
 from functools import wraps
-import json
 import os
 import subprocess
 
+from jinja2.utils import htmlsafe_json_dumps
 from sqlalchemy import select
 from flask import render_template, request, session, current_app
 from flask_security.core import current_user
@@ -110,7 +110,8 @@ def render_flexmeasures_template(html_filename: str, **variables):
     elif "asset" in variables:
         asset = variables["asset"]
         options["downloadFileName"] = f"asset-{asset.id}-{asset.name}"
-    variables["chart_options"] = json.dumps(options)
+    # HTML-safe, as templates embed it in a script element, and the file name carries the asset's name.
+    variables["chart_options"] = htmlsafe_json_dumps(options)
 
     account: Account | None = (
         current_user.account if current_user.is_authenticated else None
diff --git a/flexmeasures/ui/views/assets/views.py b/flexmeasures/ui/views/assets/views.py
index 55d471f9bb..eb614b8924 100644
--- a/flexmeasures/ui/views/assets/views.py
+++ b/flexmeasures/ui/views/assets/views.py
@@ -191,7 +191,7 @@ def context(self, id: str, **kwargs):
             {
                 "name": sensor.name,
                 "resolution": duration_isoformat(sensor.event_resolution),
-                "unit": sensor._ui_unit,
+                "unit": sensor.unit,
                 "link": url_for("SensorUI:get", id=sensor.id),
             }
             for sensor in asset.sensors
@@ -500,7 +500,7 @@ def properties(self, id: str):
             account_assets=account_assets,
             site_asset=site_asset,
             flex_model_schema=UI_FLEX_MODEL_SCHEMA,
-            asset_flexmodel=json.dumps(asset.flex_model),
+            asset_flexmodel=asset.flex_model,
             available_units=available_units(),
             asset_summary=asset_summary,
             asset_form=asset_form,