diff --git a/skills/htmlit/SKILL.md b/skills/htmlit/SKILL.md
index e40ceac..59299a7 100644
--- a/skills/htmlit/SKILL.md
+++ b/skills/htmlit/SKILL.md
@@ -244,6 +244,13 @@ and an invalid diagram shows its source instead of an error graphic), and `htmli
 poll` reports a `no-artifact-css` or `mermaid-syntax` warning when it happens - fix
 the source when you see one rather than shipping the fallback.
 
+htmlit also re-reads the raw artifact and reports an `unbalanced-html` warning when
+the markup has a stray or unclosed block tag (a `<div>`/`<section>`/... imbalance).
+The browser silently repairs such markup, so the collapse it causes - an early
+container close that drops the following sections out of your layout wrapper, making
+them render full-width - is invisible in the page but obvious in the source. The
+warning's `offenders` name each stray/unclosed tag with its line; balance them.
+
 Prefer **interactive** artifacts so the user can discover content - selectable
 option cards that expand a section, a dropdown that switches views, `<details>`
 accordions, tabs. Keep interactions **morph-safe** so they survive the live
@@ -361,6 +368,9 @@ small floating menu offers two actions:
   such marker, just the browser's own selection. Once **you answer** that comment
   (tagging your `data-htmlit-answer` block with its `commentId`), the anchor turns
   into a solid underline and **clicking it scrolls to and flashes your answer**.
+  The jump is two-way: clicking the answer block's **"You asked:" header** scrolls
+  back to (and flashes) the anchored spot, so the reader can hop between the question
+  and its answer in either direction.
   Before it is answered, clicking the anchor offers **Ask agent / Remove**. Anchors
   are saved with the review but are a live-review marker only - stripped from your
   snapshot and from the HTML/PDF exports.
diff --git a/skills/htmlit/client/annotate.js b/skills/htmlit/client/annotate.js
index 9f2502d..aafd553 100644
--- a/skills/htmlit/client/annotate.js
+++ b/skills/htmlit/client/annotate.js
@@ -4,7 +4,7 @@ import { api, cssPath, inChrome } from "./util.js";
 import { highlightNew } from "./content.js";
 import { renderPills } from "./chat.js";
 import { clipRectsToFrame, rectsToArray, renderHighlights } from "./overlays.js";
-import { ceClear, ceText, rebuildRail } from "./rail.js";
+import { ceClear, ceText, rebuildRail, anchorFlashEl, jumpTo } from "./rail.js";
 
 var pending = null;
 var selMenuOpen = false;
@@ -468,6 +468,17 @@ export function onArtifactMouseUp(target) {
     if (buildHlPending(hl)) openSelMenu();
     return;
   }
+  // Symmetric to the anchor -> answer jump above: a plain click on an agent answer
+  // block's "You asked:" header (the block element itself, not its body content)
+  // jumps back to the spot the user asked about and flashes it. Clicks on the answer
+  // body target a child element, so the answer text stays selectable and commentable.
+  var ansBlock = el && el.matches && el.matches("[data-htmlit-answer]") ? el : null;
+  if (ansBlock && !inChrome(ansBlock)) {
+    var askId = ansBlock.getAttribute("data-htmlit-answer-for");
+    var askHl = askId ? findHighlight(askId) : null;
+    var askEl = askHl ? anchorFlashEl(askHl) : null;
+    if (askEl) { jumpTo(askEl); clearPending(); return; }
+  }
   if (pending || selMenuOpen) clearPending();
 }
 
diff --git a/skills/htmlit/client/diagram.js b/skills/htmlit/client/diagram.js
index 6380222..8da225f 100644
--- a/skills/htmlit/client/diagram.js
+++ b/skills/htmlit/client/diagram.js
@@ -35,6 +35,54 @@ export function mEndpoints(d) {
     end: { x: parseFloat(n[n.length - 2]), y: parseFloat(n[n.length - 1]) },
   };
 }
+// Parse an SVG path into its coordinate pairs plus a replay sequence, so the path
+// can be re-emitted with new coordinates but the SAME commands - which is how we
+// preserve an edge's original curve while moving its endpoints. Every command we
+// support (M/L/C/Q/S/T) takes coordinate pairs, so points map one-to-one onto the
+// numbers. Relative commands, H/V (single coordinate) and arcs (A, mixed params)
+// are unsupported: return null so the caller falls back to a straight rebuild.
+export function mParsePath(d) {
+  if (!d) return null;
+  var toks = d.match(/[a-zA-Z]|-?\d*\.?\d+(?:[eE][-+]?\d+)?/g);
+  if (!toks) return null;
+  var pts = [], seq = [], i = 0;
+  while (i < toks.length) {
+    var t = toks[i];
+    if (/[a-zA-Z]/.test(t)) {
+      if ("MLCQST".indexOf(t) === -1) return null; // relative / H / V / A / Z: bail
+      seq.push({ c: t }); i++;
+    } else {
+      if (i + 1 >= toks.length) return null;
+      pts.push({ x: parseFloat(toks[i]), y: parseFloat(toks[i + 1]) });
+      seq.push({ p: pts.length - 1 }); i += 2;
+    }
+  }
+  return pts.length >= 2 ? { pts: pts, seq: seq } : null;
+}
+// Re-emit a parsed path (from mParsePath) with a fresh set of points, shifting into
+// the element's own frame by subtracting its frame offset (ox, oy).
+export function mPathFromSeq(seq, pts, ox, oy) {
+  var out = "";
+  for (var i = 0; i < seq.length; i++) {
+    if (seq[i].c != null) out += seq[i].c;
+    else { var p = pts[seq[i].p]; out += (p.x - ox) + "," + (p.y - oy) + " "; }
+  }
+  return out;
+}
+// The similarity transform (translate + rotate + uniform scale) that maps the segment
+// p0->p1 onto aS->aT. Applied to every point of a path it rigidly carries the whole
+// shape - its curvature and, for parallel edges, their separation - onto the moved
+// endpoints, so nothing collapses to a straight line. Null when p0==p1 (degenerate).
+export function mFitTransform(p0, p1, aS, aT) {
+  var d0x = p1.x - p0.x, d0y = p1.y - p0.y, l2 = d0x * d0x + d0y * d0y;
+  if (l2 < 1e-6) return null;
+  var d1x = aT.x - aS.x, d1y = aT.y - aS.y;
+  var a = (d1x * d0x + d1y * d0y) / l2, b = (d1y * d0x - d1x * d0y) / l2;
+  return function (p) {
+    var vx = p.x - p0.x, vy = p.y - p0.y;
+    return { x: aS.x + a * vx - b * vy, y: aS.y + b * vx + a * vy };
+  };
+}
 export function mRectDist(pt, r) {
   // 0 when pt is inside the box; otherwise the straight-line gap to its border.
   var dx = Math.max(r.left - pt.x, 0, pt.x - r.right);
@@ -308,23 +356,45 @@ if (box && box.classList && box.classList.contains("mermaid")) {
   // g.edgeLabels in a different order than g.edgePaths when self-loops are present,
   // and (in the mermaid.run path) the inner label ids are blank. So match every
   // non-empty label to the edge whose midpoint it sits closest to.
-  function pathMid(el) {
-    try { var L = el.getTotalLength(); if (L) { var pt = el.getPointAtLength(L / 2); return { x: pt.x, y: pt.y }; } } catch (e) {}
-    var ep = mEndpoints(el.getAttribute("d"));
-    return ep ? { x: (ep.start.x + ep.end.x) / 2, y: (ep.start.y + ep.end.y) / 2 } : null;
+  // Sample points along a path, lifted into the common `space` frame. Mermaid places
+  // an edge label ON its edge, so a label's MINIMUM distance to the right path is near
+  // zero - far more reliable for matching than distance to the arc-midpoint, which on
+  // a curved edge sits nowhere near where the label was placed (up by the hub node).
+  function pathSamples(el) {
+    var o = frameOffset(el), pts = [];
+    try {
+      var L = el.getTotalLength();
+      if (L) { for (var i = 0; i <= 24; i++) { var q = el.getPointAtLength((L * i) / 24); pts.push({ x: q.x + o.x, y: q.y + o.y }); } }
+    } catch (e) {}
+    if (!pts.length) { var ep = mEndpoints(el.getAttribute("d")); if (ep) { pts.push({ x: ep.start.x + o.x, y: ep.start.y + o.y }, { x: ep.end.x + o.x, y: ep.end.y + o.y }); } }
+    return pts;
   }
   var pathEls = Array.prototype.slice.call(svg.querySelectorAll("g.edgePaths > path"));
-  var pathMids = pathEls.map(function (el) { return { el: el, mid: pathMid(el), taken: false }; });
+  var pathPts = pathEls.map(pathSamples);
+  var labelEls = Array.prototype.filter.call(svg.querySelectorAll("g.edgeLabels > g.edgeLabel"), function (g) {
+    return (g.textContent || "").trim() && /translate/.test(g.getAttribute("transform") || "");
+  });
+  var labelPos = labelEls.map(function (g) { var o = frameOffset(g), t = mTranslate(g); return { x: t.x + o.x, y: t.y + o.y }; });
+  // Pair labels to paths by GLOBALLY nearest first, not greedily in DOM order: rank
+  // every (label, path) pair by the label's minimum distance to that path, then lock in
+  // each closest pair whose label and path are both still free. Greedy-by-DOM-order (or
+  // matching on the arc-midpoint) mis-bound a label to the wrong edge, so a node drag
+  // then flung that label across the diagram onto an unrelated arrow.
   var labelForPath = new Map();
-  Array.prototype.forEach.call(svg.querySelectorAll("g.edgeLabels > g.edgeLabel"), function (g) {
-    if (!(g.textContent || "").trim() || !/translate/.test(g.getAttribute("transform") || "")) return;
-    var pos = mTranslate(g), best = null, bd = Infinity;
-    pathMids.forEach(function (pm) {
-      if (pm.taken || !pm.mid) return;
-      var dx = pm.mid.x - pos.x, dy = pm.mid.y - pos.y, dd = dx * dx + dy * dy;
-      if (dd < bd) { bd = dd; best = pm; }
+  var pairs = [];
+  labelPos.forEach(function (lp, li) {
+    pathPts.forEach(function (pts, pi) {
+      var best = Infinity;
+      for (var k = 0; k < pts.length; k++) { var dx = pts[k].x - lp.x, dy = pts[k].y - lp.y, d = dx * dx + dy * dy; if (d < best) best = d; }
+      if (best < Infinity) pairs.push({ li: li, pi: pi, d: best });
     });
-    if (best) { best.taken = true; labelForPath.set(best.el, g); }
+  });
+  pairs.sort(function (a, b) { return a.d - b.d; });
+  var labelUsed = [], pathUsed = [];
+  pairs.forEach(function (pr) {
+    if (labelUsed[pr.li] || pathUsed[pr.pi]) return;
+    labelUsed[pr.li] = pathUsed[pr.pi] = true;
+    labelForPath.set(pathEls[pr.pi], labelEls[pr.li]);
   });
 
   var edges = [];
@@ -338,10 +408,18 @@ if (box && box.classList && box.classList.contains("mermaid")) {
     var ep = mEndpoints(el.getAttribute("d"));
     var src = ep ? bindEndpoint({ x: ep.start.x + eo.x, y: ep.start.y + eo.y }) : null;
     var tgt = ep ? bindEndpoint({ x: ep.end.x + eo.x, y: ep.end.y + eo.y }) : null;
+    // Keep the original path (lifted into the common `space` frame) so a rebuild can
+    // carry its real shape onto the moved endpoints instead of straightening it.
+    var parsed = mParsePath(el.getAttribute("d"));
+    var origPts = parsed ? parsed.pts.map(function (p) { return { x: p.x + eo.x, y: p.y + eo.y }; }) : null;
+    var origLabelTr = lg ? mTranslate(lg) : { x: 0, y: 0 };
     var edge = {
       el: el, id: strip(el.id), src: src, tgt: tgt, label: lg, selfLoop: !!(src && src === tgt),
       origD: el.getAttribute("d") || "", origLabelT: lg ? (lg.getAttribute("transform") || "") : "",
-      origLabelTr: lg ? mTranslate(lg) : { x: 0, y: 0 },
+      origLabelTr: origLabelTr,
+      origSeq: parsed ? parsed.seq : null, origPts: origPts,
+      origStart: origPts ? origPts[0] : null, origEnd: origPts ? origPts[origPts.length - 1] : null,
+      origLabelAnchor: lg ? { x: origLabelTr.x + lo.x, y: origLabelTr.y + lo.y } : null,
       eo: eo, lo: lo, bend: null,
     };
     edges.push(edge);
@@ -354,6 +432,17 @@ if (box && box.classList && box.classList.contains("mermaid")) {
     if (ti >= 0) nodeEdges[ti].push(edge);
   });
 
+  // Each edge endpoint is pinned to its node's original attach point and moved by how
+  // far that node has been dragged (its delta), so parallel edges keep their fanned-out
+  // starts and arrowheads instead of every one snapping to the single toward-centre
+  // border point. Falls back to that border point only when the path was unparseable.
+  function edgeEnds(e) {
+    var dS = e.src.delta(), dT = e.tgt.delta();
+    return {
+      s: e.origStart ? { x: e.origStart.x + dS.x, y: e.origStart.y + dS.y } : e.src.border(e.tgt.center()),
+      t: e.origEnd ? { x: e.origEnd.x + dT.x, y: e.origEnd.y + dT.y } : e.tgt.border(e.src.center()),
+    };
+  }
   function rebuildEdge(e) {
     if (!e.src || !e.tgt) return;
     if (e.selfLoop) {
@@ -365,12 +454,13 @@ if (box && box.classList && box.classList.contains("mermaid")) {
       if (e.label) mSetTranslate(e.label, e.origLabelTr.x + d.x, e.origLabelTr.y + d.y);
       return;
     }
-    var cS = e.src.center(), cT = e.tgt.center();
-    var aS = e.src.border(cT), aT = e.tgt.border(cS);
-    // Anchors are computed in the common `space` frame; write the path in its own
-    // frame (subtract eo) and the label in its frame (subtract lo).
+    var ends = edgeEnds(e), aS = ends.s, aT = ends.t;
+    // Endpoints are in the common `space` frame; write the path in its own frame
+    // (subtract eo) and the label in its frame (subtract lo).
     var eo = e.eo, lo = e.lo, lp;
     if (e.bend) {
+      // Bow the edge toward the drag point, but keep its pinned endpoints so the
+      // arrowhead stays on its own fanned spot rather than snapping to the centre.
       var mx = (aS.x + aT.x) / 2, my = (aS.y + aT.y) / 2;
       var vx = aT.x - aS.x, vy = aT.y - aS.y, len = Math.hypot(vx, vy) || 1;
       var ux = vx / len, uy = vy / len;
@@ -378,13 +468,43 @@ if (box && box.classList && box.classList.contains("mermaid")) {
       e.el.setAttribute("d", "M" + (aS.x - eo.x) + "," + (aS.y - eo.y) + "Q" + (cx - eo.x) + "," + (cy - eo.y) + " " + (aT.x - eo.x) + "," + (aT.y - eo.y));
       lp = { x: 0.25 * aS.x + 0.5 * cx + 0.25 * aT.x, y: 0.25 * aS.y + 0.5 * cy + 0.25 * aT.y };
     } else {
-      e.el.setAttribute("d", "M" + (aS.x - eo.x) + "," + (aS.y - eo.y) + "L" + (aT.x - eo.x) + "," + (aT.y - eo.y));
-      lp = { x: (aS.x + aT.x) / 2, y: (aS.y + aT.y) / 2 };
+      // No manual bend: rubber-band the recorded path between the pinned endpoints,
+      // preserving its curve (and parallel-edge separation).
+      var fit = (e.origSeq && e.origStart && e.origEnd) ? mFitTransform(e.origStart, e.origEnd, aS, aT) : null;
+      if (fit) {
+        e.el.setAttribute("d", mPathFromSeq(e.origSeq, e.origPts.map(fit), eo.x, eo.y));
+        lp = e.origLabelAnchor ? fit(e.origLabelAnchor) : { x: (aS.x + aT.x) / 2, y: (aS.y + aT.y) / 2 };
+      } else {
+        e.el.setAttribute("d", "M" + (aS.x - eo.x) + "," + (aS.y - eo.y) + "L" + (aT.x - eo.x) + "," + (aT.y - eo.y));
+        lp = { x: (aS.x + aT.x) / 2, y: (aS.y + aT.y) / 2 };
+      }
     }
     if (e.label) mSetTranslate(e.label, lp.x - lo.x, lp.y - lo.y);
   }
   function rebuildNode(node) { var i = nodes.indexOf(node); if (i >= 0) nodeEdges[i].forEach(rebuildEdge); }
 
+  // On a fresh render, pull every edge label onto the point of its own edge nearest to
+  // where Mermaid dropped it. Mermaid sometimes places a label a little off a curved
+  // edge (e.g. two edges into the same node), and htmlit otherwise only snaps a label
+  // onto its line when that edge is dragged - so a label could sit off its arrow until
+  // touched. This lands them on their lines from the start and updates the label's
+  // recorded origin so later drags stay consistent.
+  function snapLabelsToEdges() {
+    edges.forEach(function (e) {
+      if (!e.label || !e.origLabelAnchor || e.selfLoop) return;
+      var pts = pathSamples(e.el);
+      if (!pts.length) return;
+      var c = e.origLabelAnchor, best = null, bd = Infinity;
+      for (var k = 0; k < pts.length; k++) { var dx = pts[k].x - c.x, dy = pts[k].y - c.y, d = dx * dx + dy * dy; if (d < bd) { bd = d; best = pts[k]; } }
+      if (!best) return;
+      var tx = best.x - e.lo.x, ty = best.y - e.lo.y;
+      e.origLabelAnchor = { x: best.x, y: best.y };
+      e.origLabelTr = { x: tx, y: ty };
+      e.origLabelT = "translate(" + tx + "," + ty + ")";
+      mSetTranslate(e.label, tx, ty);
+    });
+  }
+
   function save() {
     var snap = { vb: [state.x, state.y, state.w, state.h], nodes: {}, edges: {}, edgeT: {}, labels: {}, bends: {} };
     nodes.forEach(function (n) { snap.nodes[n.id] = n.el.getAttribute("transform") || ""; });
@@ -477,9 +597,11 @@ if (box && box.classList && box.classList.contains("mermaid")) {
       mSetTranslate(drag.node.el, drag.t0.x + (u.x - drag.start.x), drag.t0.y + (u.y - drag.start.y));
       rebuildNode(drag.node);
     } else if (drag.type === "edge" && drag.edge.src && drag.edge.tgt && drag.edge.src !== drag.edge.tgt) {
-      var e2 = drag.edge, cS = e2.src.center(), cT = e2.tgt.center();
-      var mx = (cS.x + cT.x) / 2, my = (cS.y + cT.y) / 2;
-      var vx = cT.x - cS.x, vy = cT.y - cS.y, len = Math.hypot(vx, vy) || 1;
+      // Bend relative to the same pinned endpoints rebuildEdge draws between, so the
+      // grabbed label/edge tracks the cursor and its arrowhead never jumps to centre.
+      var e2 = drag.edge, ends2 = edgeEnds(e2), s2 = ends2.s, t2 = ends2.t;
+      var mx = (s2.x + t2.x) / 2, my = (s2.y + t2.y) / 2;
+      var vx = t2.x - s2.x, vy = t2.y - s2.y, len = Math.hypot(vx, vy) || 1;
       var ux = vx / len, uy = vy / len;
       e2.bend = { along: (u.x - mx) * ux + (u.y - my) * uy, perp: (u.x - mx) * -uy + (u.y - my) * ux };
       rebuildEdge(e2);
@@ -613,4 +735,5 @@ if (box && box.classList && box.classList.contains("mermaid")) {
   diagramRegistry.push({ svg: svg, fit: fitForExport });
 
   if (diagramLayouts[sourceKey]) applySnap(diagramLayouts[sourceKey]);
+  else snapLabelsToEdges();
 }
diff --git a/skills/htmlit/client/exporting.js b/skills/htmlit/client/exporting.js
index 6f8e686..0862609 100644
--- a/skills/htmlit/client/exporting.js
+++ b/skills/htmlit/client/exporting.js
@@ -26,6 +26,10 @@ var ARTIFACT_CSS =
   '[data-htmlit-answer]{position:relative;margin:6px 0 16px;padding:12px 15px;border:1px solid rgba(120,120,135,.28);border-left:3px solid #6b5cff;border-radius:0 10px 10px 10px;background:rgba(107,92,255,.055);}' +
   '[data-htmlit-answer]::before{content:"\\21B3  You asked: " attr(data-question);display:block;margin:0 0 10px;padding:0 0 8px;font:600 12.5px/1.45 system-ui,-apple-system,sans-serif;color:#5647d6;border-bottom:1px dashed rgba(120,120,135,.32);white-space:pre-wrap;}' +
   '[data-htmlit-answer]:not([data-question])::before,[data-htmlit-answer][data-question=""]::before{content:"\\21B3  Answer";}' +
+  // The "You asked:" header of an answered comment is a back-link to where the user
+  // asked (a plain click on it jumps there), so give it a pointer + hover underline.
+  '[data-htmlit-answer][data-htmlit-answer-for]::before{cursor:pointer;}' +
+  '[data-htmlit-answer][data-htmlit-answer-for]:hover::before{text-decoration:underline;}' +
   'html.dark [data-htmlit-answer]{background:rgba(124,111,255,.1);border-color:rgba(140,140,160,.28);border-left-color:#8b7cff;}' +
   'html.dark [data-htmlit-answer]::before{color:#b7adff;border-bottom-color:rgba(150,150,170,.35);}' +
   '@keyframes htmlit-new-pulse{0%{box-shadow:0 0 0 3px rgba(107,92,255,.5);background-color:rgba(107,92,255,.14);}70%{box-shadow:0 0 0 3px rgba(107,92,255,.18);}100%{box-shadow:0 0 0 3px rgba(107,92,255,0);background-color:transparent;}}' +
diff --git a/skills/htmlit/client/rail.js b/skills/htmlit/client/rail.js
index 00dd166..107b094 100644
--- a/skills/htmlit/client/rail.js
+++ b/skills/htmlit/client/rail.js
@@ -41,7 +41,7 @@ export function anchorTopResolved(h) {
 // Bring an anchor (or its answer) into view even when it sits in a collapsed
 // section: reveal the section, re-place the cards for the new layout, then flash and
 // scroll to the target on the next frame (once the reveal has laid out).
-function jumpTo(el) {
+export function jumpTo(el) {
   if (!el) return;
   revealElement(el);
   positionRail();
diff --git a/skills/htmlit/htmlit_core/models.py b/skills/htmlit/htmlit_core/models.py
index db94fe5..16e49b2 100644
--- a/skills/htmlit/htmlit_core/models.py
+++ b/skills/htmlit/htmlit_core/models.py
@@ -61,6 +61,7 @@ class LayoutWarning(TypedDict, total=False):
 
     severity: str
     kind: str
+    message: str
     offenders: list[str]
 
 
diff --git a/skills/htmlit/htmlit_core/server.py b/skills/htmlit/htmlit_core/server.py
index c90d001..17aec86 100644
--- a/skills/htmlit/htmlit_core/server.py
+++ b/skills/htmlit/htmlit_core/server.py
@@ -23,6 +23,7 @@
 from .page import build_page_config, inject_client
 from .session import Hub, Session
 from .sidecar import delete_artifact, remove_sidecar
+from .validation import html_structure_warnings
 
 VERSION = config.source_version()
 HUB = Hub()
@@ -341,10 +342,22 @@ def _record_layout_warnings(self, key: str) -> None:
             return
         raw = self._read_json().get("layout_warnings", [])
         warnings: list[LayoutWarning] = raw if isinstance(raw, list) else []
+        # The browser repairs malformed markup before the client runs, so it cannot
+        # report unbalanced tags. Re-read the raw file here (this fires on load and
+        # after every morph) and fold in any structural problems, so the authoring
+        # agent is told to fix the source instead of shipping a collapsed layout.
+        warnings = warnings + self._artifact_structure_warnings(session)
         if warnings:
             session.push_feedback({"type": FeedbackKind.LAYOUT_WARNINGS.value, "layout_warnings": warnings})
         self._json(200, {"ok": True})
 
+    def _artifact_structure_warnings(self, session: Session) -> list[LayoutWarning]:
+        try:
+            html = Path(session.path).read_text(encoding="utf-8", errors="replace")
+        except OSError:
+            return []
+        return html_structure_warnings(html)
+
     def _agent_reply(self) -> None:
         data = self._read_json()
         session = self._require_session(data.get("key", ""))
diff --git a/skills/htmlit/htmlit_core/validation.py b/skills/htmlit/htmlit_core/validation.py
new file mode 100644
index 0000000..c49035e
--- /dev/null
+++ b/skills/htmlit/htmlit_core/validation.py
@@ -0,0 +1,104 @@
+"""Structural validation of an artifact's raw HTML.
+
+htmlit serves the artifact verbatim, so a malformed document - a stray or unbalanced
+block-container tag - collapses the author's layout instead of htmlit misrendering it:
+an extra ``</div>`` closes the centring wrapper early and every following section
+escapes it. The browser silently repairs the DOM, so the injected client cannot see
+the original mistake. This stdlib check reads the raw file and reports the imbalance
+back to the authoring agent over the same layout-warnings channel as overflow and
+Mermaid errors, so the fix lands in the source rather than being papered over.
+"""
+
+from __future__ import annotations
+
+from html.parser import HTMLParser
+
+from .models import LayoutWarning
+
+# Block containers that require an explicit end tag (HTML defines no optional-end-tag
+# rule for them). Tracking only these keeps the check free of false positives from
+# elements that legitimately omit their close (<p>, <li>, <td>, <tr>, <option>, ...),
+# while still catching the container imbalances that actually break the layout.
+_CONTAINERS = frozenset(
+    {
+        "div",
+        "section",
+        "main",
+        "article",
+        "aside",
+        "header",
+        "footer",
+        "nav",
+        "figure",
+        "ul",
+        "ol",
+        "dl",
+        "table",
+        "form",
+        "fieldset",
+        "details",
+        "blockquote",
+        "pre",
+    }
+)
+_MAX_OFFENDERS = 10
+_MESSAGE = (
+    "The artifact HTML has unbalanced block tags, so the browser closes a container "
+    "early and the sections after it escape the layout wrapper (rendering full-width "
+    "with no centring/padding). Fix the tags listed in offenders in the source."
+)
+
+
+class _Structure(HTMLParser):
+    """Track only block containers on a stack, recording every imbalance."""
+
+    def __init__(self) -> None:
+        super().__init__(convert_charrefs=True)
+        self.stack: list[tuple[str, int]] = []
+        self.problems: list[tuple[str, str, int]] = []  # (kind, tag, line)
+
+    def handle_starttag(self, tag: str, attrs: list[tuple[str, str | None]]) -> None:
+        if tag in _CONTAINERS:
+            self.stack.append((tag, self.getpos()[0]))
+
+    def handle_startendtag(self, tag: str, attrs: list[tuple[str, str | None]]) -> None:
+        pass  # a self-closing <div/> opens and closes at once: nothing to track
+
+    def handle_endtag(self, tag: str) -> None:
+        if tag not in _CONTAINERS:
+            return
+        for i in range(len(self.stack) - 1, -1, -1):
+            if self.stack[i][0] == tag:
+                # Any tracked container still open above this one is closed implicitly
+                # by this end tag: it was never closed inside its own scope.
+                for skipped_tag, skipped_line in self.stack[i + 1 :]:
+                    self.problems.append(("unclosed", skipped_tag, skipped_line))
+                del self.stack[i:]
+                return
+        self.problems.append(("stray", tag, self.getpos()[0]))
+
+
+def _describe(kind: str, tag: str, line: int) -> str:
+    if kind == "stray":
+        return f"unexpected </{tag}> at line {line} with no matching open <{tag}>"
+    return f"<{tag}> opened at line {line} is never closed"
+
+
+def html_structure_warnings(html: str) -> list[LayoutWarning]:
+    """Return an ``unbalanced-html`` warning (or none) for the raw artifact HTML.
+
+    The result is a list so it drops straight into the ``layout_warnings`` array the
+    agent already reads; it holds at most one warning whose ``offenders`` name each
+    stray or unclosed container with its source line.
+    """
+    parser = _Structure()
+    try:
+        parser.feed(html)
+        parser.close()
+    except Exception:  # a parser hiccup must never break serving the review
+        return []
+    problems = parser.problems + [("unclosed", tag, line) for tag, line in parser.stack]
+    if not problems:
+        return []
+    offenders = [_describe(kind, tag, line) for kind, tag, line in problems[:_MAX_OFFENDERS]]
+    return [{"severity": "error", "kind": "unbalanced-html", "message": _MESSAGE, "offenders": offenders}]
diff --git a/tests/client/answer-anchor-jump.test.mjs b/tests/client/answer-anchor-jump.test.mjs
new file mode 100644
index 0000000..21f757c
--- /dev/null
+++ b/tests/client/answer-anchor-jump.test.mjs
@@ -0,0 +1,96 @@
+/**
+ * Browser regression test for the answer -> anchor jump: clicking an agent answer
+ * block's "You asked:" header scrolls back to (and flashes) the spot the user asked
+ * about. The reverse jump (anchor -> answer) already existed; this pins the missing
+ * direction so the two are symmetric.
+ *
+ * Skips rather than fails when no browser or Python is available.
+ */
+
+import assert from "node:assert/strict";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { after, before, test } from "node:test";
+
+import { startReview } from "./harness.mjs";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const FIXTURE = join(HERE, "fixtures", "answer-anchor.html");
+const state = { browser: null, unavailable: null };
+
+const SEED = {
+  highlights: [{
+    id: "cm-x",
+    kind: "comment",
+    prompt: "Elaborate?",
+    comments: ["Elaborate?"],
+    text: "Take a maintenance window",
+    range: { container: "#ask-para", start: 0, end: 25, text: "Take a maintenance window" },
+  }],
+};
+
+const ANCHOR = 'mark.htmlit-cm[data-htmlit-cm="cm-x"]';
+
+function anchorState() {
+  const mark = document.querySelector('mark.htmlit-cm[data-htmlit-cm="cm-x"]');
+  if (!mark) return { exists: false };
+  const r = mark.getBoundingClientRect();
+  return {
+    exists: true,
+    flashed: mark.classList.contains("htmlit-new"),
+    inView: r.top >= 0 && r.top <= window.innerHeight,
+  };
+}
+
+before(async () => {
+  try {
+    const { default: puppeteer } = await import("puppeteer");
+    state.browser = await puppeteer.launch({ args: ["--no-sandbox", "--disable-setuid-sandbox"] });
+  } catch (err) {
+    state.unavailable = `no browser available: ${err.message}`;
+  }
+});
+
+after(async () => {
+  if (state.browser) await state.browser.close();
+});
+
+test("clicking an answer's 'You asked' header jumps back to the anchor", async (t) => {
+  if (state.unavailable) return t.skip(state.unavailable);
+  let review, page;
+  try {
+    review = await startReview(FIXTURE);
+    await fetch(`${review.base}/api/${review.key}/highlights`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(SEED),
+    });
+    page = await state.browser.newPage();
+    await page.setViewport({ width: 1100, height: 800 });
+    await page.goto(review.url, { waitUntil: "domcontentloaded" });
+    await page.waitForFunction((sel) => document.querySelector(sel), { timeout: 20000 }, ANCHOR);
+
+    // Scroll the answer (far below) into view, so the anchor near the top is off-screen.
+    const header = await page.evaluate(() => {
+      const block = document.querySelector('[data-htmlit-answer-for="cm-x"]');
+      block.scrollIntoView({ block: "center" });
+      const r = block.getBoundingClientRect();
+      return { x: r.left + 24, y: r.top + 8 }; // the "You asked:" header / top padding
+    });
+
+    const before = await page.evaluate(anchorState);
+    assert.equal(before.exists, true, "the comment anchor mark should be present");
+    assert.equal(before.flashed, false);
+    assert.equal(before.inView, false, "anchor is scrolled out of view before the jump");
+
+    await page.mouse.click(header.x, header.y);
+    await new Promise((r) => setTimeout(r, 500));
+
+    const after = await page.evaluate(anchorState);
+    assert.equal(after.flashed, true, "clicking the answer header should flash the anchor");
+    assert.equal(after.inView, true, "and scroll it back into view");
+  } finally {
+    if (page) await page.close();
+    if (review) await review.stop();
+  }
+});
diff --git a/tests/client/edge-label-match.test.mjs b/tests/client/edge-label-match.test.mjs
new file mode 100644
index 0000000..f00a961
--- /dev/null
+++ b/tests/client/edge-label-match.test.mjs
@@ -0,0 +1,158 @@
+/**
+ * Browser regression test for edge-label to edge matching in a dense diagram.
+ *
+ * A hub inside a subgraph fans many labelled edges out in different directions. The
+ * old matcher compared label and path positions in mismatched coordinate frames and
+ * assigned greedily in DOM order, so a label could bind to the wrong edge - and then
+ * dragging an unrelated node flung that label across the diagram (the "PBI discussion
+ * lands on Blob storage" report). Each label must stay bound to its own edge, so
+ * dragging a target moves only the labels of edges actually connected to it.
+ *
+ * Skips rather than fails when no browser or Python is available.
+ */
+
+import assert from "node:assert/strict";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { after, before, test } from "node:test";
+
+import { startReview } from "./harness.mjs";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const FIXTURE = join(HERE, "fixtures", "dense-labels.html");
+const state = { browser: null, unavailable: null };
+
+before(async () => {
+  try {
+    const { default: puppeteer } = await import("puppeteer");
+    state.browser = await puppeteer.launch({ args: ["--no-sandbox", "--disable-setuid-sandbox"] });
+  } catch (err) {
+    state.unavailable = `no browser available: ${err.message}`;
+  }
+});
+
+after(async () => {
+  if (state.browser) await state.browser.close();
+});
+
+function labelCenters(page) {
+  return page.evaluate(() =>
+    Object.fromEntries(
+      [...document.querySelectorAll(".mermaid svg g.edgeLabels g.edgeLabel")]
+        .filter((g) => (g.textContent || "").trim())
+        .map((g) => {
+          const r = g.getBoundingClientRect();
+          return [(g.textContent || "").trim(), { x: Math.round(r.x + r.width / 2), y: Math.round(r.y + r.height / 2) }];
+        }),
+    ),
+  );
+}
+
+async function dragNodeContaining(page, text, dx, dy) {
+  const t = await page.evaluate((needle) => {
+    const svg = document.querySelector(".mermaid svg");
+    const node = [...svg.querySelectorAll("g.node")].find((n) => (n.textContent || "").includes(needle));
+    node.scrollIntoView({ block: "center" });
+    const r = node.getBoundingClientRect();
+    return { cx: r.x + r.width / 2, cy: r.y + r.height / 2 };
+  }, text);
+  await page.mouse.move(t.cx, t.cy);
+  await page.mouse.down();
+  for (let s = 1; s <= 14; s++) await page.mouse.move(t.cx + (dx * s) / 14, t.cy + (dy * s) / 14);
+  await page.mouse.up();
+}
+
+// Each label's distance (px) to the nearest point on any edge path, by text.
+function labelToLineDistances(page) {
+  return page.evaluate(() => {
+    const svg = document.querySelector(".mermaid svg");
+    const paths = [...svg.querySelectorAll("g.edgePaths > path")].map((pa) => {
+      const pts = [];
+      try {
+        const L = pa.getTotalLength();
+        for (let i = 0; i <= 30; i++) {
+          const q = pa.getPointAtLength((L * i) / 30);
+          const sp = svg.createSVGPoint();
+          sp.x = q.x;
+          sp.y = q.y;
+          const s = sp.matrixTransform(svg.getScreenCTM());
+          pts.push({ x: s.x, y: s.y });
+        }
+      } catch (e) { /* empty path */ }
+      return pts;
+    });
+    return Object.fromEntries(
+      [...svg.querySelectorAll("g.edgeLabels g.edgeLabel")].filter((g) => (g.textContent || "").trim()).map((g) => {
+        const r = g.getBoundingClientRect();
+        const c = { x: r.x + r.width / 2, y: r.y + r.height / 2 };
+        let best = Infinity;
+        for (const pts of paths) for (const pt of pts) best = Math.min(best, Math.hypot(c.x - pt.x, c.y - pt.y));
+        return [(g.textContent || "").trim(), Math.round(best)];
+      }),
+    );
+  });
+}
+
+test("edge labels sit on their own edge on a fresh render, without dragging", async (t) => {
+  if (state.unavailable) return t.skip(state.unavailable);
+  let review, page;
+  try {
+    review = await startReview(FIXTURE);
+    page = await state.browser.newPage();
+    await page.setViewport({ width: 1300, height: 950 });
+    await page.goto(review.url, { waitUntil: "domcontentloaded" });
+    await page.waitForFunction(() => document.querySelector(".mermaid svg") && document.querySelector(".mermaid svg").__htmlitDrag, { timeout: 20000 });
+    await new Promise((r) => setTimeout(r, 800));
+
+    // Mermaid drops labels on curved edges (metadata, commands) a good way off the
+    // line; htmlit used to leave them there until dragged. They must land on their
+    // arrow at load now, so no label sits far from every edge.
+    const dists = await labelToLineDistances(page);
+    for (const [label, d] of Object.entries(dists)) {
+      assert.ok(d <= 12, `label "${label}" should sit on its edge at load, but is ${d}px off`);
+    }
+  } finally {
+    if (page) await page.close();
+    if (review) await review.stop();
+  }
+});
+
+test("each edge label stays bound to its own edge in a dense subgraph diagram", async (t) => {
+  if (state.unavailable) return t.skip(state.unavailable);
+  let review, page;
+  try {
+    review = await startReview(FIXTURE);
+    page = await state.browser.newPage();
+    await page.setViewport({ width: 1300, height: 950 });
+    await page.goto(review.url, { waitUntil: "domcontentloaded" });
+    await page.waitForFunction(() => document.querySelector(".mermaid svg") && document.querySelector(".mermaid svg").__htmlitDrag, { timeout: 20000 });
+    await new Promise((r) => setTimeout(r, 700));
+
+    const before = await labelCenters(page);
+    await dragNodeContaining(page, "Blob storage", 50, 150);
+    const afterBlob = await labelCenters(page);
+
+    const dist = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+    const movedBlob = (label) => dist(before[label], afterBlob[label]);
+    // The Blob-connected edge's label must follow the dragged node...
+    assert.ok(movedBlob("detail, patches, logs") > 4, "the W->Blob label should follow the Blob node");
+    // ...while a label on an edge that does NOT touch Blob (W->Cosmos) must stay put.
+    // Under the old frame/greedy mismatch this one was flung instead.
+    assert.ok(movedBlob("metadata") < 4, "an unrelated edge's label must not move when Blob is dragged");
+    assert.ok(movedBlob("PBI discussion / status / close") < 4, "the W->ADO label must not move when Blob is dragged");
+
+    // Dragging Cosmos (reached by heavily curved edges) must move its edge labels but
+    // not 'commands' (W->command-keys). Matching on the arc-midpoint of a curved edge
+    // - which sits nowhere near the label - mis-bound 'commands' to a Cosmos edge, so
+    // it wrongly followed Cosmos. This pins the label to its whole path instead.
+    const beforeCos = await labelCenters(page);
+    await dragNodeContaining(page, "Cosmos", -120, -40);
+    const afterCos = await labelCenters(page);
+    const movedCos = (label) => dist(beforeCos[label], afterCos[label]);
+    assert.ok(movedCos("metadata") > 4, "the W->Cosmos label should follow the Cosmos node");
+    assert.ok(movedCos("commands") < 4, "the W->command label must not move when Cosmos is dragged");
+  } finally {
+    if (page) await page.close();
+    if (review) await review.stop();
+  }
+});
diff --git a/tests/client/fixtures/answer-anchor.html b/tests/client/fixtures/answer-anchor.html
new file mode 100644
index 0000000..88e2eb8
--- /dev/null
+++ b/tests/client/fixtures/answer-anchor.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>htmlit answer-to-anchor jump fixture</title>
+  <style>
+    body { font: 15px/1.6 system-ui, sans-serif; margin: 2rem; color: #1f2328; background: #fff; }
+    html.dark body { color: #e6edf3; background: #0d1117; }
+    h1 { font-size: 22px; }
+    .spacer { height: 1600px; color: #8a8a8a; }
+  </style>
+</head>
+<body>
+  <h1>The answer header jumps back to where you asked</h1>
+
+  <p id="ask-para">Take a maintenance window before the migration so a rollback stays clean.</p>
+
+  <div class="spacer">... a long document so a jump has to scroll ...</div>
+
+  <section data-htmlit-answer data-question="Elaborate?" data-htmlit-answer-for="cm-x">
+    <p>Schedule it during the lowest-traffic window and announce it a day ahead.</p>
+  </section>
+</body>
+</html>
diff --git a/tests/client/fixtures/dense-labels.html b/tests/client/fixtures/dense-labels.html
new file mode 100644
index 0000000..47c7373
--- /dev/null
+++ b/tests/client/fixtures/dense-labels.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>htmlit dense edge-label fixture</title>
+  <style>
+    body { font: 15px/1.6 system-ui, sans-serif; margin: 2rem; color: #1f2328; background: #fff; }
+    html.dark body { color: #e6edf3; background: #0d1117; }
+  </style>
+</head>
+<body>
+  <h1>A subgraph hub whose many labelled edges must each keep their own label</h1>
+
+  <p>A node inside a subgraph fans labelled edges out to targets in several
+  directions - the shape that used to mis-bind a label to the wrong edge, because
+  the label-to-edge match compared positions in mismatched coordinate frames and
+  assigned greedily. Each label must stay bound to its own edge, so dragging one
+  target moves only that edge's label.</p>
+
+  <pre><code class="language-mermaid">flowchart LR
+  U["caller"] -->|"submit"| API["scheduler"]
+  API -->|"init"| COS[("Cosmos")]
+  API -->|"enqueue"| ST["stream"]
+
+  subgraph REDIS["redis cluster"]
+    ST
+    CMD["command keys"]
+  end
+
+  subgraph FLEET["worker fleet"]
+    W["worker"]
+  end
+
+  ST -->|"consume"| W
+  W -->|"metadata"| COS
+  W -->|"detail, patches, logs"| BLOB[("Blob storage")]
+  W -->|"lock / release"| MGMT["Management API"]
+  W -->|"commands"| CMD
+  W -->|"PBI discussion / status / close"| ADO["ADO MCP"]
+
+  RB["readback"] -->|"meta"| COS
+  RB -->|"detail"| BLOB</code></pre>
+</body>
+</html>
diff --git a/tests/client/fixtures/parallel-edges.html b/tests/client/fixtures/parallel-edges.html
new file mode 100644
index 0000000..7b3ba59
--- /dev/null
+++ b/tests/client/fixtures/parallel-edges.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>htmlit parallel-edge curve fixture</title>
+  <style>
+    body { font: 15px/1.6 system-ui, sans-serif; margin: 2rem; color: #1f2328; background: #fff; }
+    html.dark body { color: #e6edf3; background: #0d1117; }
+    h1 { font-size: 22px; }
+  </style>
+</head>
+<body>
+  <h1>Parallel edges keep their curve when a node is dragged</h1>
+
+  <p>Two nodes joined by several edges. Mermaid bows the parallel edges apart so
+  they do not overlap; dragging a node must preserve that separation and curvature
+  instead of collapsing them onto one straight line.</p>
+
+  <pre><code class="language-mermaid">flowchart LR
+  A["source"] -->|"e0"| B["target"]
+  A -->|"e1"| B
+  A -->|"e2"| B
+  A -->|"e3"| B</code></pre>
+</body>
+</html>
diff --git a/tests/client/parallel-edge-curve.test.mjs b/tests/client/parallel-edge-curve.test.mjs
new file mode 100644
index 0000000..33f0681
--- /dev/null
+++ b/tests/client/parallel-edge-curve.test.mjs
@@ -0,0 +1,184 @@
+/**
+ * Browser regression test for the Mermaid rearrange feature: dragging a node used
+ * to rebuild each connected edge as a straight line, which flattened curves and -
+ * worse - stacked every parallel edge between the same two nodes onto one identical
+ * segment. The rebuild now carries each edge's original path onto the moved
+ * endpoints, so curvature and the separation of parallel edges survive a drag.
+ *
+ * Like the sibling suite, this skips (rather than fails) when no browser or Python
+ * is available, and drives the real daemon-served client with a headless browser.
+ */
+
+import assert from "node:assert/strict";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+import { after, before, describe, test } from "node:test";
+
+import { startReview } from "./harness.mjs";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const FIXTURE = join(HERE, "fixtures", "parallel-edges.html");
+
+const state = { browser: null, page: null, review: null, unavailable: null, errors: [] };
+
+async function launchBrowser() {
+  const { default: puppeteer } = await import("puppeteer");
+  return puppeteer.launch({ args: ["--no-sandbox", "--disable-setuid-sandbox"] });
+}
+
+before(async () => {
+  try {
+    state.browser = await launchBrowser();
+  } catch (err) {
+    state.unavailable = `no browser available: ${err.message}`;
+    return;
+  }
+  try {
+    state.review = await startReview(FIXTURE);
+  } catch (err) {
+    state.unavailable = `daemon did not start: ${err.message}`;
+    return;
+  }
+  state.page = await state.browser.newPage();
+  state.page.on("pageerror", (e) => state.errors.push(String(e)));
+  state.page.on("console", (m) => m.type() === "error" && state.errors.push(m.text()));
+  await state.page.setViewport({ width: 1200, height: 800 });
+  await state.page.goto(state.review.url, { waitUntil: "domcontentloaded" });
+  await state.page.waitForFunction(
+    () => {
+      const svgs = [...document.querySelectorAll(".mermaid svg")];
+      return svgs.length >= 1 && svgs.every((s) => s.__htmlitDrag);
+    },
+    { timeout: 20000 },
+  );
+});
+
+after(async () => {
+  if (state.page) await state.page.close();
+  if (state.browser) await state.browser.close();
+  if (state.review) await state.review.stop();
+});
+
+/** The `d` of every parallel A->B edge, plus its coordinate-pair count and endpoints. */
+function edgePaths() {
+  return state.page.evaluate(() => {
+    const svg = document.querySelector(".mermaid svg");
+    return [...svg.querySelectorAll("g.edgePaths > path")].map((p) => {
+      const d = p.getAttribute("d") || "";
+      const nums = (d.match(/-?\d*\.?\d+(?:[eE][-+]?\d+)?/g) || []).map(Number);
+      const round = (n) => Math.round(n);
+      const pt = (i) => round(nums[i]) + "," + round(nums[i + 1]);
+      return { id: p.id, d, pairs: nums.length / 2, start: pt(0), end: pt(nums.length - 2) };
+    });
+  });
+}
+
+/** Drag the first node by a screen-space offset and let the client rebuild edges. */
+async function dragFirstNode(dx, dy) {
+  const target = await state.page.evaluate(() => {
+    const svg = document.querySelector(".mermaid svg");
+    svg.scrollIntoView({ block: "center" });
+    const node = svg.querySelectorAll("g.node")[0];
+    const r = node.getBoundingClientRect();
+    return { cx: r.x + r.width / 2, cy: r.y + r.height / 2 };
+  });
+  await state.page.mouse.move(target.cx, target.cy);
+  await state.page.mouse.down();
+  for (let s = 1; s <= 12; s++) {
+    await state.page.mouse.move(target.cx + (dx * s) / 12, target.cy + (dy * s) / 12);
+  }
+  await state.page.mouse.up();
+}
+
+/** Grab an edge label by its text and drag it by a screen-space offset (bends the edge). */
+async function dragLabel(text, dx, dy) {
+  const target = await state.page.evaluate((t) => {
+    const svg = document.querySelector(".mermaid svg");
+    svg.scrollIntoView({ block: "center" });
+    const g = [...svg.querySelectorAll("g.edgeLabels g.edgeLabel")].find((l) => (l.textContent || "").trim() === t);
+    if (!g) return null;
+    const r = g.getBoundingClientRect();
+    return { cx: r.x + r.width / 2, cy: r.y + r.height / 2 };
+  }, text);
+  if (!target) throw new Error(`edge label ${text} not found`);
+  await state.page.mouse.move(target.cx, target.cy);
+  await state.page.mouse.down();
+  for (let s = 1; s <= 12; s++) {
+    await state.page.mouse.move(target.cx + (dx * s) / 12, target.cy + (dy * s) / 12);
+  }
+  await state.page.mouse.up();
+}
+
+function dist(p, q) {
+  const a = p.split(",").map(Number), c = q.split(",").map(Number);
+  return Math.hypot(a[0] - c[0], a[1] - c[1]);
+}
+
+describe("mermaid parallel-edge rearrange", () => {
+  test("dragging a node keeps parallel edges curved and separated", async (t) => {
+    if (state.unavailable) return t.skip(state.unavailable);
+
+    const before = await edgePaths();
+    assert.ok(before.length >= 3, "fixture should render several parallel edges");
+    // Mermaid bows parallel edges apart, so they start curved (multi-point) and distinct.
+    assert.ok(
+      before.every((e) => e.pairs > 2),
+      "parallel edges should start as curves, not straight segments",
+    );
+    assert.equal(new Set(before.map((e) => e.d)).size, before.length, "edges should start distinct");
+
+    await dragFirstNode(-60, 70);
+    const after = await edgePaths();
+
+    // The bug: every edge became an identical 2-point straight line (all d equal).
+    assert.ok(
+      after.every((e) => e.pairs > 2),
+      "each edge should stay curved after the drag, not collapse to a straight line",
+    );
+    assert.equal(
+      new Set(after.map((e) => e.d)).size,
+      after.length,
+      "parallel edges must stay separated, not stack onto one segment",
+    );
+    // The endpoints (arrowheads in particular) must stay fanned out too, not converge
+    // on a single toward-centre point - the "end arrows stick together" regression.
+    assert.equal(
+      new Set(after.map((e) => e.end)).size,
+      after.length,
+      "arrowheads must stay separated, not stack on one point",
+    );
+    assert.equal(
+      new Set(after.map((e) => e.start)).size,
+      after.length,
+      "edge starts must stay separated too",
+    );
+    assert.notDeepEqual(after, before, "the dragged node's edges should follow it");
+  });
+
+  test("dragging an edge label bends only that edge and keeps its arrowhead pinned", async (t) => {
+    if (state.unavailable) return t.skip(state.unavailable);
+
+    const before = await edgePaths();
+    const b = Object.fromEntries(before.map((e) => [e.id, e]));
+
+    await dragLabel("e0", 0, 60); // pull a label perpendicular to the horizontal edges
+
+    const after = await edgePaths();
+    const changed = after.filter((e) => e.d !== b[e.id].d);
+    assert.equal(changed.length, 1, "exactly the grabbed edge should bend, not the others");
+
+    const edge = changed[0];
+    assert.ok(edge.pairs <= 3, "the bent edge should become a single quadratic");
+    // The bug: bending recomputed endpoints from the node centres, so the arrowhead
+    // jumped to the shared toward-centre point. It must stay on its own endpoint.
+    assert.ok(
+      dist(edge.end, b[edge.id].end) <= 6,
+      `the arrowhead should stay pinned when bending (moved ${Math.round(dist(edge.end, b[edge.id].end))}px)`,
+    );
+  });
+
+  test("no console or page errors occurred while rearranging", async (t) => {
+    if (state.unavailable) return t.skip(state.unavailable);
+    assert.deepEqual(state.errors, [], `unexpected browser errors:\n${state.errors.join("\n")}`);
+  });
+});
diff --git a/tests/python/test_server.py b/tests/python/test_server.py
index d5c7888..b4e08b4 100644
--- a/tests/python/test_server.py
+++ b/tests/python/test_server.py
@@ -68,6 +68,30 @@ def test_poll_times_out_without_feedback(server: Client, make_artifact: Callable
     assert body["type"] == "timeout"
 
 
+def test_unbalanced_html_surfaces_as_a_layout_warning(server: Client, make_artifact: Callable[..., Path]) -> None:
+    # The browser repairs malformed markup before the client sees it, so htmlit
+    # re-reads the raw artifact when the client reports layout and folds in any
+    # container imbalance - here a stray </div> that would collapse the wrapper.
+    artifact = make_artifact(body='<div class="wrap"><p>hi</p></div></div><h2>escaped</h2>')
+    key = _open_session(server, artifact)
+
+    status, _ = server.post(f"/api/{key}/layout-warnings", {"layout_warnings": []})
+    assert status == 200
+
+    status, feedback = server.get(f"/api/poll?key={key}&timeout=5")
+    assert status == 200 and feedback["type"] == "feedback"
+    kinds = [w["kind"] for w in feedback["layout_warnings"]]
+    assert "unbalanced-html" in kinds
+
+
+def test_well_formed_html_reports_no_structure_warning(server: Client, make_artifact: Callable[..., Path]) -> None:
+    key = _open_session(server, make_artifact(body="<div><ul><li>a<li>b</ul><p>ok</div>"))
+    status, _ = server.post(f"/api/{key}/layout-warnings", {"layout_warnings": []})
+    assert status == 200
+    status, body = server.get(f"/api/poll?key={key}&timeout=1", timeout=5)
+    assert body["type"] == "timeout"  # nothing pushed, so the poll just times out
+
+
 def test_agent_reply_appends_to_chat(server: Client, make_artifact: Callable[..., Path]) -> None:
     key = _open_session(server, make_artifact())
     status, _ = server.post("/api/agent-reply", {"key": key, "text": "done, fixed the title"})
diff --git a/tests/python/test_validation.py b/tests/python/test_validation.py
new file mode 100644
index 0000000..7cf1a29
--- /dev/null
+++ b/tests/python/test_validation.py
@@ -0,0 +1,65 @@
+"""Unit tests for the raw-HTML structure validator.
+
+These pin the two things that matter: a container imbalance that would collapse the
+layout is reported, and valid HTML that leans on optional end tags (``<li>``, ``<p>``,
+``<td>`` ...) is never flagged.
+"""
+
+from __future__ import annotations
+
+from htmlit_core.validation import html_structure_warnings
+
+
+def _offenders(html: str) -> list[str]:
+    warnings = html_structure_warnings(html)
+    if not warnings:
+        return []
+    assert len(warnings) == 1
+    assert warnings[0]["kind"] == "unbalanced-html"
+    assert warnings[0]["severity"] == "error"
+    return warnings[0]["offenders"]
+
+
+def test_stray_closing_div_is_reported() -> None:
+    # An extra </div> closes the wrapper early - the real bug that pushed sections
+    # out of the centring container and made them render full-width.
+    html = '<div class="wrap"><p>hi</p></div></div><h2>escaped</h2>'
+    offenders = _offenders(html)
+    assert len(offenders) == 1
+    assert "unexpected </div>" in offenders[0]
+
+
+def test_unclosed_container_is_reported() -> None:
+    offenders = _offenders('<section><ol><li>a<li>b</section><h2>next</h2>')
+    assert any("<ol>" in o and "never closed" in o for o in offenders)
+
+
+def test_valid_optional_end_tags_are_not_flagged() -> None:
+    # <li>, <p>, <td>, <tr>, <option> legitimately omit their end tags; the checker
+    # must not track them, or every ordinary list/table/paragraph would false-positive.
+    html = (
+        '<div class="wrap">'
+        "<ul><li>a<li>b<li>c</ul>"
+        "<p>para one<p>para two"
+        "<table><thead><tr><th>h<tbody><tr><td>x<td>y</table>"
+        "<select><option>1<option>2</select>"
+        "<dl><dt>t<dd>d</dl>"
+        "</div>"
+    )
+    assert _offenders(html) == []
+
+
+def test_nested_containers_balance_cleanly() -> None:
+    html = "<div><section><figure><ul><li>x</ul></figure></section></div>"
+    assert _offenders(html) == []
+
+
+def test_tags_inside_comments_and_scripts_are_ignored() -> None:
+    # html.parser treats comment bodies and <script>/<style> content as text, so a
+    # stray-looking tag in a code sample or comment must not trip the checker.
+    html = '<div><!-- </div> in a comment --><script>var s = "</div>";</script></div>'
+    assert _offenders(html) == []
+
+
+def test_well_formed_document_has_no_warnings() -> None:
+    assert html_structure_warnings("<!doctype html><html><body><div><p>ok</p></div></body></html>") == []