import type { PlanAnnotationAnchor } from "@/lib/plan-native-anchors";

export type PreferredEditor =
  | "vscode"
  | "cursor"
  | "finder"
  | "terminal"
  | "ghostty"
  | "xcode";

export const PREFERRED_EDITOR_STORAGE_KEY =
  "agent-native-plans.preferredEditor";
export const DESKTOP_PLAN_SYNC_AUTO_KEY_PREFIX =
  "agent-native-plans.desktopSync.auto.";
export const PREFERRED_EDITOR_VALUES: PreferredEditor[] = [
  "vscode",
  "cursor",
  "finder",
  "terminal",
  "ghostty",
  "xcode",
];

const EDITOR_OPTIONS: Array<{ value: PreferredEditor; label: string }> = [
  { value: "vscode", label: "VS Code" }, // i18n-ignore stable app name
  { value: "cursor", label: "Cursor" }, // i18n-ignore stable app name
  { value: "finder", label: "Finder" }, // i18n-ignore stable app name
  { value: "terminal", label: "Terminal" }, // i18n-ignore stable app name
  { value: "ghostty", label: "Ghostty" }, // i18n-ignore stable app name
  { value: "xcode", label: "Xcode" }, // i18n-ignore stable app name
];

const EDITOR_ICON_HTML: Record<PreferredEditor, string> = {
  vscode: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-vscode" aria-hidden="true"><path d="M16 3v18l4 -2.5v-13l-4 -2.5"></path><path d="M9.165 13.903l-4.165 3.597l-2 -1l4.333 -4.5m1.735 -1.802l6.932 -7.198v5l-4.795 4.141"></path><path d="M16 16.5l-11 -10l-2 1l13 13.5"></path></svg>`, // i18n-ignore inline SVG icon markup
  cursor: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-cube" aria-hidden="true"><path d="M21 16.008v-8.018a1.98 1.98 0 0 0 -1 -1.717l-7 -4.008a2.016 2.016 0 0 0 -2 0l-7 4.008c-.619 .355 -1 1.01 -1 1.718v8.018c0 .709 .381 1.363 1 1.717l7 4.008a2.016 2.016 0 0 0 2 0l7 -4.008c.619 -.355 1 -1.01 1 -1.718"></path><path d="M12 22v-10"></path><path d="M12 12l8.73 -5.04"></path><path d="M3.27 6.96l8.73 5.04"></path></svg>`, // i18n-ignore inline SVG icon markup
  finder: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-finder" aria-hidden="true"><path d="M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1l0 -14"></path><path d="M7 8v1"></path><path d="M17 8v1"></path><path d="M12.5 4c-.654 1.486 -1.26 3.443 -1.5 9h2.5c-.19 2.867 .094 5.024 .5 7"></path><path d="M7 15.5c3.667 2 6.333 2 10 0"></path></svg>`, // i18n-ignore inline SVG icon markup
  terminal: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-terminal-2" aria-hidden="true"><path d="M8 9l3 3l-3 3"></path><path d="M13 15l3 0"></path><path d="M3 6a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -12"></path></svg>`, // i18n-ignore inline SVG icon markup
  ghostty: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-ghost-3" aria-hidden="true"><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7"></path><path d="M10 10h.01"></path><path d="M14 10h.01"></path></svg>`, // i18n-ignore inline SVG icon markup
  xcode: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-hammer" aria-hidden="true"><path d="M11.414 10l-7.383 7.418a2.091 2.091 0 0 0 0 2.967a2.11 2.11 0 0 0 2.976 0l7.407 -7.385"></path><path d="M18.121 15.293l2.586 -2.586a1 1 0 0 0 0 -1.414l-7.586 -7.586a1 1 0 0 0 -1.414 0l-2.586 2.586a1 1 0 0 0 0 1.414l7.586 7.586a1 1 0 0 0 1.414 0"></path></svg>`, // i18n-ignore inline SVG icon markup
};

export type RuntimeAnnotation = {
  id: string;
  index: number;
  message: string;
  kind: string;
  status: string;
  createdBy: string;
  parentCommentId?: string | null;
  authorEmail?: string | null;
  authorName?: string | null;
  authorAvatarUrl?: string | null;
  authorColor?: string | null;
  authorInitials?: string | null;
  sectionId?: string | null;
  createdAt?: string;
  anchor: PlanAnnotationAnchor;
  replies: RuntimeAnnotationComment[];
  participants: RuntimeAnnotationParticipant[];
  commentCount: number;
};

export type RuntimeAnnotationComment = {
  id: string;
  message: string;
  status: string;
  createdBy: string;
  parentCommentId?: string | null;
  authorEmail?: string | null;
  authorName?: string | null;
  authorAvatarUrl?: string | null;
  authorColor?: string | null;
  authorInitials?: string | null;
  createdAt?: string;
};

export type RuntimeAnnotationParticipant = {
  id: string;
  authorEmail?: string | null;
  authorName?: string | null;
  authorAvatarUrl?: string | null;
  authorColor?: string | null;
  authorInitials?: string | null;
};

export function injectAnnotationRuntime(input: {
  html: string;
  annotations: RuntimeAnnotation[];
  annotateMode: boolean;
  theme: "dark" | "light";
  preferredEditor: PreferredEditor;
  labels: {
    closeCodePreview: string;
  };
}) {
  const { html, annotations, annotateMode, theme, preferredEditor, labels } =
    input;
  const payload = JSON.stringify({
    annotateMode,
    annotations,
    theme,
    preferredEditor,
  }).replace(/[<>&\u2028\u2029]/g, (char) => {
    return (
      {
        "<": "\\u003c",
        ">": "\\u003e",
        "&": "\\u0026",
        "\u2028": "\\u2028",
        "\u2029": "\\u2029",
      }[char] ?? char
    );
  });
  const editorOptionsPayload = JSON.stringify(EDITOR_OPTIONS).replace(
    /[<>&\u2028\u2029]/g,
    (char) => {
      return (
        {
          "<": "\\u003c",
          ">": "\\u003e",
          "&": "\\u0026",
          "\u2028": "\\u2028",
          "\u2029": "\\u2029",
        }[char] ?? char
      );
    },
  );
  const editorIconPayload = JSON.stringify(EDITOR_ICON_HTML).replace(
    /[<>&\u2028\u2029]/g,
    (char) => {
      return (
        {
          "<": "\\u003c",
          ">": "\\u003e",
          "&": "\\u0026",
          "\u2028": "\\u2028",
          "\u2029": "\\u2029",
        }[char] ?? char
      );
    },
  );
  const closeCodePreviewLabel = escapeRuntimeJsString(labels.closeCodePreview);
  const runtime = `<style>
    :root[data-agent-native-theme="light"] {
      color-scheme: light;
      --bg: #f7f7f4;
      --paper: #ffffff;
      --paper-2: #f3f3ef;
      --paper-3: #e9e9e3;
      --line: #dadad2;
      --line-soft: #e8e8e2;
      --text: #171717;
      --soft: #4b4b4b;
      --muted: #70706c;
      --faint: #999992;
      --accent: #00B5FF;
      --accent-soft: rgba(0, 181, 255, .11);
      --shadow: 0 24px 70px rgba(29, 29, 24, .08);
    }
    :root[data-agent-native-theme="light"] body { background: var(--bg) !important; color: var(--text) !important; }
    :root[data-agent-native-theme="light"] code { background: #eeeeea !important; color: #242424 !important; }
    :root[data-agent-native-theme] pre code,
    :root[data-agent-native-theme] pre code * { background: transparent !important; background-image: none !important; box-shadow: none !important; }
    :root[data-agent-native-theme="light"] .mock-plan,
    :root[data-agent-native-theme="light"] .mock-sidebar,
    :root[data-agent-native-theme="light"] .diagram-card,
    :root[data-agent-native-theme="light"] .mock-browser { background-color: #ffffff !important; }
    :root[data-agent-native-theme="light"] .floating-tools,
    :root[data-agent-native-theme="light"] .product-screen,
    :root[data-agent-native-theme="light"] .comment-screen,
    :root[data-agent-native-theme="light"] .annotation-card,
    :root[data-agent-native-theme="light"] .inline-comment,
    :root[data-agent-native-theme="light"] .panel { background-color: #f5f5f1 !important; }
    :root[data-agent-native-theme="light"] .doc-title,
    :root[data-agent-native-theme="light"] .tool.primary,
    :root[data-agent-native-theme="light"] .pin { background: #171717 !important; color: #ffffff !important; }
    :root[data-agent-native-theme="light"] .doc-line,
    :root[data-agent-native-theme="light"] .panel i,
    :root[data-agent-native-theme="light"] .pill { background: #d8d8d2 !important; }
    ::selection { background: rgba(0,181,255,.32); }
    .an-plan-annotating, .an-plan-annotating * { cursor: crosshair !important; }
    .an-plan-annotation-layer { position: absolute; inset: 0; z-index: 2147483000; pointer-events: none; }
    .an-plan-marker { position: absolute; transform: translate(-50%, -50%); min-width: 30px; height: 30px; overflow: visible; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(23,23,25,.86); color: #fff; font: 800 10px/1 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 3px; box-shadow: 0 10px 28px rgba(0,0,0,.36); pointer-events: auto; padding: 2px 6px 2px 2px; }
    .an-plan-marker[data-single="true"] { width: 30px; min-width: 30px; padding: 0; border: 2px solid var(--paper, #111113); background: var(--author-color, #00B5FF); overflow: hidden; }
    .an-plan-marker-stack { display: inline-flex; align-items: center; flex: 0 0 auto; }
    .an-plan-marker-face { width: 26px; height: 26px; margin-left: -7px; overflow: hidden; border: 2px solid var(--paper, #111113); border-radius: 999px; background: var(--author-color, #00B5FF); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
    .an-plan-marker-face:first-child { margin-left: 0; }
    .an-plan-marker[data-single="true"] .an-plan-marker-face { width: 28px; height: 28px; margin-left: 0; border: 0; }
    .an-plan-marker-avatar { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
    .an-plan-marker-initials { width: 100%; height: 100%; border-radius: inherit; background: var(--author-color, #00B5FF); color: #fff; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }
    .an-plan-marker-count { min-width: 13px; padding: 0 2px; color: rgba(255,255,255,.94); font-size: 11px; line-height: 1; }
    .an-plan-marker[hidden] { display: none !important; }
    .an-plan-marker[data-status="resolved"] { opacity: .46; }
    .an-plan-selection-toolbar { position: absolute; z-index: 2147483001; display: none; align-items: center; gap: 4px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(16,16,18,.96); padding: 5px; box-shadow: 0 14px 42px rgba(0,0,0,.34); backdrop-filter: blur(16px); }
    :root[data-agent-native-theme="light"] .an-plan-selection-toolbar { border-color: rgba(0,0,0,.12); background: rgba(255,255,255,.97); box-shadow: 0 14px 42px rgba(29,29,24,.13); }
    .an-plan-selection-toolbar button { height: 34px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--text); padding: 0 11px; font: 650 13px/1 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
    .an-plan-selection-toolbar button:hover { background: rgba(255,255,255,.08); }
    :root[data-agent-native-theme="light"] .an-plan-selection-toolbar button:hover { background: rgba(0,0,0,.06); }
    .an-plan-selection-toolbar svg { width: 17px; height: 17px; color: #00B5FF; }
    .an-plan-code-popover { position: absolute; z-index: 2147483001; width: min(760px, calc(100vw - 24px)); max-height: min(520px, calc(100vh - 24px)); overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(16,16,18,.98); box-shadow: 0 24px 70px rgba(0,0,0,.42); backdrop-filter: blur(18px); }
    :root[data-agent-native-theme="light"] .an-plan-code-popover { border-color: rgba(0,0,0,.12); background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(29,29,24,.16); }
    .an-plan-code-popover-header { display: flex; min-height: 46px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line, rgba(255,255,255,.12)); padding: 7px 9px 7px 14px; color: var(--muted, #a4a4aa); font: 650 12px/1.3 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    .an-plan-code-popover-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text, #f4f4f5); font: 650 13px/1.3 "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
    .an-plan-code-popover-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
    .an-plan-code-popover-close { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font-size: 18px; }
    .an-plan-code-popover-close:hover { background: rgba(255,255,255,.08); color: var(--text, #f4f4f5); }
    :root[data-agent-native-theme="light"] .an-plan-code-popover-close:hover { background: rgba(0,0,0,.06); }
    .an-plan-code-popover .code-preview-title { display: none !important; }
    .an-plan-code-popover .code-preview { border: 0 !important; background: transparent !important; box-shadow: none !important; }
    .an-plan-code-popover .code-preview pre { margin: 0 !important; max-height: 474px; overflow: auto; padding: 14px 16px !important; background: #0c0c0e !important; color: #e9e9ea; font: 12px/1.65 "SFMono-Regular", Consolas, "Liberation Mono", monospace !important; tab-size: 2; }
    .an-plan-code-popover .code-preview pre code { display: block !important; min-width: max-content; border: 0 !important; background: transparent !important; color: inherit !important; font: inherit !important; padding: 0 !important; white-space: pre !important; }
    .an-plan-code-popover .code-preview pre code * { margin: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; padding: 0 !important; text-decoration: none !important; font: inherit !important; }
    .an-plan-code-popover .code-preview pre code code { display: inline !important; }
    .editor-picker { position: relative; display: inline-flex; min-height: 32px; align-items: stretch; overflow: visible; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 8px; background: transparent; }
    .editor-picker:focus-within, .editor-picker:hover { border-color: rgba(0,181,255,.44); background: rgba(0,181,255,.06); }
    .editor-picker button { min-height: 30px; border: 0; border-radius: 0; background: transparent; color: var(--soft, #d4d4d8); padding: 0 10px; font: 650 12px/30px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
    .editor-picker button:hover { color: var(--text, #f4f4f5); background: rgba(255,255,255,.05); }
    .editor-picker-trigger { display: inline-flex; width: 48px; align-items: center; justify-content: center; gap: 6px; border-right: 1px solid var(--line, rgba(255,255,255,.14)) !important; border-radius: 7px 0 0 7px !important; }
    .editor-picker-open { border-radius: 0 7px 7px 0 !important; color: var(--text, #f4f4f5) !important; }
    .editor-picker-select { display: none; }
    .editor-picker-caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); opacity: .72; }
    .editor-picker-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 2147483002; display: none; width: 188px; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 12px; background: var(--paper, #111113); padding: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.32); }
    .editor-picker[data-open="true"] .editor-picker-menu { display: grid; gap: 2px; }
    .editor-picker-option { display: flex !important; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; border-radius: 8px !important; text-align: left; }
    .editor-picker-option:hover, .editor-picker-option.is-active { background: rgba(255,255,255,.06); color: var(--text, #f4f4f5); }
    .editor-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; align-items: center; justify-content: center; }
    .editor-icon svg { width: 18px; height: 18px; stroke-width: 2; }
    .editor-icon-vscode { color: #41a6f6; }
    .editor-icon-cursor { color: var(--text, #f4f4f5); }
    .editor-icon-finder { color: #4aa9ff; }
    .editor-icon-terminal { color: #73d99f; }
    .editor-icon-ghostty { color: #a78bfa; }
    .editor-icon-xcode { color: #54a7ff; }
    .editor-picker-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
    :root[data-agent-native-theme="light"] .editor-picker button { color: var(--soft, #4b4b4b); }
    :root[data-agent-native-theme="light"] .editor-picker button:hover, :root[data-agent-native-theme="light"] .editor-picker-option.is-active { background: rgba(0,0,0,.06); color: var(--text, #171717); }
    :root[data-agent-native-theme="light"] .editor-picker-menu { background: var(--paper, #ffffff); box-shadow: 0 18px 50px rgba(29,29,24,.13); }
    .visual-tabs[data-plan-tabs] { display: grid; gap: 14px; }
    .visual-tabs[data-plan-tabs] .tab-list { display: inline-flex; width: fit-content; max-width: 100%; gap: 8px; border: 0; border-radius: 0; background: transparent; padding: 0; overflow-x: auto; }
    .visual-tabs[data-plan-tabs] .tab-button { min-height: 30px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted, #a4a4aa); padding: 0 11px; font: 650 12px/30px ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; cursor: pointer; }
    .visual-tabs[data-plan-tabs] .tab-button:hover { color: var(--text, #f4f4f5); background: rgba(255,255,255,.05); }
    .visual-tabs[data-plan-tabs] .tab-button.is-active { border-color: var(--text, #f4f4f5); background: transparent; color: var(--text, #f4f4f5); }
    .visual-tabs[data-plan-tabs] .tab-button.is-active:hover { background: transparent; color: var(--text, #f4f4f5); }
    :root[data-agent-native-theme="light"] .visual-tabs[data-plan-tabs] .tab-button:hover { background: rgba(0,0,0,.06); }
    :root[data-agent-native-theme="light"] .visual-tabs[data-plan-tabs] .tab-button.is-active:hover { background: transparent; color: var(--text, #171717); }
    .visual-tabs[data-plan-tabs] .tab-panel { display: none; }
    .visual-tabs[data-plan-tabs] .tab-panel.is-active { display: block; }
    .implementation-map { margin: 24px 0; border-top: 1px solid var(--line, rgba(255,255,255,.14)); }
    .implementation-map-header { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; color: var(--muted, #a4a4aa); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
    .implementation-file-tabs { min-height: 330px; display: grid; grid-template-columns: minmax(220px, .44fr) minmax(0, 1fr); border-top: 1px solid var(--line, rgba(255,255,255,.14)); border-bottom: 1px solid var(--line, rgba(255,255,255,.14)); }
    .implementation-file-list { display: grid; align-content: start; border-right: 1px solid var(--line, rgba(255,255,255,.14)); }
    .implementation-file-tab { width: 100%; display: grid; gap: 3px; border: 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.14)); background: transparent; color: var(--muted, #a4a4aa); padding: 13px 14px; text-align: left; cursor: pointer; }
    .implementation-file-tab:hover { background: rgba(255,255,255,.035); color: var(--soft, #d4d4d8); }
    .implementation-file-tab.is-active { background: var(--paper-2, rgba(255,255,255,.04)); color: var(--text, #f4f4f5); box-shadow: inset 2px 0 0 var(--accent, #00B5FF); }
    .file-tab-name, .file-tab-path { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .file-tab-name { font: 700 14px/1.35 "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
    .file-tab-path { font: 500 12px/1.35 "SFMono-Regular", Consolas, "Liberation Mono", monospace; color: var(--muted, #a4a4aa); }
    .implementation-file-tab.is-active .file-tab-path { color: var(--soft, #d4d4d8); }
    .implementation-file-panels { min-width: 0; }
    .implementation-file-panel { display: none; min-height: 100%; padding: 18px 20px 20px; border: 0 !important; }
    .implementation-file-panel.is-active { display: block; }
    .file-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line, rgba(255,255,255,.14)); }
    .file-title-stack { min-width: 0; display: grid; gap: 5px; }
    .file-name { margin: 0; color: var(--text, #f4f4f5); font: 750 18px/1.25 "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
    .file-path { margin: 0; overflow-wrap: anywhere; color: var(--muted, #a4a4aa); font: 500 12px/1.45 "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
    .file-detail-body { padding-top: 16px; }
    .file-summary { max-width: 760px; margin: 0; color: var(--soft, #d4d4d8); font-size: 15px; }
    .inline-code-preview { margin-top: 18px; overflow: hidden; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 10px; background: #0c0c0e; }
    .code-preview pre, .inline-code-preview pre { margin: 0 !important; max-height: 420px; overflow: auto; padding: 14px 16px !important; background: #0c0c0e !important; color: #e9e9ea; font: 12px/1.65 "SFMono-Regular", Consolas, "Liberation Mono", monospace !important; tab-size: 2; }
    .code-preview pre code, .inline-code-preview pre code { display: block !important; min-width: max-content; border: 0 !important; background: transparent !important; color: inherit !important; font: inherit !important; padding: 0 !important; white-space: pre !important; }
    .code-preview pre code *, .inline-code-preview pre code * { margin: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; padding: 0 !important; text-decoration: none !important; font: inherit !important; }
    .code-preview pre code code, .inline-code-preview pre code code { display: inline !important; }
    .syntax-keyword { color: #7cc7ff; }
    .syntax-string { color: #a6e3a1; }
    .syntax-literal { color: #c4b5fd; }
    .syntax-comment { color: #7a7a83; }
    .file-actions { display: flex; align-items: flex-start; gap: 8px; }
    @media (max-width: 760px) { .implementation-file-tabs { grid-template-columns: 1fr; } .implementation-file-list { border-right: 0; } .implementation-file-panels { border-top: 1px solid var(--line, rgba(255,255,255,.14)); } .implementation-map-header, .file-detail-header, .file-actions { flex-wrap: wrap; } }
  </style><script>
    (() => {
      const state = ${payload};
      const editorOptions = ${editorOptionsPayload};
      const editorIconMap = ${editorIconPayload};
      const root = document.documentElement;
      root.dataset.agentNativeTheme = state.theme || "dark";
      if (state.annotateMode) root.classList.add("an-plan-annotating");
      function removeEmptyPlanSections() {
        const candidates = Array.from(document.querySelectorAll("section[data-plan-section-id], section.plan-section, section[id]"));
        for (const section of candidates) {
          const text = (section.textContent || "").replace(/\\s+/g, " ").trim();
          const hasMedia = Boolean(section.querySelector("img,svg,canvas,video,iframe,table,pre,code,template,.visual,.flow-diagram,.wireframe-shell,.implementation-map,[data-plan-tabs],[data-agent-native-code-preview]"));
          if (!text && !hasMedia) section.remove();
        }
      }
      function initializePlanTabs() {
        const tabsets = Array.from(document.querySelectorAll("[data-plan-tabs]"));
        for (const tabset of tabsets) {
          const buttons = Array.from(tabset.querySelectorAll("[data-tab-target]"));
          const panels = Array.from(tabset.querySelectorAll("[data-tab-panel]"));
          if (buttons.length === 0 || panels.length === 0) continue;
          const activate = (target, notify = true) => {
            for (const button of buttons) {
              const isActive = button.getAttribute("data-tab-target") === target;
              button.classList.toggle("is-active", isActive);
              button.setAttribute("aria-selected", String(isActive));
            }
            for (const panel of panels) {
              panel.classList.toggle("is-active", panel.getAttribute("data-tab-panel") === target);
            }
            requestAnimationFrame(syncAnnotationMarkers);
            if (notify) {
              window.parent.postMessage({ type: "agent-native-plan-close-comment-popover" }, "*");
            }
            postDocState();
          };
          for (const button of buttons) {
            button.setAttribute("role", "tab");
            button.addEventListener("click", (event) => {
              event.preventDefault();
              event.stopPropagation();
              activate(button.getAttribute("data-tab-target") || "");
            });
          }
          for (const panel of panels) panel.setAttribute("role", "tabpanel");
          const initial = buttons.find((button) => button.classList.contains("is-active")) || buttons[0];
          activate(initial.getAttribute("data-tab-target") || "", false);
        }
      }
      function displayFilePath(rawPath) {
        return String(rawPath || "").replace(/\\s+/g, " ").trim().replace(/:\\d+$/, "");
      }
      function basenameForPath(path) {
        return path.split("/").filter(Boolean).pop() || path || "File";
      }
      function removeImplementationSymbolList(file) {
        file.querySelector(".symbol-list")?.remove();
      }
      function removeImplementationPreviewButtons(container) {
        for (const button of Array.from(container.querySelectorAll("[data-agent-native-code-preview]"))) {
          button.removeAttribute("data-agent-native-code-preview");
          button.removeAttribute("data-agent-native-hover-preview");
          if (button.tagName === "BUTTON" && button.closest(".file-actions")) button.remove();
        }
      }
      function inlinePreviewFromTemplate(template) {
        const preview = template?.content?.querySelector?.(".code-preview");
        if (!preview) return null;
        const clone = preview.cloneNode(true);
        clone.classList.add("inline-code-preview");
        clone.querySelector?.(".code-preview-title")?.remove?.();
        return clone;
      }
      function ensureInlineCodePreview(file) {
        const body = file.querySelector(".file-detail-body");
        const template = file.querySelector("template");
        if (body && !body.querySelector(".inline-code-preview")) {
          const inline = inlinePreviewFromTemplate(template);
          if (inline) body.appendChild(inline);
        }
        template?.remove?.();
        removeImplementationPreviewButtons(file);
      }
      function upgradeImplementationFileMaps() {
        const maps = Array.from(document.querySelectorAll(".implementation-map"));
        for (const map of maps) {
          const oldContainer = map.querySelector(":scope > .implementation-files");
          if (!oldContainer) {
            removeImplementationPreviewButtons(map);
            for (const file of Array.from(map.querySelectorAll(".implementation-file"))) {
              removeImplementationSymbolList(file);
              file.querySelector(".file-path span")?.remove();
              ensureInlineCodePreview(file);
            }
            continue;
          }
          const files = Array.from(oldContainer.querySelectorAll(":scope > .implementation-file"));
          if (files.length === 0) continue;
          map.dataset.planTabs = "true";
          oldContainer.className = "implementation-file-tabs";
          const list = document.createElement("div");
          list.className = "implementation-file-list";
          list.setAttribute("role", "tablist");
          list.setAttribute("aria-label", "Files touched");
          const panels = document.createElement("div");
          panels.className = "implementation-file-panels";
          oldContainer.replaceChildren(list, panels);
          files.forEach((file, index) => {
            const path = displayFilePath(file.getAttribute("data-file-path") || file.querySelector(".file-path")?.textContent || ("File " + (index + 1)));
            const existingActions = file.querySelector(":scope > .file-actions") || file.querySelector(".file-actions");
            const existingTemplates = Array.from(file.querySelectorAll(":scope > template"));
            const existingInfo = Array.from(file.children).find((child) => child !== existingActions && child.tagName !== "TEMPLATE");
            const summary = existingInfo?.querySelector?.(".file-summary") || file.querySelector(".file-summary");
            const legacyButtons = Array.from(existingActions?.querySelectorAll("[data-agent-native-open-editor]") || []);
            const vscodeHref = legacyButtons.map((button) => button.getAttribute("data-agent-native-open-editor") || "").find((href) => href.startsWith("vscode://file/")) || "";
            const cursorHref = legacyButtons.map((button) => button.getAttribute("data-agent-native-open-editor") || "").find((href) => href.startsWith("cursor://file/")) || "";
            const openFile = openFileFromHref(vscodeHref || cursorHref);
            const target = "runtime-file-" + index + "-" + path.toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-|-$/g, "");
            const tab = document.createElement("button");
            tab.type = "button";
            tab.className = "implementation-file-tab" + (index === 0 ? " is-active" : "");
            tab.dataset.tabTarget = target;
            tab.dataset.filePath = path;
            if (openFile) tab.dataset.agentNativeOpenFile = openFile;
            tab.innerHTML = '<span class="file-tab-name"></span><span class="file-tab-path"></span>';
            tab.querySelector(".file-tab-name").textContent = basenameForPath(path);
            tab.querySelector(".file-tab-path").textContent = path;
            list.appendChild(tab);

            file.className = "implementation-file implementation-file-panel tab-panel" + (index === 0 ? " is-active" : "");
            file.dataset.tabPanel = target;
            file.dataset.filePath = path;

            const header = document.createElement("div");
            header.className = "file-detail-header";
            const title = document.createElement("div");
            title.className = "file-title-stack";
            title.innerHTML = '<p class="file-name"></p><p class="file-path"></p>';
            title.querySelector(".file-name").textContent = basenameForPath(path);
            title.querySelector(".file-path").textContent = path;
            header.appendChild(title);
            if (existingActions) header.appendChild(existingActions);

            const body = document.createElement("div");
            body.className = "file-detail-body";
            if (summary) body.appendChild(summary);
            const inlinePreview = inlinePreviewFromTemplate(existingTemplates[0]);
            if (inlinePreview) body.appendChild(inlinePreview);

            removeImplementationPreviewButtons(file);
            file.replaceChildren(header, body);
            removeImplementationSymbolList(file);
            ensureInlineCodePreview(file);
            panels.appendChild(file);
          });
        }
      }
      const editorValues = editorOptions.map((option) => option.value);
      let preferredEditor = normalizeEditor(state.preferredEditor);
      function normalizeEditor(value) {
        return editorValues.includes(value) ? value : "vscode";
      }
      function editorLabel(editor) {
        return editorOptions.find((option) => option.value === editor)?.label || "VS Code";
      }
      function editorIconHtml(editor) {
        const normalized = normalizeEditor(editor);
        return '<span class="editor-icon editor-icon-' + normalized + '">' + (editorIconMap[normalized] || "") + '</span>';
      }
      function editorTriggerHtml(editor) {
        const normalized = normalizeEditor(editor);
        return editorIconHtml(normalized) + '<span class="editor-picker-sr">Preferred editor: ' + editorLabel(normalized) + '</span><span class="editor-picker-caret" aria-hidden="true"></span>';
      }
      function editorSelectOptionsHtml() {
        return editorOptions.map(({ value, label }) => '<option value="' + value + '">' + label + '</option>').join(""); // i18n-ignore generated editor picker markup with stable app labels
      }
      function editorMenuHtml(activeEditor) {
        const active = normalizeEditor(activeEditor);
        return editorOptions.map(({ value, label }) => {
          const selected = value === active;
          return '<button type="button" class="editor-picker-option' + (selected ? " is-active" : "") + '" data-agent-native-editor-option="' + value + '" role="menuitemradio" aria-checked="' + (selected ? "true" : "false") + '">' + editorIconHtml(value) + '<span>' + label + '</span></button>'; // i18n-ignore generated editor picker markup with stable app labels
        }).join("");
      }
      function closeEditorMenus(exceptPicker) {
        for (const picker of document.querySelectorAll("[data-agent-native-editor-picker]")) {
          if (picker !== exceptPicker) {
            picker.removeAttribute("data-open");
            picker.querySelector("[data-agent-native-editor-trigger]")?.setAttribute("aria-expanded", "false");
          }
        }
      }
      function setPreferredEditor(editor, notifyParent) {
        preferredEditor = normalizeEditor(editor);
        for (const picker of document.querySelectorAll("[data-agent-native-editor-picker]")) {
          picker.dataset.editor = preferredEditor;
          const trigger = picker.querySelector("[data-agent-native-editor-trigger]");
          if (trigger) {
            trigger.innerHTML = editorTriggerHtml(preferredEditor);
            trigger.setAttribute("aria-label", "Choose editor. Current: " + editorLabel(preferredEditor));
          }
          const select = picker.querySelector("[data-agent-native-editor-select]");
          if (select) select.value = preferredEditor;
          const menu = picker.querySelector("[data-agent-native-editor-menu]");
          if (menu) menu.innerHTML = editorMenuHtml(preferredEditor);
        }
        if (notifyParent) {
          window.parent.postMessage({ type: "agent-native-plan-editor-preference", editor: preferredEditor }, "*");
        }
      }
      function splitFileLocation(filePath, explicitLine) {
        const value = filePath || "";
        const match = value.match(/^(.*?)(?::(\\d+)(?::(\\d+))?)?$/);
        return {
          path: match?.[1] || value,
          line: explicitLine || match?.[2] || "",
          column: match?.[3] || "1"
        };
      }
      function openFileFromHref(href) {
        const match = String(href || "").match(/^(?:vscode|cursor):\\/\\/file(.+)$/);
        return match?.[1] ? decodeURI(match[1]) : "";
      }
      function directoryForPath(filePath) {
        const index = filePath.lastIndexOf("/");
        return index > 0 ? filePath.slice(0, index) : filePath;
      }
      function hrefForEditor(editor, filePath, line) {
        if (!filePath) return "";
        const normalized = normalizeEditor(editor);
        const location = splitFileLocation(filePath, line);
        const lineSuffix = location.line ? ":" + location.line + ":" + location.column : "";
        if (normalized === "finder") return "file://" + encodeURI(location.path);
        if (normalized === "xcode") {
          return "xcode://open?url=" + encodeURIComponent("file://" + location.path) + (location.line ? "&line=" + encodeURIComponent(location.line) : ""); // i18n-ignore stable editor URL scheme
        }
        if (normalized === "terminal") {
          return "terminal://open?path=" + encodeURIComponent(directoryForPath(location.path)); // i18n-ignore stable editor URL scheme
        }
        if (normalized === "ghostty") {
          return "ghostty://open?path=" + encodeURIComponent(directoryForPath(location.path)); // i18n-ignore stable editor URL scheme
        }
        return normalized + "://file" + encodeURI(location.path) + lineSuffix;
      }
      function createEditorPicker(openFile, hrefs = {}, line = "") {
        const picker = document.createElement("div");
        picker.className = "editor-picker";
        picker.dataset.agentNativeEditorPicker = "true";
        picker.dataset.editor = preferredEditor;
        const trigger = document.createElement("button");
        trigger.type = "button";
        trigger.className = "editor-picker-trigger";
        trigger.dataset.agentNativeEditorTrigger = "true";
        trigger.setAttribute("aria-haspopup", "menu");
        trigger.setAttribute("aria-expanded", "false");
        trigger.setAttribute("aria-label", "Choose editor. Current: " + editorLabel(preferredEditor));
        trigger.innerHTML = editorTriggerHtml(preferredEditor);
        const select = document.createElement("select");
        select.className = "editor-picker-select";
        select.dataset.agentNativeEditorSelect = "true";
        select.setAttribute("aria-hidden", "true");
        select.setAttribute("tabindex", "-1");
        select.innerHTML = editorSelectOptionsHtml();
        const menu = document.createElement("div");
        menu.className = "editor-picker-menu";
        menu.dataset.agentNativeEditorMenu = "true";
        menu.setAttribute("role", "menu");
        menu.innerHTML = editorMenuHtml(preferredEditor);
        const open = document.createElement("button");
        open.type = "button";
        open.className = "editor-picker-open";
        open.textContent = "Open";
        open.dataset.agentNativeOpenSelectedEditor = "true";
        if (openFile) open.dataset.agentNativeOpenFile = openFile;
        if (line) open.dataset.agentNativeOpenLine = line;
        if (hrefs.vscode) open.dataset.agentNativeOpenVscode = hrefs.vscode;
        if (hrefs.cursor) open.dataset.agentNativeOpenCursor = hrefs.cursor;
        picker.append(trigger, select, menu, open);
        return picker;
      }
      function upgradeEditorPickerElement(picker) {
        if (picker.querySelector("[data-agent-native-editor-trigger]")) return;
        const select = picker.querySelector("[data-agent-native-editor-select]");
        const open = picker.querySelector("[data-agent-native-open-selected-editor], [data-agent-native-open-file]") || document.createElement("button");
        const editor = normalizeEditor(select?.value || picker.dataset.editor || preferredEditor);
        const openFile = open.getAttribute?.("data-agent-native-open-file") || "";
        const openLine = open.getAttribute?.("data-agent-native-open-line") || "";
        const vscode = open.getAttribute?.("data-agent-native-open-vscode") || "";
        const cursor = open.getAttribute?.("data-agent-native-open-cursor") || "";
        const upgraded = createEditorPicker(openFile, { vscode, cursor }, openLine);
        picker.replaceChildren(...Array.from(upgraded.childNodes));
        picker.className = "editor-picker";
        picker.dataset.agentNativeEditorPicker = "true";
        picker.dataset.editor = editor;
      }
      function initializeEditorPickers() {
        const actionGroups = Array.from(document.querySelectorAll(".file-actions"));
        for (const actions of actionGroups) {
          if (actions.querySelector("[data-agent-native-editor-picker]")) {
            for (const picker of Array.from(actions.querySelectorAll("[data-agent-native-editor-picker]"))) {
              upgradeEditorPickerElement(picker);
            }
            continue;
          }
          const legacyButtons = Array.from(actions.querySelectorAll("[data-agent-native-open-editor]"));
          if (legacyButtons.length === 0) continue;
          const hrefs = {};
          for (const button of legacyButtons) {
            const href = button.getAttribute("data-agent-native-open-editor") || "";
            if (href.startsWith("cursor://file/")) hrefs.cursor = href;
            if (href.startsWith("vscode://file/")) hrefs.vscode = href;
            button.remove();
          }
          const openFile = openFileFromHref(hrefs.vscode || hrefs.cursor);
          if (!openFile && !hrefs.cursor && !hrefs.vscode) continue;
          actions.appendChild(createEditorPicker(openFile, hrefs));
        }
        for (const picker of Array.from(document.querySelectorAll("[data-agent-native-editor-picker]"))) {
          upgradeEditorPickerElement(picker);
        }
        setPreferredEditor(preferredEditor, false);
      }
      function escapeCodeHtml(value) {
        return String(value || "")
          .replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&#39;");
      }
      function highlightPlainCodeBlocks() {
        const blocks = Array.from(document.querySelectorAll(".code-preview pre, .inline-code-preview pre"));
        for (const pre of blocks) {
          const target = pre.querySelector("code") || pre;
          if (target.querySelector(".syntax-keyword,.syntax-string,.syntax-literal,.syntax-comment")) continue;
          const text = target.textContent || "";
          if (!text.trim()) continue;
          let html = escapeCodeHtml(text);
          html = html
            .replace(/(&quot;[^&]*(?:&quot;)|&#39;[^&]*(?:&#39;)|\`[^\`]*\`)/g, '<span class="syntax-string">$1</span>')
            .replace(/\\b(import|export|from|const|let|var|function|return|type|interface|class|extends|async|await|if|else|for|while|new|throw|try|catch|switch|case|default)\\b/g, '<span class="syntax-keyword">$1</span>')
            .replace(/\\b(true|false|null|undefined)\\b/g, '<span class="syntax-literal">$1</span>')
            .replace(/(^|\\n)(\\s*\\/\\/.*)/g, '$1<span class="syntax-comment">$2</span>');
          target.innerHTML = html;
        }
      }
      function setRuntimeAnnotateMode(value) {
        state.annotateMode = Boolean(value);
        root.classList.toggle("an-plan-annotating", state.annotateMode);
        if (state.annotateMode) {
          closeEditorMenus();
          hideCodePopover();
          hideSelectionToolbar();
        } else {
          hideSelectionToolbar();
        }
        postDocState();
      }
      function setRuntimeTheme(theme) {
        state.theme = theme === "light" ? "light" : "dark";
        root.dataset.agentNativeTheme = state.theme;
      }
      function restoreDocumentScroll(savedState) {
        if (!savedState) return;
        const doc = document.documentElement;
        const scrollWidth = Math.max(doc.scrollWidth, document.body?.scrollWidth || 0);
        const scrollHeight = Math.max(doc.scrollHeight, document.body?.scrollHeight || 0);
        const x =
          typeof savedState.scrollX === "number"
            ? savedState.scrollX * (scrollWidth / Math.max(savedState.scrollWidth || scrollWidth, 1))
            : 0;
        const y =
          typeof savedState.scrollY === "number"
            ? savedState.scrollY * (scrollHeight / Math.max(savedState.scrollHeight || scrollHeight, 1))
            : 0;
        requestAnimationFrame(() => {
          window.scrollTo(x, y);
          syncAnnotationMarkers();
          postDocState();
          requestAnimationFrame(postDocState);
        });
      }
      window.addEventListener("message", (event) => {
        const data = event.data || {};
        if (data.type !== "agent-native-plan-runtime-state") return;
        if (typeof data.parentOrigin === "string" && data.parentOrigin && data.parentOrigin !== "null") {
          window.__agentNativePlanParentOrigin = data.parentOrigin;
        }
        if (typeof data.theme === "string") setRuntimeTheme(data.theme);
        if (typeof data.preferredEditor === "string") {
          setPreferredEditor(data.preferredEditor, false);
        }
        if (typeof data.annotateMode === "boolean") {
          setRuntimeAnnotateMode(data.annotateMode);
        }
        if (data.restoreScroll) restoreDocumentScroll(data.restoreScroll);
      });
      function postDocState() {
        const doc = document.documentElement;
        window.parent.postMessage({
          type: "agent-native-plan-doc-state",
          state: {
            scrollX: window.scrollX || doc.scrollLeft || 0,
            scrollY: window.scrollY || doc.scrollTop || 0,
            scrollWidth: Math.max(doc.scrollWidth, document.body?.scrollWidth || 0),
            scrollHeight: Math.max(doc.scrollHeight, document.body?.scrollHeight || 0),
            clientWidth: doc.clientWidth,
            clientHeight: doc.clientHeight
          }
        }, "*");
      }
      let annotationMarkerSyncFrame = 0;
      function scheduleAnnotationMarkerSync() {
        if (annotationMarkerSyncFrame) return;
        annotationMarkerSyncFrame = requestAnimationFrame(() => {
          annotationMarkerSyncFrame = 0;
          syncAnnotationMarkers();
        });
      }
      function markerAuthorFromItem(item) {
        return {
          authorName: item.authorName,
          authorEmail: item.authorEmail,
          authorAvatarUrl: item.authorAvatarUrl,
          authorColor: item.authorColor,
          authorInitials: item.authorInitials
        };
      }
      function createMarkerFace(author) {
        const face = document.createElement("span");
        face.className = "an-plan-marker-face";
        face.style.setProperty("--author-color", author.authorColor || "#00B5FF");
        const fallback = document.createElement("span");
        fallback.className = "an-plan-marker-initials";
        fallback.textContent = author.authorInitials || "?";
        if (author.authorAvatarUrl) {
          const image = document.createElement("img");
          image.className = "an-plan-marker-avatar";
          image.src = author.authorAvatarUrl;
          image.alt = author.authorName || "Comment author";
          image.addEventListener("error", () => {
            image.replaceWith(fallback);
          });
          face.appendChild(image);
        } else {
          face.appendChild(fallback);
        }
        return face;
      }
      function setMarkerThreadFaces(marker, item) {
        const participants = Array.isArray(item.participants) && item.participants.length
          ? item.participants
          : [markerAuthorFromItem(item)];
        const count = Math.max(1, Number(item.commentCount || 1));
        const single = participants.length <= 1 && count <= 1;
        marker.dataset.single = String(single);
        marker.style.setProperty("--author-color", participants[0]?.authorColor || item.authorColor || "#00B5FF");
        const stack = document.createElement("span");
        stack.className = "an-plan-marker-stack";
        for (const author of participants.slice(0, 2)) {
          stack.appendChild(createMarkerFace(author));
        }
        marker.replaceChildren(stack);
        if (!single) {
          const countLabel = document.createElement("span");
          countLabel.className = "an-plan-marker-count";
          countLabel.textContent = count > 99 ? "99+" : String(count);
          marker.appendChild(countLabel);
        }
      }
      removeEmptyPlanSections();
      upgradeImplementationFileMaps();
      initializePlanTabs();
      initializeEditorPickers();
      highlightPlainCodeBlocks();
      postDocState();
      window.addEventListener("scroll", postDocState, { passive: true });
      window.addEventListener("resize", () => {
        scheduleAnnotationMarkerSync();
        postDocState();
      });
      window.addEventListener("agent-native-plan-board-layout-change", () => {
        scheduleAnnotationMarkerSync();
        postDocState();
      });
      function pct(value, total) {
        return Math.max(0, Math.min(100, Number(((value / Math.max(total, 1)) * 100).toFixed(3))));
      }
      function closestSection(target) {
        if (!(target instanceof Element)) return null;
        return target.closest("[data-plan-section-id], section[id], article[id], [id]");
      }
      function normalizeText(value) {
        return String(value || "").replace(/\\s+/g, " ").trim();
      }
      function textSnippet(target) {
        if (!(target instanceof Element)) return "";
        const text = normalizeText(target.innerText || target.textContent || "");
        return text.slice(0, 90);
      }
      function closestTextContext(target) {
        if (!(target instanceof Element)) return "";
        const selector = [
          "p",
          "li",
          "h1",
          "h2",
          "h3",
          "h4",
          "td",
          "th",
          "blockquote",
          "figcaption",
          "summary",
          "button",
          "a",
          "label",
          "pre",
          "code",
          "[data-plan-text]"
        ].join(",");
        const direct = target.matches(selector) ? target : target.closest(selector);
        const candidates = [direct, target, target.parentElement, closestSection(target)].filter(Boolean);
        for (const candidate of candidates) {
          const text = normalizeText(candidate.innerText || candidate.textContent || "");
          if (text.length >= 8) return text.slice(0, 220);
        }
        return "";
      }
      function closestVisualContext(target) {
        if (!(target instanceof Element)) return null;
        return target.closest(".wireframe-shell,.mock-browser,.mock-plan,.mock-sidebar,.diagram-card,.flow-diagram,svg,canvas,img,figure,[data-plan-visual],[data-visual]");
      }
      function visualLabel(visual, section) {
        if (!(visual instanceof Element)) return "";
        return normalizeText(
          visual.getAttribute("aria-label") ||
            visual.getAttribute("data-label") ||
            visual.querySelector?.("strong,h3,h4")?.textContent ||
            sectionTitle(section) ||
            "Visual"
        );
      }
      function clamp(value, min, max) {
        return Math.max(min, Math.min(max, value));
      }
      function cssEscape(value) {
        if (window.CSS?.escape) return window.CSS.escape(String(value));
        return String(value).replace(/[^a-zA-Z0-9_-]/g, (char) => "\\\\" + char);
      }
      function cssAttr(value) {
        return String(value || "").replace(/\\\\/g, "\\\\\\\\").replace(/"/g, '\\"');
      }
      function uniqueSelector(selector) {
        try {
          return document.querySelectorAll(selector).length === 1;
        } catch {
          return false;
        }
      }
      function selectorForElement(element) {
        if (!(element instanceof Element)) return "";
        if (element.id) {
          const selector = "#" + cssEscape(element.id);
          if (uniqueSelector(selector)) return selector;
        }
        for (const attr of ["data-plan-section-id", "data-tab-panel", "data-file-path"]) {
          const value = element.getAttribute(attr);
          if (!value) continue;
          const selector = element.tagName.toLowerCase() + "[" + attr + '="' + cssAttr(value) + '"]';
          if (uniqueSelector(selector)) return selector;
        }
        const parts = [];
        let current = element;
        while (current && current !== document.body && current !== document.documentElement) {
          let part = current.tagName.toLowerCase();
          const parent = current.parentElement;
          if (!parent) break;
          const sameTagSiblings = Array.from(parent.children).filter((child) => child.tagName === current.tagName);
          if (sameTagSiblings.length > 1) {
            part += ":nth-of-type(" + (sameTagSiblings.indexOf(current) + 1) + ")";
          }
          parts.unshift(part);
          const selector = "body > " + parts.join(" > ");
          if (uniqueSelector(selector)) return selector;
          current = parent;
        }
        return parts.length ? "body > " + parts.join(" > ") : "";
      }
      function anchorTargetForElement(element) {
        if (!(element instanceof Element)) return null;
        const visual = closestVisualContext(element);
        if (visual) return visual;
        return closestTextElement(element) || element.closest("[data-tab-panel], [data-plan-section-id], section[id], article[id]") || element;
      }
      function withTargetAnchor(anchor, target, clientX, clientY) {
        const targetElement = anchorTargetForElement(target);
        const rect = targetElement?.getBoundingClientRect?.();
        if (!targetElement || !rect || (!rect.width && !rect.height)) return anchor;
        return {
          ...anchor,
          targetSelector: selectorForElement(targetElement) || undefined,
          targetX: pct(clamp(clientX, rect.left, rect.right) - rect.left, rect.width),
          targetY: pct(clamp(clientY, rect.top, rect.bottom) - rect.top, rect.height)
        };
      }
      function ensureLayer() {
        let layer = document.querySelector(".an-plan-annotation-layer");
        if (!layer) {
          layer = document.createElement("div");
          layer.className = "an-plan-annotation-layer";
          document.body.style.position = document.body.style.position || "relative";
          document.body.appendChild(layer);
        }
        return layer;
      }
      function sectionForNode(node) {
        const element = node instanceof Element ? node : node?.parentElement;
        return closestSection(element);
      }
      function sectionTitle(section) {
        return section?.querySelector?.("h1,h2,h3,[data-plan-section-title]")?.textContent?.replace(/\\s+/g, " ").trim() || "";
      }
      function tabContextForElement(element) {
        if (!(element instanceof Element)) return {};
        const panel = element.closest("[data-tab-panel]");
        const tabPanelId = panel?.getAttribute("data-tab-panel") || "";
        if (!tabPanelId) return {};
        const tabset = panel.closest("[data-plan-tabs]");
        const tabButton = Array.from(tabset?.querySelectorAll("[data-tab-target]") || []).find((button) => button.getAttribute("data-tab-target") === tabPanelId);
        const tabLabel = normalizeText(tabButton?.textContent || panel.getAttribute("aria-label") || "");
        return {
          tabPanelId,
          tabLabel: tabLabel || undefined
        };
      }
      function tabContextForPoint(anchor) {
        if (!anchor || anchor.tabPanelId) return {};
        const doc = document.documentElement;
        const clientX = (anchor.x / 100) * doc.scrollWidth - window.scrollX;
        const clientY = (anchor.y / 100) * Math.max(doc.scrollHeight, document.body.scrollHeight) - window.scrollY;
        const element = document.elementFromPoint(clientX, clientY);
        return tabContextForElement(element);
      }
      function isTabContextActive(tabPanelId) {
        if (!tabPanelId) return true;
        const panel = Array.from(document.querySelectorAll("[data-tab-panel]")).find((candidate) => candidate.getAttribute("data-tab-panel") === tabPanelId);
        return Boolean(panel?.classList.contains("is-active"));
      }
      function elementTabPanelId(element) {
        if (!(element instanceof Element)) return "";
        return element.closest("[data-tab-panel]")?.getAttribute("data-tab-panel") || "";
      }
      function isElementTabActive(element) {
        const tabPanelId = elementTabPanelId(element);
        return !tabPanelId || isTabContextActive(tabPanelId);
      }
      function resolveAnchorTarget(anchor) {
        if (!anchor) return null;
        if (anchor.targetSelector) {
          try {
            const target = document.querySelector(anchor.targetSelector);
            if (target) return target;
          } catch {
            // Ignore stale selectors and fall back to quote matching.
          }
        }
        const quote = normalizeText(anchor.textQuote || anchor.snippet || "");
        if (!quote) return null;
        const needle = quote.slice(0, 120);
        const scopes = [];
        if (anchor.sectionId) {
          const escapedSection = cssEscape(anchor.sectionId);
          scopes.push(
            document.querySelector('[data-plan-section-id="' + cssAttr(anchor.sectionId) + '"]'),
            document.getElementById(anchor.sectionId),
            document.querySelector("#" + escapedSection)
          );
        }
        scopes.push(document);
        for (const scope of scopes.filter(Boolean)) {
          const candidates = Array.from(scope.querySelectorAll?.([
            "p",
            "li",
            "h1",
            "h2",
            "h3",
            "h4",
            "td",
            "th",
            "blockquote",
            "figcaption",
            "summary",
            "button",
            "a",
            "label",
            "pre",
            "code",
            "[data-plan-text]"
          ].join(",")) || []);
          const match = candidates.find((candidate) => normalizeText(candidate.textContent || "").includes(needle));
          if (match) return anchorTargetForElement(match);
        }
        return null;
      }
      function pointForAnchor(anchor) {
        const doc = document.documentElement;
        const docHeight = Math.max(doc.scrollHeight, document.body.scrollHeight);
        const target = resolveAnchorTarget(anchor);
        if (target) {
          if (!isElementTabActive(target)) return null;
          const rect = target.getBoundingClientRect();
          if (rect && (rect.width || rect.height)) {
            return {
              left: rect.left + window.scrollX + ((anchor.targetX ?? anchor.visualX ?? 50) / 100) * rect.width,
              top: rect.top + window.scrollY + ((anchor.targetY ?? anchor.visualY ?? 50) / 100) * rect.height
            };
          }
        }
        const tabContext = anchor.tabPanelId ? { tabPanelId: anchor.tabPanelId } : tabContextForPoint(anchor);
        if (!isTabContextActive(tabContext.tabPanelId)) return null;
        return {
          left: (anchor.x / 100) * doc.scrollWidth,
          top: (anchor.y / 100) * docHeight
        };
      }
      function setMarkerVisibility(marker, visible) {
        marker.style.display = visible ? "inline-flex" : "none";
        marker.setAttribute("aria-hidden", String(!visible));
      }
      function positionMarker(marker, item) {
        const point = pointForAnchor(item.anchor);
        if (!point) {
          setMarkerVisibility(marker, false);
          return;
        }
        marker.style.left = point.left + "px";
        marker.style.top = point.top + "px";
        setMarkerVisibility(marker, true);
      }
      function anchorWithCurrentPoint(anchor) {
        const point = pointForAnchor(anchor);
        if (!point) return anchor;
        const doc = document.documentElement;
        return {
          ...anchor,
          x: pct(point.left, doc.scrollWidth),
          y: pct(point.top, Math.max(doc.scrollHeight, document.body.scrollHeight))
        };
      }
      function rangeFromPoint(clientX, clientY) {
        if (document.caretPositionFromPoint) {
          const position = document.caretPositionFromPoint(clientX, clientY);
          if (!position?.offsetNode) return null;
          const range = document.createRange();
          range.setStart(position.offsetNode, position.offset);
          range.collapse(true);
          return range;
        }
        if (document.caretRangeFromPoint) {
          return document.caretRangeFromPoint(clientX, clientY);
        }
        return null;
      }
      function expandRangeToWord(range) {
        if (!range || range.startContainer.nodeType !== Node.TEXT_NODE) return null;
        const node = range.startContainer;
        const text = node.textContent || "";
        if (!text.trim()) return null;
        let index = Math.min(range.startOffset, Math.max(0, text.length - 1));
        if (/\\s/.test(text[index] || "")) {
          let left = index - 1;
          let right = index + 1;
          while (left >= 0 || right < text.length) {
            if (left >= 0 && !/\\s/.test(text[left])) {
              index = left;
              break;
            }
            if (right < text.length && !/\\s/.test(text[right])) {
              index = right;
              break;
            }
            left -= 1;
            right += 1;
          }
        }
        if (/\\s/.test(text[index] || "")) return null;
        let start = index;
        let end = index + 1;
        while (start > 0 && !/\\s/.test(text[start - 1])) start -= 1;
        while (end < text.length && !/\\s/.test(text[end])) end += 1;
        const selectedText = text.slice(start, end).trim();
        if (selectedText.length < 2) return null;
        const wordRange = document.createRange();
        wordRange.setStart(node, start);
        wordRange.setEnd(node, end);
        return { range: wordRange, selectedText };
      }
      function closestTextElement(target) {
        if (!(target instanceof Element)) return null;
        const selector = [
          "p",
          "li",
          "h1",
          "h2",
          "h3",
          "h4",
          "td",
          "th",
          "blockquote",
          "figcaption",
          "summary",
          "button",
          "a",
          "label",
          "pre",
          "code",
          "[data-plan-text]"
        ].join(",");
        return target.matches(selector) ? target : target.closest(selector);
      }
      function anchorFromPoint(clientX, clientY, target) {
        const word = expandRangeToWord(rangeFromPoint(clientX, clientY));
        if (word) {
          const anchor = anchorFromRange(word.range, word.selectedText);
          if (anchor) return anchor;
        }
        const textElement = closestTextElement(target);
        if (!(textElement instanceof Element)) return null;
        const rect = textElement.getBoundingClientRect();
        if (!rect || (!rect.width && !rect.height)) return null;
        const doc = document.documentElement;
        const textQuote = closestTextContext(textElement);
        const section = closestSection(textElement);
        const anchor = {
          x: pct(clamp(clientX, rect.left, rect.right) + window.scrollX, doc.scrollWidth),
          y: pct(clamp(clientY, rect.top, rect.bottom) + window.scrollY, Math.max(doc.scrollHeight, document.body.scrollHeight)),
          sectionId: section?.getAttribute("data-plan-section-id") || section?.id || undefined,
          sectionTitle: sectionTitle(section) || undefined,
          ...tabContextForElement(textElement),
          snippet: textQuote || textSnippet(textElement),
          textQuote: textQuote || undefined,
          anchorKind: textQuote ? "text" : "point",
          tagName: textElement.tagName.toLowerCase()
        };
        return withTargetAnchor(anchor, textElement, clientX, clientY);
      }
      function anchorFromRange(range, selectedText) {
        const rect = range.getBoundingClientRect();
        if (!rect || (!rect.width && !rect.height)) return null;
        const doc = document.documentElement;
        const section = sectionForNode(range.commonAncestorContainer);
        const rangeElement = range.commonAncestorContainer instanceof Element ? range.commonAncestorContainer : range.commonAncestorContainer.parentElement;
        const anchor = {
          x: pct(rect.left + window.scrollX + rect.width / 2, doc.scrollWidth),
          y: pct(rect.top + window.scrollY + rect.height / 2, Math.max(doc.scrollHeight, document.body.scrollHeight)),
          sectionId: section?.getAttribute("data-plan-section-id") || section?.id || undefined,
          sectionTitle: sectionTitle(section) || undefined,
          ...tabContextForElement(rangeElement),
          snippet: selectedText.slice(0, 160),
          textQuote: selectedText.slice(0, 220),
          anchorKind: "text",
          tagName: "selection"
        };
        return withTargetAnchor(anchor, rangeElement, rect.left + rect.width / 2, rect.top + rect.height / 2);
      }
      function ensureSelectionToolbar() {
        let toolbar = document.querySelector(".an-plan-selection-toolbar");
        if (!toolbar) {
          toolbar = document.createElement("div");
          toolbar.className = "an-plan-selection-toolbar";
          toolbar.innerHTML = '<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 9h8"/><path d="M8 13h6"/><path d="M12 20l-3-3H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v4.5"/><path d="M19 16v6"/><path d="M16 19h6"/></svg><span>Comment</span></button>';
          const button = toolbar.querySelector("button");
          button?.addEventListener("mousedown", (event) => event.preventDefault());
          button?.addEventListener("click", (event) => {
            event.preventDefault();
            event.stopPropagation();
            const selection = window.getSelection();
            if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
            const selectedText = selection.toString().replace(/\\s+/g, " ").trim();
            if (!selectedText) return;
            const anchor = anchorFromRange(selection.getRangeAt(0), selectedText);
            if (!anchor) return;
            toolbar.style.display = "none";
            window.parent.postMessage({ type: "agent-native-plan-annotate", anchor }, "*");
          });
          document.body.appendChild(toolbar);
        }
        return toolbar;
      }
      function hideSelectionToolbar() {
        const toolbar = document.querySelector(".an-plan-selection-toolbar");
        if (toolbar) toolbar.style.display = "none";
      }
      function hideCodePopover() {
        document.querySelector(".an-plan-code-popover")?.remove();
      }
      function showCodePopover(button, templateId) {
        const template = document.getElementById(templateId);
        if (!(template instanceof HTMLTemplateElement)) return;
        hideCodePopover();
        const popover = document.createElement("div");
        popover.className = "an-plan-code-popover";
        popover.innerHTML = '<div class="an-plan-code-popover-header"><span class="an-plan-code-popover-title"></span><div class="an-plan-code-popover-actions"></div><button type="button" class="an-plan-code-popover-close" aria-label="${closeCodePreviewLabel}">×</button></div><div class="an-plan-code-popover-body"></div>';
        const content = template.content.cloneNode(true);
        const codePreview = content.querySelector?.(".code-preview");
        const oldTitle = content.querySelector?.(".code-preview-title");
        const fileTitle = codePreview?.getAttribute?.("data-file-path") || oldTitle?.querySelector?.("strong")?.textContent?.trim() || button.getAttribute("data-file-path") || button.closest(".implementation-file")?.getAttribute("data-file-path") || "Snippet";
        const hrefs = {};
        const fileActions = button.closest(".implementation-file")?.querySelector(".file-actions");
        for (const openButton of Array.from(fileActions?.querySelectorAll("[data-agent-native-open-editor], [data-agent-native-open-selected-editor], [data-agent-native-open-file]") || [])) {
          const vscode = openButton.getAttribute("data-agent-native-open-vscode") || "";
          const cursor = openButton.getAttribute("data-agent-native-open-cursor") || "";
          const legacy = openButton.getAttribute("data-agent-native-open-editor") || "";
          if (vscode) hrefs.vscode = vscode;
          if (cursor) hrefs.cursor = cursor;
          if (legacy.startsWith("vscode://file/")) hrefs.vscode = legacy;
          if (legacy.startsWith("cursor://file/")) hrefs.cursor = legacy;
        }
        const openFile = button.getAttribute("data-agent-native-open-file") || codePreview?.getAttribute?.("data-agent-native-open-file") || openFileFromHref(hrefs.vscode || hrefs.cursor);
        const openLine = button.getAttribute("data-agent-native-open-line") || codePreview?.getAttribute?.("data-agent-native-open-line") || "";
        oldTitle?.remove?.();
        popover.querySelector(".an-plan-code-popover-title").textContent = fileTitle;
        if (openFile || hrefs.vscode || hrefs.cursor) {
          popover.querySelector(".an-plan-code-popover-actions")?.append(createEditorPicker(openFile, hrefs, openLine));
          setPreferredEditor(preferredEditor, false);
        }
        popover.querySelector(".an-plan-code-popover-body")?.append(content);
        popover.querySelector(".an-plan-code-popover-close")?.addEventListener("click", hideCodePopover);
        document.body.appendChild(popover);
        const rect = button.getBoundingClientRect();
        const width = popover.offsetWidth || 640;
        const height = popover.offsetHeight || 420;
        const minLeft = window.scrollX + 12;
        const maxLeft = window.scrollX + document.documentElement.clientWidth - width - 12;
        popover.style.left = clamp(rect.left + window.scrollX, minLeft, maxLeft) + "px";
        popover.style.top = clamp(rect.bottom + window.scrollY + 8, window.scrollY + 12, window.scrollY + document.documentElement.clientHeight - height - 12) + "px";
      }
      function updateSelectionToolbar() {
        if (state.annotateMode) {
          hideSelectionToolbar();
          return;
        }
        const selection = window.getSelection();
        if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
          hideSelectionToolbar();
          return;
        }
        const selectedText = selection.toString().replace(/\\s+/g, " ").trim();
        if (!selectedText) {
          hideSelectionToolbar();
          return;
        }
        const rect = selection.getRangeAt(0).getBoundingClientRect();
        if (!rect || (!rect.width && !rect.height)) {
          hideSelectionToolbar();
          return;
        }
        const toolbar = ensureSelectionToolbar();
        toolbar.style.display = "flex";
        const width = toolbar.offsetWidth || 124;
        const left = clamp(rect.left + window.scrollX + rect.width / 2 - width / 2, window.scrollX + 10, window.scrollX + document.documentElement.clientWidth - width - 10);
        const top = Math.max(window.scrollY + 10, rect.top + window.scrollY - (toolbar.offsetHeight || 44) - 10);
        toolbar.style.left = left + "px";
        toolbar.style.top = top + "px";
      }
      function syncAnnotationMarkers() {
        for (const marker of document.querySelectorAll("[data-agent-native-plan-marker]")) {
          if (marker.__agentNativePlanAnnotation) {
            positionMarker(marker, marker.__agentNativePlanAnnotation);
            continue;
          }
          const tabPanelId = marker.getAttribute("data-tab-panel-id") || "";
          setMarkerVisibility(marker, isTabContextActive(tabPanelId));
        }
      }
      const layer = ensureLayer();
      for (const item of state.annotations) {
        if (!item.anchor) continue;
        const button = document.createElement("button");
        const tabContext = item.anchor.tabPanelId ? { tabPanelId: item.anchor.tabPanelId, tabLabel: item.anchor.tabLabel } : tabContextForPoint(item.anchor);
        button.type = "button";
        button.className = "an-plan-marker";
        button.dataset.status = item.status || "open";
        button.dataset.agentNativePlanMarker = "true";
        button.__agentNativePlanAnnotation = item;
        if (tabContext.tabPanelId) {
          button.dataset.tabPanelId = tabContext.tabPanelId;
        }
        if (tabContext.tabLabel) {
          button.dataset.tabLabel = tabContext.tabLabel;
        }
        positionMarker(button, item);
        setMarkerThreadFaces(button, item);
        const participantNames = Array.isArray(item.participants)
          ? item.participants.map((participant) => participant.authorName).filter(Boolean).slice(0, 3).join(", ")
          : "";
        const countLabel = (item.commentCount || 1) + " comment" + ((item.commentCount || 1) === 1 ? "" : "s");
        button.title = participantNames
          ? countLabel + " by " + participantNames + ": " + (item.message || "Plan comment")
          : countLabel + ": " + (item.message || "Plan comment");
        button.setAttribute("aria-label", button.title);
        button.addEventListener("click", (event) => {
          event.preventDefault();
          event.stopPropagation();
          window.parent.postMessage({
            type: "agent-native-plan-open-comment",
            comment: {
              ...item,
              anchor: anchorWithCurrentPoint(item.anchor)
            }
          }, "*");
        });
        layer.appendChild(button);
      }
      document.addEventListener("selectionchange", () => requestAnimationFrame(updateSelectionToolbar));
      document.addEventListener("mouseup", () => setTimeout(updateSelectionToolbar, 0));
      document.addEventListener("keyup", updateSelectionToolbar);
      document.addEventListener("keydown", (event) => {
        if (event.key === "Escape") {
          closeEditorMenus();
          if (state.annotateMode) {
            event.preventDefault();
            event.stopPropagation();
            setRuntimeAnnotateMode(false);
            window.parent.postMessage({ type: "agent-native-plan-exit-comment-mode" }, "*");
          }
        }
      });
      document.addEventListener("change", (event) => {
        const editorSelect = event.target instanceof Element ? event.target.closest("[data-agent-native-editor-select]") : null;
        if (!editorSelect) return;
        setPreferredEditor(editorSelect.value, true);
      });
      document.addEventListener("click", (event) => {
        const editorOption = event.target instanceof Element ? event.target.closest("[data-agent-native-editor-option]") : null;
        if (editorOption) {
          event.preventDefault();
          event.stopPropagation();
          setPreferredEditor(editorOption.getAttribute("data-agent-native-editor-option"), true);
          closeEditorMenus();
          return;
        }
        const editorTrigger = event.target instanceof Element ? event.target.closest("[data-agent-native-editor-trigger]") : null;
        if (editorTrigger) {
          event.preventDefault();
          event.stopPropagation();
          const picker = editorTrigger.closest("[data-agent-native-editor-picker]");
          const willOpen = picker?.getAttribute("data-open") !== "true";
          closeEditorMenus(picker);
          if (picker && willOpen) {
            picker.setAttribute("data-open", "true");
            editorTrigger.setAttribute("aria-expanded", "true");
          } else {
            picker?.removeAttribute("data-open");
            editorTrigger.setAttribute("aria-expanded", "false");
          }
          return;
        }
        const previewButton = event.target instanceof Element ? event.target.closest("[data-agent-native-code-preview]") : null;
        if (previewButton) {
          event.preventDefault();
          event.stopPropagation();
          showCodePopover(previewButton, previewButton.getAttribute("data-agent-native-code-preview") || "");
          return;
        }
        const editorButton = event.target instanceof Element ? event.target.closest("[data-agent-native-open-file], [data-agent-native-open-selected-editor]") : null;
        if (editorButton) {
          event.preventDefault();
          event.stopPropagation();
          const picker = editorButton.closest("[data-agent-native-editor-picker]");
          const select = picker?.querySelector?.("[data-agent-native-editor-select]");
          const editor = normalizeEditor(picker?.getAttribute("data-editor") || select?.value || preferredEditor);
          const directHref = editorButton.getAttribute("data-agent-native-open-" + editor) || "";
          const filePath = editorButton.getAttribute("data-agent-native-open-file") || "";
          const line = editorButton.getAttribute("data-agent-native-open-line") || "";
          const href = directHref || hrefForEditor(editor, filePath, line);
          closeEditorMenus();
          window.parent.postMessage({ type: "agent-native-plan-open-editor", href }, "*");
          return;
        }
        const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
        if (!state.annotateMode && link) {
          const href = link.getAttribute("href") || "";
          if (href === "#" || href.trim() === "") {
            event.preventDefault();
            event.stopPropagation();
            window.parent.postMessage({ type: "agent-native-plan-link-blocked", href }, "*");
            return;
          }
          if (href && !href.startsWith("#")) {
            event.preventDefault();
            event.stopPropagation();
            window.parent.postMessage({ type: "agent-native-plan-link-blocked", href }, "*");
            return;
          }
        }
        if (!state.annotateMode) {
          if (event.target instanceof Element && event.target.closest(".an-plan-selection-toolbar")) return;
          if (event.target instanceof Element && event.target.closest(".an-plan-code-popover")) return;
          closeEditorMenus();
          hideCodePopover();
          window.parent.postMessage({ type: "agent-native-plan-close-comment-popover" }, "*");
          return;
        }
        if (!state.annotateMode) return;
        if (event.target instanceof Element && event.target.closest("[data-agent-native-plan-marker]")) return;
        hideSelectionToolbar();
        event.preventDefault();
        event.stopPropagation();
        const doc = document.documentElement;
        const target = event.target instanceof Element ? event.target : null;
        const section = closestSection(target);
        const visual = closestVisualContext(target);
        const visualRect = visual?.getBoundingClientRect?.();
        const tabContext = tabContextForElement(visual || target || section);
        const textAnchor = visual ? null : anchorFromPoint(event.clientX, event.clientY, target);
        const textQuote = visual ? "" : closestTextContext(target);
        const visualX = visualRect ? pct(event.clientX - visualRect.left, visualRect.width) : undefined;
        const visualY = visualRect ? pct(event.clientY - visualRect.top, visualRect.height) : undefined;
        const fallbackAnchor = {
          x: pct(event.pageX, doc.scrollWidth),
          y: pct(event.pageY, Math.max(doc.scrollHeight, document.body.scrollHeight)),
          sectionId: section?.getAttribute("data-plan-section-id") || section?.id || undefined,
          sectionTitle: sectionTitle(section) || undefined,
          ...tabContext,
          snippet: textQuote || (target ? textSnippet(target) : ""),
          textQuote: textQuote || undefined,
          anchorKind: visual ? "visual" : textQuote ? "text" : "point",
          visualLabel: visual ? visualLabel(visual, section) : undefined,
          visualX,
          visualY,
          tagName: target ? target.tagName.toLowerCase() : undefined
        };
        const anchoredFallback = withTargetAnchor(fallbackAnchor, visual || target, event.clientX, event.clientY);
        window.parent.postMessage({
          type: "agent-native-plan-annotate",
          anchor: textAnchor ? { ...textAnchor, ...tabContext } : anchoredFallback
        }, "*");
      }, true);
    })();
  </script>`;
  if (html.includes("</body>")) {
    return html.replace("</body>", `${runtime}</body>`);
  }
  return `${html}${runtime}`;
}

function escapeRuntimeJsString(value: string) {
  return value
    .replace(/\\/g, "\\\\")
    .replace(/'/g, "\\'")
    .replace(/&/g, "&amp;")
    .replace(/</g, "\\u003c")
    .replace(/>/g, "\\u003e")
    .replace(/"/g, "&quot;");
}