// ==UserScript==
// @name         4D拉框方向同步
// @namespace    swj.box-direction-sync
// @version      1.14.3
// @description  按平台P键规则，将当前框方向同步到前序、后续或指定帧；检查相邻帧方向变化。
// @author       swj
// @match        *://*/*
// @run-at       document-start
// @grant        none
// @noframes
// ==/UserScript==

/*
 * 安全边界
 * 1. “方向检查”只读取平台已经加载的帧和3D框，不修改、保存或提交任何标注。
 * 2. 同步只修改同一题包、同一目标ID、同一类别在目标帧已存在的3D框方向。
 * 3. 同步不会创建框、删除框，也不会修改位置、尺寸、类别、ID或属性。
 * 4. 当前帧方向由平台 P 键调整；同步时复刻 P 键的本地Z轴旋转与长宽交换。
 * 5. 页面判断依赖平台运行对象和帧数据，不绑定域名、IP或平台路径。
 */

(function () {
  'use strict';

  const PAGE = (() => {
    try {
      if (typeof unsafeWindow !== 'undefined') return unsafeWindow;
    } catch (_) {}
    try {
      return window;
    } catch (_) {
      return {};
    }
  })();

  const VERSION = '1.14.3';
  const HOST_ID = 'swj-box-direction-sync-host';
  const BOOT_KEY = '__SWJ_BOX_DIRECTION_SYNC_BOOTED__';
  const PANEL_POSITION_KEY = 'swj-box-direction-sync:panel-position:v1';
  const LAUNCHER_POSITION_KEY = 'swj-box-direction-sync:launcher-position:v1';
  const DEFAULT_OPPOSITE_DEGREES = 150;
  const ANGLE_EPSILON = 1e-6;

  /* ------------------------------------------------------------------------ */
  /* Pure helpers                                                             */
  /* ------------------------------------------------------------------------ */

  function clamp(value, min, max) {
    return Math.min(max, Math.max(min, value));
  }

  function numberOr(value, fallback = NaN) {
    const result = Number(value);
    return Number.isFinite(result) ? result : fallback;
  }

  function normalizeText(value) {
    return String(value == null ? '' : value).trim();
  }

  function sameIdentity(first, second) {
    return normalizeText(first) === normalizeText(second);
  }

  function cloneJson(value) {
    if (value == null) return value;
    if (typeof structuredClone === 'function') {
      try {
        return structuredClone(value);
      } catch (_) {}
    }
    return JSON.parse(JSON.stringify(value));
  }

  function normalizeDegrees(angle) {
    let value = numberOr(angle, 0) % 360;
    if (value > 180) value -= 360;
    if (value <= -180) value += 360;
    return value;
  }

  function normalizeRadians(angle) {
    return normalizeDegrees(numberOr(angle, 0) * 180 / Math.PI) * Math.PI / 180;
  }

  function snapRadiansToQuarter(angle) {
    const degrees = normalizeDegrees(numberOr(angle, 0) * 180 / Math.PI);
    return normalizeDegrees(Math.round(degrees / 90) * 90) * Math.PI / 180;
  }

  function angularDeltaDegrees(first, second) {
    return Math.abs(normalizeDegrees(first - second));
  }

  function isOppositeDirections(first, second, thresholdDegrees = DEFAULT_OPPOSITE_DEGREES) {
    const threshold = clamp(numberOr(thresholdDegrees, DEFAULT_OPPOSITE_DEGREES), 1, 180);
    return angularDeltaDegrees(first, second) + ANGLE_EPSILON >= threshold;
  }

  function parseFrameExpression(text, frameCount) {
    const max = Math.max(0, Math.floor(numberOr(frameCount, 0)));
    const source = normalizeText(text)
      .replace(/[，、；;～~—–]/g, ',')
      .replace(/\s+/g, ',');
    if (!source || max === 0) return [];

    const result = new Set();
    for (const rawPart of source.split(',')) {
      const part = rawPart.trim();
      if (!part) continue;
      const range = part.match(/^(\d+)\s*-\s*(\d+)$/);
      if (range) {
        let start = Number(range[1]);
        let end = Number(range[2]);
        if (start > end) [start, end] = [end, start];
        start = clamp(start, 1, max);
        end = clamp(end, 1, max);
        for (let value = start; value <= end; value += 1) result.add(value - 1);
        continue;
      }
      const single = Number(part);
      if (Number.isInteger(single) && single >= 1 && single <= max) {
        result.add(single - 1);
      }
    }
    return [...result].sort((a, b) => a - b);
  }

  function selectTargetIndices(frameCount, currentIndex, mode, expression = '') {
    const count = Math.max(0, Math.floor(numberOr(frameCount, 0)));
    const current = Math.floor(numberOr(currentIndex, -1));
    if (count === 0 || current < 0 || current >= count) return [];
    if (mode === 'previous') {
      return Array.from({ length: current }, (_, index) => index);
    }
    if (mode === 'next') {
      return Array.from({ length: count - current - 1 }, (_, index) => current + 1 + index);
    }
    if (mode === 'specified') {
      return parseFrameExpression(expression, count).filter((index) => index !== current);
    }
    return [];
  }

  function normalizeRotation(rotation) {
    if (!Array.isArray(rotation) || rotation.length < 3) return null;
    const result = rotation.slice(0, 3).map((value) => numberOr(value));
    return result.every(Number.isFinite) ? result : null;
  }

  function arrowYawRadians(box) {
    if (!box || typeof box !== 'object') return NaN;
    const rotation = normalizeRotation(box.rotation);
    return rotation ? rotation[2] : NaN;
  }

  function quaternionFromEulerXyz(rotation) {
    const [x, y, z] = normalizeRotation(rotation) || [0, 0, 0];
    const c1 = Math.cos(x / 2);
    const c2 = Math.cos(y / 2);
    const c3 = Math.cos(z / 2);
    const s1 = Math.sin(x / 2);
    const s2 = Math.sin(y / 2);
    const s3 = Math.sin(z / 2);
    return {
      x: s1 * c2 * c3 + c1 * s2 * s3,
      y: c1 * s2 * c3 - s1 * c2 * s3,
      z: c1 * c2 * s3 + s1 * s2 * c3,
      w: c1 * c2 * c3 - s1 * s2 * s3,
    };
  }

  function multiplyQuaternion(first, second) {
    return {
      x: first.w * second.x + first.x * second.w
        + first.y * second.z - first.z * second.y,
      y: first.w * second.y - first.x * second.z
        + first.y * second.w + first.z * second.x,
      z: first.w * second.z + first.x * second.y
        - first.y * second.x + first.z * second.w,
      w: first.w * second.w - first.x * second.x
        - first.y * second.y - first.z * second.z,
    };
  }

  function eulerXyzFromQuaternion(quaternion) {
    const { x: qx, y: qy, z: qz, w: qw } = quaternion;
    return [
      Math.atan2(2 * (qw * qx - qy * qz), 1 - 2 * (qx * qx + qy * qy)),
      Math.asin(clamp(2 * (qw * qy + qz * qx), -1, 1)),
      Math.atan2(2 * (qw * qz - qx * qy), 1 - 2 * (qy * qy + qz * qz)),
    ];
  }

  function rotateRotationAboutLocalZ(rotation, deltaDegrees) {
    const normalized = normalizeRotation(rotation);
    if (!normalized) return null;
    const half = deltaDegrees * Math.PI / 360;
    return eulerXyzFromQuaternion(multiplyQuaternion(
      quaternionFromEulerXyz(normalized),
      { x: 0, y: 0, z: Math.sin(half), w: Math.cos(half) },
    ));
  }

  function rotateMarkLikePlatformP(mark, quarterSteps) {
    if (!isVolumeBox(mark) || !Number.isInteger(quarterSteps)) return null;
    const rotation = normalizeRotation(mark.rotation);
    const scale = mark.scale.map((value) => Math.abs(numberOr(value, 0)));
    if (!rotation || scale.length < 3) return null;
    const nextRotation = rotateRotationAboutLocalZ(rotation, quarterSteps * 90);
    if (!nextRotation) return null;
    mark.rotation = nextRotation;
    mark.scale = Math.abs(quarterSteps) % 2 === 1
      ? [scale[1], scale[0], scale[2]]
      : scale;
    return { rotation: mark.rotation, scale: mark.scale };
  }

  function isVolumeBox(box) {
    return !!(
      box
      && typeof box === 'object'
      && Array.isArray(box.position)
      && box.position.length >= 3
      && Array.isArray(box.scale)
      && box.scale.length >= 3
      && (!box.type || box.type === 'volume')
    );
  }

  function boxesForTrack(marks, trackId) {
    const track = marks && marks[String(trackId)];
    if (!track || !track['3d'] || typeof track['3d'] !== 'object') return null;
    return track['3d'];
  }

  function orderedBoxEntries(trackId, marks, frames) {
    const boxes = boxesForTrack(marks, trackId);
    if (!boxes) return [];
    const entries = [];
    (frames || []).forEach((frame, index) => {
      if (!frame || frame.task_id == null) return;
      const box = boxes[String(frame.task_id)];
      const rotation = normalizeRotation(box && box.rotation);
      const arrowYaw = arrowYawRadians(box);
      if (!isVolumeBox(box) || !rotation || !Number.isFinite(arrowYaw)) return;
      entries.push({
        frame,
        frameId: frame.task_id,
        frameIndex: index,
        box,
        rotation,
        arrowYaw,
        yawDegrees: snapRadiansToQuarter(arrowYaw) * 180 / Math.PI,
      });
    });
    return entries;
  }

  function buildSyncUpdates(
    marks,
    frames,
    trackId,
    classId,
    sourceArrowYaw,
    targetIndices,
  ) {
    const normalizedSourceYaw = snapRadiansToQuarter(sourceArrowYaw);
    const track = marks && marks[String(trackId)];
    if (!Number.isFinite(normalizedSourceYaw) || !track) {
      return { updates: [], inspected: 0, missing: 0, unchanged: 0 };
    }
    if (classId != null && track.class != null && !sameIdentity(track.class, classId)) {
      throw new Error('当前目标的类别与标注数据不一致');
    }

    const updates = [];
    let inspected = 0;
    let missing = 0;
    let unchanged = 0;
    for (const rawIndex of targetIndices || []) {
      const frameIndex = Math.floor(numberOr(rawIndex, -1));
      const frame = frames && frames[frameIndex];
      if (!frame || frame.task_id == null) continue;
      inspected += 1;
      const box = track['3d'] && track['3d'][String(frame.task_id)];
      if (!isVolumeBox(box)) {
        missing += 1;
        continue;
      }
      const previousArrowYaw = arrowYawRadians(box);
      if (!Number.isFinite(previousArrowYaw)) {
        missing += 1;
        continue;
      }
      const targetQuarterYaw = snapRadiansToQuarter(previousArrowYaw);
      const sourceDegrees = normalizedSourceYaw * 180 / Math.PI;
      const targetDegrees = targetQuarterYaw * 180 / Math.PI;
      const quarterSteps = Math.round(
        normalizeDegrees(sourceDegrees - targetDegrees) / 90,
      );
      if (quarterSteps === 0) {
        unchanged += 1;
        continue;
      }
      const nextBox = cloneJson(box);
      rotateMarkLikePlatformP(nextBox, quarterSteps);
      updates.push({
        frameIndex,
        frameId: frame.task_id,
        trackId,
        classId,
        previousRotation: normalizeRotation(box.rotation),
        previousScale: box.scale.slice(),
        nextRotation: nextBox.rotation.slice(),
        nextScale: nextBox.scale.slice(),
        quarterSteps,
        box,
      });
    }
    return { updates, inspected, missing, unchanged };
  }

  function applySyncUpdates(marks, updates) {
    for (const update of updates || []) {
      const track = marks && marks[String(update.trackId)];
      if (!track || !track['3d']) continue;
      const box = track['3d'][String(update.frameId)];
      if (!isVolumeBox(box)) continue;
      box.rotation = update.nextRotation.slice();
      box.scale = update.nextScale.slice();
    }
    return marks;
  }

  function scanOppositeDirections(marks, frames) {
    const issues = [];
    let tracksChecked = 0;
    let boxesChecked = 0;
    for (const [trackId, track] of Object.entries(marks || {})) {
      if (!track || !track['3d']) continue;
      const entries = orderedBoxEntries(trackId, marks, frames);
      if (!entries.length) continue;
      tracksChecked += 1;
      boxesChecked += entries.length;
      for (let index = 1; index < entries.length; index += 1) {
        const previous = entries[index - 1];
        const current = entries[index];
        if (current.frameIndex !== previous.frameIndex + 1) continue;
        const deltaDegrees = angularDeltaDegrees(
          previous.yawDegrees,
          current.yawDegrees,
        );
        // 只比较相邻帧，并把方向差归到 90° 整数倍。
        const quarterSteps = Math.round(deltaDegrees / 90);
        if (quarterSteps === 0) continue;
        const quarterDegrees = quarterSteps * 90;
        issues.push({
          trackId,
          classId: track.class,
          previousFrameId: previous.frameId,
          previousFrameIndex: previous.frameIndex,
          currentFrameId: current.frameId,
          currentFrameIndex: current.frameIndex,
          previousYawDegrees: previous.yawDegrees,
          currentYawDegrees: current.yawDegrees,
          deltaDegrees,
          quarterSteps,
          quarterDegrees,
          reason: `相邻帧方向相差约 ${quarterDegrees}°`,
        });
      }
    }
    issues.sort((first, second) => (
      first.currentFrameIndex - second.currentFrameIndex
      || numberOr(first.trackId, 0) - numberOr(second.trackId, 0)
    ));
    return { issues, tracksChecked, boxesChecked };
  }

  const TEST_API = {
    normalizeDegrees,
    angularDeltaDegrees,
    isOppositeDirections,
    parseFrameExpression,
    selectTargetIndices,
    normalizeRotation,
    snapRadiansToQuarter,
    arrowYawRadians,
    rotateRotationAboutLocalZ,
    rotateMarkLikePlatformP,
    scanOppositeDirections,
    buildSyncUpdates,
    applySyncUpdates,
  };

  if (typeof module !== 'undefined' && module.exports) {
    module.exports = TEST_API;
    return;
  }

  if (!PAGE || PAGE[BOOT_KEY]) return;
  PAGE[BOOT_KEY] = true;

  /* ------------------------------------------------------------------------ */
  /* Platform adapters                                                        */
  /* ------------------------------------------------------------------------ */

  function safeCall(fn, fallback = null) {
    try {
      return typeof fn === 'function' ? fn() : fallback;
    } catch (_) {
      return fallback;
    }
  }

  function getManager() {
    const instance = PAGE.instance || null;
    const manager = instance && instance.StoreManager;
    if (manager && typeof manager.configState === 'function'
      && typeof manager.marksState === 'function') {
      return manager;
    }

    const store = PAGE.__store || PAGE.store;
    if (store && store.state && store.state.config && store.state.marks) {
      const getter = (namespace, name) => {
        const fn = store.getters && store.getters[`${namespace}/${name}`];
        return typeof fn === 'function' ? fn : () => null;
      };
      return {
        configState: () => store.state.config,
        marksState: () => store.state.marks,
        statusState: () => store.state.status,
        getCurFrameId: () => store.state.status && store.state.status.curFrameId,
        getSelectMarkInfo: () => store.state.status && store.state.status.selectMarkInfo,
        marksGetter: (name) => getter('marks', name),
        configGetter: (name) => getter('config', name),
        commit: (name, payload) => store.commit(name, payload),
        dispatch: (name, payload) => store.dispatch(name, payload),
        markCommit: (name, payload) => store.commit(`marks/${name}`, payload),
        statusCommit: (name, payload) => store.commit(`status/${name}`, payload),
        selectMarkInfo: (trackId, classId, dimension) => store.commit(
          'status/selectMarkInfo',
          [trackId, classId, dimension, null, false],
        ),
      };
    }
    return null;
  }

  function getContext() {
    const manager = getManager();
    if (!manager) return null;
    const config = safeCall(() => manager.configState(), null);
    const marksState = safeCall(() => manager.marksState(), null);
    const status = safeCall(() => manager.statusState(), {});
    const frames = config && Array.isArray(config.frames) ? config.frames : [];
    if (!marksState || !frames.length) return null;
    const context = {
      manager,
      config,
      marksState,
      status: status || {},
      frames,
      marks: marksState.marks || {},
      currentFrameId: safeCall(
        () => manager.getCurFrameId(),
        status && status.curFrameId,
      ),
      selected: safeCall(
        () => manager.getSelectMarkInfo(),
        status && status.selectMarkInfo,
      ) || {},
    };
    return context;
  }

  function frameIndexFor(context, frameId) {
    return context.frames.findIndex(
      (frame) => frame && sameIdentity(frame.task_id, frameId),
    );
  }

  function getTrackBox(context, trackId, frameId) {
    const fromGetter = safeCall(
      () => context.manager.marksGetter('getMarks')(trackId, '3d', frameId),
      null,
    );
    if (fromGetter) return fromGetter;
    return context.marks
      && context.marks[String(trackId)]
      && context.marks[String(trackId)]['3d']
      && context.marks[String(trackId)]['3d'][String(frameId)]
      || null;
  }

  function classTitle(context, classId) {
    const managerValue = safeCall(
      () => context.manager.configGetter('className')(classId, 'volume'),
      '',
    );
    if (managerValue && managerValue !== '未知') return managerValue;
    const cls = safeCall(
      () => context.manager.configGetter('getClass')(classId, 'volume'),
      null,
    );
    return cls && (cls.ptitle || cls.name || cls.pname) || normalizeText(classId) || '未知类别';
  }

  function managerMarkCommit(manager, name, payload) {
    if (manager && typeof manager.markCommit === 'function') {
      return manager.markCommit(name, payload);
    }
    if (manager && typeof manager.commit === 'function') {
      return manager.commit(`marks/${name}`, payload);
    }
    throw new Error('平台没有提供标注提交接口');
  }

  function selectedSource(context) {
    const selected = context && context.selected || {};
    const trackId = selected.trackId;
    const frameId = context && context.currentFrameId;
    if (trackId == null || frameId == null) return null;
    const box = getTrackBox(context, trackId, frameId);
    const rotation = normalizeRotation(box && box.rotation);
    const arrowYaw = arrowYawRadians(box);
    if (!isVolumeBox(box) || !rotation || !Number.isFinite(arrowYaw)) return null;
    const track = context.marks && context.marks[String(trackId)];
    return {
      trackId,
      classId: selected.classId != null ? selected.classId : track && track.class,
      frameId,
      frameIndex: frameIndexFor(context, frameId),
      box,
      rotation,
      arrowYaw,
      yawDegrees: snapRadiansToQuarter(arrowYaw) * 180 / Math.PI,
    };
  }

  function statusMessage(message, tone = '') {
    if (!state.ui.host) return;
    const node = state.ui.host.shadowRoot.querySelector('#syncStatus');
    if (!node) return;
    const text = node.querySelector('#syncStatusText');
    const actions = node.querySelector('#syncStatusActions');
    if (text) text.textContent = message;
    else node.textContent = message;
    if (actions) actions.innerHTML = '';
    node.dataset.tone = tone;
  }

  function frameLabel(issue) {
    return `第 ${issue.previousFrameIndex + 1} → ${issue.currentFrameIndex + 1} 帧`;
  }

  function issueKey(issue) {
    return `${normalizeText(issue.trackId)}:${normalizeText(issue.previousFrameId)}:${normalizeText(issue.currentFrameId)}`;
  }

  function renderCheckStatus(report) {
    if (!state.ui.host) return;
    const root = state.ui.host.shadowRoot;
    const node = root.querySelector('#syncStatus');
    const text = node.querySelector('#syncStatusText');
    const actions = node.querySelector('#syncStatusActions');
    if (!text || !actions) return;
    node.dataset.tone = report.issues.length ? 'warn' : 'ok';
    text.textContent = report.issues.length
      ? `检查完成：发现 ${report.issues.length} 处相邻帧方向变化，点击帧号定位：`
      : '检查完成：未发现相邻帧方向出现 90° 整数倍变化。';
    actions.innerHTML = report.issues.slice(0, 8).map((issue, index) => `
      <button type="button" class="status-jump" data-status-issue="${index}">
        ${frameLabel(issue)} · #${escapeHtml(issue.trackId)}
      </button>
    `).join('') + (report.issues.length > 8
      ? `<span class="status-more">另有 ${report.issues.length - 8} 处，见下方列表</span>`
      : '');
    actions.querySelectorAll('[data-status-issue]').forEach((button) => {
      button.addEventListener('click', () => {
        const issue = report.issues[Number(button.dataset.statusIssue)];
        if (issue) jumpToIssue(issue);
      });
    });
  }

  function setBusy(busy, text = '') {
    state.busy = busy;
    if (!state.ui.host) return;
    const root = state.ui.host.shadowRoot;
    root.querySelectorAll(
      '[data-sync-action], #applyTargetFrame',
    )
      .forEach((button) => {
        button.disabled = busy || !state.source;
      });
    const checkButton = root.querySelector('#checkDirections');
    if (checkButton) checkButton.disabled = busy;
    if (text) statusMessage(text);
  }

  function formatAngle(angle) {
    return `${numberOr(angle, 0).toFixed(1)}°`;
  }

  function rememberSelectedTarget(context = getContext()) {
    const selected = context && context.selected;
    if (selected && selected.trackId != null) {
      state.savedSelection = {
        trackId: selected.trackId,
        classId: selected.classId,
      };
    }
  }

  function restoreSelectedTarget() {
    const selected = state.savedSelection;
    if (!selected) return;
    setTimeout(() => {
      const context = getContext();
      if (!context || !context.manager) return;
      try {
        context.manager.selectMarkInfo(selected.trackId, selected.classId, '3d');
      } catch (_) {}
    }, 60);
  }

  function renderSelection() {
    if (!state.ui.host) return;
    const context = getContext();
    const source = context ? selectedSource(context) : null;
    state.source = source;
    state.context = context;
    const root = state.ui.host.shadowRoot;
    const title = root.querySelector('#selectedTarget');
    const meta = root.querySelector('#selectedMeta');
    const dot = root.querySelector('#selectionDot');

    if (!context) {
      title.textContent = '正在等待平台数据…';
      meta.textContent = '请打开并加载点云任务';
      dot.dataset.tone = 'waiting';
    } else if (!source) {
      const currentIndex = frameIndexFor(context, context.currentFrameId);
      title.textContent = '请先点选一个3D框';
      meta.textContent = `当前第 ${currentIndex >= 0 ? currentIndex + 1 : '?'} 帧 · 需要选中目标后才能同步`;
      dot.dataset.tone = 'idle';
    } else {
      title.textContent = `#${source.trackId} · ${classTitle(context, source.classId)}`;
      meta.textContent = `当前第 ${source.frameIndex + 1} 帧 · 方向 ${formatAngle(source.yawDegrees)}`;
      dot.dataset.tone = 'ready';
    }

    root.querySelectorAll(
      '[data-sync-action], #applyTargetFrame',
    )
      .forEach((button) => {
        button.disabled = state.busy || !source;
      });
    const checkButton = root.querySelector('#checkDirections');
    if (checkButton) checkButton.disabled = state.busy;
  }

  async function saveDirectionUpdate(context, trackId, classId, sourceArrowYaw, targetIndices) {
    const plan = buildSyncUpdates(
      context.marks,
      context.frames,
      trackId,
      classId,
      sourceArrowYaw,
      targetIndices,
    );
    if (!plan.updates.length) {
      return { ...plan, saved: false };
    }

    let appliedUpdates = 0;
    const beforeCurVer = numberOr(context.marksState.curVer, 0);
    const beforeUpdatedVer = numberOr(context.marksState.updatedVer, 0);
    try {
      for (const update of plan.updates) {
        const currentBox = getTrackBox(context, trackId, update.frameId);
        if (!isVolumeBox(currentBox)) continue;
        const nextBox = cloneJson(currentBox);
        nextBox.rotation = update.nextRotation.slice();
        nextBox.scale = update.nextScale.slice();
        managerMarkCommit(
          context.manager,
          'addOrReplaceMark3D',
          [1, nextBox, trackId, classId, update.frameId, null, false],
        );
        appliedUpdates += 1;
      }
      if (!appliedUpdates) throw new Error('目标框在同步前发生变化');
      managerMarkCommit(context.manager, 'changeMarkVersion');
      await context.manager.dispatch('marks/syncMarks');
      return { ...plan, appliedUpdates, saved: true };
    } catch (error) {
      for (const update of plan.updates) {
        try {
          const currentBox = getTrackBox(context, trackId, update.frameId);
          if (!isVolumeBox(currentBox)) continue;
          const restoredBox = cloneJson(currentBox);
          restoredBox.rotation = update.previousRotation.slice();
          restoredBox.scale = update.previousScale.slice();
          managerMarkCommit(
            context.manager,
            'addOrReplaceMark3D',
            [1, restoredBox, trackId, classId, update.frameId, null, false],
          );
        } catch (_) {}
      }
      context.marksState.curVer = beforeCurVer;
      context.marksState.updatedVer = beforeUpdatedVer;
      throw error;
    }
  }

  async function runSync(mode) {
    if (state.busy) return;
    state.lastCheck = null;
    renderCheckReport();
    const context = getContext();
    const source = context && selectedSource(context);
    if (!context || !source) {
      statusMessage('请先点选当前帧中的3D框。', 'error');
      return;
    }
    if (source.frameIndex < 0) {
      statusMessage('没有识别到当前帧号，请刷新任务后重试。', 'error');
      return;
    }
    const input = state.ui.host.shadowRoot.querySelector('#targetFrames');
    const targetIndices = selectTargetIndices(
      context.frames.length,
      source.frameIndex,
      mode,
      input.value,
    );
    if (!targetIndices.length) {
      statusMessage(
        mode === 'specified'
          ? '指定帧为空或格式无效，请填写例如 8,10-15。'
          : '当前方向没有可同步的目标帧。',
        'error',
      );
      return;
    }

    const actionName = mode === 'next'
      ? '后续帧'
      : mode === 'previous' ? '前序帧' : '指定帧';
    setBusy(true, `正在向${actionName}同步箭头…`);
    try {
      const result = await saveDirectionUpdate(
        context,
        source.trackId,
        source.classId,
        source.arrowYaw,
        targetIndices,
      );
      if (!result.saved) {
        statusMessage(
          `已检查 ${result.inspected} 帧，箭头方向本来一致，无需修改。`
          + (result.unchanged ? ` ${result.unchanged} 帧方向一致。` : '')
          + (result.missing ? ` ${result.missing} 帧没有该目标。` : ''),
          'ok',
        );
        return;
      }
      statusMessage(
        `已同步：目标 #${source.trackId} 箭头更新 ${result.appliedUpdates} 帧`
        + (result.missing ? `，跳过 ${result.missing} 个缺框帧` : '')
        + (result.unchanged ? `，${result.unchanged} 帧原本一致` : '')
        + '。',
        'ok',
      );
      runCheck(false);
    } catch (error) {
      const message = error && (error.msg || error.message)
        ? (error.msg || error.message)
        : String(error);
      statusMessage(`同步失败：${message}`, 'error');
    } finally {
      setBusy(false);
      renderSelection();
    }
  }

  function renderCheckReport() {
    if (!state.ui.host) return;
    const root = state.ui.host.shadowRoot;
    const summary = root.querySelector('#checkSummary');
    const list = root.querySelector('#checkList');
    const report = state.lastCheck;
    if (!report) {
      summary.textContent = '检查只读运行，不会修改任何框。';
      list.innerHTML = '';
      return;
    }
    summary.textContent = `已检查 ${report.tracksChecked} 条轨迹、${report.boxesChecked} 个相邻帧框；发现 ${report.issues.length} 处方向变化。`;
    if (!report.issues.length) {
      list.innerHTML = '<div class="empty">未发现相邻帧方向相差 90° 整数倍的情况。</div>';
      return;
    }
    const visible = report.issues.slice(0, 80);
    list.innerHTML = visible.map((issue, index) => `
      <button class="issue${state.selectedIssueKey === issueKey(issue) ? ' active' : ''}" type="button" data-issue-index="${index}" data-issue-key="${escapeHtml(issueKey(issue))}">
        <span class="issue-main">#${escapeHtml(issue.trackId)} · ${escapeHtml(
          state.lastClassNames.get(normalizeText(issue.classId)) || issue.classId,
        )}</span>
        <span class="issue-meta">第 ${issue.previousFrameIndex + 1} → ${issue.currentFrameIndex + 1} 帧 · 转角 ${formatAngle(issue.deltaDegrees)} · ${escapeHtml(issue.reason)}</span>
      </button>
    `).join('') + (report.issues.length > visible.length
      ? `<div class="empty">仅显示前 ${visible.length} 条，共 ${report.issues.length} 条。</div>`
      : '');

    list.querySelectorAll('[data-issue-index]').forEach((button) => {
      button.addEventListener('click', () => {
        const issue = visible[Number(button.dataset.issueIndex)];
        if (issue) jumpToIssue(issue);
      });
    });
  }

  function runCheck(showStatus = true) {
    const context = getContext();
    if (!context) {
      if (showStatus) statusMessage('平台数据尚未加载完成。', 'error');
      return null;
    }
    state.selectedIssueKey = '';
    state.lastClassNames = new Map();
    Object.values(context.marks || {}).forEach((track) => {
      if (!track || track.class == null) return;
      state.lastClassNames.set(
        normalizeText(track.class),
        classTitle(context, track.class),
      );
    });
    const report = scanOppositeDirections(context.marks, context.frames);
    report.smart = true;
    state.lastCheck = report;
    renderCheckReport();
    if (showStatus) {
      renderCheckStatus(report);
    }
    return report;
  }

  async function jumpToIssue(issue) {
    const context = getContext();
    if (!context) return;
    let selected = false;
    state.selectedIssueKey = issueKey(issue);
    const root = state.ui.host && state.ui.host.shadowRoot;
    if (root) {
      root.querySelectorAll('.issue.active').forEach((node) => {
        node.classList.remove('active');
      });
      const row = root.querySelector(`[data-issue-key="${CSS.escape(issueKey(issue))}"]`);
      if (row) {
        row.classList.add('active');
        row.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
      }
    }
    try {
      statusMessage(
        `正在定位${frameLabel(issue)}，目标 #${issue.trackId}…`,
        'warn',
      );
      if (typeof context.manager.statusCommit === 'function') {
        context.manager.statusCommit('setCurFrameId', issue.currentFrameId);
      } else {
        context.manager.commit('status/setCurFrameId', issue.currentFrameId);
      }
      for (let attempt = 0; attempt < 20; attempt += 1) {
        await new Promise((resolve) => setTimeout(resolve, 80));
        const fresh = getContext();
        if (!fresh || !sameIdentity(fresh.currentFrameId, issue.currentFrameId)) {
          continue;
        }
        const box = getTrackBox(fresh, issue.trackId, issue.currentFrameId);
        if (!box) continue;
        try {
          if (typeof fresh.manager.selectMarkInfo === 'function') {
            fresh.manager.selectMarkInfo(issue.trackId, issue.classId, '3d');
          } else {
            fresh.manager.commit(
              'status/selectMarkInfo',
              [issue.trackId, issue.classId, '3d', null, false],
            );
          }
          selected = true;
        } catch (_) {}
        if (selected && attempt >= 1) break;
      }
      if (!selected) {
        throw new Error('对应帧或目标尚未加载完成');
      }
      statusMessage(
        `已定位${frameLabel(issue)}，目标 #${issue.trackId} 已选中并高亮。`,
        'ok',
      );
    } catch (error) {
      statusMessage(`跳转失败：${error && error.message ? error.message : error}`, 'error');
    }
  }

  function escapeHtml(value) {
    return String(value == null ? '' : value)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  }

  function loadPanelPosition() {
    try {
      const value = JSON.parse(localStorage.getItem(PANEL_POSITION_KEY) || 'null');
      if (value && Number.isFinite(Number(value.left)) && Number.isFinite(Number(value.top))) {
        return {
          left: Number(value.left),
          top: Number(value.top),
        };
      }
    } catch (_) {}
    return null;
  }

  function savePanelPosition(position) {
    try {
      localStorage.setItem(PANEL_POSITION_KEY, JSON.stringify(position));
    } catch (_) {}
  }

  function loadLauncherPosition() {
    try {
      const value = JSON.parse(localStorage.getItem(LAUNCHER_POSITION_KEY) || 'null');
      if (value && Number.isFinite(Number(value.left)) && Number.isFinite(Number(value.top))) {
        return { left: Number(value.left), top: Number(value.top) };
      }
    } catch (_) {}
    return null;
  }

  function saveLauncherPosition(position) {
    try {
      localStorage.setItem(LAUNCHER_POSITION_KEY, JSON.stringify(position));
    } catch (_) {}
  }

  function applyLauncherPosition(launcher, position) {
    if (!launcher || !position) return;
    const rect = launcher.getBoundingClientRect();
    const left = clamp(position.left, 4, Math.max(4, window.innerWidth - rect.width - 4));
    const top = clamp(position.top, 4, Math.max(4, window.innerHeight - rect.height - 4));
    launcher.style.left = `${left}px`;
    launcher.style.top = `${top}px`;
    launcher.style.right = 'auto';
    launcher.style.bottom = 'auto';
    state.launcherPosition = { left, top };
  }

  function enableLauncherDrag(launcher) {
    let drag = null;
    launcher.addEventListener('pointerdown', (event) => {
      if (event.button !== 0) return;
      const rect = launcher.getBoundingClientRect();
      drag = {
        startX: event.clientX,
        startY: event.clientY,
        startLeft: rect.left,
        startTop: rect.top,
        moved: false,
        pointerId: event.pointerId,
      };
      launcher.setPointerCapture(event.pointerId);
    });
    launcher.addEventListener('pointermove', (event) => {
      if (!drag || drag.pointerId !== event.pointerId) return;
      const dx = event.clientX - drag.startX;
      const dy = event.clientY - drag.startY;
      if (!drag.moved && Math.hypot(dx, dy) < 4) return;
      drag.moved = true;
      const rect = launcher.getBoundingClientRect();
      const left = clamp(drag.startLeft + dx, 4, Math.max(4, window.innerWidth - rect.width - 4));
      const top = clamp(drag.startTop + dy, 4, Math.max(4, window.innerHeight - rect.height - 4));
      launcher.style.left = `${left}px`;
      launcher.style.top = `${top}px`;
      launcher.style.right = 'auto';
      launcher.style.bottom = 'auto';
      event.preventDefault();
    });
    const finish = (event) => {
      if (!drag || (event && drag.pointerId !== event.pointerId)) return;
      if (drag.moved) {
        const rect = launcher.getBoundingClientRect();
        state.launcherPosition = { left: rect.left, top: rect.top };
        saveLauncherPosition(state.launcherPosition);
        state.suppressLauncherClick = true;
        setTimeout(() => {
          state.suppressLauncherClick = false;
        }, 250);
      }
      drag = null;
    };
    launcher.addEventListener('pointerup', finish);
    launcher.addEventListener('pointercancel', finish);
  }

  function applyPanelPosition(panel, position) {
    if (!panel || !position) return;
    const rect = panel.getBoundingClientRect();
    const width = rect.width || Math.min(390, window.innerWidth - 24);
    const maxLeft = Math.max(4, window.innerWidth - width - 4);
    const left = clamp(position.left, 4, maxLeft);
    const top = clamp(position.top, 4, Math.max(4, window.innerHeight - 80));
    panel.style.left = `${left}px`;
    panel.style.top = `${top}px`;
    panel.style.right = 'auto';
    panel.style.bottom = 'auto';
    state.panelPosition = { left, top };
  }

  function enablePanelDrag(panel, handle) {
    let drag = null;
    handle.addEventListener('pointerdown', (event) => {
      if (event.button !== 0 || event.target.closest('.close, .minimize')) return;
      const rect = panel.getBoundingClientRect();
      drag = {
        startX: event.clientX,
        startY: event.clientY,
        startLeft: rect.left,
        startTop: rect.top,
        pointerId: event.pointerId,
      };
      handle.classList.add('dragging');
      handle.setPointerCapture(event.pointerId);
      event.preventDefault();
    });
    handle.addEventListener('pointermove', (event) => {
      if (!drag || drag.pointerId !== event.pointerId) return;
      const rect = panel.getBoundingClientRect();
      const left = clamp(
        drag.startLeft + event.clientX - drag.startX,
        4,
        Math.max(4, window.innerWidth - rect.width - 4),
      );
      const top = clamp(
        drag.startTop + event.clientY - drag.startY,
        4,
        Math.max(4, window.innerHeight - 80),
      );
      panel.style.left = `${left}px`;
      panel.style.top = `${top}px`;
      panel.style.right = 'auto';
      panel.style.bottom = 'auto';
    });
    const finish = (event) => {
      if (!drag || (event && drag.pointerId !== event.pointerId)) return;
      const rect = panel.getBoundingClientRect();
      state.panelPosition = { left: rect.left, top: rect.top };
      savePanelPosition(state.panelPosition);
      handle.classList.remove('dragging');
      drag = null;
    };
    handle.addEventListener('pointerup', finish);
    handle.addEventListener('pointercancel', finish);
  }

  /* ------------------------------------------------------------------------ */
  /* UI                                                                       */
  /* ------------------------------------------------------------------------ */

  const state = {
    open: true,
    busy: false,
    context: null,
    source: null,
    lastCheck: null,
    lastClassNames: new Map(),
    selectedIssueKey: '',
    savedSelection: null,
    panelPosition: loadPanelPosition(),
    launcherPosition: loadLauncherPosition(),
    suppressLauncherClick: false,
    selectionTimer: 0,
    waitTimer: 0,
    ui: {},
  };

  function createUI() {
    if (state.ui.host || !document.documentElement) return;
    const host = document.createElement('div');
    host.id = HOST_ID;
    const shadow = host.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        :host { all: initial; }
        * { box-sizing: border-box; }
        button, input { font: inherit; }
        .launcher {
          position: fixed; right: 18px; bottom: 74px; z-index: 2147483646;
          display: inline-flex; align-items: center; gap: 8px;
          min-height: 38px; padding: 0 15px; border: 1px solid #374151;
          border-radius: 12px; color: #f8fafc; background: #111827;
          box-shadow: 0 10px 28px rgba(0,0,0,.35); cursor: pointer;
          font: 600 13px/1 "Microsoft YaHei", sans-serif;
        }
        .launcher:hover { background: #1f2937; border-color: #f59e0b; }
        .launcher[hidden] { display: none; }
        .launcher .mark {
          width: 9px; height: 9px; border-radius: 50%; background: #f59e0b;
          box-shadow: 0 0 12px rgba(245,158,11,.8);
        }
        .panel {
          position: fixed; right: 18px; bottom: 122px; z-index: 2147483647;
          width: min(390px, calc(100vw - 24px)); max-height: min(690px, calc(100vh - 142px));
          display: flex; flex-direction: column; overflow: hidden;
          color: #e5e7eb; background: #0d1117;
          border: 1px solid #30363d; border-radius: 16px;
          box-shadow: 0 20px 60px rgba(0,0,0,.55);
          font: 12px/1.45 "Microsoft YaHei", "PingFang SC", sans-serif;
        }
        .panel[hidden] { display: none; }
        .header {
          display: flex; align-items: center; gap: 10px; padding: 13px 14px;
          background: linear-gradient(135deg, #161b22, #111827);
          border-bottom: 1px solid #30363d;
          cursor: move; user-select: none; touch-action: none;
        }
        .header.dragging { cursor: grabbing; }
        .brand { flex: 1; min-width: 0; }
        .brand b { display: block; color: #f9fafb; font-size: 14px; letter-spacing: .02em; }
        .brand small { display: block; margin-top: 2px; color: #8b949e; font-size: 10px; }
        .drag-grip { color: #64748b; font-size: 15px; letter-spacing: -2px; }
        .close {
          width: 28px; height: 28px; border: 1px solid #30363d; border-radius: 8px;
          color: #9ca3af; background: #161b22; cursor: pointer; font-size: 17px; line-height: 1;
        }
        .close:hover { color: #fff; border-color: #6b7280; }
        .minimize {
          width: 28px; height: 28px; border: 1px solid #30363d; border-radius: 8px;
          color: #9ca3af; background: #161b22; cursor: pointer; font-size: 18px; line-height: 1;
        }
        .minimize:hover { color: #fff; border-color: #f59e0b; }
        .panel.minimized .body,
        .panel.minimized .footer { display: none; }
        .body { min-height: 0; overflow-y: auto; padding: 12px; }
        .selection {
          display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 10px;
          padding: 11px 12px; border: 1px solid #30363d; border-radius: 12px;
          background: #111827;
        }
        .dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: #64748b; }
        .dot[data-tone="ready"] { background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,.7); }
        .dot[data-tone="waiting"] { background: #f59e0b; }
        .target { color: #f8fafc; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .meta { margin-top: 3px; color: #94a3b8; font-size: 11px; }
        .section-title {
          display: flex; align-items: center; justify-content: space-between;
          margin: 14px 1px 7px; color: #cbd5e1; font-weight: 700; font-size: 11px;
          letter-spacing: .05em;
        }
        .section-title span { color: #64748b; font-weight: 400; letter-spacing: 0; }
        .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
        button.action, button.secondary {
          min-height: 36px; border-radius: 9px; border: 1px solid #374151;
          color: #e5e7eb; background: #1f2937; cursor: pointer;
          font-weight: 600; transition: .15s ease;
        }
        button.action:hover, button.secondary:hover { border-color: #f59e0b; background: #263244; }
        button.action.primary { color: #111827; background: #fbbf24; border-color: #fbbf24; }
        button.action.primary:hover { background: #fcd34d; }
        button:disabled { opacity: .38; cursor: not-allowed; }
        button:focus-visible, input:focus-visible {
          outline: 2px solid #38bdf8; outline-offset: 2px;
        }
        .target-row { display: grid; grid-template-columns: minmax(0,1fr) 34px 92px; gap: 7px; }
        .clear-target {
          min-height: 36px; border-radius: 9px; border: 1px solid #374151;
          color: #cbd5e1; background: #1f2937; cursor: pointer; font-size: 16px;
        }
        .clear-target:hover { border-color: #ef4444; color: #fecaca; background: #2a171a; }
        input {
          width: 100%; min-height: 36px; padding: 0 10px; border-radius: 9px;
          border: 1px solid #374151; color: #f8fafc; background: #0b1220;
        }
        input::placeholder { color: #64748b; }
        .hint { margin-top: 6px; color: #64748b; font-size: 10px; }
        .check-row { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; }
        .threshold-wrap { display: grid; grid-template-columns: 1fr 54px; align-items: center; gap: 6px; }
        #syncStatus {
          margin-top: 11px; padding: 9px 10px; border-radius: 9px;
          color: #cbd5e1; background: #111827; border: 1px solid #30363d; min-height: 34px;
        }
        #syncStatusText { display: block; }
        #syncStatusActions {
          display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px;
        }
        .status-jump {
          min-height: 27px; padding: 3px 8px; border-radius: 7px;
          border: 1px solid #a16207; color: #fef3c7; background: #422006;
          cursor: pointer; font-size: 10px; font-weight: 700;
        }
        .status-jump:hover { border-color: #fbbf24; background: #713f12; }
        .status-more { align-self: center; color: #a8a29e; font-size: 10px; }
        #syncStatus[data-tone="ok"] { color: #bbf7d0; border-color: #166534; background: #052e16; }
        #syncStatus[data-tone="warn"] { color: #fde68a; border-color: #854d0e; background: #3b2604; }
        #syncStatus[data-tone="error"] { color: #fecaca; border-color: #991b1b; background: #3b0a0a; }
        .check-summary { margin-top: 8px; color: #94a3b8; font-size: 10px; }
        .check-list { display: grid; gap: 6px; margin-top: 7px; max-height: 210px; overflow-y: auto; }
        .issue {
          display: block; width: 100%; padding: 8px 9px; text-align: left;
          border: 1px solid #374151; border-radius: 8px; color: #fecaca;
          background: #1b1214; cursor: pointer;
        }
        .issue:hover { border-color: #ef4444; background: #291519; }
        .issue.active {
          border-color: #fbbf24; background: #3a2b08;
          box-shadow: 0 0 0 2px rgba(251,191,36,.22), inset 0 0 18px rgba(251,191,36,.1);
          animation: issuePulse 1.1s ease-in-out 2;
        }
        @keyframes issuePulse {
          0%, 100% { box-shadow: 0 0 0 2px rgba(251,191,36,.2); }
          50% { box-shadow: 0 0 0 5px rgba(251,191,36,.05), 0 0 18px rgba(251,191,36,.28); }
        }
        .issue-main { display: block; font-weight: 700; font-size: 11px; }
        .issue-meta { display: block; margin-top: 2px; color: #fca5a5; font-size: 10px; }
        .empty { padding: 10px; text-align: center; color: #64748b; border: 1px dashed #30363d; border-radius: 8px; }
        .footer {
          padding: 9px 13px 11px; color: #6b7280; background: #0b0f14;
          border-top: 1px solid #21262d; font-size: 10px;
        }
        .footer b { color: #9ca3af; font-weight: 600; }
        @media (max-width: 520px) {
          .panel { right: 8px; bottom: 112px; max-height: calc(100vh - 126px); }
          .launcher { right: 10px; bottom: 68px; }
        }
      </style>
      <button class="launcher" id="launcher" type="button" aria-label="打开拉框方向同步" hidden>
        <span class="mark"></span>方向同步
      </button>
      <section class="panel" id="panel" aria-label="4D拉框方向同步">
        <header class="header" id="panelHeader" title="按住拖动面板">
          <span class="drag-grip" aria-hidden="true">⋮⋮</span>
          <div class="brand">
            <b>4D 拉框方向同步</b>
            <small>只改方向 · 不建框 · 不删框</small>
          </div>
          <button class="minimize" id="minimizePanel" type="button" title="最小化" aria-label="最小化">−</button>
          <button class="close" id="closePanel" type="button" title="收起" aria-label="收起">×</button>
        </header>
        <div class="body">
          <div class="selection">
            <span class="dot" id="selectionDot" data-tone="waiting"></span>
            <div>
              <div class="target" id="selectedTarget">正在等待平台数据…</div>
              <div class="meta" id="selectedMeta">请打开并加载点云任务</div>
            </div>
          </div>

          <div class="section-title">同步当前帧方向 <span>平台P键规则</span></div>
          <div class="actions">
            <button class="action" type="button" data-sync-action="previous">同步到前序帧</button>
            <button class="action" type="button" data-sync-action="next">同步到后续帧</button>
          </div>

          <div class="section-title">指定帧 <span>可见帧序号，可填范围</span></div>
          <div class="target-row">
            <input id="targetFrames" type="text" inputmode="numeric" placeholder="例如 8,10-15">
            <button class="clear-target" id="clearTargetFrames" type="button" title="清空指定帧" aria-label="清空指定帧">×</button>
            <button class="action primary" id="applyTargetFrame" type="button">同步</button>
          </div>
          <div class="hint">同步范围仅限当前题包；缺框帧会自动跳过。</div>

          <div class="section-title">连续帧方向检查 <span>相邻帧 · 90°基准</span></div>
          <div class="check-row">
            <button class="secondary" id="checkDirections" type="button">检查相邻帧方向</button>
          </div>
          <div class="hint">只比较相邻帧，并将方向差自动归到 90° 整数倍，无需手动设置阈值。</div>
          <div class="check-summary" id="checkSummary">检查只读运行，不会修改任何框。</div>
          <div class="check-list" id="checkList"></div>

          <div id="syncStatus" data-tone="">
            <span id="syncStatusText">请先选中一个3D框。</span>
            <div id="syncStatusActions"></div>
          </div>
        </div>
        <footer class="footer"><b>4D拉框方向同步</b> · 平台P键规则 · 框外观不变</footer>
      </section>
    `;
    document.documentElement.appendChild(host);
    state.ui.host = host;
    state.ui.panel = shadow.querySelector('#panel');
    state.ui.launcher = shadow.querySelector('#launcher');
    state.ui.panel.hidden = false;
    state.ui.launcher.hidden = true;
    let minimized = false;
    state.selectionTimer = setInterval(renderSelection, 350);
    const isFrameInputEvent = (event) => (
      Array.isArray(event.composedPath && event.composedPath())
      && event.composedPath().some((node) => node && node.id === 'targetFrames')
    );
    const isolateFrameInput = (event) => {
      if (!isFrameInputEvent(event)) return;
      event.stopImmediatePropagation();
      if (event.type === 'keydown' && event.key === 'Enter') {
        event.preventDefault();
        runSync('specified');
      }
    };
    document.addEventListener('keydown', isolateFrameInput, true);
    document.addEventListener('keypress', isolateFrameInput, true);
    document.addEventListener('keyup', isolateFrameInput, true);
    enablePanelDrag(state.ui.panel, shadow.querySelector('#panelHeader'));
    enableLauncherDrag(state.ui.launcher);
    if (state.panelPosition) {
      requestAnimationFrame(() => applyPanelPosition(state.ui.panel, state.panelPosition));
    }
    window.addEventListener('resize', () => {
      if (state.panelPosition) {
        applyPanelPosition(state.ui.panel, state.panelPosition);
      }
      if (state.launcherPosition && !state.ui.launcher.hidden) {
        applyLauncherPosition(state.ui.launcher, state.launcherPosition);
      }
    });

    const openPanel = () => {
      state.open = true;
      state.ui.panel.hidden = false;
      state.ui.launcher.hidden = true;
      if (state.panelPosition) applyPanelPosition(state.ui.panel, state.panelPosition);
      renderSelection();
    };
    const closePanel = () => {
      state.open = false;
      state.ui.panel.hidden = true;
      state.ui.launcher.hidden = false;
      if (state.launcherPosition) {
        applyLauncherPosition(state.ui.launcher, state.launcherPosition);
      }
    };
    state.ui.launcher.addEventListener('click', () => {
      if (state.suppressLauncherClick) {
        state.suppressLauncherClick = false;
        return;
      }
      if (state.open) closePanel();
      else openPanel();
    });
    shadow.querySelector('#minimizePanel').addEventListener('click', () => {
      minimized = !minimized;
      state.ui.panel.classList.toggle('minimized', minimized);
      const button = shadow.querySelector('#minimizePanel');
      button.textContent = minimized ? '□' : '−';
      button.title = minimized ? '还原' : '最小化';
      button.setAttribute('aria-label', button.title);
    });
    shadow.querySelector('#closePanel').addEventListener('click', closePanel);
    shadow.querySelectorAll('[data-sync-action]').forEach((button) => {
      button.addEventListener('click', () => runSync(button.dataset.syncAction));
    });
    shadow.querySelector('#applyTargetFrame').addEventListener('click', () => runSync('specified'));
    shadow.querySelector('#clearTargetFrames').addEventListener('click', () => {
      const input = shadow.querySelector('#targetFrames');
      input.value = '';
      input.focus();
      restoreSelectedTarget();
    });
    shadow.querySelector('#clearTargetFrames').addEventListener('pointerdown', (event) => {
      rememberSelectedTarget();
      event.preventDefault();
      event.stopPropagation();
    });
    shadow.querySelector('#targetFrames').addEventListener('pointerdown', () => {
      rememberSelectedTarget();
    });
    shadow.querySelector('#targetFrames').addEventListener('focus', () => {
      restoreSelectedTarget();
    });
    shadow.querySelector('#targetFrames').addEventListener('keydown', (event) => {
      event.stopPropagation();
    });
    shadow.querySelector('#targetFrames').addEventListener('keyup', (event) => {
      event.stopPropagation();
    });
    shadow.querySelector('#targetFrames').addEventListener('keypress', (event) => {
      event.stopPropagation();
    });
    shadow.querySelector('#checkDirections').addEventListener('click', () => runCheck(true));
    renderCheckReport();
    renderSelection();
  }

  function looksLikeAnnotationPage(context) {
    return !!(
      context
      || /\/pointcloud(?:\/|$)/i.test(location.pathname)
      || (
        new URLSearchParams(location.search).has('package_id')
        && new URLSearchParams(location.search).has('id')
      )
    );
  }

  function waitForPlatform() {
    let attempts = 0;
    const timer = setInterval(() => {
      attempts += 1;
      const context = getContext();
      if (context || looksLikeAnnotationPage(null)) createUI();
      if (createUI && state.ui.host && context) {
        clearInterval(timer);
        state.context = context;
        renderSelection();
        try {
          console.log(
            `%c[4D方向同步]%c 已注入 v${VERSION}`,
            'color:#f59e0b;font-weight:700',
            'color:#94a3b8',
          );
        } catch (_) {}
      } else if (attempts > 240) {
        clearInterval(timer);
      }
    }, 250);
    state.waitTimer = timer;
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', waitForPlatform, { once: true });
  } else {
    waitForPlatform();
  }
})();