dsh-model-everything 0.5.2 → 0.6.1

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
     });
@@ -1726,12 +1730,12 @@ window.__ModuleLoader__.load({
     }
     
     // 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
@@ -2081,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,
@@ -3497,7 +3502,7 @@ window.__ModuleLoader__.load({
       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) {
@@ -3568,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 + '" />';
@@ -3681,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;
@@ -3703,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);
@@ -3744,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(
@@ -3786,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
           )
         );
       };
@@ -3864,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;
         }
       };
     }