visualization.qmd

---
title: "Chrono AI Region Map"
description: "Cross-product attack-region dependency graph: each node is an epic-level region, edges are dependencies, colored by closure stage, shaped by automation level. Click any node for the bilingual term entry. Configuration-driven (config.json + regions.json)."
format:
  html:
    toc: false
    page-layout: full
    include-in-header:
      text: |
        <link rel="stylesheet" href="https://unpkg.com/cytoscape@3.30.2/dist/cytoscape.min.css">
---

```{=html}
<style>
  body { background: #fbfbfa; }
  /* Lock the Quarto wrapper to viewport height (minus 62px navbar) so
     the map shell can fit on a 13" laptop without forcing scroll.
     Wrapper paddings and Quarto's default page footer are zeroed. */
  #quarto-content {
    height: calc(100vh - 62px) !important;
    padding: 0 !important;
    overflow: hidden;
  }
  main.content {
    padding: 0 !important; margin: 0 !important;
    max-width: 100% !important;
    height: calc(100vh - 62px) !important;
    overflow: hidden;
  }
  .page-footer, #quarto-content > footer { display: none !important; }
  #title-block-header { display: none; }

  .map-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "header header" "graph detail";
    /* Parent (#quarto-content) is locked to viewport-minus-navbar, so
       the shell just fills its parent. min-height is a tablet floor.
       overflow:hidden + min-height:0 on grid items prevents the
       detail panel's min-content from inflating the grid past parent. */
    height: 100%;
    min-height: 540px;
    overflow: hidden;
    gap: 0;
    background: #fbfbfa;
    border: 1px solid #e0e0e0;
  }
  .map-shell > * { min-height: 0; min-width: 0; }
  main.content > .quarto-section-identifier { display: none; }
  .quarto-container { max-width: 100% !important; padding: 0 !important; }
  @media (max-width: 900px) {
    .map-shell { grid-template-columns: 1fr; grid-template-areas: "header" "graph" "detail"; height: auto; }
    #cy-wrap { height: 540px; } #cy { height: 100%; }
    #detail { max-height: 480px; overflow-y: auto; }
  }

  .map-header {
    grid-area: header;
    padding: 0.7rem 1.2rem;
    display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
    border-bottom: 1px solid #e0e0e0; background: #fff;
  }
  .map-header h1 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.01em; }
  .map-header .summary { font-size: 0.86rem; color: #666; }
  .map-header .summary strong { color: #222; }
  .map-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
  .lang-toggle { font-size: 0.85rem; }
  .lang-toggle button {
    border: 1px solid #ccc; background: white; padding: 0.2rem 0.6rem;
    cursor: pointer; font-family: inherit; font-size: 0.85rem;
  }
  .lang-toggle button.active { background: #222; color: white; border-color: #222; }
  .region-picker {
    font-family: inherit; font-size: 0.88rem;
    padding: 0.25rem 0.5rem; border: 1px solid #bbb; border-radius: 3px;
    background: white; min-width: 220px; cursor: pointer;
  }
  .region-picker:focus { outline: 2px solid #2c3e50; outline-offset: -1px; }

  #cy-wrap { grid-area: graph; position: relative; height: 100%; background: #fbfbfa; }
  #cy { width: 100%; height: 100%; }
  .zoom-controls {
    position: absolute;
    top: 12px; left: 12px;
    display: flex; flex-direction: column; gap: 4px;
    /* cytoscape-expand-collapse paints a cue canvas at z-index: 999
       inside #cy-wrap. The zoom buttons must sit above it or clicks
       get swallowed by the canvas. */
    z-index: 1000;
  }
  .zoom-controls button {
    width: 32px; height: 32px;
    border: 1px solid #d0d0d0;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 4px;
    font-size: 1.05rem; line-height: 1;
    cursor: pointer; padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; color: #333;
    transition: background 0.12s;
  }
  .zoom-controls button:hover { background: #f4f4f4; }
  .zoom-controls button:active { background: #e8e8e8; }
  .zoom-controls button:focus { outline: 2px solid #2c3e50; outline-offset: 1px; }

  #detail {
    grid-area: detail; padding: 1.2rem; overflow-y: auto;
    border-left: 1px solid #e0e0e0; background: #fff; font-size: 0.92rem;
  }
  #detail .hint { color: #aaa; font-style: italic; }
  #detail .term-name { font-size: 1.25rem; font-weight: 600; }
  #detail .term-other { color: #888; font-size: 0.95rem; margin-left: 0.4rem; font-style: italic; }
  #detail .term-desc { margin-top: 0.5rem; line-height: 1.55; }
  #detail .term-other-desc { margin-top: 0.4rem; color: #777; line-height: 1.5; font-style: italic; }
  #detail .term-stats {
    margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px dashed #ddd;
    font-family: ui-monospace, monospace; font-size: 0.84rem;
  }
  #detail .term-stats span { display: inline-block; margin-right: 0.6rem; padding: 0.1rem 0.45rem; background: #f4f4f4; border-radius: 3px; }
  #detail .term-status { margin-top: 0.55rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
  #detail .status-chip { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 11px; font-size: 0.8rem; font-weight: 500; }
  #detail .status-chip.status-todo { background: #e8f5ee; color: #1e7a3c; }
  #detail .status-chip.status-blocked { background: #fdecec; color: #c0392b; }
  #detail .status-chip.status-done { background: #eef2f5; color: #6b7c8c; }
  #detail .term-deps { margin-top: 0.7rem; font-size: 0.86rem; color: #555; }
  #detail .term-deps strong { display: block; margin-bottom: 0.2rem; }
  #detail .term-deps a {
    display: block;
    padding: 0.15rem 0 0.15rem 1.2rem;
    color: #2c3e50;
    cursor: pointer;
    text-decoration: underline dotted;
    position: relative;
    line-height: 1.35;
  }
  #detail .term-deps a::before {
    content: "·";
    position: absolute;
    left: 0.45rem;
    color: #bbb;
    font-weight: 600;
  }
  #detail .term-deps a:hover { color: #c0392b; }

  #detail .term-issues { margin-top: 0.8rem; font-size: 0.82rem; color: #555; }
  #detail .term-issues strong { display: block; margin-bottom: 0.35rem; color: #444; }
  #detail .iss-list { display: flex; flex-direction: column; gap: 0.25rem; }
  #detail .iss-chip {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    background: #fafafa;
    border-left: 3px solid #ccc;
    text-decoration: none;
    color: #333;
    line-height: 1.3;
    transition: background 0.12s;
  }
  #detail .iss-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem; align-items: center; }
  #detail .iss-blocked { font-size: 0.74rem; color: #c0392b; padding-left: 0.2rem; }
  #detail .iss-blocked a { color: #c0392b; text-decoration: underline; margin-right: 0.25rem; }
  #detail .iss-blockref-internal { font-weight: 600; }
  #detail .iss-blockref-external { font-style: italic; }
  #detail .iss-chip:hover { background: #f0f0f0; text-decoration: none; }
  #detail .iss-chip.iss-open { border-left-color: #3498db; }
  #detail .iss-chip.iss-closed { border-left-color: #27ae60; opacity: 0.55; }
  #detail .iss-num { font-family: ui-monospace, SFMono-Regular, monospace; color: #888; font-size: 0.78rem; align-self: center; }
  #detail .iss-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #detail .iss-assignee { font-size: 0.72rem; color: #2c3e50; background: #eef2f5; padding: 0.05rem 0.35rem; border-radius: 8px; align-self: center; }
  #detail .iss-unassigned { font-size: 0.72rem; color: #c0392b; background: #fdecec; padding: 0.05rem 0.35rem; border-radius: 8px; align-self: center; font-style: italic; }

  #detail .term-blocked { color: #c0392b; }
  #detail .term-blocked strong { color: #c0392b; }
  #detail .term-blocked a { color: #c0392b; text-decoration: underline; }
  #detail .term-builton { color: #27ae60; opacity: 0.85; }
  #detail .term-builton strong { color: #27ae60; }
  #detail .term-blocking { color: #c0392b; }
  #detail .term-blocking strong { color: #c0392b; }
  #detail .term-blocking a { color: #c0392b; text-decoration: underline; }
  #detail .term-shipped-on-top { color: #7f8c8d; opacity: 0.75; }
  #detail .term-shipped-on-top strong { color: #7f8c8d; }
  #detail .region-ref { color: #2c3e50; text-decoration: underline dotted; cursor: pointer; }
  #detail .region-ref:hover { color: #c0392b; }
  #detail .term-namecerts {
    margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px dashed #ddd;
    font-size: 0.83rem;
  }
  #detail .term-namecerts-header {
    font-weight: 600; color: #444; margin-bottom: 0.35rem; font-size: 0.85rem;
  }
  #detail .nc-row {
    padding: 0.15rem 0; line-height: 1.4;
    word-break: break-all;
  }
  #detail .nc-row code {
    font-size: 0.78rem; color: #2c3e50; background: transparent;
  }
  #detail .term-timeline {
    margin-top: 0.7rem; font-size: 0.84rem; color: #555;
    padding: 0.35rem 0.55rem; background: #f7f9fb; border-radius: 3px;
    border-left: 3px solid #2980b9; line-height: 1.5;
  }
  #detail .legend { margin-top: 1.5rem; padding-top: 0.9rem; border-top: 1px solid #eee; font-size: 0.82rem; color: #666; }
  #detail .legend .swatch {
    display: inline-block; width: 14px; height: 14px; vertical-align: middle;
    margin-right: 0.3rem;
    background: #999;
  }
  #detail .legend .swatch.circle,
  #detail .legend .swatch.ellipse {
    border-radius: 50%; border: 1px solid rgba(0,0,0,0.2);
  }
  #detail .legend .swatch.hexagon,
  #detail .legend .swatch.hex {
    /* Cytoscape's hexagon shape, mirrored as a CSS clip-path so the legend
       matches the on-graph node silhouette exactly. */
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  }
  #detail .legend .swatch.triangle {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  }
  #detail .legend .swatch.star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  #detail .legend > div { padding: 0.12rem 0; }
  #detail .legend-subhead {
    font-size: 0.78rem; font-weight: 600; color: #555;
    margin-top: 0.5rem; margin-bottom: 0.3rem;
  }
  #detail .legend-subhead.legend-subhead-tight { margin-top: 0.65rem; }
</style>

<div class="map-shell">
  <div class="map-header">
    <h1 data-i18n="title">Chrono AI Region Map</h1>
    <div class="summary" id="summary"></div>
    <select id="region-picker" class="region-picker" onchange="onPickerChange(this.value)">
      <option value="" data-i18n="picker_default">-- jump to region --</option>
    </select>
    <div class="map-controls">
      <div class="lang-toggle">
        <span data-i18n="lang_label" style="margin-right:0.4rem;">Language:</span>
        <button id="btn-en" class="active" onclick="setLang('en')">EN</button>
        <button id="btn-zh" onclick="setLang('zh')">中文</button>
      </div>
    </div>
  </div>

  <div id="cy-wrap">
    <div id="cy"></div>
    <div class="zoom-controls" id="zoom-controls">
      <button type="button" id="zoom-in" data-i18n-title="zoom_in" title="Zoom in" aria-label="Zoom in">+</button>
      <button type="button" id="zoom-out" data-i18n-title="zoom_out" title="Zoom out" aria-label="Zoom out">&#8722;</button>
      <button type="button" id="zoom-reset" data-i18n-title="zoom_reset" title="Fit to view" aria-label="Fit to view"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 5V2h3M9 2h3v3M12 9v3H9M5 12H2V9"/></svg></button>
    </div>
  </div>

  <div id="detail">
    <div id="detail-content">
      <div class="hint" data-i18n="hint">Click a node to see its bilingual entry, stats, and dependencies.</div>
    </div>

    <div class="legend">
      <div data-i18n="legend_title" style="font-weight:600; color:#444; margin-bottom:0.4rem;">Legend</div>
      <div class="legend-subhead" data-i18n="legend_color_head">Color = closure stage</div>
      <div id="legend-color-list"></div>
      <div class="legend-subhead legend-subhead-tight" data-i18n="legend_shape_head">Shape = automation level</div>
      <div id="legend-shape-list"></div>
    </div>
  </div>
</div>

<script src="https://unpkg.com/cytoscape@3.30.2/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/dagre@0.8.5/dist/dagre.min.js"></script>
<script src="https://unpkg.com/cytoscape-dagre@2.5.0/cytoscape-dagre.js"></script>
<script src="https://unpkg.com/cytoscape-expand-collapse@4.1.1/cytoscape-expand-collapse.js"></script>

<script>
const I18N = {
  en: {
    title: "Chrono AI Region Map",
    lang_label: "Language:",
    hint: "Click a node to see its bilingual entry, stats, and dependencies.",
    legend_title: "Legend",
    legend_color_head: "Color = closure stage",
    legend_shape_head: "Shape = automation level",
    sum_regions: "regions",
    detail_timeline: "Timeline:",
    detail_upstream: "Upstream:",
    detail_downstream: "Downstream:",
    picker_default: "-- jump to region --",
    zoom_in: "Zoom in",
    zoom_out: "Zoom out",
    zoom_reset: "Fit to view",
  },
  zh: {
    title: "Chrono AI 攻坚地图",
    lang_label: "语言:",
    hint: "点击节点查看双语词条, 统计和依赖关系.",
    legend_title: "图例",
    legend_color_head: "颜色 = 闭合阶段",
    legend_shape_head: "形状 = 自动化等级",
    sum_regions: "领域",
    detail_timeline: "时间线:",
    detail_upstream: "上游:",
    detail_downstream: "下游:",
    picker_default: "-- 跳到领域 --",
    zoom_in: "放大",
    zoom_out: "缩小",
    zoom_reset: "适应窗口",
  },
};

let LANG = "en";  // overridden in loadData() from config.ui.default_lang
let CONFIG = null, REGIONS_DOC = null, CY = null;
let ORNN_ISSUES = null;   // { synced_at, regions: { <region_key>: { milestone, issues: { <num>: {...} } } } }
let EC_API = null;         // cytoscape-expand-collapse handle
let FOCUS_SET = new Set();
let CLOSURE_BY_KEY = {};   // built from config.closure_tiers
let FORMAL_BY_KEY = {};    // built from config.formal_levels
let PRODUCT_BY_KEY = {};   // built from config.products

async function loadData() {
  const v = "?v=" + Date.now();
  const [cfg, regionsDoc, issuesDoc] = await Promise.all([
    fetch("config.json" + v, { cache: "no-store" }).then(r => r.json()),
    fetch("regions.json" + v, { cache: "no-store" }).then(r => r.json()),
    // ornn-issues.json may not exist on first build; tolerate missing
    fetch("ornn-issues.json" + v, { cache: "no-store" })
      .then(r => r.ok ? r.json() : null)
      .catch(() => null),
  ]);
  CONFIG = cfg;
  REGIONS_DOC = regionsDoc;
  ORNN_ISSUES = issuesDoc;
  LANG = cfg.ui.default_lang || "en";

  // Index lookups for O(1) access
  CONFIG.closure_tiers.forEach(t => { CLOSURE_BY_KEY[t.key] = t; });
  CONFIG.formal_levels.forEach(f => { FORMAL_BY_KEY[f.key] = f; });
  CONFIG.products.forEach(p => { PRODUCT_BY_KEY[p.key] = p; });

  // Focus set drives red border
  FOCUS_SET = new Set(
    Object.entries(REGIONS_DOC.regions)
      .filter(([_, r]) => r.focus === true)
      .map(([id]) => id)
  );
}

function buildCytoscapeElements() {
  const nodes = [];
  const edges = [];
  const regions = REGIONS_DOC.regions;
  const issuesByRegion = (ORNN_ISSUES && ORNN_ISSUES.regions) || {};

  for (const [id, r] of Object.entries(regions)) {
    nodes.push({
      data: {
        id,
        label_en: r.label.en,
        label_zh: r.label.zh,
        closure: r.closure,
        formal: r.formal,
        product: r.product,
        milestone: r.milestone,
        owner: r.owner,
        issue_count: r.issue_count || 0,
        focus: r.focus === true,
        archived: r.archived === true,
        is_region: true,
      }
    });
    for (const dep of (r.deps || [])) {
      const depKey = typeof dep === "string" ? dep : dep.key;
      const weight = (typeof dep === "object" && dep.weight) ? dep.weight : 1;
      edges.push({
        data: { source: depKey, target: id, weight }
      });
    }

    // Add issue child nodes for regions with a milestone_ref → ornn-issues.json entry.
    // Only OPEN issues become visual children — closed issues live in the side-panel
    // history list to keep M4 (112 issues, 106 closed) from becoming a giant bubble.
    const regionIssueData = issuesByRegion[id];
    if (regionIssueData && regionIssueData.issues) {
      for (const [num, issue] of Object.entries(regionIssueData.issues)) {
        if (issue.state !== "OPEN") continue;
        const childId = `issue:${id}:${num}`;
        nodes.push({
          data: {
            id: childId,
            parent: id,
            issue_number: parseInt(num, 10),
            issue_title: issue.title,
            issue_state: issue.state,
            issue_url: issue.url,
            issue_labels: issue.labels || [],
            region_key: id,
            label: `#${num}`,
            is_issue: true,
          }
        });
      }
      // Add issue→issue edges within this region (only when both endpoints exist as OPEN children)
      const openSet = new Set(
        Object.entries(regionIssueData.issues)
          .filter(([_, i]) => i.state === "OPEN")
          .map(([n]) => parseInt(n, 10))
      );
      for (const [num, issue] of Object.entries(regionIssueData.issues)) {
        if (issue.state !== "OPEN") continue;
        const srcNum = parseInt(num, 10);
        const srcId = `issue:${id}:${srcNum}`;
        // blocked_by N → edge from N to this (N must block-by-completion finish first)
        for (const blocker of (issue.deps?.blocked_by || [])) {
          if (openSet.has(blocker)) {
            edges.push({
              data: { source: `issue:${id}:${blocker}`, target: srcId, edge_type: "blocks" }
            });
          }
        }
        // blocks N → edge from this to N
        for (const blocked of (issue.deps?.blocks || [])) {
          if (openSet.has(blocked)) {
            edges.push({
              data: { source: srcId, target: `issue:${id}:${blocked}`, edge_type: "blocks" }
            });
          }
        }
        // tracks N → edge from this (umbrella) to N (child)
        for (const tracked of (issue.deps?.tracks || [])) {
          if (openSet.has(tracked)) {
            edges.push({
              data: { source: srcId, target: `issue:${id}:${tracked}`, edge_type: "tracks" }
            });
          }
        }
      }
    }
  }

  return { nodes, edges };
}

function t(key) { return I18N[LANG][key] || key; }

function applyStaticI18n() {
  // Build dynamic I18N from config (title + legend + tier/formal labels),
  // merged with the static I18N table for everything not yet in config.
  const dyn = { en: {}, zh: {} };
  if (CONFIG && CONFIG.ui) {
    dyn.en.title = CONFIG.ui.title.en;
    dyn.zh.title = CONFIG.ui.title.zh;
    for (const [key, label] of Object.entries(CONFIG.ui.legend || {})) {
      dyn.en["legend_" + key] = label.en;
      dyn.zh["legend_" + key] = label.zh;
    }
  }
  if (CONFIG && CONFIG.closure_tiers) {
    CONFIG.closure_tiers.forEach(tier => {
      dyn.en["closure_" + tier.key] = tier.label.en;
      dyn.zh["closure_" + tier.key] = tier.label.zh;
    });
  }
  if (CONFIG && CONFIG.formal_levels) {
    CONFIG.formal_levels.forEach(f => {
      dyn.en["formal_" + f.key] = f.label.en;
      dyn.zh["formal_" + f.key] = f.label.zh;
    });
  }
  const lookup = key =>
    (dyn[LANG] && dyn[LANG][key] !== undefined) ? dyn[LANG][key] :
    (I18N[LANG][key] !== undefined ? I18N[LANG][key] : undefined);

  document.title = lookup("title") || "Region Map";
  document.querySelectorAll("[data-i18n]").forEach(el => {
    const key = el.getAttribute("data-i18n");
    const v = lookup(key);
    if (v !== undefined) el.innerHTML = v;
  });
  document.querySelectorAll("[data-i18n-title]").forEach(el => {
    const key = el.getAttribute("data-i18n-title");
    const v = lookup(key);
    if (v !== undefined) {
      el.setAttribute("title", v);
      el.setAttribute("aria-label", v);
    }
  });
  const btnEn = document.getElementById("btn-en");
  const btnZh = document.getElementById("btn-zh");
  if (btnEn) btnEn.classList.toggle("active", LANG === "en");
  if (btnZh) btnZh.classList.toggle("active", LANG === "zh");

  const summary = document.getElementById("summary");
  if (summary && REGIONS_DOC) {
    const total = Object.keys(REGIONS_DOC.regions).length;
    summary.innerHTML = `<strong>${total}</strong> ${t("sum_regions")}`;
  }
  populatePicker();
  renderLegend();
}

// pickerOptionLabel + REGION_GROUPS removed in Task 7;
// populatePicker now reads labels directly from REGIONS_DOC.

function populatePicker() {
  const sel = document.getElementById("region-picker");
  if (!sel || !REGIONS_DOC || !CONFIG) return;
  const regions = REGIONS_DOC.regions;

  const groups = CONFIG.products.map(p => ({
    key: p.key,
    label: p.label[LANG] || p.label.en,
    items: Object.keys(regions).filter(rid => regions[rid].product === p.key)
  })).filter(g => g.items.length > 0);

  let html = `<option value="">${t("picker_default")}</option>`;
  for (const g of groups) {
    html += `<optgroup label="${g.label}">`;
    for (const id of g.items.sort()) {
      const r = regions[id];
      const lbl = (r.label && r.label[LANG]) || (r.label && r.label.en) || id;
      html += `<option value="${id}">${lbl}</option>`;
    }
    html += `</optgroup>`;
  }
  sel.innerHTML = html;
}

function onPickerChange(id) {
  if (!id) return;
  showNodeDetail(id);
  // showNodeDetail zooms into the connected subgraph; tapping an empty
  // area restores the global fit.
}

// Two visual channels driven entirely by config.json:
//   color  = closure tier (config.closure_tiers[*].color, keyed by region.closure)
//   shape  = formal automation level (config.formal_levels[*].shape, keyed by region.formal)
//   size   = region.issue_count
//   border = focus emphasis (CONFIG.focus_quarter.border_color/border_width when focus=true)

// Closure tier colors come from CONFIG.closure_tiers — built once after loadData.
function getClosureColor(closureKey) {
  return (CLOSURE_BY_KEY[closureKey] && CLOSURE_BY_KEY[closureKey].color) || "#bdc3c7";
}

function nodeShape(node) {
  const f = FORMAL_BY_KEY[node.formal];
  return (f && f.shape) || "ellipse";
}

function nodeBorder(node) {
  if (FOCUS_SET.has(node.id)) {
    return {
      stroke: CONFIG.focus_quarter.border_color || "#c0392b",
      borderWidth: CONFIG.focus_quarter.border_width || 3,
    };
  }
  return { stroke: "#ffffff", borderWidth: 2 };
}

function nodeVisual(node) {
  const fill = getClosureColor(node.closure);
  const shape = nodeShape(node);
  const border = nodeBorder(node);
  return { fill, shape, ...border };
}

function nodeSizeMetric(node) {
  return Math.max(1, node.issue_count || 1);
}

function nodeLabel(node) {
  if (!node) return "";
  return node["label_" + LANG] || node["label_en"] || node.id || "";
}

function refreshNodeVisuals() {
  if (!CY) return;
  const regions = REGIONS_DOC ? REGIONS_DOC.regions : {};
  CY.nodes().forEach(n => {
    const r = regions[n.id()];
    if (!r) return;
    const visual = nodeVisual({
      id: n.id(),
      closure: r.closure,
      formal: r.formal,
    });
    n.data("color", visual.fill);
    n.data("shape", visual.shape);
    n.data("stroke", visual.stroke);
    n.data("borderWidth", visual.borderWidth);
    n.data("size", nodeSizeMetric({ issue_count: r.issue_count }));
    n.data("label", nodeLabel({
      label_en: r.label.en,
      label_zh: r.label.zh,
      id: n.id(),
    }));
    // archived also kept on the data object so the node[?archived] selector
    // matches; we set it during buildCytoscapeElements but refresh here in
    // case regions.json was reloaded.
    n.data("archived", r.archived === true);
  });
  CY.style().update();
}

function escapeHtml(value) {
  return String(value ?? "")
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
}


function renderCy() {
  CY = cytoscape({
    container: document.getElementById("cy"),
    // Use the flat-array form: cytoscape's {nodes,edges} object form has a
    // bug where compound children (issue nodes with `parent:` set) are
    // silently dropped at construction time. Flattening to [...nodes,
    // ...edges] preserves them. Confirmed locally 2026-05-18.
    elements: (() => { const e = buildCytoscapeElements(); return [...e.nodes, ...e.edges]; })(),
    style: [
      {
        selector: "node",
        style: {
          "shape": "data(shape)",
          "background-color": "data(color)",
          "label": "data(label)",
          "font-size": "13px",
          "font-weight": 600,
          "color": "#1a1a1a",
          "text-valign": "bottom",
          "text-halign": "center",
          "text-margin-y": 6,
          "text-outline-color": "#fbfbfa",
          "text-outline-width": 2,
          "text-background-color": "#fbfbfa",
          "text-background-opacity": 0.85,
          "text-background-padding": "3px",
          "text-background-shape": "roundrectangle",
          "text-wrap": "wrap",
          "text-max-width": "140px",
          "width": "mapData(size, 0, 30, 36, 72)",
          "height": "mapData(size, 0, 30, 36, 72)",
          "border-width": "data(borderWidth)",
          "border-color": "data(stroke)",
          "overlay-padding": 4,
        },
      },
      {
        selector: "node:selected",
        style: {
          "border-width": 8,
          "border-color": "#f39c12",
          "border-opacity": 1,
          "overlay-color": "#f39c12",
          "overlay-opacity": 0.18,
          "overlay-padding": 12,
          "z-index": 999,
        }
      },
      {
        selector: "edge",
        style: {
          "width": 1.5, "line-color": "#7a8a99",
          "target-arrow-color": "#7a8a99", "target-arrow-shape": "triangle",
          "curve-style": "bezier", "arrow-scale": 0.95,
          "opacity": 0.55,
        },
      },
      { selector: "edge.highlight", style: { "line-color": "#c0392b", "target-arrow-color": "#c0392b", "width": 3, "opacity": 1 } },
      { selector: "edge.faded", style: { "opacity": 0.06 } },
      { selector: "node.faded", style: { "opacity": 0.15 } },
      // Archived regions render dim (opacity sourced from CONFIG.archive_rule.opacity, built dynamically).
      // Using a Cytoscape selector keeps this declarative; refreshNodeVisuals
      // writes the boolean `archived` data field that this selector tests.
      { selector: "node[?archived]", style: { "opacity": CONFIG.archive_rule.opacity ?? 0.35 } },

      // === Compound issue children (Ornn only) ===
      // Issue nodes live inside their milestone region as cytoscape compound children.
      // Only OPEN issues become visual nodes — closed issues stay in the side-panel history.
      {
        selector: "node[?is_issue]",
        style: {
          "shape": "ellipse",
          "background-color": "#3498db",
          "background-opacity": 0.92,
          "border-width": 1.5,
          "border-color": "#1f5377",
          "width": 24,
          "height": 24,
          "label": "data(label)",
          "font-size": "10px",
          "font-weight": 700,
          "color": "#fff",
          "text-valign": "center",
          "text-halign": "center",
          "text-outline-color": "transparent",
          "text-outline-width": 0,
          "text-background-opacity": 0,
          "text-margin-y": 0,
        }
      },
      // Compound parent rendering when expanded (issues visible inside)
      {
        selector: "node:parent",
        style: {
          "background-opacity": 0.06,
          "background-color": "data(color)",
          "border-style": "dashed",
          "border-width": 2,
          "padding": 18,
          "text-valign": "top",
          "text-halign": "center",
          "text-margin-y": -4,
        }
      },
      // Issue→issue "blocks" edge: red, solid arrow (this issue blocks completion of target)
      {
        selector: "edge[edge_type = 'blocks']",
        style: {
          "line-color": "#e74c3c",
          "target-arrow-color": "#e74c3c",
          "target-arrow-shape": "triangle",
          "width": 1.5,
          "curve-style": "bezier",
          "arrow-scale": 0.85,
          "opacity": 0.85,
        }
      },
      // Issue→issue "tracks" edge: dashed grey (umbrella → child checklist item)
      {
        selector: "edge[edge_type = 'tracks']",
        style: {
          "line-color": "#95a5a6",
          "line-style": "dashed",
          "target-arrow-color": "#95a5a6",
          "target-arrow-shape": "tee",
          "width": 1,
          "curve-style": "bezier",
          "arrow-scale": 0.7,
          "opacity": 0.7,
        }
      },
    ],
    layout: {
      // No initial layout — dagre would put issue children in one column
      // because they have no inter-compound edges. We collapse all
      // compounds first (below), then run dagre on the outer structure.
      name: "preset",
    },
    // Disable wheel/pinch zoom (per request); pan-drag remains for nudging
    // so the dropdown's centered jump can be fine-tuned without the user
    // ever needing to scroll-zoom. The +/-/fit buttons drive zoom
    // programmatically — bounds keep them sane.
    userZoomingEnabled: false,
    userPanningEnabled: true,
    boxSelectionEnabled: false,
    wheelSensitivity: 0,
    autoungrabify: true,
    minZoom: 0.05,
    maxZoom: 4,
  });
  setupZoomControls();

  // Initialize cytoscape-expand-collapse for Ornn milestone regions that
  // contain issue children. Default state: all compounds collapsed (looks
  // like the previous flat map). User clicks the +/- cue on a parent to
  // expand and see issues + their dep edges.
  try {
    EC_API = CY.expandCollapse({
      // No auto-layout on expand/collapse — re-running dagre across the
      // whole graph causes everything to jump. We position children
      // manually with a grid layout right after each expand (see tap
      // handler below).
      layoutBy: null,
      fisheye: false,
      animate: true,
      animationDuration: 200,
      undoable: false,
      cueEnabled: true,
      expandCollapseCuePosition: "top-left",
      expandCollapseCueSize: 14,
      expandCollapseCueLineSize: 9,
    });
    // Collapse every compound on init so the default view matches the old
    // milestone-only layout. Users expand on demand.
    const compoundNodes = CY.nodes().filter(n => n.isParent());
    if (compoundNodes.length > 0 && EC_API.collapse) {
      EC_API.collapse(compoundNodes);
    }
  } catch (e) {
    console.warn("expand-collapse init failed (compound rendering disabled):", e);
  }

  // Now run the real dagre layout. Compounds are collapsed → dagre only
  // sees the outer 57-node structure, not 153 (which would stack issue
  // children in a useless column because they have no inter-edges).
  CY.layout({
    name: "dagre",
    rankDir: "LR",
    nodeSep: 50,
    rankSep: 180,
    edgeSep: 14,
    ranker: "network-simplex",
    padding: 24,
    fit: true,
    animate: false,
  }).run();

  // Helper: arrange a compound's children in a grid around the parent's
  // current position. Called after EC_API.expand() so the children don't
  // pile up at one point.
  window.__layoutCompoundChildren = function (parent) {
    const children = parent.children();
    if (children.length === 0) return;
    const cols = Math.ceil(Math.sqrt(children.length * 1.6));  // wider than tall
    const cellW = 50;
    const cellH = 50;
    const center = parent.position();
    // Start from top-left of the grid centered on the parent's original spot
    const rows = Math.ceil(children.length / cols);
    const startX = center.x - (cols - 1) * cellW / 2;
    const startY = center.y - (rows - 1) * cellH / 2;
    children.forEach((c, i) => {
      const row = Math.floor(i / cols);
      const col = i % cols;
      c.position({ x: startX + col * cellW, y: startY + row * cellH });
    });
  };

  CY.on("tap", "node", evt => {
    const node = evt.target;
    if (node.data("is_issue")) {
      showIssueDetail(node);
      return;
    }
    // Region node: show detail panel as before.
    showNodeDetail(node.id());
    // If this region has issue children (collapsed or expanded), also
    // toggle compound state on the same tap. The +/- hover cue from
    // expand-collapse is easy to miss; click-to-toggle makes it discoverable.
    if (EC_API && (EC_API.isExpandable(node) || EC_API.isCollapsible(node))) {
      try {
        if (EC_API.isExpandable(node)) {
          EC_API.expand(node);
          // Position the now-visible children in a grid so they don't pile up
          if (window.__layoutCompoundChildren) {
            window.__layoutCompoundChildren(node);
          }
        } else if (EC_API.isCollapsible(node)) {
          EC_API.collapse(node);
        }
      } catch (e) { /* ignore */ }
    }
  });
  CY.on("tap", evt => {
    if (evt.target === CY) {
      renderDefaultPanel();
      CY.nodes().unselect();
      // Restore focus filter (not full visibility) — empty-tap returns to the
      // "what we're attacking now" view, matching the side panel.
      applyFocusFilter();
    }
  });
  // Global view: fit all nodes in the viewport. With the bigger font and
  // outline below, labels stay legible even when fit-zoomed. The dropdown
  // is the primary nav for jumping between specific regions.
  CY.fit(CY.elements(":visible"), 16);
}

// Show issue detail in the side panel
function showIssueDetail(node) {
  const el = document.getElementById("detail-content");
  if (!el) return;
  const num = node.data("issue_number");
  const title = node.data("issue_title");
  const state = node.data("issue_state");
  const url = node.data("issue_url");
  const labels = node.data("issue_labels") || [];
  const regionKey = node.data("region_key");
  const region = REGIONS_DOC && REGIONS_DOC.regions[regionKey];

  // Pull deps from the underlying issue data (not the cytoscape edges,
  // because those are filtered to only-OPEN endpoints — we want to also
  // mention closed-issue refs in the panel).
  const issueData = ORNN_ISSUES && ORNN_ISSUES.regions[regionKey] &&
    ORNN_ISSUES.regions[regionKey].issues[String(num)];
  const deps = (issueData && issueData.deps) || {};

  const stateBadge = state === "OPEN"
    ? '<span style="background:#27ae60;color:#fff;padding:1px 8px;border-radius:3px;font-size:0.75rem;font-weight:600">OPEN</span>'
    : '<span style="background:#95a5a6;color:#fff;padding:1px 8px;border-radius:3px;font-size:0.75rem;font-weight:600">CLOSED</span>';

  const labelChips = labels.length
    ? labels.map(l => `<span style="background:#ecf0f1;color:#34495e;padding:1px 6px;border-radius:3px;font-size:0.72rem;margin-right:3px">${escapeHtml(l)}</span>`).join("")
    : '<span style="color:#aaa;font-style:italic">no labels</span>';

  const renderDepList = (nums) =>
    nums && nums.length
      ? nums.map(n => `<a href="#" onclick="event.preventDefault();jumpToIssue('${regionKey}',${n})">#${n}</a>`).join(", ")
      : '<span style="color:#aaa">none</span>';

  const regionLabel = region
    ? (LANG === "zh" ? region.label.zh : region.label.en)
    : regionKey;

  el.innerHTML = `
    <div class="term-name">#${num}</div>
    <div class="term-other">${stateBadge}</div>
    <div class="term-desc" style="margin-top:0.7rem;font-size:0.95rem">${escapeHtml(title)}</div>
    <div style="margin-top:0.7rem;font-size:0.82rem">
      <strong>${LANG === "zh" ? "所属 milestone" : "Milestone"}:</strong>
      <a href="#" onclick="event.preventDefault();showNodeDetail('${regionKey}')">${escapeHtml(regionLabel)}</a>
    </div>
    <div style="margin-top:0.4rem;font-size:0.82rem">
      <strong>${LANG === "zh" ? "标签" : "Labels"}:</strong> ${labelChips}
    </div>
    <div class="term-deps" style="margin-top:0.7rem">
      ${deps.tracks && deps.tracks.length ? `<div><strong>${LANG === "zh" ? "包含 (tracks)" : "Tracks"}:</strong> ${renderDepList(deps.tracks)}</div>` : ""}
      ${deps.tracked_by && deps.tracked_by.length ? `<div><strong>${LANG === "zh" ? "被包含 (tracked by)" : "Tracked by"}:</strong> ${renderDepList(deps.tracked_by)}</div>` : ""}
      ${deps.blocks && deps.blocks.length ? `<div><strong>${LANG === "zh" ? "阻塞 (blocks)" : "Blocks"}:</strong> ${renderDepList(deps.blocks)}</div>` : ""}
      ${deps.blocked_by && deps.blocked_by.length ? `<div><strong>${LANG === "zh" ? "被阻塞 (blocked by)" : "Blocked by"}:</strong> ${renderDepList(deps.blocked_by)}</div>` : ""}
    </div>
    <div style="margin-top:0.9rem;font-size:0.82rem">
      <a href="${escapeHtml(url)}" target="_blank" rel="noopener" style="color:#2c3e50">${LANG === "zh" ? "→ 在 GitHub 打开" : "→ Open on GitHub"}</a>
    </div>
  `;
}

// Jump to another issue (used by dep links in the panel)
function jumpToIssue(regionKey, issueNum) {
  if (!CY) return;
  const childId = `issue:${regionKey}:${issueNum}`;
  const node = CY.getElementById(childId);
  if (node && node.length) {
    // Make sure parent is expanded
    const parent = node.parent();
    if (parent.length && parent.data("is_region") && EC_API) {
      try { EC_API.expand(parent); } catch (e) { /* ignore */ }
    }
    showIssueDetail(node);
    CY.animate({ center: { eles: node }, zoom: Math.max(CY.zoom(), 1.0) }, { duration: 250 });
  } else {
    // Issue might be closed (not in graph) — open GitHub directly
    const data = ORNN_ISSUES && ORNN_ISSUES.regions[regionKey] &&
      ORNN_ISSUES.regions[regionKey].issues[String(issueNum)];
    if (data && data.url) {
      window.open(data.url, "_blank");
    }
  }
}

function setupZoomControls() {
  if (!CY) return;
  const stepZoom = factor => {
    const w = CY.width(), h = CY.height();
    const next = CY.zoom() * factor;
    CY.zoom({ level: next, renderedPosition: { x: w / 2, y: h / 2 } });
  };
  const bind = (id, fn) => {
    const el = document.getElementById(id);
    if (el) el.onclick = fn;
  };
  bind("zoom-in",  () => stepZoom(1.25));
  bind("zoom-out", () => stepZoom(0.8));
  bind("zoom-reset", () => {
    const visible = CY.elements(":visible");
    const eles = visible.length ? visible : CY.elements();
    CY.animate({ fit: { eles, padding: 16 } }, { duration: 300, easing: "ease-out" });
  });
}

// Initial-load filter: keep only focus=true regions and the edges between them.
// Cuts the map's 82-region density down to just the "currently attacking"
// subgraph (matching the side panel). Re-runs dagre on the visible subset so
// nodes don't sit scattered across the original full-graph layout coordinates.
// Restored on empty-area tap so the view doesn't get permanently "unfocused"
// after exploring.
function applyFocusFilter() {
  if (!CY || !REGIONS_DOC) return;
  CY.elements().removeClass("highlight").removeClass("faded");

  const keep = new Set();
  for (const [rid, r] of Object.entries(REGIONS_DOC.regions)) {
    if (r.focus === true) keep.add(rid);
  }
  // Safety: if no focus defined, don't fade anything
  if (keep.size === 0) return;

  CY.nodes().forEach(n => { if (!keep.has(n.id())) n.addClass("faded"); });
  CY.edges().forEach(e => {
    if (!keep.has(e.data("source")) || !keep.has(e.data("target"))) {
      e.addClass("faded");
    }
  });
  // Re-layout visible subset with dagre so the focus subgraph is tightly
  // arranged (instead of scattered across the original 82-region coordinates).
  const visible = CY.elements().not(".faded");
  if (visible.length > 0) {
    visible.layout({
      name: "dagre",
      rankDir: "LR",
      nodeSep: 30,
      rankSep: 80,
      animate: true,
      animationDuration: 350,
      fit: true,
      padding: 30,
    }).run();
  }
}

function highlightSubgraph(id) {
  if (!CY || !REGIONS_DOC) return;
  CY.elements().removeClass("highlight").removeClass("faded");
  CY.nodes().unselect();
  const cyNode = CY.getElementById(id);
  if (cyNode && !cyNode.empty()) cyNode.select();

  // Compute upstream/downstream from REGIONS_DOC.regions[].deps so the
  // graph highlights the connected subgraph.
  const incomingMap = {};   // target -> [sources]
  const outgoingMap = {};   // source -> [targets]
  for (const [rid, rr] of Object.entries(REGIONS_DOC.regions)) {
    for (const dep of (rr.deps || [])) {
      const depKey = typeof dep === "string" ? dep : dep.key;
      (outgoingMap[depKey] = outgoingMap[depKey] || []).push(rid);
      (incomingMap[rid] = incomingMap[rid] || []).push(depKey);
    }
  }
  const upSet = new Set([id]);
  const downSet = new Set([id]);
  const queueUp = [id];
  while (queueUp.length) {
    const cur = queueUp.shift();
    for (const s of (incomingMap[cur] || [])) {
      if (!upSet.has(s)) { upSet.add(s); queueUp.push(s); }
    }
  }
  const queueDown = [id];
  while (queueDown.length) {
    const cur = queueDown.shift();
    for (const tgt of (outgoingMap[cur] || [])) {
      if (!downSet.has(tgt)) { downSet.add(tgt); queueDown.push(tgt); }
    }
  }
  const keep = new Set([...upSet, ...downSet]);

  // Helper: is a node kept by this highlight? Issue children inherit their parent's status.
  const isKept = n => {
    if (keep.has(n.id())) return true;
    const parent = n.parent();
    return parent.length > 0 && keep.has(parent.first().id());
  };

  CY.nodes().forEach(n => { if (!isKept(n)) n.addClass("faded"); });
  CY.edges().forEach(e => {
    const sn = CY.getElementById(e.data("source"));
    const tn = CY.getElementById(e.data("target"));
    if (sn.length && tn.length && isKept(sn) && isKept(tn)) e.addClass("highlight");
    else e.addClass("faded");
  });

  const focusEles = CY.elements().filter(el => {
    if (el.isNode()) return isKept(el);
    const sn = CY.getElementById(el.data("source"));
    const tn = CY.getElementById(el.data("target"));
    return sn.length && tn.length && isKept(sn) && isKept(tn);
  });
  CY.animate(
    { fit: { eles: focusEles, padding: 60 } },
    { duration: 350, easing: "ease-out" }
  );
}

// Default panel content: surface "what we're attacking now" — current focus regions
// grouped by product, with closure status icons. Replaces the generic "click a node" hint.
function renderDefaultPanel() {
  if (!REGIONS_DOC) return;
  const detailEl = document.getElementById("detail-content");
  if (!detailEl) return;
  const lang = LANG;

  const RANK = {seed:0, obligation:1, scoped:2, public:3, bridged:4, mature:5};
  const stageIcon = (closure) => {
    const r = RANK[closure] ?? 0;
    if (r >= RANK.bridged) return "✅";
    if (r >= RANK.public) return "🟢";
    if (r >= RANK.scoped) return "🟡";
    if (r >= RANK.obligation) return "🟠";
    return "⛔";
  };

  // Group focus regions by product
  const byProduct = {};
  for (const [id, r] of Object.entries(REGIONS_DOC.regions)) {
    if (!r.focus) continue;
    if (!byProduct[r.product]) byProduct[r.product] = [];
    byProduct[r.product].push({id, r});
  }

  // Sort regions within product: less-mature first (more attention-needed)
  for (const p of Object.keys(byProduct)) {
    byProduct[p].sort((a, b) => (RANK[a.r.closure] ?? 0) - (RANK[b.r.closure] ?? 0));
  }

  const productOrder = ["nyxid", "aevatar", "ornn", "automath", "sisyphus", "symphony", "vibe-apps", "godgpt"];
  const sortedProducts = Object.keys(byProduct).sort((a, b) => productOrder.indexOf(a) - productOrder.indexOf(b));

  const header = lang === "zh"
    ? `<div style="font-size:1.05rem;font-weight:600;color:#222;margin-bottom:0.3rem">🎯 当前正在攻坚的</div>
       <div style="font-size:0.82rem;color:#888;margin-bottom:1rem">点击下方任何节点查看详情, 或在图上点击节点。</div>`
    : `<div style="font-size:1.05rem;font-weight:600;color:#222;margin-bottom:0.3rem">🎯 What we're attacking now</div>
       <div style="font-size:0.82rem;color:#888;margin-bottom:1rem">Click any region below for detail, or tap a node on the graph.</div>`;

  const productLabel = (p) => (PRODUCT_BY_KEY[p] && PRODUCT_BY_KEY[p].label[lang]) || p;

  const sections = sortedProducts.map(p => {
    const items = byProduct[p].map(({id, r}) => {
      const lbl = (r.label && r.label[lang]) || (r.label && r.label.en) || id;
      const closureLbl = (CLOSURE_BY_KEY[r.closure] && CLOSURE_BY_KEY[r.closure].label[lang]) || r.closure;
      const issueCount = r.issue_count || 0;
      const milestone = r.milestone ? ` <span style="color:#aaa">· ${escapeHtml(r.milestone)}</span>` : "";
      return `<li style="margin-bottom:0.35rem">
        <a class="region-ref" onclick='showNodeDetail(${JSON.stringify(id)})' style="font-weight:500">${stageIcon(r.closure)} ${escapeHtml(lbl)}</a>
        <span style="color:#888;font-size:0.78rem">— ${escapeHtml(closureLbl)} · ${issueCount} ${lang === "zh" ? "未修" : "open"}${milestone}</span>
      </li>`;
    }).join("");
    return `<div style="margin-bottom:1.1rem">
      <div style="font-size:0.78rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:0.4rem">${escapeHtml(productLabel(p))}</div>
      <ul style="list-style:none;padding-left:0;margin:0;line-height:1.4">${items}</ul>
    </div>`;
  }).join("");

  const legend = lang === "zh"
    ? `<div style="font-size:0.74rem;color:#aaa;margin-top:1rem;padding-top:0.7rem;border-top:1px dashed #eee">
        ⛔ 提出 (seed) · 🟠 接手 (obligation) · 🟡 设计完 (scoped) · 🟢 已承诺 / 已集成 (public/bridged) · ✅ 运行中 (mature)
      </div>`
    : `<div style="font-size:0.74rem;color:#aaa;margin-top:1rem;padding-top:0.7rem;border-top:1px dashed #eee">
        ⛔ Seed · 🟠 Obligation · 🟡 Scoped · 🟢 Public/Bridged · ✅ Mature
      </div>`;

  detailEl.innerHTML = header + sections + legend;
}

// Compute per-region status breakdown from resolved issues
// Returns {todo, in_progress, done, blocked, total} counts based on issue states + dep chain
function computeRegionStatus(regionId, regionData) {
  const issuesData = ORNN_ISSUES && ORNN_ISSUES.regions && ORNN_ISSUES.regions[regionId];
  if (!issuesData || !issuesData.issues) return null;
  const issues = Object.values(issuesData.issues);
  const open = issues.filter(i => i.state === "OPEN");
  const closed = issues.filter(i => i.state === "CLOSED");
  // "Blocked" = open issue whose blocked_by includes an OPEN issue in this region
  const openNums = new Set(open.map(i => i.number));
  const blocked = open.filter(i => {
    const bb = (i.deps && i.deps.blocked_by) || [];
    return bb.some(n => openNums.has(n));
  });
  // "Ready to work on" = open and NOT blocked
  const ready = open.length - blocked.length;
  return {todo: ready, blocked: blocked.length, done: closed.length, total: issues.length};
}

function showNodeDetail(id) {
  if (!REGIONS_DOC) return;
  const r = REGIONS_DOC.regions[id];
  if (!r) return;
  const detailEl = document.getElementById("detail-content");
  if (!detailEl) return;

  highlightSubgraph(id);

  const closure = CLOSURE_BY_KEY[r.closure] || {};
  const formal = FORMAL_BY_KEY[r.formal] || {};
  const product = PRODUCT_BY_KEY[r.product] || {};
  const lang = LANG;

  // promoted_at timeline like "接手 02-15 → 设计完 03-01 → 已承诺 03-15"
  const tiers = ["obligation", "scoped", "public", "bridged", "mature"];
  const promotedAt = r.promoted_at || {};
  const timeline = tiers
    .map(k => {
      const date = promotedAt[k];
      if (!date) return null;
      const tierLabel = (CLOSURE_BY_KEY[k] || {}).label?.[lang] || k;
      return `${tierLabel} ${date}`;
    })
    .filter(Boolean)
    .join(" → ");

  // Downstream: regions that list `id` in their deps
  const downstream = Object.entries(REGIONS_DOC.regions)
    .filter(([_, rr]) => (rr.deps || []).some(d => (typeof d === "string" ? d : d.key) === id))
    .map(([k]) => k);

  const upstream = (r.deps || [])
    .map(d => typeof d === "string" ? d : d.key)
    .filter(k => REGIONS_DOC.regions[k]);

  // Split upstream into BLOCKED-BY (not yet shipped) vs BUILT-ON (ready).
  // Symmetric split for downstream: IS-BLOCKING (downstream not yet shipped — they
  // need this region done) vs ALREADY-SHIPPED-ON-TOP (downstream past public —
  // this region's state no longer gates them).
  //
  // "Shipped" — for the purpose of deciding whether this upstream still
  // blocks its downstream. Per the README's closure semantics:
  //   - public  = release / changelog announced (released to the world)
  //   - bridged = upstream/downstream issues closed + smoke passed (integration verified)
  //
  // bridged is the level where downstream can RELY on this region. A
  // public region with open bugs is announced but its integration smoke
  // hasn't passed — so it still blocks downstream from a clean integration.
  //
  // Logic:
  //   1) closure >= bridged → shipped (integration verified)
  //   2) closure == public AND zero open issues → shipped (released cleanly)
  //   3) milestone_ref + every tracked issue closed → shipped (pragmatic
  //      auto-detect for when closure stage hasn't been manually bumped)
  // Everything else: still blocking.
  const CLOSURE_RANK = {seed:0, obligation:1, scoped:2, public:3, bridged:4, mature:5};
  const isShipped = (k) => {
    const rr = REGIONS_DOC.regions[k];
    if (!rr) return false;
    const rank = CLOSURE_RANK[rr.closure] ?? 0;
    if (rank >= CLOSURE_RANK.bridged) return true;
    if (rank >= CLOSURE_RANK.public && (rr.issue_count || 0) === 0) return true;
    if (rr.milestone_ref) {
      const issuesData = ORNN_ISSUES && ORNN_ISSUES.regions && ORNN_ISSUES.regions[k];
      if (issuesData && issuesData.issues) {
        const all = Object.values(issuesData.issues);
        if (all.length > 0 && all.every(i => i.state !== "OPEN")) return true;
      }
    }
    return false;
  };
  const blockedBy = upstream.filter(k => !isShipped(k));
  const builtOn  = upstream.filter(k =>  isShipped(k));
  const isBlocking      = downstream.filter(k => !isShipped(k));
  const shippedOnTopOf  = downstream.filter(k =>  isShipped(k));

  const otherLang = lang === "en" ? "zh" : "en";
  const primaryLabel = (r.label && r.label[lang]) || (r.label && r.label.en) || id;
  const otherLabel = (r.label && r.label[otherLang]) || "";
  // Strip the AUTO_GH_ISSUES marker block from rendered desc — the panel
  // renders that data programmatically below (see issuesSection) so it
  // gets proper HTML instead of raw markdown.
  const rawDesc = (r.desc && r.desc[lang]) || "";
  const primaryDesc = rawDesc.replace(/<!--\s*AUTO_GH_ISSUES:START\s*-->[\s\S]*?<!--\s*AUTO_GH_ISSUES:END\s*-->/g, "").trim();

  const linkRegion = k => {
    const rr = REGIONS_DOC.regions[k];
    const lbl = (rr && rr.label && rr.label[lang]) || (rr && rr.label && rr.label.en) || k;
    // Use single quotes for the attribute so JSON.stringify's double quotes don't break HTML parsing
    return `<a onclick='showNodeDetail(${JSON.stringify(k)})'>${escapeHtml(lbl)}</a>`;
  };

  // Repo inference: parse `repo:OWNER/NAME` from gh_query string, fallback to product default
  const PRODUCT_REPO_DEFAULTS = {
    nyxid: "ChronoAIProject/NyxID",
    aevatar: "aevatarAI/aevatar",
    ornn: "ChronoAIProject/Ornn",
    automath: "the-omega-institute/automath",
    sisyphus: "aevatarAI/aevatar",
    symphony: "ChronoAIProject/chronoai-symphony",
    godgpt: "aevatarAI/godgpt",
  };
  const ghQueryStr = typeof r.gh_query === "string" ? r.gh_query : "";
  const repoMatch = ghQueryStr.match(/repo:([\w.-]+\/[\w.-]+)/);
  const repo = repoMatch ? repoMatch[1] : (PRODUCT_REPO_DEFAULTS[r.product] || null);

  // Build a set of all region keys for in-desc auto-linking
  const ALL_REGION_KEYS = Object.keys(REGIONS_DOC.regions);
  // Sort longest-first so e.g. "NyxID-CLI-Wizard" matches before "NyxID-CLI"
  const SORTED_REGION_KEYS = [...ALL_REGION_KEYS].sort((a, b) => b.length - a.length);
  // Escape regex special chars in keys for safe pattern building
  const escRegex = s => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  const REGION_KEY_PATTERN = new RegExp(
    "\\b(" + SORTED_REGION_KEYS.map(escRegex).join("|") + ")\\b",
    "g"
  );

  // Escape HTML, then link #NNN refs to GitHub issues + region-key refs to in-map jumps
  const escapeAndLinkIssues = (text) => {
    let escaped = escapeHtml(text);
    // GitHub issue refs
    if (repo) {
      escaped = escaped.replace(/#(\d+)\b/g, (_, n) =>
        `<a href="https://github.com/${repo}/issues/${n}" target="_blank" rel="noopener">#${n}</a>`
      );
    }
    // In-map region refs (e.g., "NyxID-CLI-Wizard" → click to jump)
    escaped = escaped.replace(REGION_KEY_PATTERN, (match) => {
      // Don't re-link the region we're currently viewing
      if (match === id) return match;
      // Single-quote outer to avoid breaking HTML when JSON.stringify emits inner double quotes
      return `<a class="region-ref" onclick='showNodeDetail(${JSON.stringify(match)})'>${match}</a>`;
    });
    return escaped;
  };

  const ghSearchUrl = ghQueryStr
    ? `https://github.com/search?q=${encodeURIComponent(ghQueryStr)}&type=issues`
    : null;

  // Issue list pulled from ORNN_ISSUES for regions with milestone_ref
  const issuesData = ORNN_ISSUES && ORNN_ISSUES.regions && ORNN_ISSUES.regions[id];
  let issuesSection = "";
  if (issuesData && issuesData.issues) {
    const ms = issuesData.milestone;
    const issues = Object.values(issuesData.issues);
    const open = issues.filter(i => i.state === "OPEN").sort((a, b) => b.number - a.number);
    const closed = issues.filter(i => i.state === "CLOSED").sort((a, b) => b.number - a.number);
    const renderIssue = (i, dim) => {
      const num = i.number;
      const t = escapeHtml(i.title);
      const opacity = dim ? 'style="opacity:0.55"' : "";
      const strike = dim ? "text-decoration:line-through;" : "";
      return `<li ${opacity}><a href="#" onclick="event.preventDefault();jumpToIssue('${id}',${num})" style="${strike}">#${num}</a> ${t}</li>`;
    };
    const openLabel = lang === "zh" ? "进行中" : "Open";
    const closedLabel = lang === "zh" ? "已关闭" : "Closed";
    const expandHint = lang === "zh" ? "(再次点击 milestone 可折叠/展开图上的 issue 节点)" : "(click the milestone again to toggle issue nodes on the map)";
    issuesSection = `
      <div class="term-issues" style="margin-top:0.9rem;padding-top:0.6rem;border-top:1px solid #eee;font-size:0.85rem">
        <div style="font-weight:600;color:#444;margin-bottom:0.3rem">
          <a href="${escapeHtml(ms.url)}" target="_blank" rel="noopener" style="color:#2c3e50">GitHub: ${escapeHtml(ms.title)}</a>
          <span style="color:#888;font-weight:400">— ${open.length} ${openLabel} / ${closed.length} ${closedLabel}</span>
        </div>
        ${open.length ? `<details open><summary style="cursor:pointer;color:#27ae60;font-weight:500">${openLabel} (${open.length})</summary><ul style="margin:0.3rem 0 0.5rem 0.8rem;padding-left:0.6rem;line-height:1.5">${open.map(i => renderIssue(i, false)).join("")}</ul></details>` : ""}
        ${closed.length ? `<details><summary style="cursor:pointer;color:#7f8c8d">${closedLabel} (${closed.length})</summary><ul style="margin:0.3rem 0 0.5rem 0.8rem;padding-left:0.6rem;line-height:1.5">${closed.slice(0, 30).map(i => renderIssue(i, true)).join("")}${closed.length > 30 ? `<li style="color:#aaa;font-style:italic">… and ${closed.length - 30} more</li>` : ""}</ul></details>` : ""}
        <div style="color:#aaa;font-size:0.75rem;margin-top:0.3rem">${expandHint}</div>
      </div>
    `;
  }

  detailEl.innerHTML = `
    <div class="term-name">${escapeHtml(primaryLabel)}${
      otherLabel && otherLabel !== primaryLabel
        ? `<span class="term-other">${escapeHtml(otherLabel)}</span>`
        : ""
    }</div>
    ${primaryDesc ? `<div class="term-desc">${escapeAndLinkIssues(primaryDesc)}</div>` : ""}
    <div class="term-stats">
      <span>${escapeHtml(closure.label?.[lang] || r.closure || "")}</span>
      <span>${escapeHtml(formal.label?.[lang] || r.formal || "")}</span>
      <span>${escapeHtml(product.label?.[lang] || r.product || "")}</span>
      ${r.milestone ? `<span>${escapeHtml(r.milestone)}</span>` : ""}
      ${r.owner ? `<span>@${escapeHtml(r.owner)}</span>` : ""}
      <span>#${r.issue_count || 0}</span>
      ${r.focus ? '<span style="color:#c0392b">★ focus</span>' : ""}
      ${r.archived ? '<span style="opacity:0.6">archived</span>' : ""}
    </div>
    ${(() => {
      const s = computeRegionStatus(id, r);
      if (!s) return "";
      const todoLbl = lang === "zh" ? "待办" : "Todo";
      const blockedLbl = lang === "zh" ? "被阻塞" : "Blocked";
      const doneLbl = lang === "zh" ? "已完成" : "Done";
      return `<div class="term-status">
        <span class="status-chip status-todo" title="${lang === 'zh' ? '可立即着手 (无依赖)' : 'Ready to work on (no blocking deps)'}">🟢 ${s.todo} ${todoLbl}</span>
        ${s.blocked > 0 ? `<span class="status-chip status-blocked" title="${lang === 'zh' ? '被其他未完成 issue 阻塞' : 'Blocked by other open issues'}">⛔ ${s.blocked} ${blockedLbl}</span>` : ""}
        <span class="status-chip status-done" title="${lang === 'zh' ? '已关闭' : 'Closed'}">✅ ${s.done} ${doneLbl}</span>
      </div>`;
    })()}
    ${ghSearchUrl ? `<div class="term-deps"><strong>GitHub:</strong> <a href="${ghSearchUrl}" target="_blank" rel="noopener">${lang === "zh" ? "查看全部 issue ↗" : "view all issues ↗"}</a></div>` : ""}
    ${timeline ? `<div class="term-timeline"><strong>${t("detail_timeline")}</strong> ${escapeHtml(timeline)}</div>` : ""}
    ${blockedBy.length ? `<div class="term-deps term-blocked"><strong>${lang === "zh" ? "⛔ 被阻塞于:" : "⛔ Blocked by:"}</strong> ${blockedBy.map(linkRegion).join(" ")}</div>` : ""}
    ${builtOn.length ? `<div class="term-deps term-builton"><strong>${lang === "zh" ? "✅ 基于:" : "✅ Built on:"}</strong> ${builtOn.map(linkRegion).join(" ")}</div>` : ""}
    ${isBlocking.length ? `<div class="term-deps term-blocking"><strong>${lang === "zh" ? "🚀 正在阻塞:" : "🚀 Is blocking:"}</strong> ${isBlocking.map(linkRegion).join(" ")}</div>` : ""}
    ${shippedOnTopOf.length ? `<div class="term-deps term-shipped-on-top"><strong>${lang === "zh" ? "↓ 上层已上线:" : "↓ Already shipped on top:"}</strong> ${shippedOnTopOf.map(linkRegion).join(" ")}</div>` : ""}
    ${issuesSection}
  `;
}

function renderLegend() {
  if (!CONFIG) return;
  const lc = document.getElementById("legend-color-list");
  const ls = document.getElementById("legend-shape-list");
  if (lc) {
    lc.innerHTML = CONFIG.closure_tiers.map(tier =>
      `<div><span class="swatch circle" style="background:${tier.color};"></span>${escapeHtml(tier.label[LANG] || tier.label.en)}</div>`
    ).join("");
  }
  if (ls) {
    ls.innerHTML = CONFIG.formal_levels.map(f =>
      `<div><span class="swatch ${f.shape}"></span>${escapeHtml(f.label[LANG] || f.label.en)}</div>`
    ).join("");
  }
}

function renderAll() {
  applyStaticI18n();
  if (!CY) {
    renderCy();
    // Initial paint: populate data fields the style block reads
    // (color/shape/stroke/borderWidth/size/label/archived). Without this
    // call, the first render leaves nodes as gray ellipses with no labels
    // because Cytoscape's `data(...)` selectors resolve to undefined.
    refreshNodeVisuals();
    // Cytoscape's auto-fit happens before refreshNodeVisuals widens nodes,
    // so re-fit once labels and sizes are set.
    if (CY) CY.fit(undefined, 16);
  } else {
    refreshNodeVisuals();
  }
  if (CY && CY.nodes(":selected").length) {
    showNodeDetail(CY.nodes(":selected")[0].id());
  } else {
    renderDefaultPanel();
    // On initial load (and when language toggles), apply the focus filter so
    // the graph echoes the side panel — only "currently attacking" subgraph
    // stays prominent; the rest fades.
    applyFocusFilter();
  }
}

function setLang(lang) {
  LANG = lang;
  renderAll();
}

(async () => {
  try {
    await loadData();
    renderAll();
  } catch (e) {
    document.getElementById("cy").innerHTML =
      `<div style="padding:2rem;color:red;">Error loading data: ${e.message}</div>`;
  }
})();
</script>
```