dsh-model-everything 0.5.1 → 0.6.0

package/lib/client.js

@@ -29,9 +29,13 @@ window.__ModuleLoader__.load({
       TOOL_NAMES: () => TOOL_NAMES,
       WHITEBOARD_ID: () => WHITEBOARD_ID,
       WHITEBOARD_SAMPLE: () => WHITEBOARD_SAMPLE,
+      annotationPanel: () => annotationPanel,
       default: () => factory,
       mountWhiteboard: () => mountWhiteboard,
+      onMessageSent: () => onMessageSent,
+      setPendingBlock: () => setPendingBlock,
       themeMode: () => themeMode,
+      updateDockLayer: () => updateDockLayer,
       viewFor: () => viewFor,
       whiteboardFor: () => whiteboardFor
     });
@@ -1617,13 +1621,121 @@ window.__ModuleLoader__.load({
       return out;
     }
     
+    // src/render/trunk.ts
+    var TRUNK_MIN_EDGES = 3;
+    function isVerticalSide(side) {
+      return side === "top" || side === "bottom";
+    }
+    function trunkAt(box, side) {
+      if (side === "top") return box.y - ROUTE_STUB;
+      if (side === "bottom") return box.y + box.height + ROUTE_STUB;
+      if (side === "left") return box.x - ROUTE_STUB;
+      return box.x + box.width + ROUTE_STUB;
+    }
+    function alongSide(point, side) {
+      return isVerticalSide(side) ? point.x : point.y;
+    }
+    function alongNormal(point, side) {
+      return isVerticalSide(side) ? point.y : point.x;
+    }
+    function facesTrunk(point, side, at) {
+      const normal = normalOf(side);
+      const outward = isVerticalSide(side) ? normal.y : normal.x;
+      return (at - alongNormal(point, side)) * outward > 0.5;
+    }
+    function keyOf(end) {
+      return end.to + "\0" + end.entry + "\0" + (end.arrow ?? "");
+    }
+    function clearSegment(boxes, skip, x1, y1, x2, y2) {
+      for (const box of boxes) {
+        if (skip.includes(box)) continue;
+        if (crossesBox(x1, y1, x2, y2, box)) return false;
+      }
+      return true;
+    }
+    function onOneLine(group, side, at, low, high) {
+      if (isVerticalSide(group.side) !== isVerticalSide(side)) return false;
+      if (group.at !== at) return false;
+      return Math.min(group.to, high) - Math.max(group.from, low) > 0.5;
+    }
+    function planTrunks(input) {
+      const groups = [];
+      const groupOf = /* @__PURE__ */ new Map();
+      const buckets = /* @__PURE__ */ new Map();
+      for (const end of input.ends) {
+        if (end.runY === void 0) continue;
+        if (isVerticalSide(end.exit) !== isVerticalSide(end.entry)) continue;
+        const source = input.boxOf(end.from);
+        const target = input.boxOf(end.to);
+        if (source === void 0 || target === void 0) continue;
+        if (source === target) continue;
+        const exit = input.exitPortOf(end.index);
+        if (exit === void 0) continue;
+        const at = trunkAt(target, end.entry);
+        if (!facesTrunk(exit, end.exit, at)) continue;
+        const candidate = { end, source, target, at, exit, branch: alongSide(exit, end.exit) };
+        const key = keyOf(end);
+        const list = buckets.get(key);
+        if (list === void 0) buckets.set(key, [candidate]);
+        else list.push(candidate);
+      }
+      for (const list of buckets.values()) {
+        const bySource = /* @__PURE__ */ new Map();
+        for (const candidate of list) {
+          const seen = bySource.get(candidate.end.from);
+          if (seen === void 0) bySource.set(candidate.end.from, [candidate]);
+          else seen.push(candidate);
+        }
+        const members = list.filter((candidate) => bySource.get(candidate.end.from).length === 1);
+        if (members.length < TRUNK_MIN_EDGES) continue;
+        const target = members[0].target;
+        const side = members[0].end.entry;
+        const at = members[0].at;
+        const entryAlong = isVerticalSide(side) ? target.x + target.width / 2 : target.y + target.height / 2;
+        let lead = members[0];
+        for (const candidate of members) {
+          if (Math.abs(candidate.branch - entryAlong) < Math.abs(lead.branch - entryAlong) - 1e-9) lead = candidate;
+        }
+        let low = entryAlong;
+        let high = entryAlong;
+        for (const candidate of members) {
+          low = Math.min(low, candidate.branch);
+          high = Math.max(high, candidate.branch);
+        }
+        const vertical = isVerticalSide(side);
+        const run = vertical ? [low, at, high, at] : [at, low, at, high];
+        if (!clearSegment(input.boxes, [target], run[0], run[1], run[2], run[3])) continue;
+        let blocked = false;
+        for (const candidate of members) {
+          const drop = vertical ? [candidate.branch, candidate.exit.y, candidate.branch, at] : [candidate.exit.x, candidate.branch, at, candidate.branch];
+          if (!clearSegment(input.boxes, [candidate.source, target], drop[0], drop[1], drop[2], drop[3])) blocked = true;
+        }
+        if (blocked) continue;
+        if (groups.some((group) => onOneLine(group, side, at, low, high))) continue;
+        const id = groups.length;
+        groups.push({
+          id,
+          target: members[0].end.to,
+          side,
+          at,
+          entryAlong,
+          from: low,
+          to: high,
+          lead: lead.end.index,
+          members: members.map((candidate) => candidate.end.index)
+        });
+        for (const candidate of members) groupOf.set(candidate.end.index, id);
+      }
+      return { groups, groupOf };
+    }
+    
     // src/render/symbol.ts
-    function cubicPoint(curve, t) {
-      const u = 1 - t;
+    function cubicPoint(curve, t2) {
+      const u = 1 - t2;
       const a = u * u * u;
-      const b = 3 * u * u * t;
-      const c = 3 * u * t * t;
-      const d = t * t * t;
+      const b = 3 * u * u * t2;
+      const c = 3 * u * t2 * t2;
+      const d = t2 * t2 * t2;
       return {
         x: a * curve.from.x + b * curve.c1.x + c * curve.c2.x + d * curve.to.x,
         y: a * curve.from.y + b * curve.c1.y + c * curve.c2.y + d * curve.to.y
@@ -1786,7 +1898,7 @@ window.__ModuleLoader__.load({
     var CAPTION_CHAR_WIDTH = 6.2;
     var PORT_SEPARATION = 14;
     var PORT_SIDES = ["top", "right", "bottom", "left"];
-    var isVerticalSide = (side) => side === "top" || side === "bottom";
+    var isVerticalSide2 = (side) => side === "top" || side === "bottom";
     var MULTI_EDGE_SPACING = 20;
     function packPorts(wanted, low, high) {
       const placed = [];
@@ -1802,6 +1914,14 @@ window.__ModuleLoader__.load({
       }
       return placed;
     }
+    function centreRun(placed, low, high) {
+      if (placed.length === 0) return placed;
+      const first = placed[0];
+      const last = placed[placed.length - 1];
+      const middle = (low + high) / 2;
+      const shift = Math.min(high - last, Math.max(low - first, middle - (first + last) / 2));
+      return shift === 0 ? placed : placed.map((value) => value + shift);
+    }
     function roleOfNode(node) {
       if (node.role === "error") return "fail";
       if (node.role === "warning") return "findings";
@@ -1835,42 +1955,65 @@ window.__ModuleLoader__.load({
     var LABEL_HEIGHT = 12;
     var LABEL_PAD = 2;
     var LABEL_STEP = 3;
-    function placeLabel(label, from, to, boxes, placed, segments) {
+    function runsOf(points) {
+      const runs = [];
+      for (let index = 0; index + 1 < points.length; index += 1) {
+        const from = points[index];
+        const to = points[index + 1];
+        const length = Math.abs(to.x - from.x) + Math.abs(to.y - from.y);
+        if (length < 1) continue;
+        runs.push({ from, to, length, index });
+      }
+      return runs.sort((left, right) => right.length - left.length || left.index - right.index);
+    }
+    function placeLabel(label, points, boxes, placed, otherRoutes) {
       const width = textWidth(label);
       const height = LABEL_HEIGHT;
       const spotAt = (x, y) => ({ x, y, width, height });
       const hitsBox = (spot, box) => spot.x - spot.width / 2 < box.x + box.width + LABEL_PAD && spot.x + spot.width / 2 > box.x - LABEL_PAD && spot.y - spot.height / 2 < box.y + box.height + LABEL_PAD && spot.y + spot.height / 2 > box.y - LABEL_PAD;
       const hitsSpot = (spot, other) => spot.x - spot.width / 2 < other.x + other.width / 2 + LABEL_PAD && spot.x + spot.width / 2 > other.x - other.width / 2 - LABEL_PAD && spot.y - spot.height / 2 < other.y + other.height / 2 + LABEL_PAD && spot.y + spot.height / 2 > other.y - other.height / 2 - LABEL_PAD;
       const hitsSegment = (spot, segment) => spot.x + spot.width / 2 > Math.min(segment.x1, segment.x2) - LABEL_PAD && spot.x - spot.width / 2 < Math.max(segment.x1, segment.x2) + LABEL_PAD && spot.y + spot.height / 2 > Math.min(segment.y1, segment.y2) - LABEL_PAD && spot.y - spot.height / 2 < Math.max(segment.y1, segment.y2) + LABEL_PAD;
-      const clearOfBoxes = (spot) => {
-        for (const box of boxes) if (hitsBox(spot, box)) return false;
-        for (const earlier of placed) if (hitsSpot(spot, earlier)) return false;
-        return true;
-      };
-      const clearOfEdges = (spot) => {
-        for (const segment of segments) if (hitsSegment(spot, segment)) return false;
-        return true;
+      const collisionsAt = (spot, run) => {
+        let boxHits = 0;
+        let labelHits = 0;
+        let edgeHits = 0;
+        for (const box of boxes) if (hitsBox(spot, box)) boxHits += 1;
+        for (const earlier of placed) if (hitsSpot(spot, earlier)) labelHits += 1;
+        for (const route of otherRoutes) {
+          for (const segment of route) {
+            if (!hitsSegment(spot, segment)) continue;
+            edgeHits += 1;
+            break;
+          }
+        }
+        return { run, collisions: boxHits + labelHits + edgeHits, boxes: boxHits, labels: labelHits, edges: edgeHits };
       };
-      const middle = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
-      const dx = to.x - from.x;
-      const dy = to.y - from.y;
-      const length = Math.abs(dx) + Math.abs(dy);
-      const ux = dx / length;
-      const uy = dy / length;
-      const along = Math.abs(ux) * width / 2 + Math.abs(uy) * height / 2;
-      const bound = Math.max(0, length / 2 - along);
-      const walk = [0];
-      for (let step = LABEL_STEP; step <= bound + 1e-3; step += LABEL_STEP) walk.push(step, -step);
-      const at = (offset) => spotAt(middle.x + ux * offset, middle.y + uy * offset);
-      for (const offset of walk) {
-        const spot = at(offset);
-        if (clearOfBoxes(spot) && clearOfEdges(spot)) return spot;
-      }
-      for (const offset of walk) {
-        const spot = at(offset);
-        if (clearOfBoxes(spot)) return spot;
-      }
-      return at(0);
+      const runs = runsOf(points);
+      if (runs.length === 0) {
+        const point = points[0] ?? { x: 0, y: 0 };
+        return { ...spotAt(point.x, point.y), run: -1, collisions: 0, boxes: 0, labels: 0, edges: 0 };
+      }
+      let best;
+      for (const [runIndex, run] of runs.entries()) {
+        const dx = run.to.x - run.from.x;
+        const dy = run.to.y - run.from.y;
+        const ux = dx / run.length;
+        const uy = dy / run.length;
+        const middle = { x: (run.from.x + run.to.x) / 2, y: (run.from.y + run.to.y) / 2 };
+        const along = Math.abs(ux) * width / 2 + Math.abs(uy) * height / 2;
+        const bound = Math.max(0, run.length / 2 - along);
+        const walk = [0];
+        for (let step = LABEL_STEP; step <= bound + 1e-3; step += LABEL_STEP) walk.push(step, -step);
+        for (const offset of walk) {
+          const spot = spotAt(middle.x + ux * offset, middle.y + uy * offset);
+          const placement = collisionsAt(spot, runIndex);
+          if (placement.collisions === 0) return { ...spot, ...placement };
+          if (best === void 0 || placement.collisions < best.collisions || placement.collisions === best.collisions && placement.boxes + placement.labels < best.boxes + best.labels) {
+            best = { ...spot, ...placement };
+          }
+        }
+      }
+      return best;
     }
     function drawnExtent(shapes) {
       let width = 0;
@@ -1898,10 +2041,24 @@ window.__ModuleLoader__.load({
           case "title":
             consider(textWidth(shape.lines?.[0] ?? "") + shape.x, shape.y + 12);
             break;
+          case "junction":
+            break;
         }
       }
       return { width, height };
     }
+    function boxesCrossedBy(points, from, to, boxes) {
+      const crossed = [];
+      for (let index = 0; index + 1 < points.length; index += 1) {
+        const a = points[index];
+        const b = points[index + 1];
+        for (const box of boxes) {
+          if (box === from || box === to) continue;
+          if (crossesBox(a.x, a.y, b.x, b.y, box)) crossed.push(box);
+        }
+      }
+      return crossed;
+    }
     function paintWith(diagram, overrides = {}, options = {}) {
       const colours = palette(overrides, options);
       const shapes = [];
@@ -1928,6 +2085,7 @@ window.__ModuleLoader__.load({
         const text2 = textOf(node);
         shapes.push({
           kind: "box",
+          id: node.id,
           x: box.x,
           y: box.y,
           width: box.width,
@@ -1965,21 +2123,100 @@ window.__ModuleLoader__.load({
         endsAt.set(edge.from, (endsAt.get(edge.from) ?? 0) + 1);
         endsAt.set(edge.to, (endsAt.get(edge.to) ?? 0) + 1);
       }
+      const spanOf2 = (boxId, side, corner) => {
+        const box = endBox(boxId);
+        const vertical = side === "top" || side === "bottom";
+        const middle = vertical ? box.x + box.width / 2 : box.y + box.height / 2;
+        const within = (low, high) => ({ low, high: Math.max(low, high) });
+        switch (shapeOf(boxId)) {
+          // The four vertices of a diamond, and the four cardinal points of an ellipse, are the middles of its sides.
+          case "diamond":
+          case "circle":
+            return within(middle, middle);
+          case "hexagon":
+            return vertical ? within(box.x + hexagonCut(box.width), box.x + box.width - hexagonCut(box.width)) : within(middle, middle);
+          case "stadium": {
+            const radius = stadiumRadius(box);
+            return vertical ? within(box.x + radius, box.x + box.width - radius) : within(middle, middle);
+          }
+          case "cylinder": {
+            if (vertical) return within(middle, middle);
+            const cap = cylinderCaps(box).cap;
+            return within(box.y + cap, box.y + box.height - cap);
+          }
+          default: {
+            const inset = corner ? 2 : vertical ? PORT_INSET : 8;
+            return vertical ? within(box.x + inset, box.x + box.width - inset) : within(box.y + inset, box.y + box.height - inset);
+          }
+        }
+      };
+      const clampTo = (boxId, side, value, corner) => {
+        const span = spanOf2(boxId, side, corner);
+        return Math.min(span.high, Math.max(span.low, value));
+      };
+      const pointOn = (boxId, side, along) => {
+        const box = endBox(boxId);
+        if (side === "left") return { x: box.x, y: along };
+        if (side === "right") return { x: box.x + box.width, y: along };
+        if (side === "top") return { x: along, y: shapeOf(boxId) === "cylinder" ? cylinderApex(box, "top").y : box.y };
+        return { x: along, y: shapeOf(boxId) === "cylinder" ? cylinderApex(box, "bottom").y : box.y + box.height };
+      };
       const claimed = /* @__PURE__ */ new Map();
       const claimedAt = /* @__PURE__ */ new Map();
       const claim = (id, index, end, side) => {
         claimed.set(endKey(index, end), side);
-        claimedAt.set(id, [...claimedAt.get(id) ?? [], side]);
+        claimedAt.set(id, [...claimedAt.get(id) ?? [], { index, side }]);
+      };
+      const takenSides = (id, except) => (claimedAt.get(id) ?? []).filter((entry) => entry.index !== except).map((entry) => entry.side);
+      const sideMiddle = (box, side) => isVerticalSide2(side) ? box.x + box.width / 2 : box.y + box.height / 2;
+      const sidePoint = (boxId, side) => pointOn(boxId, side, sideMiddle(endBox(boxId), side));
+      const facesAway2 = (box, other, side) => {
+        const out = normalOf(side);
+        const dx = other.x + other.width / 2 - (box.x + box.width / 2);
+        const dy = other.y + other.height / 2 - (box.y + box.height / 2);
+        return out.x * dx + out.y * dy < 0;
+      };
+      const stubAlong = (pinnedId, pinnedSide, freeSide) => {
+        const point = sidePoint(pinnedId, pinnedSide);
+        const out = normalOf(pinnedSide);
+        return isVerticalSide2(freeSide) ? point.x + out.x * ROUTE_STUB : point.y + out.y * ROUTE_STUB;
       };
-      const bestSide = (id, other) => {
+      const offers = (boxId, side, value) => {
+        const span = spanOf2(boxId, side, true);
+        return value >= span.low - 0.01 && value <= span.high + 0.01;
+      };
+      const bendBudget = (fromId, toId, exit, entry, index) => {
+        const from = endBox(fromId);
+        const to = endBox(toId);
+        if (facesAway2(from, to, exit) || facesAway2(to, from, entry)) return 4;
+        if (isVerticalSide2(exit) === isVerticalSide2(entry)) {
+          const out = normalOf(exit);
+          const into = normalOf(entry);
+          const sameWay = out.x === -into.x && out.y === -into.y;
+          const fromSpan = spanOf2(fromId, exit, true);
+          const toSpan = spanOf2(toId, entry, true);
+          const meet = fromSpan.low <= toSpan.high + 0.01 && toSpan.low <= fromSpan.high + 0.01;
+          return sameWay && meet ? 0 : 2;
+        }
+        const horizontalId = isVerticalSide2(exit) ? toId : fromId;
+        const horizontalSide = isVerticalSide2(exit) ? entry : exit;
+        const verticalId = isVerticalSide2(exit) ? fromId : toId;
+        const verticalSide = isVerticalSide2(exit) ? exit : entry;
+        if (!offers(verticalId, verticalSide, stubAlong(horizontalId, horizontalSide, verticalSide))) return 2;
+        const crowded = takenSides(fromId, index).includes(exit) || takenSides(toId, index).includes(entry);
+        return crowded ? 2 : 1;
+      };
+      const bestSide = (id, otherId, end, partner, index) => {
         const box = endBox(id);
+        const other = endBox(otherId);
         const centre = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
         const toward = { x: other.x + other.width / 2 - centre.x, y: other.y + other.height / 2 - centre.y };
         const reach = Math.hypot(toward.x, toward.y);
-        const taken = claimedAt.get(id) ?? [];
+        const taken = takenSides(id, index);
         let best;
         for (const side of PORT_SIDES) {
           if (taken.includes(side)) continue;
+          const bends = end === "exit" ? bendBudget(id, otherId, side, partner, index) : bendBudget(otherId, id, partner, side, index);
           const normal = normalOf(side);
           const score = reach === 0 ? 0 : (normal.x * toward.x + normal.y * toward.y) / reach;
           const point = anchor(box, side);
@@ -1987,11 +2224,43 @@ window.__ModuleLoader__.load({
             Math.max(other.x - point.x, 0, point.x - (other.x + other.width)),
             Math.max(other.y - point.y, 0, point.y - (other.y + other.height))
           );
-          const better = best === void 0 || score > best.score + 1e-9 || Math.abs(score - best.score) <= 1e-9 && near < best.near - 1e-9;
-          if (better) best = { side, score, near };
+          const partnerPoint = anchor(other, partner);
+          const ground = Math.abs(point.x - partnerPoint.x) + Math.abs(point.y - partnerPoint.y);
+          const better = best === void 0 || bends < best.bends || bends === best.bends && (score > best.score + 1e-9 || Math.abs(score - best.score) <= 1e-9 && (near < best.near - 1e-9 || Math.abs(near - best.near) <= 1e-9 && ground < best.ground - 1e-9));
+          if (better) best = { side, bends, score, near, ground };
         }
         return best?.side;
       };
+      const bestPair = (fromId, toId, index) => {
+        const approach = approachSides(endBox(fromId), endBox(toId));
+        const pairs = [
+          { exit: "bottom", entry: "top" },
+          { exit: "top", entry: "bottom" },
+          { exit: "right", entry: "left" },
+          { exit: "left", entry: "right" }
+        ];
+        let best = approach;
+        let bestBends = bendBudget(fromId, toId, approach.exit, approach.entry, index);
+        for (const pair of pairs) {
+          const bends = bendBudget(fromId, toId, pair.exit, pair.entry, index);
+          if (bends >= bestBends) continue;
+          best = pair;
+          bestBends = bends;
+        }
+        return best;
+      };
+      const bestEnd = (id, otherId, end, partner, index) => {
+        const approach = end === "exit" ? approachSides(endBox(id), endBox(otherId)).exit : approachSides(endBox(otherId), endBox(id)).entry;
+        let best = approach;
+        let bestBends = end === "exit" ? bendBudget(id, otherId, approach, partner, index) : bendBudget(otherId, id, partner, approach, index);
+        for (const side of PORT_SIDES) {
+          const bends = end === "exit" ? bendBudget(id, otherId, side, partner, index) : bendBudget(otherId, id, partner, side, index);
+          if (bends >= bestBends) continue;
+          best = side;
+          bestBends = bends;
+        }
+        return best;
+      };
       diagram.edges.forEach((edge, index) => {
         if (edge.from === edge.to) return;
         const source = endBox(edge.from);
@@ -2018,7 +2287,9 @@ window.__ModuleLoader__.load({
           const id = end === "exit" ? edge.from : edge.to;
           if ((endsAt.get(id) ?? 0) < 2) continue;
           if (!hasDiscretePorts(shapeOf(id))) continue;
-          const side = bestSide(id, end === "exit" ? target : source);
+          const approached = approachSides(source, target);
+          const partner = claimed.get(endKey(index, end === "exit" ? "entry" : "exit")) ?? (end === "exit" ? approached.entry : approached.exit);
+          const side = bestSide(id, end === "exit" ? edge.to : edge.from, end, partner, index);
           if (side === void 0) continue;
           claim(id, index, end, side);
         }
@@ -2027,20 +2298,22 @@ window.__ModuleLoader__.load({
         const source = endBox(edge.from);
         const target = endBox(edge.to);
         if (source === void 0 || target === void 0 || edge.from === edge.to) return void 0;
-        const sides2 = placement.across.has(index) ? { exit: "right", entry: "left" } : approachSides(source, target);
+        if (placement.across.has(index)) return { exit: "right", entry: "left" };
         const lane = placement.lanes.get(index);
-        if (lane === void 0 || lane.points.length === 0) {
+        const down = target.y > source.y;
+        if (lane !== void 0 && lane.points.length > 0) {
           return {
-            exit: claimed.get(endKey(index, "exit")) ?? sides2.exit,
-            entry: claimed.get(endKey(index, "entry")) ?? sides2.entry
+            exit: claimed.get(endKey(index, "exit")) ?? (down ? "bottom" : "top"),
+            entry: claimed.get(endKey(index, "entry")) ?? (down ? "top" : "bottom"),
+            at: lane.points[0].x
           };
         }
-        const down = target.y > source.y;
-        return {
-          exit: claimed.get(endKey(index, "exit")) ?? (down ? "bottom" : "top"),
-          entry: claimed.get(endKey(index, "entry")) ?? (down ? "top" : "bottom"),
-          at: lane.points[0].x
-        };
+        const exit = claimed.get(endKey(index, "exit"));
+        const entry = claimed.get(endKey(index, "entry"));
+        if (exit !== void 0 && entry !== void 0) return { exit, entry };
+        if (exit !== void 0) return { exit, entry: bestEnd(edge.to, edge.from, "entry", exit, index) };
+        if (entry !== void 0) return { exit: bestEnd(edge.from, edge.to, "exit", entry, index), entry };
+        return bestPair(edge.from, edge.to, index);
       });
       const laneClear = (points, x, from, to) => {
         for (let at = 0; at + 1 < points.length; at += 1) {
@@ -2079,50 +2352,12 @@ window.__ModuleLoader__.load({
       }
       const wanted = /* @__PURE__ */ new Map();
       const slotKey = (boxId, side, index) => boxId + ":" + side + ":" + String(index);
-      const spanOf2 = (boxId, side, corner) => {
-        const box = endBox(boxId);
-        const vertical = side === "top" || side === "bottom";
-        const middle = vertical ? box.x + box.width / 2 : box.y + box.height / 2;
-        const within = (low, high) => ({ low, high: Math.max(low, high) });
-        switch (shapeOf(boxId)) {
-          // The four vertices of a diamond, and the four cardinal points of an ellipse, are the middles of its sides.
-          case "diamond":
-          case "circle":
-            return within(middle, middle);
-          case "hexagon":
-            return vertical ? within(box.x + hexagonCut(box.width), box.x + box.width - hexagonCut(box.width)) : within(middle, middle);
-          case "stadium": {
-            const radius = stadiumRadius(box);
-            return vertical ? within(box.x + radius, box.x + box.width - radius) : within(middle, middle);
-          }
-          case "cylinder": {
-            if (vertical) return within(middle, middle);
-            const cap = cylinderCaps(box).cap;
-            return within(box.y + cap, box.y + box.height - cap);
-          }
-          default: {
-            const inset = corner ? 2 : vertical ? PORT_INSET : 8;
-            return vertical ? within(box.x + inset, box.x + box.width - inset) : within(box.y + inset, box.y + box.height - inset);
-          }
-        }
-      };
-      const clampTo = (boxId, side, value, corner) => {
-        const span = spanOf2(boxId, side, corner);
-        return Math.min(span.high, Math.max(span.low, value));
-      };
-      const pointOn = (boxId, side, along) => {
-        const box = endBox(boxId);
-        if (side === "left") return { x: box.x, y: along };
-        if (side === "right") return { x: box.x + box.width, y: along };
-        if (side === "top") return { x: along, y: shapeOf(boxId) === "cylinder" ? cylinderApex(box, "top").y : box.y };
-        return { x: along, y: shapeOf(boxId) === "cylinder" ? cylinderApex(box, "bottom").y : box.y + box.height };
-      };
       for (const [index, entry] of facing.entries()) {
         if (entry === void 0) continue;
         const edge = diagram.edges[index];
         const from = endBox(edge.from);
         const to = endBox(edge.to);
-        const middle = (box, side) => isVerticalSide(side) ? box.x + box.width / 2 : box.y + box.height / 2;
+        const middle = (box, side) => isVerticalSide2(side) ? box.x + box.width / 2 : box.y + box.height / 2;
         const fromMiddle = middle(from, entry.exit);
         const toMiddle = middle(to, entry.entry);
         const corner = entry.at !== void 0;
@@ -2133,14 +2368,14 @@ window.__ModuleLoader__.load({
           const chosen = entry.at + (laneShift.get(index) ?? 0);
           exitWanted = clampTo(edge.from, entry.exit, chosen, corner);
           entryWanted = clampTo(edge.to, entry.entry, chosen, corner);
-        } else if (isVerticalSide(entry.exit) === isVerticalSide(entry.entry)) {
+        } else if (isVerticalSide2(entry.exit) === isVerticalSide2(entry.entry)) {
           const target = spanOf2(edge.to, entry.entry, false);
           const chosen = (fromMiddle >= target.low && fromMiddle <= target.high ? fromMiddle : clampTo(edge.from, entry.exit, toMiddle, false)) + offset;
           exitWanted = clampTo(edge.from, entry.exit, chosen, corner);
           entryWanted = clampTo(edge.to, entry.entry, chosen, corner);
         } else {
-          exitWanted = hasDiscretePorts(shapeOf(edge.from)) ? fromMiddle : clampTo(edge.from, entry.exit, anchor(to, entry.entry).x + normalOf(entry.entry).x * ROUTE_STUB, false) + offset;
-          entryWanted = hasDiscretePorts(shapeOf(edge.to)) ? toMiddle : clampTo(edge.to, entry.entry, anchor(from, entry.exit).x + normalOf(entry.exit).x * ROUTE_STUB, false) + offset;
+          exitWanted = hasDiscretePorts(shapeOf(edge.from)) ? fromMiddle : clampTo(edge.from, entry.exit, stubAlong(edge.to, entry.entry, entry.exit), false) + offset;
+          entryWanted = hasDiscretePorts(shapeOf(edge.to)) ? toMiddle : clampTo(edge.to, entry.entry, stubAlong(edge.from, entry.exit, entry.entry), false) + offset;
         }
         wanted.set(slotKey(edge.from, entry.exit, index), exitWanted);
         wanted.set(slotKey(edge.to, entry.entry, index), entryWanted);
@@ -2189,6 +2424,109 @@ window.__ModuleLoader__.load({
         }
         if (!moved) break;
       }
+      const trunkEnds = [];
+      diagram.edges.forEach((edge, index) => {
+        const entry = facing[index];
+        if (entry === void 0) return;
+        const runY = placement.runs.get(index);
+        trunkEnds.push({
+          index,
+          from: edge.from,
+          to: edge.to,
+          exit: entry.exit,
+          entry: entry.entry,
+          ...edge.arrow === void 0 ? {} : { arrow: edge.arrow },
+          ...runY === void 0 ? {} : { runY }
+        });
+      });
+      const planFor = (exitPortOf) => planTrunks({
+        ends: trunkEnds,
+        // Only a node's own box is a trunk target: an arrow into a boundary points past it, not at it.
+        boxOf: (id) => boxes.get(id),
+        boxes: boxList,
+        exitPortOf
+      });
+      const packedExit = (index) => {
+        const entry = facing[index];
+        if (entry === void 0) return void 0;
+        const edge = diagram.edges[index];
+        const coordinate = placedPort.get(slotKey(edge.from, entry.exit, index));
+        return coordinate === void 0 ? void 0 : pointOn(edge.from, entry.exit, coordinate);
+      };
+      const planned = planFor(packedExit);
+      const onLane = (index, coordinate) => {
+        if (planned.groupOf.has(index)) return false;
+        const lane = placement.lanes.get(index);
+        if (lane === void 0 || lane.points.length === 0) return false;
+        return Math.abs(lane.points[0].x - coordinate) <= 0.5;
+      };
+      const rows = [];
+      const rowOf = /* @__PURE__ */ new Map();
+      for (const [key, list] of sides) {
+        const [boxId, side] = key.split(":");
+        const span = spanOf2(boxId, side, true);
+        const slots = [...list].map((entry) => ({ index: entry.index, at: placedPort.get(slotKey(boxId, side, entry.index)) })).sort((left, right) => left.at - right.at || left.index - right.index);
+        const centred = centreRun(
+          slots.map((slot) => slot.at),
+          span.low,
+          span.high
+        );
+        const first = slots[0];
+        const row = {
+          boxId,
+          side,
+          indexes: slots.map((slot) => slot.index),
+          at: slots.map((slot) => slot.at),
+          position: new Map(slots.map((slot, at) => [slot.index, at])),
+          shift: centred[0] - first.at,
+          allowed: true
+        };
+        rows.push(row);
+        rowOf.set(key, row);
+      }
+      const movedAt = (row, at) => row.at[at] + (row.allowed ? row.shift : 0);
+      const partnerOf = (boxId, side, index) => {
+        const entry = facing[index];
+        if (entry === void 0) return void 0;
+        const edge = diagram.edges[index];
+        const isExit = edge.from === boxId && entry.exit === side;
+        const groupId = planned.groupOf.get(index);
+        if (groupId !== void 0) {
+          if (!isExit) return void 0;
+          const group = planned.groups[groupId];
+          if (isVerticalSide2(side) !== isVerticalSide2(group.side)) return void 0;
+          return { coordinate: group.entryAlong };
+        }
+        const partnerId = isExit ? edge.to : edge.from;
+        const partnerSide = isExit ? entry.entry : entry.exit;
+        if (isVerticalSide2(side) !== isVerticalSide2(partnerSide)) return void 0;
+        const coordinate = placedPort.get(slotKey(partnerId, partnerSide, index));
+        if (coordinate === void 0) return void 0;
+        const row = rowOf.get(partnerId + ":" + partnerSide);
+        return { coordinate, ...row === void 0 ? {} : { row, at: row.position.get(index) } };
+      };
+      for (let pass = 0; pass < rows.length; pass += 1) {
+        let refused = false;
+        for (const row of rows) {
+          if (!row.allowed || row.shift === 0) continue;
+          const pinned = row.indexes.some((index, at) => {
+            if (onLane(index, row.at[at])) return true;
+            const partner = partnerOf(row.boxId, row.side, index);
+            if (partner === void 0) return false;
+            if (Math.abs(row.at[at] - partner.coordinate) > 0.5) return false;
+            const partnerAt = partner.row === void 0 ? partner.coordinate : movedAt(partner.row, partner.at);
+            return Math.abs(movedAt(row, at) - partnerAt) > 0.5;
+          });
+          if (!pinned) continue;
+          row.allowed = false;
+          refused = true;
+        }
+        if (!refused) break;
+      }
+      for (const row of rows) {
+        if (!row.allowed || row.shift === 0) continue;
+        row.indexes.forEach((index, at) => placedPort.set(slotKey(row.boxId, row.side, index), movedAt(row, at)));
+      }
       const portOf = (boxId, side, edgeIndex) => {
         const coordinate = placedPort.get(slotKey(boxId, side, edgeIndex));
         return pointOn(boxId, side, coordinate);
@@ -2204,16 +2542,9 @@ window.__ModuleLoader__.load({
           entrySide: entry.entry
         });
       }
-      const longestRun = (points) => {
-        let best = { from: points[0], to: points[points.length - 1], length: -1 };
-        for (let index = 0; index + 1 < points.length; index += 1) {
-          const from = points[index];
-          const to = points[index + 1];
-          const length = Math.abs(to.x - from.x) + Math.abs(to.y - from.y);
-          if (length > best.length) best = { from, to, length };
-        }
-        return best;
-      };
+      const trunks = planFor((index) => anchorsFor.get(index)?.exit);
+      const sharedEntry = /* @__PURE__ */ new Map();
+      for (const group of trunks.groups) sharedEntry.set(group.id, pointOn(group.target, group.side, group.entryAlong));
       const pointsOfRoute = (shape) => shape.kind === "path" ? shape.points : [{ x: shape.x1, y: shape.y1 }, { x: shape.x2, y: shape.y2 }];
       const segmentsOfRoute = (shape) => {
         const points = pointsOfRoute(shape);
@@ -2225,7 +2556,7 @@ window.__ModuleLoader__.load({
         }
         return out;
       };
-      const paintPath = (edge, points, colour) => {
+      const paintPath = (edgeIndex, edge, points, colour) => {
         const shape = {
           kind: "path",
           points,
@@ -2237,11 +2568,11 @@ window.__ModuleLoader__.load({
           ...edge.arrow === void 0 ? {} : { arrow: edge.arrow }
         };
         shapes.push(shape);
-        routes.push(shape);
+        routes.push({ shape, edge: edgeIndex, fixed: false });
       };
-      const paintRoute = (edge, points, colour) => {
+      const paintRoute = (edgeIndex, edge, points, colour) => {
         if (points.length > 2) {
-          paintPath(edge, points, colour);
+          paintPath(edgeIndex, edge, points, colour);
           return;
         }
         const exit = points[0];
@@ -2260,38 +2591,31 @@ window.__ModuleLoader__.load({
           ...edge.arrow === void 0 ? {} : { arrow: edge.arrow }
         };
         shapes.push(shape);
-        routes.push(shape);
+        routes.push({ shape, edge: edgeIndex, fixed: false });
       };
+      const clearOfBoxes = (points, from, to) => boxesCrossedBy(points, from, to, boxList).length === 0;
       const runRoute = (ports, runY) => {
-        const out = isVerticalSide(ports.exitSide) ? 0 : normalOf(ports.exitSide).x * ROUTE_STUB;
-        const into = isVerticalSide(ports.entrySide) ? 0 : normalOf(ports.entrySide).x * ROUTE_STUB;
+        const out = isVerticalSide2(ports.exitSide) ? 0 : normalOf(ports.exitSide).x * ROUTE_STUB;
+        const into = isVerticalSide2(ports.entrySide) ? 0 : normalOf(ports.entrySide).x * ROUTE_STUB;
+        const exitRun = out !== 0 && into === 0 && Math.sign(ports.entry.x - ports.exit.x) === Math.sign(out) ? ports.entry.x : ports.exit.x + out;
+        const entryRun = into !== 0 && out === 0 && Math.sign(ports.exit.x - ports.entry.x) === Math.sign(into) ? ports.exit.x : ports.entry.x + into;
         const points = [ports.exit];
-        if (out !== 0) points.push({ x: ports.exit.x + out, y: ports.exit.y });
-        points.push({ x: ports.exit.x + out, y: runY }, { x: ports.entry.x + into, y: runY });
-        if (into !== 0) points.push({ x: ports.entry.x + into, y: ports.entry.y });
+        if (out !== 0) points.push({ x: exitRun, y: ports.exit.y });
+        points.push({ x: exitRun, y: runY }, { x: entryRun, y: runY });
+        if (into !== 0) points.push({ x: entryRun, y: ports.entry.y });
         points.push(ports.entry);
         return simplify(points);
       };
       const runFits = (ports, runY) => {
-        if (isVerticalSide(ports.exitSide) && Math.abs(runY - ports.exit.y) > 0.5) {
+        if (isVerticalSide2(ports.exitSide) && Math.abs(runY - ports.exit.y) > 0.5) {
           if (Math.sign(runY - ports.exit.y) !== Math.sign(normalOf(ports.exitSide).y)) return false;
         }
-        if (isVerticalSide(ports.entrySide) && Math.abs(ports.entry.y - runY) > 0.5) {
+        if (isVerticalSide2(ports.entrySide) && Math.abs(ports.entry.y - runY) > 0.5) {
           if (Math.sign(ports.entry.y - runY) !== -Math.sign(normalOf(ports.entrySide).y)) return false;
         }
         return true;
       };
-      const clearsBoxes = (points, from, to) => {
-        for (let at = 0; at + 1 < points.length; at += 1) {
-          const a = points[at];
-          const b = points[at + 1];
-          for (const box of boxList) {
-            if (box === from || box === to) continue;
-            if (crossesBox(a.x, a.y, b.x, b.y, box)) return false;
-          }
-        }
-        return true;
-      };
+      const junctions = [];
       for (const [edgeIndex, edge] of diagram.edges.entries()) {
         const source = endBox(edge.from);
         const target = endBox(edge.to);
@@ -2300,7 +2624,7 @@ window.__ModuleLoader__.load({
         if (edge.from === edge.to) {
           const x = source.x + source.width;
           const y = source.y + source.height / 2;
-          shapes.push({
+          const shape = {
             kind: "path",
             points: [
               { x, y: y - 9 },
@@ -2316,10 +2640,25 @@ window.__ModuleLoader__.load({
             colour,
             ...edge.dashed === void 0 ? {} : { dashed: edge.dashed },
             ...edge.arrow === void 0 ? {} : { arrow: edge.arrow }
-          });
+          };
+          shapes.push(shape);
+          routes.push({ shape, edge: edgeIndex, fixed: true });
           continue;
         }
         const anchors = anchorsFor.get(edgeIndex);
+        const groupId = trunks.groupOf.get(edgeIndex);
+        if (groupId !== void 0 && anchors !== void 0) {
+          const group = trunks.groups[groupId];
+          const entry = sharedEntry.get(groupId);
+          const branch = isVerticalSide2(group.side) ? [anchors.exit, { x: anchors.exit.x, y: group.at }, { x: entry.x, y: group.at }, entry] : [anchors.exit, { x: group.at, y: anchors.exit.y }, { x: group.at, y: entry.y }, entry];
+          const points = simplify(branch);
+          if (clearOfBoxes(points, source, target)) {
+            paintRoute(edgeIndex, edge, points, colour);
+            const meet = isVerticalSide2(group.side) ? { x: anchors.exit.x, y: group.at } : { x: group.at, y: anchors.exit.y };
+            junctions.push({ kind: "junction", x: meet.x, y: meet.y, colour, trunk: group.id });
+            continue;
+          }
+        }
         const lane = placement.lanes.get(edgeIndex);
         if (lane !== void 0 && lane.points.length > 0 && anchors !== void 0) {
           const shift = laneShift.get(edgeIndex) ?? 0;
@@ -2334,32 +2673,76 @@ window.__ModuleLoader__.load({
           }
           if (Math.abs(previous.x - anchors.entry.x) > 0.5 && Math.abs(previous.y - anchors.entry.y) > 0.5) points.push({ x: anchors.entry.x, y: previous.y });
           points.push(anchors.entry);
-          paintPath(edge, simplify(points), colour);
-          continue;
+          const simplified = simplify(points);
+          if (clearOfBoxes(simplified, source, target)) {
+            paintPath(edgeIndex, edge, simplified, colour);
+            continue;
+          }
         }
         const runY = placement.runs.get(edgeIndex);
         if (runY !== void 0 && anchors !== void 0 && runFits(anchors, runY)) {
           const points = runRoute(anchors, runY);
-          const mixed = isVerticalSide(anchors.exitSide) !== isVerticalSide(anchors.entrySide);
-          if (!mixed || clearsBoxes(points, source, target)) {
-            paintRoute(edge, points, colour);
+          if (clearOfBoxes(points, source, target)) {
+            paintRoute(edgeIndex, edge, points, colour);
             continue;
           }
         }
-        paintRoute(edge, routeEdge(source, target, boxList, anchors).points, colour);
+        paintRoute(edgeIndex, edge, routeEdge(source, target, boxList, anchors).points, colour);
+      }
+      for (const dot of junctions) shapes.push(dot);
+      const boxEntries = Array.from(boxes.entries());
+      const routingFailures = [];
+      for (const { shape, edge } of routes) {
+        const diagramEdge = diagram.edges[edge];
+        const source = endBox(diagramEdge.from);
+        const target = endBox(diagramEdge.to);
+        if (source === void 0 || target === void 0) continue;
+        for (const segment of segmentsOfRoute(shape)) {
+          for (const [id, box] of boxEntries) {
+            if (box === source || box === target) continue;
+            if (!crossesBox(segment.x1, segment.y1, segment.x2, segment.y2, box)) continue;
+            routingFailures.push({
+              edge,
+              from: diagramEdge.from,
+              to: diagramEdge.to,
+              box: id,
+              x1: segment.x1,
+              y1: segment.y1,
+              x2: segment.x2,
+              y2: segment.y2
+            });
+          }
+        }
       }
-      const routeSegments = routes.map((shape) => segmentsOfRoute(shape));
+      const routeSegments = routes.map(({ shape }) => segmentsOfRoute(shape));
       const placedLabels = [];
-      routes.forEach((shape, index) => {
-        const run = longestRun(pointsOfRoute(shape));
-        let spot = { x: (run.from.x + run.to.x) / 2, y: (run.from.y + run.to.y) / 2, width: textWidth(shape.label), height: LABEL_HEIGHT };
-        if (shape.label !== "") {
-          spot = placeLabel(shape.label, run.from, run.to, boxList, placedLabels, routeSegments.flatMap((list, at) => at === index ? [] : list));
-          placedLabels.push(spot);
-        }
-        shape.labelX = spot.x;
-        shape.labelY = spot.y;
+      routes.forEach(({ shape, fixed }, at) => {
+        if (fixed) {
+          if (shape.label !== "") {
+            placedLabels.push({ x: shape.labelX, y: shape.labelY, width: textWidth(shape.label), height: LABEL_HEIGHT });
+          }
+          return;
+        }
+        if (shape.label === "") return;
+        const placement2 = placeLabel(
+          shape.label,
+          pointsOfRoute(shape),
+          boxList,
+          placedLabels,
+          routeSegments.filter((_, other) => other !== at)
+        );
+        shape.labelX = placement2.x;
+        shape.labelY = placement2.y;
+        shape.labelPlacement = {
+          run: placement2.run,
+          collisions: placement2.collisions,
+          boxes: placement2.boxes,
+          labels: placement2.labels,
+          edges: placement2.edges
+        };
+        placedLabels.push({ x: placement2.x, y: placement2.y, width: placement2.width, height: placement2.height });
       });
+      const labelCollisions = routes.reduce((total, { shape }) => total + ((shape.labelPlacement?.collisions ?? 0) > 0 ? 1 : 0), 0);
       shapes.push({ kind: "title", x: MARGIN, y: MARGIN + 12, text: diagram.title, colour: "text" });
       const contentRight = Math.max(
         MARGIN,
@@ -2380,7 +2763,10 @@ window.__ModuleLoader__.load({
       const extent = drawnExtent(shapes);
       const canvasWidth = Math.max(width, extent.width + MARGIN);
       const canvasHeight = Math.max(height, extent.height + MARGIN);
-      return { canvas: { width: Math.round(canvasWidth), height: Math.round(canvasHeight), shapes }, colours };
+      return {
+        canvas: { width: Math.round(canvasWidth), height: Math.round(canvasHeight), shapes, routingFailures, labelCollisions },
+        colours
+      };
     }
     
     // src/render/from-mermaid.ts
@@ -3107,13 +3493,16 @@ window.__ModuleLoader__.load({
         const after = shape.points[1] ?? first;
         return '<polyline points="' + points + '" fill="none" stroke="' + stroke + '" stroke-width="1" stroke-linejoin="round"' + dash(shape) + " />" + edgeMarks(first, after, before, last, shape.arrow, stroke, colours.background) + edgeLabel(shape.label, shape.labelX, shape.labelY, colours);
       },
+      // A junction dot: the visible answer to "is this a join or a crossing?". Filled in the line's own colour, so it
+      // reads as the line thickening where a branch meets it rather than as a new mark on the page.
+      junction: (shape, colours) => '<circle cx="' + n(shape.x) + '" cy="' + n(shape.y) + '" r="2.5" fill="' + colours[shape.colour] + '" />',
       title: (shape, colours) => {
         return '<text x="' + n(shape.x) + '" y="' + n(shape.y) + '" font-size="12" fill="' + colours[shape.colour] + '">' + escape(shape.text) + "</text>";
       },
       caption: (shape, colours) => {
         const colour = colours[shape.colour];
         const lines = shape.lines.map((line, index) => '<tspan x="' + n(shape.x) + '" dy="' + (index === 0 ? 0 : 15) + '">' + escape(line) + "</tspan>").join("");
-        return '<text x="' + n(shape.x) + '" y="' + n(shape.y + 11) + '" font-size="10" text-anchor="middle" fill="' + colour + '">' + lines + "</text>";
+        return '<text x="' + n(shape.x) + '" y="' + n(shape.y + 11) + '" font-size="10" fill="' + colour + '">' + lines + "</text>";
       }
     };
     function dash(shape) {
@@ -3184,7 +3573,9 @@ window.__ModuleLoader__.load({
           dropped += 1;
           continue;
         }
-        body.push(writer(shape, colours));
+        const drawn = writer(shape, colours);
+        const nodeId = shape.id;
+        body.push(shape.kind === "box" && typeof nodeId === "string" ? '<g data-node-id="' + escape(nodeId) + '">' + drawn + "</g>" : drawn);
       }
       const header = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + n(canvas.width) + " " + n(canvas.height) + '" width="' + n(canvas.width) + '" height="' + n(canvas.height) + '" role="img"' + (label === void 0 ? "" : ' aria-label="' + escape(label) + '"') + ' font-family="system-ui, -apple-system, Segoe UI, sans-serif">';
       const background = '<rect x="0" y="0" width="' + n(canvas.width) + '" height="' + n(canvas.height) + '" fill="' + colours.background + '" />';
@@ -3297,8 +3688,409 @@ window.__ModuleLoader__.load({
       };
     }
     
+    // src/annotation.ts
+    function annotationBlock(annotations) {
+      const count = annotations.length;
+      const lines = [
+        "Diagram annotations - " + String(count) + (count === 1 ? " item" : " items") + " (numbers match the picture).",
+        'Please answer each item separately, and start each answer with "Annotation N:".'
+      ];
+      const caption = (annotations[0]?.caption ?? "").trim();
+      if (caption !== "") lines.push("Drawing: " + caption);
+      annotations.forEach((annotation, index) => {
+        const label = (annotation.label ?? "").trim();
+        const node = label === "" || label === annotation.nodeId ? annotation.nodeId : label + " (" + annotation.nodeId + ")";
+        const note = (annotation.note ?? "").trim();
+        lines.push("");
+        lines.push("Diagram note [" + String(index + 1) + "] node " + node + " - " + (note === "" ? "(marked, no note)" : note));
+      });
+      lines.push("", "Question:");
+      return lines.join(String.fromCharCode(10));
+    }
+    var COMPOSER_MARKS = [
+      "[data-focus-flow] textarea",
+      "textarea[data-focus-flow]",
+      '[data-focus-flow] [contenteditable="true"]',
+      '[data-focus-flow][contenteditable="true"]',
+      // No marker on this host - measured, not assumed. Everything this plugin writes carries
+      // `data-dme-own`, so what remains is somebody else's writing surface.
+      "textarea:not([data-dme-own])",
+      '[contenteditable="true"]:not([data-dme-own])'
+    ];
+    function findComposer(doc) {
+      if (doc === void 0) return void 0;
+      try {
+        for (const mark of COMPOSER_MARKS) {
+          const found = doc.querySelector(mark);
+          if (found !== null && typeof found === "object") return found;
+        }
+        const marked = doc.querySelector("[data-focus-flow]");
+        if (marked !== null && typeof marked === "object") {
+          const inner = marked.querySelector?.('textarea, [contenteditable="true"]');
+          if (inner !== null && inner !== void 0 && typeof inner === "object") return inner;
+        }
+        return void 0;
+      } catch {
+        return void 0;
+      }
+    }
+    function eventOf(type, init) {
+      const scope = globalThis;
+      if (scope.Event === void 0) return void 0;
+      try {
+        return new scope.Event(type, init);
+      } catch {
+        return void 0;
+      }
+    }
+    function setValue(element, next) {
+      const scope = globalThis;
+      for (const ctor of [scope.HTMLTextAreaElement, scope.HTMLInputElement]) {
+        const descriptor = ctor === void 0 ? void 0 : Object.getOwnPropertyDescriptor(ctor.prototype, "value");
+        if (descriptor !== void 0 && typeof descriptor.set === "function") {
+          descriptor.set.call(element, next);
+          return;
+        }
+      }
+      element.value = next;
+    }
+    function fillComposer(doc, text2) {
+      const composer = findComposer(doc);
+      if (composer === void 0) return "no-composer";
+      const isField = typeof composer.value === "string" || composer.tagName === "TEXTAREA" || composer.tagName === "INPUT";
+      if (isField) {
+        const current = typeof composer.value === "string" ? composer.value : "";
+        setValue(composer, current.trim() === "" ? text2 : current.replace(/\s*$/, "") + "\n\n" + text2);
+      } else {
+        if (composer.focus !== void 0) composer.focus();
+        const editing = globalThis;
+        const escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        const insertHtml = () => {
+          const command = editing.document?.execCommand;
+          if (command === void 0 || editing.document === void 0) return false;
+          const html = text2.split(String.fromCharCode(10)).map(escapeHtml).join("<br>");
+          return command.call(editing.document, "insertHTML", false, html) === true;
+        };
+        const insertLines = () => {
+          const command = editing.document?.execCommand;
+          if (command === void 0 || editing.document === void 0) return false;
+          const lines = text2.split(String.fromCharCode(10));
+          for (let index = 0; index < lines.length; index += 1) {
+            if (index > 0 && command.call(editing.document, "insertParagraph", false, "") !== true) return false;
+            if (lines[index] !== "" && command.call(editing.document, "insertText", false, lines[index]) !== true) return false;
+          }
+          return true;
+        };
+        const inserted = insertHtml() || insertLines();
+        if (!inserted) {
+          const current = typeof composer.textContent === "string" ? composer.textContent : "";
+          composer.textContent = current.trim() === "" ? text2 : current.replace(/\s*$/, "") + "\n\n" + text2;
+        }
+      }
+      const input = eventOf("input", { bubbles: true });
+      if (input !== void 0 && composer.dispatchEvent !== void 0) composer.dispatchEvent(input);
+      if (composer.focus !== void 0) composer.focus();
+      return "filled";
+    }
+    function submitComposer(doc) {
+      const composer = findComposer(doc);
+      if (composer === void 0 || composer.dispatchEvent === void 0) return false;
+      const scope = globalThis;
+      if (scope.KeyboardEvent === void 0) return false;
+      try {
+        composer.dispatchEvent(new scope.KeyboardEvent("keydown", { key: "Enter", code: "Enter", bubbles: true, cancelable: true }));
+        return true;
+      } catch {
+        return false;
+      }
+    }
+    function composerRect(doc) {
+      const composer = findComposer(doc);
+      const inner = composer?.querySelector?.('textarea, [contenteditable="true"]');
+      const surface = inner !== null && inner !== void 0 && typeof inner === "object" ? inner : composer;
+      const measure2 = surface?.getBoundingClientRect;
+      if (surface === void 0 || typeof measure2 !== "function") return void 0;
+      try {
+        const rect = measure2.call(surface);
+        return { left: rect.left, top: rect.top, width: rect.width, height: rect.height };
+      } catch {
+        return void 0;
+      }
+    }
+    function prependBlock(document, annotations, caption) {
+      if (annotations.length === 0) return "";
+      const block = annotationBlock(annotations.map((annotation) => ({ ...annotation, caption })));
+      const composer = findComposer(document);
+      if (composer === void 0) return "\u6CA1\u627E\u5230\u8F93\u5165\u6846\uFF1A\u5148\u628A\u56FE\u8D34\u8FDB\u4F1A\u8BDD\uFF0C\u6216\u624B\u52A8\u590D\u5236\u8FD9\u6BB5\u6587\u5B57";
+      const isField = typeof composer.value === "string" || composer.tagName === "TEXTAREA" || composer.tagName === "INPUT";
+      if (isField) {
+        const current = typeof composer.value === "string" ? composer.value : "";
+        setValue(composer, current.trim() === "" ? block : block + String.fromCharCode(10, 10) + current);
+      } else if (fillComposer(document, block) === "no-composer") {
+        return "\u6CA1\u627E\u5230\u8F93\u5165\u6846\uFF1A\u5148\u628A\u56FE\u8D34\u8FDB\u4F1A\u8BDD\uFF0C\u6216\u624B\u52A8\u590D\u5236\u8FD9\u6BB5\u6587\u5B57";
+      }
+      const input = eventOf("input", { bubbles: true });
+      if (input !== void 0 && composer.dispatchEvent !== void 0) composer.dispatchEvent(input);
+      return "\u5DF2\u653E\u5165\u8F93\u5165\u6846\uFF08" + String(annotations.length) + " \u6761\u56FE\u6CE8\uFF09";
+    }
+    function withoutEmptyQuestion(block) {
+      return block.replace(/\n+Question:\s*$/, "");
+    }
+    
+    // src/transcript.ts
+    var TRANSCRIPT_MARKER = "Diagram annotations -";
+    var QUESTION = "Question:";
+    var HANDLED = "data-dme-annotated";
+    var ORIGINAL = "data-dme-annotation-text";
+    var SELECTOR = "div, p, span, li";
+    var BORDER = "1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.35))";
+    function annotationCountOf(text2) {
+      const found = /Diagram annotations - (\d+)/.exec(text2);
+      return found === null ? null : Number(found[1]);
+    }
+    function itemsOf(text2) {
+      const items = [];
+      for (const raw of text2.split(String.fromCharCode(10))) {
+        const line = raw.trim();
+        const head = /^Diagram note \[(\d+)\] node (.+)$/.exec(line);
+        if (head !== null) {
+          const rest = head[2];
+          const dash2 = rest.lastIndexOf(" - ");
+          items.push({ index: Number(head[1]), node: dash2 === -1 ? rest : rest.slice(0, dash2), note: dash2 === -1 ? "" : rest.slice(dash2 + 3) });
+          continue;
+        }
+        const note = /^Note: (.*)$/.exec(line);
+        if (note !== null && items.length > 0) items[items.length - 1].note = note[1];
+      }
+      return items;
+    }
+    function textNodesOf(root) {
+      const out = [];
+      const visit = (node) => {
+        const children = node.childNodes;
+        if (children === void 0 || children === null || children.length === 0) {
+          if (typeof node.nodeValue === "string") out.push(node);
+          return;
+        }
+        for (let index = 0; index < children.length; index += 1) visit(children[index]);
+      };
+      visit(root);
+      return out;
+    }
+    function cutTextNodes(nodes, cut2) {
+      let position = 0;
+      let done = false;
+      for (const node of nodes) {
+        const value = typeof node.nodeValue === "string" ? node.nodeValue : "";
+        const length = value.length;
+        if (done) {
+          position += length;
+          continue;
+        }
+        if (cut2 <= position + length) {
+          node.nodeValue = value.slice(cut2 - position).replace(/^\s+/, "");
+          done = true;
+        } else {
+          node.nodeValue = "";
+        }
+        position += length;
+      }
+      return done;
+    }
+    function isForeign(node) {
+      for (const name of ["data-annotation-for-dsh", "data-annotation-overlay", "data-annotation-chip", "data-annotation-tip-layer"]) {
+        const value = node.getAttribute?.(name);
+        if (value !== void 0 && value !== null) return true;
+      }
+      return false;
+    }
+    function holdsAnotherBlock(node) {
+      const inner = node.querySelectorAll?.(SELECTOR);
+      if (inner === void 0 || inner === null) return false;
+      for (let index = 0; index < inner.length; index += 1) {
+        const text2 = inner[index].textContent;
+        if (typeof text2 === "string" && text2.indexOf(TRANSCRIPT_MARKER) !== -1) return true;
+      }
+      return false;
+    }
+    function cardFor(doc, items, title, full) {
+      const card = doc.createElement?.("div");
+      if (card === void 0) return void 0;
+      styleOf(card, {
+        position: "fixed",
+        zIndex: "40",
+        display: "none",
+        maxWidth: "360px",
+        padding: "8px 10px",
+        borderRadius: "10px",
+        background: "var(--dsw-alias-bg-overlay, var(--dsw-alias-bg-layer-1, Canvas))",
+        border: BORDER,
+        boxShadow: "0 10px 30px rgba(0,0,0,0.28)",
+        color: "var(--dsw-alias-label-primary, CanvasText)",
+        font: "12px system-ui, sans-serif"
+      });
+      const head = doc.createElement?.("div");
+      if (head !== void 0) {
+        head.textContent = title;
+        styleOf(head, {
+          color: "var(--dsw-alias-label-secondary, GrayText)",
+          paddingBottom: "6px",
+          marginBottom: "4px",
+          borderBottom: BORDER,
+          fontSize: "11px"
+        });
+        card.appendChild?.(head);
+      }
+      for (const item of items) {
+        const row = doc.createElement?.("div");
+        if (row === void 0) continue;
+        styleOf(row, { display: "flex", gap: "6px", alignItems: "flex-start", padding: "3px 0" });
+        const badge = doc.createElement?.("span");
+        if (badge !== void 0) {
+          badge.textContent = String(item.index);
+          styleOf(badge, {
+            flex: "0 0 auto",
+            width: "16px",
+            height: "16px",
+            lineHeight: "16px",
+            textAlign: "center",
+            borderRadius: "8px",
+            fontSize: "10px",
+            background: "var(--dsw-alias-brand-primary, #2563eb)",
+            color: "#fff"
+          });
+          row.appendChild?.(badge);
+        }
+        const body = doc.createElement?.("div");
+        if (body !== void 0) {
+          body.textContent = item.node + (item.note === "" ? "" : String.fromCharCode(10) + item.note);
+          styleOf(body, { flex: "1 1 auto", whiteSpace: "pre-wrap", wordBreak: "break-word" });
+          row.appendChild?.(body);
+        }
+        card.appendChild?.(row);
+      }
+      const more = doc.createElement?.("div");
+      if (more !== void 0) {
+        more.textContent = full;
+        styleOf(more, {
+          display: "none",
+          marginTop: "6px",
+          paddingTop: "6px",
+          borderTop: BORDER,
+          fontSize: "11px",
+          whiteSpace: "pre-wrap",
+          color: "var(--dsw-alias-label-secondary, GrayText)",
+          maxHeight: "40vh",
+          overflow: "auto"
+        });
+        card.appendChild?.(more);
+      }
+      return card;
+    }
+    function styleOf(node, map) {
+      const decl = node.style;
+      if (typeof decl?.setProperty === "function") {
+        const target = decl;
+        for (const key of Object.keys(map)) {
+          const value = map[key];
+          if (value === void 0) continue;
+          target.setProperty(key.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase()), value);
+        }
+        return;
+      }
+      node.style = map;
+    }
+    function chipFor(doc, label, title, text2) {
+      const chip = doc.createElement?.("div");
+      if (chip === void 0) return void 0;
+      chip.textContent = label;
+      chip.setAttribute?.("role", "button");
+      styleOf(chip, {
+        display: "inline-flex",
+        alignItems: "center",
+        height: "20px",
+        padding: "0 8px",
+        margin: "4px 0 0",
+        fontSize: "11px",
+        lineHeight: "20px",
+        borderRadius: "10px",
+        verticalAlign: "middle",
+        userSelect: "none",
+        border: BORDER,
+        background: "var(--dsw-alias-bg-layer-2, rgba(127,127,127,0.10))",
+        color: "var(--dsw-alias-label-secondary, GrayText)",
+        cursor: "pointer",
+        maxWidth: "100%"
+      });
+      const card = cardFor(doc, itemsOf(text2), title, text2);
+      if (card === void 0) return chip;
+      const place2 = () => {
+        const box = chip.getBoundingClientRect?.();
+        styleOf(card, box === void 0 ? { display: "block" } : { display: "block", left: String(Math.max(8, box.left)) + "px", top: String(box.top + box.height + 6) + "px" });
+      };
+      const hide = () => {
+        styleOf(card, { display: "none" });
+      };
+      chip.addEventListener?.("mouseenter", place2);
+      chip.addEventListener?.("mouseleave", hide);
+      chip.addEventListener?.("click", () => {
+        if ((card.style ?? {}).display === "block") {
+          hide();
+        } else {
+          place2();
+        }
+      });
+      chip.appendChild?.(card);
+      return chip;
+    }
+    function decorateTranscript(doc, label = "Notes", title = "Notes in this message") {
+      if (doc === void 0 || typeof doc.querySelectorAll !== "function") return 0;
+      let nodes;
+      try {
+        nodes = doc.querySelectorAll(SELECTOR);
+      } catch {
+        return 0;
+      }
+      let folded = 0;
+      for (let index = 0; index < nodes.length; index += 1) {
+        const element = nodes[index];
+        const text2 = typeof element.textContent === "string" ? element.textContent : "";
+        if (!text2.includes(TRANSCRIPT_MARKER)) continue;
+        if (element.getAttribute?.(HANDLED) === "1") continue;
+        if (isForeign(element)) continue;
+        if (holdsAnotherBlock(element)) continue;
+        const texts = textNodesOf(element);
+        if (texts.length === 0) continue;
+        const joined = texts.map((node) => typeof node.nodeValue === "string" ? node.nodeValue : "").join("");
+        if (!joined.includes(TRANSCRIPT_MARKER)) continue;
+        const at = joined.lastIndexOf(QUESTION);
+        const cut2 = at === -1 ? joined.length : at + QUESTION.length;
+        const count = annotationCountOf(joined);
+        const chip = chipFor(doc, label + (count === null ? "" : " \xD7" + String(count)), title, joined);
+        if (chip === void 0) continue;
+        try {
+          if (!cutTextNodes(texts, cut2)) continue;
+          element.setAttribute?.(ORIGINAL, joined);
+          element.setAttribute?.(HANDLED, "1");
+          const parent = element.parentNode;
+          if (parent?.insertBefore !== void 0) parent.insertBefore(chip, element.nextSibling ?? null);
+          else element.appendChild?.(chip);
+          folded += 1;
+        } catch {
+        }
+      }
+      return folded;
+    }
+    function startTranscriptDecoration(doc, label = "Notes", title = "Notes in this message") {
+      decorateTranscript(doc, label, title);
+      return () => {
+      };
+    }
+    
     // src/client.ts
-    var TOOL_NAMES = ["model_verify"];
+    var services;
+    var DRAWING_TOOL = "diagram_render";
+    var TOOL_NAMES = ["model_verify", DRAWING_TOOL];
     function themeMode() {
       try {
         const scope = globalThis;
@@ -3319,8 +4111,1040 @@ window.__ModuleLoader__.load({
     }
     var WHITEBOARD_ID = "model-everything-diagram";
     var WHITEBOARD_SAMPLE = ["graph TD", "  a[Idea] --> b{Feasible?}", "  b -->|yes| c[Build]", "  b -->|no| d[Revise]", "  d --> a"].join("\n");
+    function argOf(args, key) {
+      if (args === null || typeof args !== "object") return void 0;
+      const view = args;
+      if (typeof view.value === "function") return view.value(key);
+      return args[key];
+    }
+    var MESSAGES = {
+      note: { en: "Note", zh: "\u6279\u6CE8" },
+      noteOn: { en: "Note: on", zh: "\u6279\u6CE8: \u5F00" },
+      noteHint: { en: "Click a node to mark it", zh: "\u70B9\u4E00\u4E2A\u8282\u70B9\u6807\u8BB0\u5B83" },
+      node: { en: "Node", zh: "\u8282\u70B9" },
+      add: { en: "Add", zh: "\u52A0\u5165" },
+      addAndSend: { en: "Add & send", zh: "\u52A0\u5165\u5E76\u53D1\u9001" },
+      close: { en: "Close", zh: "\u5173\u95ED" },
+      send: { en: "Send", zh: "\u53D1\u9001" },
+      clear: { en: "Clear", zh: "\u6E05\u7A7A" },
+      remove: { en: "Remove", zh: "\u5220\u9664" },
+      markedOnly: { en: "(marked only)", zh: "(\u53EA\u6807\u8BB0)" },
+      pending: { en: "Notes", zh: "\u56FE\u6CE8" },
+      fold: { en: "hide", zh: "\u6536\u8D77" },
+      carried: { en: "Notes in this message", zh: "\u672C\u6D88\u606F\u643A\u5E26\u56FE\u6CE8" },
+      zoomOut: { en: "Zoom out", zh: "\u7F29\u5C0F" },
+      zoomIn: { en: "Zoom in", zh: "\u653E\u5927" },
+      actualSize: { en: "Actual size", zh: "\u5B9E\u9645\u5927\u5C0F" },
+      full: { en: "\u2922 Full", zh: "\u2922 \u5168\u5C4F" },
+      exitFull: { en: "\u2921 Exit", zh: "\u2921 \u9000\u51FA" },
+      diagram: { en: "Diagram", zh: "\u56FE" },
+      fitOn: { en: "fit: on", zh: "fit: on" },
+      fitOff: { en: "fit: off", zh: "fit: off" },
+      scheme: { en: "Colours", zh: "\u914D\u8272" },
+      unfold: { en: "unfold", zh: "\u5C55\u5F00" },
+      placeholder: { en: "A note about this node\u2026 (Ctrl+Enter adds and sends)", zh: "\u6279\u6CE8\u2026\uFF08Ctrl+Enter \u52A0\u5165\u5E76\u53D1\u9001\uFF09" }
+    };
+    function languageOf() {
+      const scope = globalThis;
+      const asked = (scope.document?.documentElement?.lang ?? scope.navigator?.language ?? "en").toLowerCase();
+      return asked.startsWith("zh") ? "zh" : "en";
+    }
+    function t(key) {
+      return MESSAGES[key][languageOf()];
+    }
+    var TOKEN = {
+      surface: "var(--dsw-alias-bg-overlay, var(--dsw-alias-bg-layer-1, Canvas))",
+      border: "var(--dsw-alias-border-l1, rgba(127,127,127,0.35))",
+      text: "var(--dsw-alias-label-primary, CanvasText)",
+      dim: "var(--dsw-alias-label-secondary, GrayText)",
+      accent: "var(--dsw-alias-brand-primary, #2563eb)"
+    };
+    function annotationPanel(h, state, actions, options = {}) {
+      const button = (label, onClick, accent = false) => h("button", { type: "button", onClick, style: { fontSize: "12px", padding: "2px 8px", borderRadius: "6px", border: "1px solid " + TOKEN.border, background: "transparent", color: accent ? TOKEN.accent : TOKEN.text, cursor: "pointer" } }, label);
+      const editor = state.picked === null ? null : h(
+        "div",
+        {
+          style: {
+            ...options.floating === false ? {} : { position: "absolute", left: (state.anchor?.left ?? 10) + "px", top: (state.anchor?.top ?? 10) + "px", zIndex: 20 },
+            width: "min(260px, calc(100% - 16px))",
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "column",
+            gap: "6px",
+            padding: "8px",
+            borderRadius: "10px",
+            background: TOKEN.surface,
+            border: "1px solid " + TOKEN.border,
+            color: TOKEN.text,
+            boxShadow: "0 8px 24px rgba(0,0,0,0.28)"
+          }
+        },
+        h("div", { style: { fontSize: "12px", color: TOKEN.dim } }, t("node") + " " + state.picked.id),
+        h("textarea", {
+          "data-dme-own": "1",
+          value: state.note,
+          rows: 3,
+          placeholder: t("placeholder"),
+          style: { width: "100%", boxSizing: "border-box", font: "12px system-ui, sans-serif", padding: "6px", borderRadius: "6px", border: "1px solid " + TOKEN.border, background: "transparent", color: TOKEN.text, resize: "vertical" },
+          onInput: (event) => actions.onNote(String(event?.target?.value ?? "")),
+          onKeyDown: (event) => {
+            if (event?.key === "Enter" && (event?.ctrlKey === true || event?.metaKey === true)) {
+              event.preventDefault?.();
+              actions.onAdd();
+            }
+          }
+        }),
+        h("div", { style: { display: "flex", gap: "6px", justifyContent: "flex-end" } }, button("\u5173\u95ED", actions.onCancel), button("\u52A0\u5165", actions.onAdd))
+      );
+      const docked = options.floating !== false && options.document !== void 0 ? composerRect(options.document) : void 0;
+      const chip = state.pending.length === 0 || options.dockChip === false ? null : h(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            zIndex: 30,
+            left: (docked === void 0 ? 16 : docked.left) + "px",
+            transform: "translate(" + String(state.dockFix?.dx ?? 0) + "px, " + String(state.dockFix?.dy ?? 0) + "px)",
+            // Anchored to the composer's own top edge, in the gap above it: the count is in sight while the
+            // reader is typing, and never covers the box they are typing into.
+            top: (docked === void 0 ? 16 : Math.max(8, docked.top - 46)) + "px",
+            // Hugs its two buttons. A fixed width turned the control into a wide empty bar across the composer.
+            display: "flex",
+            flexDirection: "column",
+            gap: "6px",
+            padding: "6px 10px",
+            borderRadius: "12px",
+            width: "max-content",
+            // The composer's own surface and hairline: the control reads as part of that box, not as a dialog.
+            background: "var(--dsw-alias-bg-layer-1, " + TOKEN.surface + ")",
+            border: "1px solid var(--dsw-alias-border-l2, " + TOKEN.border + ")",
+            color: TOKEN.text,
+            boxShadow: "0 8px 24px rgba(0,0,0,0.22)",
+            font: "12px system-ui, sans-serif"
+          }
+        },
+        h(
+          "div",
+          { "data-dme-dock": "1", style: { display: "flex", alignItems: "center", gap: "6px" } },
+          h("button", { type: "button", title: "\u5C55\u5F00\uFF0C\u9010\u4E2A\u5220\u9664", onClick: () => actions.onToggle(), style: { fontSize: "12px", padding: "1px 6px", borderRadius: "6px", border: "1px solid " + TOKEN.border, background: "transparent", color: TOKEN.text, cursor: "pointer" } }, t("pending") + " \xD7" + String(state.pending.length)),
+          button(t("send"), actions.onSend, true)
+        ),
+        state.open ? h(
+          "div",
+          { style: { display: "flex", flexDirection: "column", gap: "2px" } },
+          ...state.pending.map(
+            (item, index) => h(
+              "div",
+              { style: { display: "flex", alignItems: "center", gap: "6px" } },
+              h("span", { style: { color: TOKEN.dim, fontSize: "11px" } }, item.nodeId),
+              h("span", { style: { flex: "1 1 auto", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, item.note === "" ? t("markedOnly") : item.note),
+              button(t("remove"), () => actions.onRemove(index))
+            )
+          )
+        ) : null
+      );
+      const mode = state.picked === null && state.pending.length === 0 ? h("div", { style: { fontSize: "11px", color: TOKEN.dim, padding: "2px 4px" } }, t("noteHint")) : null;
+      return h(
+        "div",
+        { style: { display: "flex", flexDirection: "column", gap: "2px", color: TOKEN.text } },
+        mode,
+        chip,
+        editor,
+        state.status === "" ? null : h("div", { style: { fontSize: "11px", color: TOKEN.dim, padding: "0 4px" } }, state.status)
+      );
+    }
+    function sourceOf(block) {
+      const record2 = (value) => value !== null && typeof value === "object" ? value : void 0;
+      const asText = (value) => typeof value === "string" && value.trim() !== "" ? value : void 0;
+      const fromJson = (value) => {
+        const raw = asText(value);
+        if (raw === void 0) return void 0;
+        try {
+          return asText(record2(JSON.parse(raw))?.source);
+        } catch {
+          return void 0;
+        }
+      };
+      const frame = record2(block);
+      if (frame === void 0) return void 0;
+      const fromMeta = asText(record2(frame.meta)?.source);
+      if (fromMeta !== void 0) return fromMeta;
+      const args = record2(frame.args);
+      if (args !== void 0 && typeof args.value === "function") {
+        const lazy = asText(args.value("source"));
+        if (lazy !== void 0) return lazy;
+      }
+      const plain = asText(args?.source) ?? fromJson(frame.args);
+      if (plain !== void 0) return plain;
+      const call = record2(frame.call);
+      const fromCall = asText(call?.source) ?? fromJson(call?.input) ?? fromJson(call?.arguments);
+      if (fromCall !== void 0) return fromCall;
+      return asText(record2(frame.meta)?.source);
+    }
+    function drawingCard(React, props, overrides) {
+      const block = props.block ?? {};
+      const source = sourceOf(props.block) ?? argOf(block.args, "source");
+      const asked = argOf(block.args, "scheme");
+      const scheme = schemeNames().includes(asked) ? asked : "default";
+      const payload = props.block?.result;
+      const returned = payload !== null && typeof payload === "object" ? payload.svg : void 0;
+      const markup = typeof returned === "string" && returned !== "" ? returned : null;
+      const hasDrawing = markup !== null || typeof source === "string" && source.trim() !== "";
+      const useState = React.useState;
+      if (useState === void 0) return cardSurface(React, source, markup, scheme, overrides, null, null, null, null);
+      const [annotate, setAnnotate] = useState(false);
+      const [picked, setPicked] = useState(null);
+      const [note, setNote] = useState("");
+      const [status, setStatus] = useState("");
+      const document = globalThis.document;
+      const caption = typeof source === "string" ? source.split(String.fromCharCode(10)).map((line) => line.trim()).find((line) => line !== "") ?? "" : "";
+      const [pending, setPending] = useState([]);
+      const [open, setOpen] = useState(false);
+      const [sent, setSent] = useState("");
+      const [report, setReport] = useState("");
+      const [, setDockTick] = useState(0);
+      const [dockFix, setDockFix] = useState({ dx: 0, dy: 0 });
+      React.useEffect?.(() => {
+        const doc = globalThis.document;
+        const composer = findComposer(doc);
+        const bump = () => setDockTick((n2) => n2 + 1);
+        const scope = globalThis;
+        scope.addEventListener?.("resize", bump);
+        let observer;
+        if (composer !== void 0 && composer !== null && scope.ResizeObserver !== void 0) {
+          try {
+            observer = new scope.ResizeObserver(bump);
+            observer.observe(composer);
+          } catch {
+            observer = void 0;
+          }
+        }
+        return () => {
+          scope.removeEventListener?.("resize", bump);
+          observer?.disconnect();
+        };
+      }, []);
+      React.useEffect?.(() => {
+        const doc = globalThis.document;
+        const chip = doc?.querySelector?.("[data-dme-dock]");
+        const surface = composerRect(doc);
+        const landed = chip?.getBoundingClientRect?.();
+        if (surface === void 0 || landed === void 0) return;
+        const dx = Math.round(surface.left - landed.left);
+        const dy = Math.round(surface.top - landed.height - 8 - landed.top);
+        if (Math.abs(dx) > 1 || Math.abs(dy) > 1) setDockFix((was) => ({ dx: was.dx + dx, dy: was.dy + dy }));
+      });
+      const [anchor2, setAnchor] = useState(void 0);
+      setPendingBlock(pending.length === 0 ? "" : annotationBlock(pending.map((item) => ({ ...item, caption }))));
+      React.useEffect?.(() => {
+        try {
+          return onMessageSent(() => {
+            setPending([]);
+            setStatus("");
+          });
+        } catch {
+          return void 0;
+        }
+      }, []);
+      const [zoom, setZoom] = useState(1);
+      const [full, setFull] = useState(false);
+      if (!hasDrawing) {
+        const keys = props.block === null || typeof props.block !== "object" ? "none" : Object.keys(props.block).join(",");
+        return React.createElement("div", { style: { fontSize: "12px", opacity: 0.7 } }, "no drawing in this call \xB7 block: " + (keys === "" ? "empty" : keys));
+      }
+      const sendAll = (list) => {
+        if (list.length === 0) return;
+        const text2 = annotationBlock(list.map((item) => ({ ...item, caption })));
+        void (async () => {
+          if (placeBlock(text2)) {
+            const label = "\u56FE\u6CE8 \xD7" + String(list.length);
+            attachBelowBubble(label, "");
+            setSent("\u5DF2\u53D1\u9001 " + label);
+            attachSentChip(label);
+            setStatus("\u5DF2\u653E\u5165\u8F93\u5165\u6846\u5E76\u63D0\u4EA4\uFF08" + String(list.length) + " \u6761\u56FE\u6CE8\uFF09");
+            setPending([]);
+            submitDraft();
+            return;
+          }
+          const said = prependBlock(document, list, caption);
+          setStatus(said);
+          if (!said.startsWith("\u5DF2")) return;
+          setPending([]);
+          submitComposer(document);
+        })();
+      };
+      const onPick = (event) => {
+        if (!annotate) return;
+        const id = event?.target?.closest?.("[data-node-id]")?.getAttribute?.("data-node-id");
+        if (typeof id === "string" && id !== "") {
+          const pointer = event;
+          const frame = pointer.currentTarget?.getBoundingClientRect?.();
+          const node = pointer.target?.closest?.("[data-node-id]")?.getBoundingClientRect?.();
+          if (frame !== void 0 && node !== void 0) {
+            const width = 250;
+            const left = Math.max(4, Math.min(node.left - frame.left + node.width + 10, Math.max(4, frame.width - width)));
+            const top = Math.max(4, Math.min(node.top - frame.top, Math.max(4, frame.height - 40)));
+            setAnchor({ left, top });
+          }
+          setPicked({ id });
+          setStatus("");
+          return;
+        }
+        if (note.trim() === "") setPicked(null);
+      };
+      const toggle = React.createElement(
+        "div",
+        { style: { display: "flex", gap: "6px", alignItems: "center" } },
+        React.createElement("button", { type: "button", title: "Point at a node and send a note about it", onClick: () => {
+          setAnnotate(!annotate);
+          setStatus("");
+          if (annotate) {
+            setPicked(null);
+            setNote("");
+          }
+        }, style: { fontSize: "11px", lineHeight: "16px", padding: "1px 6px", borderRadius: "5px", border: "1px solid " + TOKEN.border, background: "transparent", color: TOKEN.text, cursor: "pointer" } }, annotate ? t("noteOn") : t("note")),
+        annotate && picked === null ? React.createElement("span", { style: { fontSize: "11px", opacity: 0.7 } }, "\u70B9\u4E00\u4E2A\u8282\u70B9") : null,
+        React.createElement("button", {
+          type: "button",
+          onClick: () => {
+            try {
+              setReport(domReport());
+            } catch (error) {
+              setReport("report failed: " + String(error?.message ?? error));
+            }
+          },
+          style: { fontSize: "11px", lineHeight: "16px", padding: "1px 6px", borderRadius: "5px", border: "1px solid " + TOKEN.border, background: "transparent", color: TOKEN.dim, cursor: "pointer" }
+        }, "\u8BCA\u65AD"),
+        sent === "" ? null : React.createElement("span", {
+          style: { fontSize: "11px", lineHeight: "16px", padding: "1px 6px", borderRadius: "9px", border: "1px solid " + TOKEN.border, color: TOKEN.dim, whiteSpace: "nowrap" }
+        }, sent)
+      );
+      updateDockLayer(pending, open, {
+        onToggle: () => setOpen(!open),
+        onSend: () => sendAll(pending),
+        onRemove: (index) => setPending(pending.filter((_, at) => at !== index))
+      });
+      const panel = annotate ? annotationPanel(
+        (type, options, ...children) => React.createElement(type, options, ...children),
+        { picked, note, pending, status, anchor: anchor2, open, dockFix },
+        {
+          onNote: setNote,
+          onAdd: () => {
+            if (picked === null) return;
+            const merged = [...pending, { nodeId: picked.id, note }];
+            setPending(merged);
+            setNote("");
+            setPicked(null);
+            setStatus("\u5DF2\u653E\u5165\u8F93\u5165\u6846\uFF0C\u76F4\u63A5\u56DE\u8F66\u5373\u53EF");
+          },
+          onAddAndSend: () => {
+            if (picked === null) return;
+            const merged = [...pending, { nodeId: picked.id, note }];
+            setNote("");
+            setPicked(null);
+            sendAll(merged);
+          },
+          onSend: () => sendAll(pending),
+          onClear: () => {
+            setPending([]);
+            setStatus("");
+          },
+          onCancel: () => {
+            setPicked(null);
+            setNote("");
+            setStatus("");
+          },
+          onToggle: () => setOpen(!open),
+          onRemove: (index) => setPending(pending.filter((_, at) => at !== index))
+        },
+        // The count is the body-level layer; this panel keeps the editor, which still needs its anchor.
+        { document, dockChip: false }
+      ) : null;
+      const reportPanel = report === "" ? null : React.createElement("pre", {
+        style: { margin: "6px 0 0", padding: "8px", borderRadius: "8px", border: "1px solid " + TOKEN.border, background: "rgba(127,127,127,0.08)", font: "11px ui-monospace, monospace", whiteSpace: "pre-wrap", userSelect: "text", maxHeight: "220px", overflow: "auto" }
+      }, report);
+      return cardSurface(React, source, markup, scheme, overrides, onPick, toggle, panel, reportPanel, { zoom: Number(zoom), full: Boolean(full), onZoom: (next) => setZoom(next), onFull: (next) => setFull(next) });
+    }
+    function cardSurface(React, source, returned, scheme, overrides, onClick, toggle, panel, report, view = { zoom: 1, full: false, onZoom: () => {
+    }, onFull: () => {
+    } }) {
+      if (returned === null && (typeof source !== "string" || source.trim() === "")) {
+        return React.createElement("div", { style: { fontSize: "12px", opacity: 0.7 } }, "no drawing in this call");
+      }
+      const drawn = returned === null ? render({ source: String(source), folded: [] }, overrides, { mode: themeMode(), scheme }) : { markup: returned, refused: [], colours: palette(overrides, { mode: themeMode(), scheme }) };
+      const scaled = drawn.markup.replace("<svg ", '<svg style="max-width: 100%; height: auto; display: block; margin: 0 auto" ');
+      const refused = drawn.refused.length === 0 ? null : React.createElement("pre", { style: { fontSize: "11px", color: "#b7791f", whiteSpace: "pre-wrap", margin: "6px 8px" } }, drawn.refused.join(String.fromCharCode(10)));
+      const chrome = { border: "1px solid " + TOKEN.border, borderRadius: "8px", overflow: "hidden", background: TOKEN.surface, color: TOKEN.text };
+      const button = (label, onPress, title) => React.createElement("button", { type: "button", title, onClick: onPress, style: { fontSize: "11px", lineHeight: "16px", padding: "1px 6px", borderRadius: "5px", border: "1px solid " + TOKEN.border, background: "transparent", color: TOKEN.text, cursor: "pointer" } }, label);
+      const header = React.createElement(
+        "div",
+        { style: { display: "flex", gap: "6px", alignItems: "center", padding: "3px 8px", borderBottom: "1px solid " + TOKEN.border, fontSize: "12px", color: TOKEN.dim } },
+        React.createElement("span", null, t("diagram")),
+        React.createElement("span", { style: { opacity: 0.7 } }, typeof source === "string" ? source.split(String.fromCharCode(10)).map((line) => line.trim()).find((line) => line !== "") ?? "" : ""),
+        React.createElement(
+          "span",
+          { style: { marginLeft: "auto", display: "flex", gap: "4px", alignItems: "center" } },
+          button("\u2212", () => view.onZoom(Math.max(0.5, Math.round((view.zoom - 0.25) * 100) / 100)), t("zoomOut")),
+          button(Math.round(view.zoom * 100) + "%", () => view.onZoom(1), t("actualSize")),
+          button("+", () => view.onZoom(Math.min(3, Math.round((view.zoom + 0.25) * 100) / 100)), t("zoomIn")),
+          button(view.full ? t("exitFull") : t("full"), () => view.onFull(!view.full), t("full")),
+          toggle
+        )
+      );
+      const drawing = React.createElement(
+        "div",
+        {
+          // CSS zoom, not a transform: it reflows, so the scroll area grows with the picture and nothing is clipped.
+          style: { zoom: view.zoom, cursor: onClick === null ? void 0 : "crosshair" },
+          onClick: onClick === null ? void 0 : onClick,
+          dangerouslySetInnerHTML: { __html: scaled }
+        }
+      );
+      const body = React.createElement(
+        "div",
+        { style: { position: "relative", background: drawn.colours.background, padding: "6px", maxHeight: view.full ? "none" : "260px", overflow: "auto", flex: "1 1 auto", minHeight: "0" } },
+        drawing,
+        panel,
+        report
+      );
+      const frame = view.full ? { position: "fixed", inset: "16px", zIndex: 60, display: "flex", flexDirection: "column", ...chrome, boxShadow: "0 12px 40px rgba(0,0,0,0.35)" } : { display: "flex", flexDirection: "column", ...chrome };
+      const children = [header, body, refused].filter((child) => child !== null);
+      return React.createElement("div", { style: frame }, ...children);
+    }
+    function currentSessionId() {
+      const sessions = services?.get?.("sessions");
+      const snapshot = sessions?.list?.getSnapshot?.();
+      if (typeof snapshot?.current === "string" && snapshot.current !== "") return snapshot.current;
+      const workspace = services?.get?.("uiWorkspace");
+      const main = workspace?.mainReference?.sessionId;
+      if (typeof main === "string" && main !== "") return main;
+      const picked = workspace?.selection?.getSnapshot?.()?.sessionId;
+      if (typeof picked === "string" && picked !== "") return picked;
+      const storage = globalThis.localStorage;
+      const raw = storage?.getItem?.("dsh.sessions.current");
+      if (typeof raw === "string" && raw !== "") {
+        try {
+          const parsed = JSON.parse(raw);
+          if (typeof parsed?.sessionId === "string" && parsed.sessionId !== "") return parsed.sessionId;
+        } catch {
+        }
+      }
+      return void 0;
+    }
+    function draftShell() {
+      const conversation = services?.get?.("conversation");
+      const sessions = services?.get?.("sessions");
+      if (conversation?.input?.for === void 0 || sessions?.scope === void 0) return void 0;
+      const id = currentSessionId();
+      if (id === void 0) return void 0;
+      try {
+        return conversation.input.for(sessions.scope(id));
+      } catch {
+        return void 0;
+      }
+    }
+    var placedText = "";
+    function replaceBlock(text2) {
+      const shell = draftShell();
+      if (shell === void 0 || typeof shell.setDraft !== "function") return false;
+      const snapshot = shell.state?.getSnapshot?.();
+      const current = typeof snapshot?.draft === "string" ? String(snapshot.draft) : "";
+      let rest = current;
+      if (placedText !== "" && rest.includes(placedText)) rest = rest.split(placedText).join("");
+      rest = rest.replace(/^[\r\n]+/, "").replace(/\s+$/, "");
+      const next = text2 === "" ? rest : rest === "" ? text2 : rest + String.fromCharCode(10, 10) + text2;
+      try {
+        shell.setDraft(next);
+        placedText = text2;
+        return true;
+      } catch {
+        return false;
+      }
+    }
+    var pendingBlock = "";
+    var enterWatch = null;
+    function setPendingBlock(text2) {
+      pendingBlock = text2;
+      installEnterCapture();
+    }
+    function findBlockElement(doc) {
+      const all = Array.from(doc.querySelectorAll("div, p, span"));
+      const hits = all.filter((node) => String(node.textContent ?? "").indexOf("Diagram annotations -") !== -1);
+      let best;
+      let bestArea = Number.POSITIVE_INFINITY;
+      for (const node of hits) {
+        const box = node.getBoundingClientRect?.();
+        const area = box === void 0 || box === null ? Number.POSITIVE_INFINITY : box.width * box.height;
+        if (area > 0 && area < bestArea) {
+          bestArea = area;
+          best = node;
+        }
+      }
+      return best;
+    }
+    function insertChipAfter(doc, element, label) {
+      try {
+        const existing = Array.from(doc.querySelectorAll("[data-dme-chip]"));
+        if (existing.some((old) => String(old.textContent ?? "") === label)) return;
+        for (const old of existing) old.remove?.();
+        const chip = doc.createElement("span");
+        chip.setAttribute("data-dme-own", "1");
+        chip.setAttribute("data-dme-chip", "1");
+        chip.textContent = label;
+        chip.style.cssText = "position:fixed;z-index:1140;display:inline-block;padding:1px 8px;border-radius:9px;font:11px system-ui;border:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.35));color:var(--dsw-alias-label-secondary, #9aa0a6);background:var(--dsw-alias-bg-layer-1, rgba(30,30,32,0.92))";
+        doc.body.appendChild(chip);
+        chipAnchor = element;
+        placeChip(doc);
+        const timer2 = globalThis.setTimeout;
+        if (typeof timer2 === "function") {
+          for (const delay of [300, 900, 2e3, 3500]) timer2(() => {
+            try {
+              placeChip(doc);
+            } catch {
+            }
+          }, delay);
+        }
+        const scope = globalThis;
+        if (!chipScrollWatched && typeof scope.addEventListener === "function") {
+          chipScrollWatched = true;
+          scope.addEventListener("scroll", () => {
+            try {
+              const live = doc.querySelector("[data-dme-chip]");
+              const anchor2 = chipAnchor;
+              const box2 = anchor2?.getBoundingClientRect?.();
+              if (live === null || box2 === void 0 || box2 === null) return;
+              live.style.setProperty("left", String(Math.round(box2.left)) + "px");
+              live.style.setProperty("top", String(Math.round(box2.bottom) + 4) + "px");
+            } catch {
+            }
+          });
+        }
+      } catch {
+      }
+    }
+    function placeChip(doc) {
+      const chip = doc?.querySelector?.("[data-dme-chip]");
+      if (chip === null || chip === void 0) return;
+      if (chipAnchor === void 0 || chipAnchor.isConnected === false) chipAnchor = findBlockElement(doc);
+      const anchor2 = chipAnchor;
+      if (anchor2 === void 0) return;
+      const box = anchor2.getBoundingClientRect?.();
+      if (box === void 0 || box === null) return;
+      if (box.width === 0) {
+        return;
+      }
+      const view = globalThis;
+      const outside = box.bottom < 0 || box.top > Number(view.innerHeight ?? 0);
+      chip.style.setProperty("display", outside ? "none" : "inline-block");
+      if (outside) return;
+      chip.style.setProperty("left", String(Math.max(8, Math.round(box.left))) + "px");
+      chip.style.setProperty("top", String(Math.max(8, Math.round(box.bottom) + 4)) + "px");
+    }
+    function attachBelowBubble(label, typed) {
+      const doc = globalThis.document;
+      const timer = globalThis.setTimeout;
+      if (doc === void 0 || typeof timer !== "function") return;
+      const wanted = typed.trim();
+      let tries = 0;
+      const attempt = () => {
+        tries += 1;
+        try {
+          const all = Array.from(doc.querySelectorAll("div, p, span"));
+          let hit;
+          if (wanted !== "") {
+            const hits = all.filter((node) => String(node.textContent ?? "").trim().startsWith(wanted) && node.parentElement);
+            hit = hits[hits.length - 1];
+          } else {
+            hit = findBlockElement(doc);
+          }
+          chipAttempt = hit === void 0 ? "not found, try " + String(tries) : "found";
+          if (hit !== void 0) {
+            insertChipAfter(doc, hit, label);
+            return;
+          }
+        } catch {
+        }
+        if (tries < 20) timer(attempt, 500);
+      };
+      timer(attempt, 300);
+    }
+    function attachSentChip(label) {
+      const doc = globalThis.document;
+      const timer = globalThis.setTimeout;
+      if (doc === void 0 || typeof timer !== "function") return;
+      let tries = 0;
+      const attempt = () => {
+        tries += 1;
+        const anchor2 = doc.querySelector?.("[data-annotation-chip]");
+        const bubble = anchor2?.parentElement;
+        const row = bubble?.parentElement;
+        const made = doc.createElement?.("span");
+        if (made !== void 0 && bubble !== void 0 && bubble !== null && row !== void 0 && row !== null) {
+          made.textContent = label;
+          made.setAttribute?.("data-dme-own", "1");
+          made.style.cssText = "display:inline-block;margin:4px 8px 0;padding:1px 8px;border-radius:9px;font:11px system-ui;border:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.35));color:var(--dsw-alias-label-secondary, #9aa0a6)";
+          try {
+            row.insertBefore(made, bubble.nextSibling);
+            return;
+          } catch {
+          }
+        }
+        if (tries < 8) timer(attempt, 250);
+      };
+      timer(attempt, 300);
+    }
+    var dockReact;
+    var dockEl;
+    var dockRetries = 0;
+    var chipAttempt = "not attempted";
+    var chipAnchor;
+    var chipScrollWatched = false;
+    var dockReceipt = "";
+    var receiptTimer;
+    function publishDockReceipt(text2) {
+      dockReceipt = text2;
+      const scope = globalThis;
+      if (scope.clearTimeout !== void 0) scope.clearTimeout(receiptTimer);
+      receiptTimer = scope.setTimeout?.(() => {
+        dockReceipt = "";
+        try {
+          scheduleDock();
+        } catch {
+        }
+      }, 8e3);
+    }
+    var dockObserver;
+    var dockFrame;
+    function ensureDock() {
+      if (dockEl !== void 0 && dockEl.isConnected !== false) return dockEl;
+      const doc = globalThis.document;
+      if (doc?.body === void 0 || typeof doc.createElement !== "function") return void 0;
+      for (const old of Array.from(doc.querySelectorAll("[data-dme-dock]"))) old.remove?.();
+      const el = doc.createElement("div");
+      el.setAttribute("data-dme-dock", "1");
+      el.setAttribute("data-dme-own", "1");
+      el.style.cssText = "position:fixed;z-index:1140;display:none;align-items:center;gap:6px;padding:4px 8px;border-radius:11px;border:1px solid var(--dsw-alias-border-l2, rgba(127,127,127,0.35));background:var(--dsw-alias-bg-layer-1, #2c2c2e);box-shadow:0 8px 24px rgba(0,0,0,0.24);font:11px var(--dsw-font-family, system-ui);color:var(--dsw-alias-label-primary, #eee)";
+      doc.body.appendChild(el);
+      dockEl = el;
+      return el;
+    }
+    function scheduleDock() {
+      const raf = globalThis.requestAnimationFrame;
+      if (dockFrame !== void 0 || typeof raf !== "function") {
+        updateDockChip();
+        return;
+      }
+      dockFrame = raf(() => {
+        dockFrame = void 0;
+        updateDockChip();
+      });
+    }
+    function observeDockAnchor() {
+      const doc = globalThis.document;
+      const card = doc?.querySelector?.("[data-composer-card]");
+      if (card === null || card === void 0) return;
+      const Observer = globalThis.ResizeObserver;
+      if (Observer === void 0) return;
+      try {
+        dockObserver?.disconnect();
+        const fresh = new Observer(() => {
+          scheduleDock();
+        });
+        fresh.observe(card);
+        dockObserver = fresh;
+      } catch {
+        dockObserver = void 0;
+      }
+    }
+    function updateDockChip() {
+      const state = dockReact;
+      const el = ensureDock();
+      if (state === void 0 || el === void 0) return;
+      const doc = globalThis.document;
+      if (state.count === 0) {
+        if (dockReceipt === "") {
+          el.style.display = "none";
+          return;
+        }
+        el.textContent = "";
+        const note = doc.createElement("span");
+        note.textContent = dockReceipt;
+        note.style.cssText = "opacity:.75";
+        el.appendChild(note);
+        el.style.display = "flex";
+        const cardRect2 = doc.querySelector("[data-composer-card]")?.getBoundingClientRect?.();
+        if (cardRect2 === void 0) {
+          el.style.left = "16px";
+          el.style.top = "16px";
+          return;
+        }
+        const w = Number(el.offsetWidth) || 100;
+        const h = Number(el.offsetHeight) || 24;
+        el.style.left = Math.max(8, Math.min(cardRect2.left, Number(globalThis.innerWidth ?? 0) - w - 8)) + "px";
+        el.style.top = Math.max(8, cardRect2.top - h - 8) + "px";
+        return;
+      }
+      const create = (tag) => doc.createElement(tag);
+      el.textContent = "";
+      const toggle = create("button");
+      toggle.textContent = t("pending") + " \xD7" + String(state.count);
+      toggle.style.cssText = "font:11px inherit;padding:1px 6px;border-radius:6px;border:1px solid var(--dsw-alias-border-l2, rgba(127,127,127,0.35));background:transparent;color:inherit;cursor:pointer";
+      toggle.addEventListener("click", () => state.handlers.onToggle());
+      el.appendChild(toggle);
+      const send = create("button");
+      send.textContent = t("send");
+      send.style.cssText = "font:11px inherit;padding:1px 8px;border-radius:6px;border:1px solid var(--dsw-alias-brand-primary,#2563eb);background:var(--dsw-alias-brand-primary,#2563eb);color:#fff;cursor:pointer";
+      send.addEventListener("click", () => state.handlers.onSend());
+      el.appendChild(send);
+      if (state.open && state.items.length > 0) {
+        for (const [index, item] of state.items.entries()) {
+          const line = create("span");
+          line.textContent = item.nodeId + ":" + (item.note === "" ? t("markedOnly") : item.note);
+          line.title = "\u70B9\u51FB\u5220\u9664";
+          line.style.cssText = "cursor:pointer;opacity:.85";
+          line.addEventListener("click", () => state.handlers.onRemove(index));
+          el.appendChild(line);
+        }
+      }
+      el.style.display = "flex";
+      observeDockAnchor();
+      const surface = findComposer(doc) ?? doc.querySelector('textarea, [contenteditable="true"]');
+      const rect = surface?.getBoundingClientRect?.();
+      const cardEl = doc.querySelector("[data-composer-card]") ?? null;
+      const seatEl = cardEl?.closest?.("[data-composer-seat]") ?? null;
+      const cardRect = cardEl?.getBoundingClientRect?.() ?? null;
+      void surface;
+      const width = Number(el.offsetWidth) || 100;
+      const height = Number(el.offsetHeight) || 26;
+      if (rect === void 0 && cardRect === null) {
+        el.style.left = "16px";
+        el.style.top = "16px";
+        return;
+      }
+      const view = globalThis;
+      const anchor2 = cardRect ?? rect;
+      const seatTop = seatEl?.getBoundingClientRect?.()?.top;
+      const topEdge = Math.min(anchor2.top, typeof seatTop === "number" ? seatTop : anchor2.top);
+      const left = Math.max(8, Math.min(anchor2.left, Number(view.innerWidth ?? 0) - width - 8));
+      el.style.left = left + "px";
+      el.style.top = Math.max(8, topEdge - height - 6) + "px";
+      observeDivider(doc);
+      observeSurface(doc, surface);
+      const scope2 = globalThis;
+      if (left <= 8 && dockRetries < 12 && typeof scope2.setTimeout === "function") {
+        dockRetries += 1;
+        scope2.setTimeout(() => {
+          try {
+            updateDockChip();
+          } catch {
+          }
+        }, 250);
+      } else if (left > 8) {
+        dockRetries = 0;
+      }
+    }
+    function updateDockLayer(items, open, handlers) {
+      dockReact = { count: items.length, open, items, handlers };
+      bumpDock();
+      if (dockSlotMounted) return;
+      try {
+        scheduleDock();
+      } catch {
+      }
+    }
+    var dockSlotMounted = false;
+    var dockVersion = 0;
+    var dockSubs = /* @__PURE__ */ new Set();
+    function bumpDock() {
+      dockVersion += 1;
+      for (const listener of Array.from(dockSubs)) {
+        try {
+          listener();
+        } catch {
+        }
+      }
+    }
+    function dockSlotView(React) {
+      return function DockSlot() {
+        const [, setVersion] = (React.useState ?? ((initial) => [initial, () => {
+        }]))(0);
+        React.useEffect?.(() => {
+          dockSlotMounted = true;
+          const listener = () => setVersion(dockVersion);
+          dockSubs.add(listener);
+          return () => {
+            dockSubs.delete(listener);
+            dockSlotMounted = false;
+          };
+        }, []);
+        const [pad, setPad] = (React.useState ?? ((initial) => [initial, () => {
+        }]))({ left: 0, right: 0 });
+        const [diag, setDiag] = (React.useState ?? ((initial) => [initial, () => {
+        }]))("");
+        React.useEffect?.(() => {
+          const doc = globalThis.document;
+          const timer = globalThis.setTimeout;
+          const measure2 = () => {
+            try {
+              const slot = doc?.querySelector?.("[data-dme-dock-slot]");
+              const card = findComposer(doc) ?? doc?.querySelector?.('textarea, [contenteditable="true"]');
+              if (slot === null || slot === void 0 || card === null || card === void 0) return;
+              const s = slot.getBoundingClientRect();
+              const c = card.getBoundingClientRect();
+              const next = { left: Math.max(0, Math.round(c.left - s.left)), right: Math.max(0, Math.round(s.right - c.right)) };
+              setPad(next);
+              setDiag(" L" + String(next.left) + " R" + String(next.right) + " s" + String(Math.round(s.left)) + " c" + String(Math.round(c.left)) + " w" + String(Math.round(c.width)));
+            } catch {
+            }
+          };
+          if (typeof timer === "function") {
+            for (const delay of [0, 100, 250, 500, 900, 1500, 2400]) timer(measure2, delay);
+          }
+          const scope = globalThis;
+          scope.addEventListener?.("resize", measure2);
+          const Observer = globalThis.ResizeObserver;
+          let watcher;
+          if (Observer !== void 0) {
+            try {
+              watcher = new Observer(measure2);
+              watcher.observe(doc?.body);
+            } catch {
+              watcher = void 0;
+            }
+          }
+          return () => {
+            watcher?.disconnect();
+            scope.removeEventListener?.("resize", measure2);
+          };
+        }, []);
+        const state = dockReact;
+        if (state === void 0 || state.count === 0) return null;
+        let livePad = pad;
+        try {
+          const doc = globalThis.document;
+          const slotEl = doc?.querySelector?.("[data-dme-dock-slot]");
+          const surfaceEl = findComposer(doc) ?? doc?.querySelector?.('textarea, [contenteditable="true"]');
+          const sr = slotEl?.getBoundingClientRect?.();
+          const cr = surfaceEl?.getBoundingClientRect?.();
+          if (sr !== void 0 && sr !== null && cr !== void 0 && cr !== null) {
+            livePad = { left: Math.max(0, Math.round(cr.left - sr.left)), right: Math.max(0, Math.round(sr.right - cr.right)) };
+          }
+        } catch {
+        }
+        return React.createElement(
+          "div",
+          {
+            "data-dme-own": "1",
+            "data-dme-dock-slot": "1",
+            style: { display: "flex", alignItems: "center", justifyContent: "flex-start", gap: "6px", paddingTop: "2px", paddingBottom: "2px", paddingLeft: String(livePad.left) + "px", paddingRight: String(livePad.right) + "px", font: "11px system-ui, sans-serif", color: "inherit" }
+          },
+          React.createElement("button", {
+            type: "button",
+            onClick: () => state.handlers.onToggle(),
+            style: { font: "inherit", padding: "1px 8px", borderRadius: "9px", border: "1px solid " + TOKEN.border, background: "transparent", color: "inherit", cursor: "pointer" }
+          }, t("pending") + " \xD7" + String(state.count) + " L" + String(livePad.left) + diag),
+          React.createElement("button", {
+            type: "button",
+            onClick: () => state.handlers.onSend(),
+            style: { font: "inherit", padding: "1px 8px", borderRadius: "9px", border: "1px solid " + TOKEN.border, background: "transparent", color: "inherit", cursor: "pointer" }
+          }, t("send"))
+        );
+      };
+    }
+    var dividerObserved;
+    var surfaceObserved;
+    var surfaceInputWatched = false;
+    function observeSurface(doc, surface) {
+      try {
+        if (surface === void 0 || surface === null || surfaceObserved === surface) return;
+        surfaceObserved = surface;
+        const targets = [surface, surface?.parentElement].filter((node) => node !== null && node !== void 0);
+        const Observer = globalThis.ResizeObserver;
+        if (Observer !== void 0) {
+          const watcher = new Observer(() => {
+            scheduleDock();
+          });
+          for (const target of targets) {
+            try {
+              watcher.observe(target);
+            } catch {
+            }
+          }
+        }
+        const scope = globalThis;
+        if (typeof scope.addEventListener === "function" && !surfaceInputWatched) {
+          surfaceInputWatched = true;
+          scope.addEventListener("input", () => {
+            scheduleDock();
+            scope.setTimeout?.(() => {
+              scheduleDock();
+            }, 120);
+            scope.setTimeout?.(() => {
+              scheduleDock();
+            }, 400);
+          });
+          scope.addEventListener("paste", () => {
+            scope.setTimeout?.(() => {
+              scheduleDock();
+            }, 60);
+          });
+        }
+      } catch {
+      }
+    }
+    function observeDivider(doc) {
+      try {
+        const handle = doc?.querySelector?.('[class*="widthHandle"]');
+        if (handle === null || handle === void 0 || dividerObserved === handle) return;
+        dividerObserved = handle;
+        const Observer = globalThis.ResizeObserver;
+        if (Observer !== void 0) {
+          try {
+            new Observer(() => {
+              scheduleDock();
+            }).observe(handle);
+          } catch {
+          }
+        }
+        const scope = globalThis;
+        scope.addEventListener?.("pointerup", () => {
+          scheduleDock();
+        });
+      } catch {
+      }
+    }
+    function domReport() {
+      const doc = globalThis.document;
+      if (doc === void 0) return "no document";
+      const lines = [];
+      const rect = (el) => {
+        const r = el?.getBoundingClientRect?.();
+        return r === void 0 || r === null ? "absent" : [Math.round(r.left), Math.round(r.top), Math.round(r.width), Math.round(r.height)].join(",");
+      };
+      const probe = (name, selector) => {
+        const el = doc.querySelector(selector);
+        lines.push(name + " " + (el === null || el === void 0 ? "absent" : "l,t,w,h=" + rect(el)));
+      };
+      probe("[data-composer-card]", "[data-composer-card]");
+      probe("[data-composer-seat]", "[data-composer-seat]");
+      probe("textarea/contenteditable", 'textarea, [contenteditable="true"]');
+      probe("[data-annotation-chip]", "[data-annotation-chip]");
+      probe("[data-conversation-scroll]", "[data-conversation-scroll]");
+      probe("widthHandle", '[class*="widthHandle"]');
+      const dock = doc.querySelector("[data-dme-dock]");
+      lines.push("dock " + (dock === null ? "absent" : "l,t,w,h=" + rect(dock) + " connected=" + String(dock.isConnected)));
+      const chips = doc.querySelectorAll("[data-dme-chip]");
+      lines.push("chips " + String(chips.length) + " " + Array.from(chips).map((chip) => rect(chip)).join(" | "));
+      lines.push("pendingBlock " + String(pendingBlock === "" ? "empty" : pendingBlock.split(String.fromCharCode(10)).length + " lines"));
+      lines.push("chipAttempt " + chipAttempt);
+      lines.push("dockedCount " + String(dockReact?.count ?? 0) + " placedText " + String(placedText.length));
+      lines.push("viewport " + String(globalThis.innerWidth) + "x" + String(globalThis.innerHeight));
+      const report = lines.join(String.fromCharCode(10));
+      try {
+        globalThis.console?.log?.(report);
+      } catch {
+      }
+      return report;
+    }
+    function installEnterCapture() {
+      if (pendingBlock === "") return;
+      const doc = globalThis.document;
+      const composer = findComposer(doc);
+      if (composer === void 0 || composer === null) return;
+      if (enterWatch === composer) return;
+      enterWatch = composer;
+      const listen = composer.addEventListener;
+      if (typeof listen !== "function") return;
+      listen.call(composer, "keydown", (event) => {
+        const key = event;
+        if (key?.key !== "Enter" || key.shiftKey === true || key.isComposing === true) return;
+        if (pendingBlock === "") return;
+        const shell = draftShell();
+        const draft = String(shell?.state?.getSnapshot?.()?.draft ?? "");
+        const block = draft.trim() === "" ? withoutEmptyQuestion(pendingBlock) : pendingBlock;
+        replaceBlock(block);
+        const count = (block.match(/^Diagram note \[/gm) ?? []).length;
+        const label = "\u56FE\u6CE8 \xD7" + String(count === 0 ? 1 : count);
+        attachBelowBubble(label, draft);
+        void attachSentChip;
+        notifySent();
+        pendingBlock = "";
+      }, true);
+    }
+    function notifySent() {
+      if (dockReact !== void 0) {
+        const before = dockReact.count;
+        dockReact = { count: 0, open: false, items: [], handlers: dockReact.handlers };
+        if (before > 0) publishDockReceipt("\u56FE\u6CE8 \xD7" + String(before) + " \u5DF2\u53D1\u9001");
+        try {
+          scheduleDock();
+        } catch {
+        }
+      }
+      for (const listener of sentListeners.slice()) {
+        try {
+          listener();
+        } catch {
+        }
+      }
+    }
+    function placeBlock(text2) {
+      const shell = draftShell();
+      const snapshot = shell?.state?.getSnapshot?.();
+      const current = typeof snapshot?.draft === "string" ? String(snapshot.draft) : "";
+      return replaceBlock(current.trim() === "" ? withoutEmptyQuestion(text2) : text2);
+    }
+    var sentListeners = [];
+    var watchState = "idle";
+    var lastSeenDraft = "";
+    function onMessageSent(listener) {
+      sentListeners.push(listener);
+      watchDraft();
+      return () => {
+        sentListeners = sentListeners.filter((item) => item !== listener);
+      };
+    }
+    function watchDraft() {
+      if (watchState !== "idle") return;
+      const shell = draftShell();
+      const subscribe = shell?.state?.subscribe;
+      if (typeof subscribe !== "function") {
+        return;
+      }
+      watchState = "watching";
+      try {
+        lastSeenDraft = String(shell?.state?.getSnapshot?.()?.draft ?? "");
+        subscribe(() => {
+          const draft = String(shell?.state?.getSnapshot?.()?.draft ?? "");
+          const before = lastSeenDraft;
+          lastSeenDraft = draft;
+          if (before.trim() === "" || draft.trim() !== "") return;
+          if (placedText === "") return;
+          placedText = "";
+          for (const listener of sentListeners.slice()) {
+            try {
+              listener();
+            } catch {
+            }
+          }
+        });
+      } catch {
+        watchState = "unavailable";
+      }
+    }
+    function submitDraft() {
+      const shell = draftShell();
+      if (shell === void 0 || typeof shell.submit !== "function") return false;
+      try {
+        shell.submit("queue");
+        return true;
+      } catch {
+        return false;
+      }
+    }
     function viewFor(React, overrides = {}) {
       return (props) => {
+        if (props.toolName === DRAWING_TOOL) return drawingCard(React, props, overrides);
         const diagram = viewModel({ phase: props.phase, toolName: props.toolName, block: props.block });
         const { canvas, colours } = paintWith(diagram, overrides, { mode: themeMode() });
         const written = toSvg(canvas, colours, diagram.kind === "none" ? diagram.caption : diagram.title + ": " + diagram.caption);
@@ -3360,41 +5184,113 @@ window.__ModuleLoader__.load({
         const [scheme, setScheme] = useState("default");
         const [fit, setFit] = useState(true);
         const [folded, setFolded] = useState([]);
+        const [annotate, setAnnotate] = useState(false);
+        const [picked, setPicked] = useState(null);
+        const [anchor2, setAnchor] = useState(void 0);
+        const [note, setNote] = useState("");
+        const [status, setStatus] = useState("");
+        const [pending, setPending] = useState([]);
+        const [open, setOpen] = useState(false);
+        React.useEffect?.(() => {
+          try {
+            return onMessageSent(() => {
+              setPending([]);
+              setStatus("");
+            });
+          } catch {
+            return void 0;
+          }
+        }, []);
         const drawn = drawSample(React, overrides, source, fit ? 0 : zoom, scheme, folded);
+        const document = globalThis.document;
+        const caption = source.split(String.fromCharCode(10)).map((line) => line.trim()).find((line) => line !== "") ?? "";
+        const sendAll = (list, submit) => {
+          if (list.length === 0) return;
+          const text2 = annotationBlock(list.map((item) => ({ ...item, caption })));
+          void (async () => {
+            if (placeBlock(text2)) {
+              setStatus("\u5DF2\u653E\u5165\u8F93\u5165\u6846\u5E76\u63D0\u4EA4\uFF08" + String(list.length) + " \u6761\u56FE\u6CE8\uFF09");
+              setPending([]);
+              if (submit) submitDraft();
+              return;
+            }
+            const said = prependBlock(document, list, caption);
+            setStatus(said);
+            if (!said.startsWith("\u5DF2")) return;
+            setPending([]);
+            if (submit) submitComposer(document);
+          })();
+        };
+        const addDraft = () => {
+          if (picked === null) return false;
+          const merged = [...pending, { nodeId: picked.id, note }];
+          setPending(merged);
+          setNote("");
+          setPicked(null);
+          setStatus("\u5DF2\u653E\u5165\u8F93\u5165\u6846\uFF0C\u76F4\u63A5\u56DE\u8F66\u5373\u53EF");
+          return true;
+        };
+        const addAndSend = () => {
+          if (picked === null) return;
+          const merged = [...pending, { nodeId: picked.id, note }];
+          setNote("");
+          setPicked(null);
+          sendAll(merged, true);
+        };
         const textarea = h("textarea", {
+          "data-dme-own": "1",
           value: source,
           spellcheck: false,
           rows: Math.min(12, Math.max(4, String(source).split("\n").length)),
-          style: { width: "100%", font: "12px ui-monospace, SFMono-Regular, Menlo, monospace", padding: "6px", resize: "vertical" },
+          style: { width: "100%", boxSizing: "border-box", font: "12px ui-monospace, SFMono-Regular, Menlo, monospace", padding: "6px", resize: "vertical", borderRadius: "6px", border: "1px solid " + TOKEN.border, background: "transparent", color: TOKEN.text },
           onInput: (event) => setSource(String(event?.target?.value ?? ""))
         });
+        const controlStyle = { fontSize: "11px", lineHeight: "18px", padding: "1px 7px", borderRadius: "6px", border: "1px solid " + TOKEN.border, background: "transparent", color: TOKEN.text, cursor: "pointer" };
+        const control = (label, onPress, title) => h("button", { type: "button", title, onClick: onPress, style: controlStyle }, label);
         const controls = h(
           "div",
-          { style: { display: "flex", gap: "6px", alignItems: "center", padding: "4px 0", flexWrap: "wrap" } },
-          h("button", { type: "button", onClick: () => {
-            setFit(false);
-            setZoom(Math.max(0.5, Math.round((Number(zoom) - 0.25) * 100) / 100));
-          } }, "\u2212"),
-          h("span", { style: { fontSize: "12px", opacity: 0.7 } }, fit ? "fit" : String(Math.round(Number(zoom) * 100)) + "%"),
-          h("button", { type: "button", onClick: () => {
-            setFit(false);
-            setZoom(Math.min(3, Math.round((Number(zoom) + 0.25) * 100) / 100));
-          } }, "+"),
-          h("button", { type: "button", onClick: () => {
-            setFit(false);
-            setZoom(1);
-          } }, "reset"),
-          h("button", { type: "button", title: "Scale to the pane width", onClick: () => setFit(!fit) }, fit ? "fit: on" : "fit: off"),
-          folded.length === 0 ? null : h("button", { type: "button", title: "Unfold every group", onClick: () => setFolded([]) }, "unfold " + String(folded.length)),
+          { style: { display: "flex", flexDirection: "column", gap: "3px", padding: "2px 0" } },
           h(
-            "select",
-            {
-              value: scheme,
-              title: "Colour scheme",
-              style: { marginLeft: "auto", fontSize: "12px" },
-              onChange: (event) => setScheme(String(event?.target?.value ?? "default"))
-            },
-            ...schemeNames().map((name) => h("option", { value: name, selected: name === scheme }, name))
+            "div",
+            { style: { display: "flex", gap: "4px", alignItems: "center", flexWrap: "wrap" } },
+            control("\u2212", () => {
+              setFit(false);
+              setZoom(Math.max(0.5, Math.round((Number(zoom) - 0.25) * 100) / 100));
+            }, "\u7F29\u5C0F"),
+            h("span", { style: { fontSize: "11px", color: TOKEN.dim, minWidth: "34px", textAlign: "center" } }, fit ? "fit" : String(Math.round(Number(zoom) * 100)) + "%"),
+            control("+", () => {
+              setFit(false);
+              setZoom(Math.min(3, Math.round((Number(zoom) + 0.25) * 100) / 100));
+            }, "\u653E\u5927"),
+            control("100%", () => {
+              setFit(false);
+              setZoom(1);
+            }, "\u5B9E\u9645\u5927\u5C0F"),
+            control(fit ? t("fitOn") : t("fitOff"), () => setFit(!fit), t("fitOff")),
+            folded.length === 0 ? null : control(t("unfold") + " " + String(folded.length), () => setFolded([]), "\u5C55\u5F00\u6240\u6709\u5206\u7EC4"),
+            h(
+              "select",
+              {
+                value: scheme,
+                title: t("scheme"),
+                style: { marginLeft: "auto", fontSize: "11px", padding: "1px 4px", borderRadius: "6px", border: "1px solid " + TOKEN.border, background: "transparent", color: TOKEN.text },
+                onChange: (event) => setScheme(String(event?.target?.value ?? "default"))
+              },
+              ...schemeNames().map((name) => h("option", { value: name, selected: name === scheme }, name))
+            )
+          ),
+          h(
+            "div",
+            { style: { display: "flex", gap: "6px", alignItems: "center" } },
+            control(annotate ? t("noteOn") : t("note"), () => {
+              setAnnotate(!annotate);
+              setStatus("");
+              if (annotate) {
+                setPicked(null);
+                setNote("");
+              }
+            }, t("noteHint")),
+            h("span", { style: { fontSize: "11px", color: TOKEN.dim } }, annotate ? picked === null ? t("noteHint") : t("node") + " " + picked.id : t("noteHint"))
           )
         );
         return h(
@@ -3402,21 +5298,76 @@ window.__ModuleLoader__.load({
           { style: { display: "flex", flexDirection: "column", gap: "4px", height: "100%", boxSizing: "border-box", padding: "8px" } },
           textarea,
           controls,
-          // The drawing takes the rest of the pane and scrolls inside it, so an expanded tab uses its room.
+          // The drawing takes the rest of the pane and scrolls inside it; the annotation surface floats above it,
+          // so the picture keeps its size while the reader writes about it.
           h(
             "div",
             {
-              style: { flex: "1 1 auto", minHeight: "0", overflow: "auto" },
-              // A boundary carries its id in the markup, so one listener on the container is enough: no per-rect
-              // handler, and the handling survives a re-render that replaced the whole SVG.
-              onClick: (event) => {
-                const hit = event?.target?.closest?.("[data-group-id]");
-                const id = hit?.getAttribute?.("data-group-id");
-                if (typeof id !== "string" || id === "") return;
-                setFolded(folded.includes(id) ? folded.filter((entry) => entry !== id) : [...folded, id]);
-              }
+              style: { position: "relative", flex: "1 1 auto", minHeight: "0", display: "flex", flexDirection: "column", gap: "2px" }
             },
-            drawn
+            h(
+              "div",
+              {
+                style: { flex: "1 1 auto", minHeight: "0", overflow: "auto" },
+                // A boundary carries its id in the markup, so one listener on the container is enough: no per-rect
+                // handler, and the handling survives a re-render that replaced the whole SVG.
+                onClick: (event) => {
+                  if (annotate) {
+                    const node = event?.target?.closest?.("[data-node-id]");
+                    const marked = node?.getAttribute?.("data-node-id");
+                    if (typeof marked === "string" && marked !== "") {
+                      const pointer = event;
+                      const frame = pointer.currentTarget?.getBoundingClientRect?.();
+                      if (frame !== void 0 && typeof pointer.clientX === "number" && typeof pointer.clientY === "number") {
+                        setAnchor({
+                          left: Math.max(4, Math.min(pointer.clientX - frame.left + 12, frame.width - 270)),
+                          top: Math.max(4, Math.min(pointer.clientY - frame.top + 12, Math.max(4, frame.height - 160)))
+                        });
+                      } else {
+                        setAnchor({ left: 10, top: 10 });
+                      }
+                      setPicked({ id: marked });
+                      setStatus("");
+                      return;
+                    }
+                    if (note.trim() === "") {
+                      setPicked(null);
+                      setAnchor(void 0);
+                    }
+                    return;
+                  }
+                  const hit = event?.target?.closest?.("[data-group-id]");
+                  const id = hit?.getAttribute?.("data-group-id");
+                  if (typeof id !== "string" || id === "") return;
+                  setFolded(folded.includes(id) ? folded.filter((entry) => entry !== id) : [...folded, id]);
+                }
+              },
+              drawn
+            ),
+            annotate ? annotationPanel(
+              h,
+              { picked, note, pending, status, anchor: anchor2, open },
+              {
+                onNote: setNote,
+                onAdd: () => {
+                  addDraft();
+                },
+                onAddAndSend: addAndSend,
+                onSend: () => sendAll(pending, true),
+                onClear: () => {
+                  setPending([]);
+                  setStatus("");
+                },
+                onCancel: () => {
+                  setPicked(null);
+                  setNote("");
+                  setStatus("");
+                },
+                onToggle: () => setOpen(!open),
+                onRemove: (index) => setPending(pending.filter((_, at) => at !== index))
+              },
+              { document }
+            ) : null
           )
         );
       };
@@ -3480,10 +5431,13 @@ window.__ModuleLoader__.load({
         inject: ["slots"],
         mount: (ctx, options = {}) => mountWhiteboard(React, ctx, options),
         apply(ctx) {
+          services = ctx;
+          void startTranscriptDecoration;
           for (const name of TOOL_NAMES) {
             ctx.slots.inject("tool.call.toolview", () => ctx.slots.register({ name: "tool.call.toolview", key: name }, viewFor(React)));
           }
           ctx.slots.inject("sidebar.right.pane.tab", () => mountWhiteboard(React, ctx));
+          void dockSlotView;
         }
       };
     }