@locode2/harness 0.1.0-preview.1

package/bundled-plugins/fast-frontend/runtimes/antd-admin/src/inspector/index.ts

@@ -0,0 +1,612 @@
+const VERSION = 1 as const;
+const SOURCE_ATTRIBUTE = "data-harness-source";
+const READY = "harness.preview-annotations.ready";
+const CANDIDATES = "harness.preview-annotations.candidates";
+const CANDIDATES_RESULT = "harness.preview-annotations.candidates-result";
+const SYNC = "harness.preview-annotations.sync";
+const MODE = "harness.preview-annotations.mode";
+const MODIFIER = "harness.preview-annotations.modifier";
+const CANCEL = "harness.preview-annotations.cancel";
+const STATE = "harness.preview-annotations.state";
+const SUBMIT = "harness.preview-annotations.submit";
+const MODE_CHANGED = "harness.preview-annotations.mode-changed";
+const MAX_ANNOTATIONS = 8;
+const MAX_GESTURE_POINTS = 128;
+
+interface Point { x: number; y: number }
+interface LocalCandidate {
+  token: string;
+  elementType: string;
+  visibleText: string;
+  tokenIndex: number;
+  score: number;
+}
+interface ResolvedCandidate extends LocalCandidate {
+  path: string;
+  startLine: number;
+  endLine: number;
+}
+interface Annotation extends Omit<ResolvedCandidate, "score"> {
+  id: string;
+  requirement: string;
+  previewRevision?: number;
+  stale?: boolean;
+}
+
+const channelId = new URL(window.location.href).searchParams.get("__harness_runtime_storage_channel");
+if (!channelId || channelId.length > 128 || window.parent === window) {
+  // Static exports and standalone Runtime pages do not install the inspector.
+} else {
+  installInspector(channelId);
+}
+
+function installInspector(channel: string): void {
+  let locked = false;
+  let modifierDown = false;
+  let points: Point[] = [];
+  let drawing = false;
+  let resolving = false;
+  let requestSequence = 0;
+  let pendingCandidates: LocalCandidate[] = [];
+  let annotations: Annotation[] = [];
+  let editing: Annotation | undefined;
+
+  const host = document.createElement("div");
+  host.id = "harness-visual-inspector";
+  host.style.cssText = "position:fixed;inset:0;z-index:2147483647;pointer-events:none;";
+  document.documentElement.append(host);
+  const shadow = host.attachShadow({ mode: "open" });
+  shadow.innerHTML = `
+    <style>
+      :host{all:initial;--violet:#6557f5;--violet-dark:#5145e5;--ink:#182033;--muted:#68738a}*{box-sizing:border-box}
+      button,select,textarea{font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
+      button{border:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}
+      #capture{position:fixed;inset:0;z-index:1;pointer-events:none;cursor:crosshair;touch-action:none}
+      #capture.active{pointer-events:auto}#capture.resolving{cursor:progress}
+      #capture svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
+      .stroke{fill:none;stroke:var(--violet);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 7px rgba(79,70,229,.3))}.stroke.closed{fill:rgba(101,87,245,.07)}
+      .stroke.pending{animation:stroke-pulse .8s ease-in-out infinite alternate}@keyframes stroke-pulse{to{stroke-opacity:.5;filter:drop-shadow(0 4px 11px rgba(79,70,229,.48))}}
+      #boxes{position:fixed;inset:0;z-index:2;pointer-events:none}
+      .box{position:absolute;pointer-events:none}
+      .ring{position:absolute;inset:-6px;border:3px solid rgba(101,87,245,.9);background:rgba(101,87,245,.055);box-shadow:0 0 0 1px rgba(129,117,255,.24);filter:drop-shadow(0 3px 6px rgba(79,70,229,.24))}
+      .pin,.note-badge{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:999px;background:linear-gradient(145deg,#7769ff,#5145e5);color:#fff;font:700 12px/1 system-ui;box-shadow:0 4px 12px rgba(70,57,210,.34)}
+      .pin{position:absolute;left:-13px;top:-15px}.box.stale .ring{border-color:#f59e0b;background:rgba(245,158,11,.07)}.box.stale .pin{background:linear-gradient(145deg,#fbbf24,#d97706)}
+      .note{position:absolute;z-index:3;width:min(280px,calc(100vw - 24px));min-height:42px;padding:8px 10px;border:1px solid rgba(255,255,255,.86);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(247,248,255,.72));color:var(--ink);box-shadow:0 12px 34px rgba(31,38,70,.18),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(145%);pointer-events:auto;outline:none;transition:background .16s ease,box-shadow .16s ease,transform .16s ease}
+      .note:hover,.note:focus-within{z-index:4;background:rgba(255,255,255,.94);box-shadow:0 18px 48px rgba(31,38,70,.24),inset 0 1px 0 #fff;transform:translateY(-1px)}
+      .note-summary{display:flex;min-width:0;align-items:center;gap:9px}.note-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px/1.35 system-ui}.note-stale{display:none;color:#b45309;font:600 11px/1 system-ui}.note.stale .note-stale{display:inline}
+      .note-detail{display:none;margin:8px 2px 0 33px;padding-top:8px;border-top:1px solid rgba(148,163,184,.28)}.note:hover .note-detail,.note:focus-within .note-detail{display:block}
+      .note-target{overflow:hidden;color:var(--muted);font:11px/1.4 system-ui;text-overflow:ellipsis;white-space:nowrap}.note-actions{display:flex;gap:6px;margin-top:7px}.note-actions button{display:inline-flex;align-items:center;gap:4px;padding:6px 8px;border-radius:8px;background:rgba(99,102,241,.09);color:#4f46e5;font:600 11px/1 system-ui}.note-actions .danger{background:rgba(244,63,94,.08);color:#be123c}
+      #toast{position:fixed;top:16px;left:50%;z-index:7;transform:translateX(-50%);display:none;max-width:min(480px,calc(100vw - 32px));padding:10px 14px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(17,24,39,.88);color:#fff;font:13px/1.5 system-ui;box-shadow:0 12px 36px rgba(0,0,0,.28);backdrop-filter:blur(16px)}
+      #editor{position:fixed;z-index:6;display:none;width:min(390px,calc(100vw - 32px));padding:16px;border:1px solid rgba(255,255,255,.9);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(247,248,255,.78));color:var(--ink);box-shadow:0 24px 64px rgba(31,38,70,.25),inset 0 1px 0 #fff;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(22px) saturate(150%)}
+      #editor-close{position:absolute;top:10px;right:10px;width:28px;height:28px;padding:0;border-radius:9px;background:transparent;color:#7c879b;font:500 20px/1 system-ui}#editor-close:hover{background:rgba(100,116,139,.1);color:#334155}
+      .title{max-width:calc(100% - 34px);margin:0 0 3px;font-size:14px;font-weight:700}.meta{margin-bottom:11px;color:#7c879b;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+      select,textarea{width:100%;border:1px solid rgba(148,163,184,.48);border-radius:11px;background:rgba(255,255,255,.68);color:var(--ink);font:13px/1.5 system-ui;outline:none}select{height:36px;padding:0 10px;margin-bottom:9px}textarea{min-height:84px;padding:10px 11px;resize:vertical}select:focus,textarea:focus{border-color:#7568ff;box-shadow:0 0 0 3px rgba(101,87,245,.13);background:rgba(255,255,255,.9)}
+      .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:11px}.actions button{border-radius:9px;padding:8px 12px;font:600 12px/1 system-ui}.ghost{background:rgba(100,116,139,.09);color:#536078}.primary{background:linear-gradient(145deg,#6d5df6,#5145e5);color:#fff;box-shadow:0 5px 14px rgba(79,70,229,.25)}
+      #drawbar,#batch{position:fixed;left:50%;z-index:5;transform:translateX(-50%);display:none;align-items:center;gap:10px;max-width:calc(100vw - 32px);border:1px solid rgba(255,255,255,.86);background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(246,247,255,.72));color:var(--ink);box-shadow:0 16px 46px rgba(31,38,70,.22),inset 0 1px 0 #fff;font:12px/1 system-ui;pointer-events:auto;backdrop-filter:blur(20px) saturate(150%)}
+      #drawbar{bottom:18px;padding:9px 10px;border-radius:17px}.draw-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:rgba(101,87,245,.11);color:var(--violet);font:700 20px/1 system-ui}.draw-title{color:var(--violet-dark);font-weight:700;white-space:nowrap}.draw-hint{padding:0 8px;border-left:1px solid rgba(148,163,184,.28);color:#69748a;white-space:nowrap}.draw-actions{display:flex;gap:6px;margin-left:4px}.draw-actions button,#batch button{border-radius:9px;padding:8px 10px;background:rgba(100,116,139,.09);color:#536078;font:600 12px/1 system-ui}.draw-actions .done,#batch .send{background:linear-gradient(145deg,#6d5df6,#5145e5);color:#fff}
+      #batch{bottom:18px;padding:9px 10px;border-radius:15px}.count{padding:0 5px;color:#59657a;white-space:nowrap}.batch-spacer{width:1px;height:20px;background:rgba(148,163,184,.3)}
+      @media(max-width:640px){.draw-hint{display:none}.note{width:min(240px,calc(100vw - 24px))}#drawbar{gap:6px}.draw-actions button{padding:8px}.draw-title{display:none}}
+    </style>
+    <div id="capture"><svg aria-hidden="true"><path class="stroke" d=""/></svg></div>
+    <div id="boxes"></div><div id="toast" role="status"></div>
+    <div id="editor" role="dialog" aria-label="填写圈选修改要求">
+      <button id="editor-close" aria-label="关闭标注编辑器">×</button>
+      <div class="title" id="element"></div><div class="meta" id="location"></div>
+      <select id="candidate" aria-label="切换候选元素"></select>
+      <textarea id="requirement" placeholder="描述要怎样修改…（Ctrl/⌘+Enter 保存）"></textarea>
+      <div class="actions"><button class="ghost" id="cancel">取消</button><button class="primary" id="save">保存标注</button></div>
+    </div>
+    <div id="drawbar" role="status"><span class="draw-icon">◯</span><strong class="draw-title">圈选</strong><span class="draw-hint">按住鼠标直接画圈，松开即可标注</span><div class="draw-actions"><button id="undo">↶ 撤销</button><button class="done" id="finish">✓ 完成</button></div></div>
+    <div id="batch"><span class="count"></span><span class="batch-spacer"></span><button id="clear">清空</button><button class="send" id="submit">送到 AI 助手</button></div>`;
+  const capture = required<HTMLElement>(shadow, "#capture");
+  const stroke = required<SVGPathElement>(shadow, ".stroke");
+  const boxes = required<HTMLElement>(shadow, "#boxes");
+  const toast = required<HTMLElement>(shadow, "#toast");
+  const editor = required<HTMLElement>(shadow, "#editor");
+  const location = required<HTMLElement>(shadow, "#location");
+  const element = required<HTMLElement>(shadow, "#element");
+  const candidate = required<HTMLSelectElement>(shadow, "#candidate");
+  const requirement = required<HTMLTextAreaElement>(shadow, "#requirement");
+  const drawbar = required<HTMLElement>(shadow, "#drawbar");
+  const batch = required<HTMLElement>(shadow, "#batch");
+  const undo = required<HTMLButtonElement>(shadow, "#undo");
+  const submit = required<HTMLButtonElement>(shadow, "#submit");
+  const clearStroke = () => {
+    stroke.setAttribute("d", "");
+    stroke.classList.remove("closed");
+  };
+
+  const post = (message: Record<string, unknown>) => window.parent.postMessage({ ...message, version: VERSION, channelId: channel }, "*");
+  const setCapture = () => {
+    capture.classList.toggle("active", !editing && !resolving && (locked || modifierDown));
+    capture.classList.toggle("resolving", resolving);
+    stroke.classList.toggle("pending", resolving);
+  };
+  const announceMode = () => post({ type: MODE_CHANGED, locked, active: locked || modifierDown });
+  const showToast = (message: string) => {
+    toast.textContent = message;
+    toast.style.display = "block";
+    window.setTimeout(() => { if (toast.textContent === message) toast.style.display = "none"; }, 2_400);
+  };
+  const sourceElements = (token: string): Element[] => [...document.querySelectorAll(`[${SOURCE_ATTRIBUTE}]`)]
+    .filter((entry) => entry.getAttribute(SOURCE_ATTRIBUTE) === token);
+  const render = () => {
+    boxes.replaceChildren();
+    annotations.forEach((annotation, index) => {
+      const target = sourceElements(annotation.token)[annotation.tokenIndex];
+      if (!target) return;
+      const rect = target.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return;
+      const box = document.createElement("div");
+      box.className = `box${annotation.stale ? " stale" : ""}`;
+      box.style.cssText = `left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;height:${rect.height}px`;
+      const ring = document.createElement("span");
+      ring.className = "ring";
+      ring.style.borderRadius = targetBorderRadius(target);
+      const num = document.createElement("span");
+      num.className = "pin";
+      num.textContent = String(index + 1);
+      box.append(ring, num);
+
+      const noteWidth = Math.min(280, Math.max(180, window.innerWidth - 24));
+      const noteHeight = 126;
+      const gap = 16;
+      let noteLeft: number;
+      let noteTop = Math.max(12, Math.min(rect.top + rect.height / 2 - 21, window.innerHeight - noteHeight - 12));
+      if (rect.right + gap + noteWidth <= window.innerWidth - 12) noteLeft = rect.right + gap;
+      else if (rect.left - gap - noteWidth >= 12) noteLeft = rect.left - gap - noteWidth;
+      else {
+        noteLeft = Math.max(12, Math.min(rect.left, window.innerWidth - noteWidth - 12));
+        noteTop = rect.bottom + gap + noteHeight <= window.innerHeight
+          ? rect.bottom + gap
+          : Math.max(12, rect.top - noteHeight - gap);
+      }
+      const note = document.createElement("div");
+      note.className = `note${annotation.stale ? " stale" : ""}`;
+      note.tabIndex = 0;
+      note.setAttribute("role", "note");
+      note.setAttribute("aria-label", `标注 ${index + 1}：${annotation.requirement}`);
+      note.style.cssText = `left:${noteLeft}px;top:${noteTop}px;width:${noteWidth}px`;
+      const summary = document.createElement("div");
+      summary.className = "note-summary";
+      const badge = document.createElement("span");
+      badge.className = "note-badge";
+      badge.textContent = String(index + 1);
+      const text = document.createElement("span");
+      text.className = "note-text";
+      text.textContent = annotation.requirement;
+      const stale = document.createElement("span");
+      stale.className = "note-stale";
+      stale.textContent = "需重新圈选";
+      summary.append(badge, text, stale);
+      const detail = document.createElement("div");
+      detail.className = "note-detail";
+      const targetMeta = document.createElement("div");
+      targetMeta.className = "note-target";
+      targetMeta.textContent = `${annotation.elementType}${annotation.visibleText ? ` · ${annotation.visibleText}` : ""}`;
+      const actions = document.createElement("div");
+      actions.className = "note-actions";
+      const edit = document.createElement("button");
+      edit.type = "button";
+      edit.textContent = "✎ 编辑";
+      edit.addEventListener("click", () => openEditor(
+        [{ ...annotation, score: 0 }],
+        Math.max(16, Math.min(rect.right + 12, window.innerWidth - 406)),
+        Math.max(16, rect.bottom + 12),
+        annotation,
+      ));
+      const remove = document.createElement("button");
+      remove.type = "button";
+      remove.className = "danger";
+      remove.textContent = "⌫ 删除";
+      remove.addEventListener("click", () => {
+        annotations = annotations.filter((entry) => entry.id !== annotation.id);
+        syncState();
+      });
+      actions.append(edit, remove);
+      detail.append(targetMeta, actions);
+      note.append(summary, detail);
+      boxes.append(box, note);
+    });
+    const active = locked || modifierDown;
+    drawbar.style.display = active && !editing ? "flex" : "none";
+    batch.style.display = annotations.length > 0 && !editing && !active ? "flex" : "none";
+    required<HTMLElement>(shadow, ".draw-hint").textContent = resolving
+      ? "正在定位元素…"
+      : "按住鼠标直接画圈，松开即可标注";
+    undo.disabled = annotations.length === 0;
+    submit.disabled = annotations.some((annotation) => annotation.stale);
+    submit.title = submit.disabled ? "存在需重新圈选的失效标注" : "追加到 AI 助手草稿";
+    required<HTMLElement>(shadow, "#batch .count").textContent = `已标注 ${annotations.length}/${MAX_ANNOTATIONS}`;
+  };
+  const syncState = () => {
+    render();
+    post({ type: STATE, annotations });
+  };
+  const closeEditor = () => {
+    editing = undefined;
+    pendingCandidates = [];
+    editor.style.display = "none";
+    setCapture();
+    render();
+  };
+  const selectCandidate = (index: number) => {
+    const selected = pendingCandidates[index] as ResolvedCandidate | undefined;
+    if (!selected) return;
+    candidate.value = String(index);
+    location.textContent = `${selected.path}:${selected.startLine}-${selected.endLine}`;
+    element.textContent = `${selected.elementType}${selected.visibleText ? ` · “${selected.visibleText}”` : ""}`;
+  };
+  const openEditor = (resolved: ResolvedCandidate[], x: number, y: number, current?: Annotation) => {
+    pendingCandidates = resolved;
+    editing = current ?? ({ ...resolved[0]!, id: crypto.randomUUID(), requirement: "" });
+    candidate.replaceChildren(...resolved.map((entry, index) => {
+      const option = document.createElement("option");
+      option.value = String(index);
+      option.textContent = `${index === 0 ? "推荐 · " : ""}${entry.elementType}${entry.visibleText ? ` · ${entry.visibleText}` : ""}`;
+      return option;
+    }));
+    candidate.style.display = resolved.length > 1 ? "block" : "none";
+    const selectedIndex = current ? Math.max(0, resolved.findIndex((entry) => entry.token === current.token && entry.tokenIndex === current.tokenIndex)) : 0;
+    selectCandidate(selectedIndex);
+    requirement.value = current?.requirement ?? "";
+    editor.style.display = "block";
+    const width = Math.min(390, window.innerWidth - 32);
+    editor.style.left = `${Math.max(16, Math.min(x + 12, window.innerWidth - width - 16))}px`;
+    editor.style.top = `${Math.max(16, Math.min(y + 12, window.innerHeight - 250))}px`;
+    setCapture();
+    render();
+    requirement.focus();
+  };
+
+  const finishDrawing = () => {
+    drawing = false;
+    if (annotations.length >= MAX_ANNOTATIONS) {
+      clearStroke();
+      showToast(`每批最多 ${MAX_ANNOTATIONS} 条标注，请先提交或删除。`);
+      return;
+    }
+    const trail = simplifyGesture(points);
+    const gesture = drawingPolygon(trail);
+    stroke.setAttribute("d", pathFor(gesture, true));
+    stroke.classList.add("closed");
+    const candidates = rankCandidates(gesture, capture, trail);
+    if (candidates.length === 0) {
+      clearStroke();
+      showToast("该区域暂不可圈改，请圈选业务 JSX 渲染的元素。");
+      return;
+    }
+    pendingCandidates = candidates;
+    const requestId = `${Date.now().toString(36)}-${++requestSequence}`;
+    const anchor = points[points.length - 1] ?? gesture[gesture.length - 1]!;
+    pendingRequests.set(requestId, { candidates, anchor });
+    resolving = true;
+    setCapture();
+    render();
+    post({ type: CANDIDATES, requestId, candidates });
+  };
+  const pendingRequests = new Map<string, { candidates: LocalCandidate[]; anchor: Point }>();
+
+  capture.addEventListener("pointerdown", (event) => {
+    if (editing || !(locked || modifierDown) || event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    drawing = true;
+    resolving = false;
+    points = [{ x: event.clientX, y: event.clientY }];
+    clearStroke();
+    stroke.setAttribute("d", pathFor(points));
+    try { capture.setPointerCapture(event.pointerId); } catch { /* Synthetic accessibility/test input may not own the pointer. */ }
+  }, true);
+  capture.addEventListener("pointermove", (event) => {
+    if (!drawing) return;
+    event.preventDefault();
+    appendPointerSamples(points, event);
+    stroke.setAttribute("d", pathFor(points));
+  }, true);
+  capture.addEventListener("pointerup", (event) => {
+    if (!drawing) return;
+    event.preventDefault();
+    event.stopPropagation();
+    appendPointerSamples(points, event);
+    finishDrawing();
+  }, true);
+  capture.addEventListener("pointercancel", () => {
+    drawing = false;
+    resolving = false;
+    points = [];
+    clearStroke();
+  }, true);
+  capture.addEventListener("click", (event) => { if (locked || modifierDown) { event.preventDefault(); event.stopPropagation(); } }, true);
+
+  const cancelCurrent = () => {
+    if (drawing || resolving || pendingRequests.size > 0) {
+      drawing = false;
+      resolving = false;
+      points = [];
+      pendingRequests.clear();
+      clearStroke();
+      setCapture();
+      render();
+    } else if (editing) closeEditor();
+    else if (locked) {
+      locked = false;
+      setCapture();
+      render();
+      announceMode();
+    }
+  };
+
+  window.addEventListener("keydown", (event) => {
+    if (event.key === "Control" || event.key === "Meta") {
+      modifierDown = true;
+      setCapture();
+      render();
+      announceMode();
+    }
+    if (event.key === "Escape") cancelCurrent();
+  }, true);
+  window.addEventListener("keyup", (event) => {
+    if (event.key === "Control" || event.key === "Meta") {
+      modifierDown = false;
+      setCapture();
+      render();
+      announceMode();
+    }
+  }, true);
+  window.addEventListener("blur", () => {
+    modifierDown = false;
+    drawing = false;
+    resolving = false;
+    points = [];
+    clearStroke();
+    setCapture();
+    render();
+    announceMode();
+  });
+  window.addEventListener("scroll", render, true);
+  window.addEventListener("resize", render);
+
+  candidate.addEventListener("change", () => selectCandidate(Number(candidate.value)));
+  required<HTMLElement>(shadow, "#cancel").addEventListener("click", closeEditor);
+  required<HTMLElement>(shadow, "#editor-close").addEventListener("click", closeEditor);
+  const save = () => {
+    const text = requirement.value.trim();
+    const selected = pendingCandidates[Number(candidate.value)] as ResolvedCandidate | undefined;
+    if (!text || !selected || !editing) {
+      showToast("请先填写修改要求。");
+      requirement.focus();
+      return;
+    }
+    const next: Annotation = { ...selected, id: editing.id, requirement: text };
+    const prior = annotations.findIndex((entry) => entry.id === next.id);
+    annotations = prior >= 0 ? annotations.map((entry, index) => index === prior ? next : entry) : [...annotations, next];
+    closeEditor();
+    syncState();
+  };
+  required<HTMLElement>(shadow, "#save").addEventListener("click", save);
+  requirement.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) { event.preventDefault(); save(); }
+    if (event.key === "Escape") { event.preventDefault(); closeEditor(); }
+  });
+  required<HTMLElement>(shadow, "#clear").addEventListener("click", () => { annotations = []; syncState(); });
+  undo.addEventListener("click", () => {
+    if (annotations.length === 0) return;
+    annotations = annotations.slice(0, -1);
+    syncState();
+  });
+  required<HTMLElement>(shadow, "#finish").addEventListener("click", () => {
+    locked = false;
+    modifierDown = false;
+    resolving = false;
+    points = [];
+    pendingRequests.clear();
+    clearStroke();
+    setCapture();
+    render();
+    announceMode();
+  });
+  submit.addEventListener("click", () => post({ type: SUBMIT }));
+  window.addEventListener("message", (event: MessageEvent<unknown>) => {
+    if (event.source !== window.parent || !record(event.data) || event.data.version !== VERSION || event.data.channelId !== channel) return;
+    if (event.data.type === MODE && typeof event.data.locked === "boolean") {
+      locked = event.data.locked;
+      setCapture();
+      render();
+      announceMode();
+    } else if (event.data.type === MODIFIER && typeof event.data.active === "boolean") {
+      modifierDown = event.data.active;
+      setCapture();
+      render();
+      announceMode();
+    } else if (event.data.type === CANCEL) {
+      cancelCurrent();
+    } else if (event.data.type === SYNC && Array.isArray(event.data.annotations)) {
+      annotations = event.data.annotations.flatMap(parseAnnotation).slice(0, MAX_ANNOTATIONS);
+      render();
+    } else if (event.data.type === CANDIDATES_RESULT && typeof event.data.requestId === "string") {
+      const pending = pendingRequests.get(event.data.requestId);
+      pendingRequests.delete(event.data.requestId);
+      if (!pending) return;
+      resolving = false;
+      points = [];
+      clearStroke();
+      setCapture();
+      render();
+      if (typeof event.data.error === "string") { showToast(event.data.error); return; }
+      if (!Array.isArray(event.data.candidates)) return;
+      const resolved = event.data.candidates.flatMap(parseResolvedCandidate);
+      if (resolved.length === 0) { showToast("该区域暂不可圈改，请换一个业务元素。 "); return; }
+      openEditor(resolved, pending.anchor.x, pending.anchor.y);
+    }
+  });
+  post({ type: READY });
+}
+
+function required<T extends Element>(root: ShadowRoot, selector: string): T {
+  const value = root.querySelector<T>(selector);
+  if (!value) throw new Error(`Missing inspector element: ${selector}`);
+  return value;
+}
+
+function record(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function parseResolvedCandidate(value: unknown): ResolvedCandidate[] {
+  if (!record(value) || typeof value.token !== "string" || typeof value.path !== "string" ||
+    typeof value.elementType !== "string" || typeof value.visibleText !== "string" ||
+    !Number.isSafeInteger(value.tokenIndex) || !Number.isSafeInteger(value.startLine) ||
+    !Number.isSafeInteger(value.endLine)) return [];
+  return [value as unknown as ResolvedCandidate];
+}
+
+function parseAnnotation(value: unknown): Annotation[] {
+  const parsed = parseResolvedCandidate(value)[0];
+  if (!parsed || !record(value) || typeof value.id !== "string" || typeof value.requirement !== "string" || !value.requirement.trim()) return [];
+  return [{
+    ...parsed,
+    id: value.id,
+    requirement: value.requirement,
+    ...(Number.isSafeInteger(value.previewRevision) ? { previewRevision: value.previewRevision as number } : {}),
+    ...(value.stale === true ? { stale: true } : {}),
+  }];
+}
+
+function pathFor(points: Point[], closed = false): string {
+  return points.length === 0 ? "" : `M ${points.map((point) => `${point.x} ${point.y}`).join(" L ")}${closed ? " Z" : ""}`;
+}
+
+function appendPointerSamples(points: Point[], event: PointerEvent): void {
+  const samples = typeof event.getCoalescedEvents === "function" ? event.getCoalescedEvents() : [event];
+  for (const sample of samples.length > 0 ? samples : [event]) {
+    const next = { x: sample.clientX, y: sample.clientY };
+    const prior = points[points.length - 1];
+    if (!prior || Math.hypot(next.x - prior.x, next.y - prior.y) >= 2) points.push(next);
+  }
+}
+
+function simplifyGesture(points: Point[], maximum = MAX_GESTURE_POINTS): Point[] {
+  if (points.length <= maximum) return [...points];
+  return Array.from({ length: maximum }, (_, index) => points[Math.round(index * (points.length - 1) / (maximum - 1))]!);
+}
+
+function targetBorderRadius(target: Element): string {
+  const radius = window.getComputedStyle(target).borderRadius.trim();
+  return radius && radius !== "0px" ? radius : "8px";
+}
+
+function drawingPolygon(points: Point[]): Point[] {
+  if (points.length >= 3) {
+    const xs = points.map((point) => point.x);
+    const ys = points.map((point) => point.y);
+    if (Math.max(...xs) - Math.min(...xs) >= 4 && Math.max(...ys) - Math.min(...ys) >= 4) return points;
+  }
+  const center = points[points.length - 1] ?? points[0] ?? { x: 0, y: 0 };
+  return Array.from({ length: 16 }, (_, index) => {
+    const angle = index / 16 * Math.PI * 2;
+    return { x: center.x + Math.cos(angle) * 12, y: center.y + Math.sin(angle) * 12 };
+  });
+}
+
+function pointInPolygon(point: Point, polygon: Point[]): boolean {
+  let inside = false;
+  for (let left = 0, right = polygon.length - 1; left < polygon.length; right = left++) {
+    const a = polygon[left]!;
+    const b = polygon[right]!;
+    if ((a.y > point.y) !== (b.y > point.y) && point.x < ((b.x - a.x) * (point.y - a.y)) / (b.y - a.y) + a.x) inside = !inside;
+  }
+  return inside;
+}
+
+function rankCandidates(polygon: Point[], capture: HTMLElement, trail: Point[] = polygon): LocalCandidate[] {
+  const allPoints = [...polygon, ...trail];
+  const xs = allPoints.map((point) => point.x);
+  const ys = allPoints.map((point) => point.y);
+  const bounds = { left: Math.min(...xs), right: Math.max(...xs), top: Math.min(...ys), bottom: Math.max(...ys) };
+  if (bounds.right - bounds.left < 4 || bounds.bottom - bounds.top < 4) return [];
+  const scored = new Map<Element, number>();
+  const trailHits = new Map<Element, number>();
+  let sampledPoints = 0;
+  let trailSamples = 0;
+  capture.style.pointerEvents = "none";
+  try {
+    const xStep = Math.max(8, (bounds.right - bounds.left) / 12);
+    const yStep = Math.max(8, (bounds.bottom - bounds.top) / 12);
+    for (let y = bounds.top; y <= bounds.bottom; y += yStep) {
+      for (let x = bounds.left; x <= bounds.right; x += xStep) {
+        if (!pointInPolygon({ x, y }, polygon)) continue;
+        sampledPoints += 1;
+        const markedAtPoint = markedElementsAt(x, y);
+        for (const target of markedAtPoint) scored.set(target, (scored.get(target) ?? 0) + 1);
+      }
+    }
+    for (const point of simplifyGesture(trail, 64)) {
+      trailSamples += 1;
+      const markedAlongTrail = new Set<Element>();
+      for (const [offsetX, offsetY] of [[0, 0], [6, 0], [-6, 0], [0, 6], [0, -6]] as const) {
+        for (const target of markedElementsAt(point.x + offsetX, point.y + offsetY)) markedAlongTrail.add(target);
+      }
+      for (const target of markedAlongTrail) {
+        if (!scored.has(target)) scored.set(target, 0);
+        trailHits.set(target, (trailHits.get(target) ?? 0) + 1);
+      }
+    }
+  } finally {
+    capture.style.pointerEvents = "";
+  }
+  const center = { x: (bounds.left + bounds.right) / 2, y: (bounds.top + bounds.bottom) / 2 };
+  return [...scored].map(([target, hits]) => {
+    const token = target.getAttribute(SOURCE_ATTRIBUTE)!;
+    const rect = target.getBoundingClientRect();
+    const overlapWidth = Math.max(0, Math.min(bounds.right, rect.right) - Math.max(bounds.left, rect.left));
+    const overlapHeight = Math.max(0, Math.min(bounds.bottom, rect.bottom) - Math.max(bounds.top, rect.top));
+    const targetCoverage = Math.min(1, overlapWidth * overlapHeight / Math.max(1, rect.width * rect.height));
+    const lassoCoverage = hits / Math.max(1, sampledPoints);
+    const trailCoverage = (trailHits.get(target) ?? 0) / Math.max(1, trailSamples);
+    const interactive = target.matches("button,a,input,select,textarea,[role=button],[role=link]") ? 40 : 0;
+    const containsCenter = center.x >= rect.left && center.x <= rect.right && center.y >= rect.top && center.y <= rect.bottom ? 36 : 0;
+    const depth = Math.min(20, elementDepth(target));
+    const visibleText = normalizeVisibleText(target.getAttribute("aria-label") || target.textContent || "");
+    const tokenIndex = sourceElementsForRank(token).indexOf(target);
+    const score = targetCoverage * 140 + lassoCoverage * 90 + trailCoverage * 120 + interactive + containsCenter + depth;
+    return { token, elementType: elementType(target), visibleText, tokenIndex: Math.max(0, tokenIndex), score };
+  }).sort((left, right) => right.score - left.score).slice(0, 5);
+}
+
+function markedElementsAt(x: number, y: number): Set<Element> {
+  const marked = new Set<Element>();
+  for (const hit of document.elementsFromPoint(x, y).slice(0, 8)) {
+    let current: Element | null = hit;
+    let inspected = 0;
+    while (current && inspected < 8) {
+      if (current.hasAttribute(SOURCE_ATTRIBUTE)) marked.add(current);
+      current = current.parentElement;
+      inspected += 1;
+    }
+  }
+  return marked;
+}
+
+function sourceElementsForRank(token: string): Element[] {
+  return [...document.querySelectorAll(`[${SOURCE_ATTRIBUTE}]`)].filter((entry) => entry.getAttribute(SOURCE_ATTRIBUTE) === token);
+}
+
+function normalizeVisibleText(value: string): string {
+  return value
+    .replace(/\s+/gu, " ")
+    .trim()
+    .replace(/([\p{Script=Han}]) (?=[\p{Script=Han}])/gu, "$1")
+    .slice(0, 80);
+}
+
+function elementDepth(element: Element): number {
+  let depth = 0;
+  for (let current: Element | null = element; current; current = current.parentElement) depth += 1;
+  return depth;
+}
+
+function elementType(element: Element): string {
+  const role = element.getAttribute("role");
+  return role ? `${element.tagName.toLowerCase()}[role=${role}]` : element.tagName.toLowerCase();
+}

package/bundled-plugins/fast-frontend/runtimes/antd-admin/src/main.tsx

@@ -0,0 +1,17 @@
+import "antd/dist/reset.css";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import { RuntimeApp } from "./shell/RuntimeApp.js";
+import "./shell/runtime.css";
+
+const root = document.getElementById("root");
+if (root === null) {
+  throw new Error("Harness frontend runtime requires a #root element");
+}
+
+createRoot(root).render(
+  <StrictMode>
+    <RuntimeApp />
+  </StrictMode>,
+);