@kweaver-ai/kweaver-sdk 0.8.3 → 0.8.4

package/dist/templates/explorer/bkn.js

@@ -197,15 +197,7 @@ function renderBknHome($el, knId) {
       '<button id="bkn-search-btn">Search</button>' +
     '</div>' +
 
-    '<h2 style="font-size:18px; margin-bottom:16px;">Object Types</h2>' +
-    '<div class="ot-grid">' +
-      m.objectTypes.map(function(ot) {
-        return '<a href="#/bkn/' + enc(knId) + '/ot/' + enc(ot.id) + '" class="ot-card" style="text-decoration:none;color:inherit;">' +
-          '<h3>' + esc(ot.name) + '</h3>' +
-          '<div class="meta">' + ot.propertyCount + ' properties</div>' +
-        '</a>';
-      }).join("") +
-    '</div>' +
+    renderOtSection(knId, m) +
 
     (rtCount > 0 ? (
       '<h2 style="font-size:18px; margin:24px 0 16px;">Relation Types</h2>' +
@@ -219,6 +211,8 @@ function renderBknHome($el, knId) {
       '</div>'
     ) : '');
 
+  mountOtView(knId, m);
+
   // Bind search
   var searchInput = document.getElementById("bkn-search-input");
   var searchBtn = document.getElementById("bkn-search-btn");
@@ -232,6 +226,863 @@ function renderBknHome($el, knId) {
   }
 }
 
+// \u2500\u2500 Object Types section (multi-view: card / list / graph) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+var OT_VIEW_KEY = "kweaver.bkn.otView";
+var OT_LIST_SORT = { key: "name", dir: "asc" };
+var __g6Instance = null;
+
+function getOtView() {
+  try { return localStorage.getItem(OT_VIEW_KEY) || "card"; }
+  catch (_) { return "card"; }
+}
+function setOtView(v) {
+  try { localStorage.setItem(OT_VIEW_KEY, v); } catch (_) {}
+}
+
+var VIEW_ICONS = {
+  card: '<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>',
+  list: '<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><rect x="1" y="2" width="14" height="2" rx="0.5"/><rect x="1" y="7" width="14" height="2" rx="0.5"/><rect x="1" y="12" width="14" height="2" rx="0.5"/></svg>',
+  graph: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="3" cy="4" r="2"/><circle cx="13" cy="4" r="2"/><circle cx="8" cy="13" r="2"/><line x1="3" y1="4" x2="13" y2="4"/><line x1="3" y1="4" x2="8" y2="13"/><line x1="13" y1="4" x2="8" y2="13"/></svg>',
+};
+
+function enrichObjectTypes(m) {
+  var rtCounts = {};
+  m.relationTypes.forEach(function(rt) {
+    rtCounts[rt.sourceOtId] = (rtCounts[rt.sourceOtId] || 0) + 1;
+    if (rt.targetOtId !== rt.sourceOtId) {
+      rtCounts[rt.targetOtId] = (rtCounts[rt.targetOtId] || 0) + 1;
+    }
+  });
+  return m.objectTypes.map(function(ot) {
+    return {
+      id: ot.id,
+      name: ot.name,
+      propertyCount: ot.propertyCount,
+      relCount: rtCounts[ot.id] || 0,
+      dsType: (ot.dataSource && ot.dataSource.type) || "\u2014",
+      dsName: (ot.dataSource && ot.dataSource.name) || "",
+    };
+  });
+}
+
+function renderViewSwitcher(current) {
+  return '<div class="view-switcher" role="tablist" aria-label="Object Types view mode">' +
+    ["card", "list", "graph"].map(function(v) {
+      var sel = v === current;
+      var label = v.charAt(0).toUpperCase() + v.slice(1);
+      return '<button type="button" role="tab" aria-selected="' + sel + '" ' +
+        'data-ot-view="' + v + '" title="' + label + ' view">' +
+        VIEW_ICONS[v] + '<span>' + label + '</span></button>';
+    }).join("") +
+  '</div>';
+}
+
+function renderOtSection(knId, m) {
+  var view = getOtView();
+  return '<div class="section-header">' +
+    '<h2>Object Types</h2>' +
+    '<div class="header-tools">' + renderViewSwitcher(view) + '</div>' +
+  '</div>' +
+  '<div id="ot-view-host"></div>';
+}
+
+function mountOtView(knId, m) {
+  var view = getOtView();
+  var ots = enrichObjectTypes(m);
+  var host = document.getElementById("ot-view-host");
+  if (!host) return;
+
+  // Destroy any prior G6 instance when leaving graph view
+  if (__g6Instance && view !== "graph") {
+    try { __g6Instance.destroy(); } catch (_) {}
+    __g6Instance = null;
+  }
+
+  if (view === "card") {
+    host.innerHTML = renderOtCardView(knId, ots);
+  } else if (view === "list") {
+    host.innerHTML = renderOtListView(knId, ots);
+    bindOtListEvents(knId, m);
+  } else if (view === "graph") {
+    host.innerHTML = renderOtGraphShell();
+    renderOtGraphView(knId, ots, m.relationTypes, m.conceptGroups || []);
+  }
+
+  // Bind switcher (idempotent re-bind)
+  var buttons = document.querySelectorAll(".view-switcher [data-ot-view]");
+  buttons.forEach(function(btn) {
+    btn.onclick = function() {
+      var v = btn.getAttribute("data-ot-view");
+      if (v === getOtView()) return;
+      setOtView(v);
+      buttons.forEach(function(b) {
+        b.setAttribute("aria-selected", b === btn ? "true" : "false");
+      });
+      mountOtView(knId, m);
+    };
+    btn.onkeydown = function(e) {
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      e.preventDefault();
+      var order = ["card", "list", "graph"];
+      var idx = order.indexOf(getOtView());
+      var next = e.key === "ArrowRight" ? (idx + 1) % 3 : (idx + 2) % 3;
+      setOtView(order[next]);
+      buttons.forEach(function(b) {
+        b.setAttribute("aria-selected", b.getAttribute("data-ot-view") === order[next] ? "true" : "false");
+      });
+      var nextBtn = document.querySelector('[data-ot-view="' + order[next] + '"]');
+      if (nextBtn) nextBtn.focus();
+      mountOtView(knId, m);
+    };
+  });
+}
+
+// \u2500\u2500 Card view \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function renderOtCardView(knId, ots) {
+  return '<div class="ot-grid">' +
+    ots.map(function(ot) {
+      var badge = ot.relCount > 0
+        ? '<span class="ot-badge" title="' + ot.relCount + ' relations">' + ot.relCount + '</span>'
+        : '';
+      var chipCls = ot.dsType === "resource" ? "chip chip-resource" : "chip";
+      return '<a href="#/bkn/' + enc(knId) + '/ot/' + enc(ot.id) + '" class="ot-card" style="text-decoration:none;color:inherit;">' +
+        badge +
+        '<h3>' + esc(ot.name) + '</h3>' +
+        '<div class="meta">' + ot.propertyCount + ' properties</div>' +
+        '<div class="ot-chips"><span class="' + chipCls + '">' + esc(ot.dsType) + '</span></div>' +
+      '</a>';
+    }).join("") +
+  '</div>';
+}
+
+// \u2500\u2500 List view \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function renderOtListView(knId, ots) {
+  var sorted = ots.slice().sort(function(a, b) {
+    var k = OT_LIST_SORT.key, va = a[k], vb = b[k];
+    var cmp;
+    if (typeof va === "string") cmp = va.localeCompare(vb);
+    else cmp = (va || 0) - (vb || 0);
+    return OT_LIST_SORT.dir === "asc" ? cmp : -cmp;
+  });
+
+  function th(label, key, cls) {
+    var sort = OT_LIST_SORT.key === key
+      ? (OT_LIST_SORT.dir === "asc" ? "ascending" : "descending")
+      : "none";
+    return '<th data-sort-key="' + key + '" aria-sort="' + sort + '"' +
+      (cls ? ' class="' + cls + '"' : '') + '>' + label + '</th>';
+  }
+
+  return '<div class="ot-list-wrap"><table class="ot-list-table">' +
+    '<thead><tr>' +
+      th("Name", "name") +
+      th("Properties", "propertyCount", "num") +
+      th("Data Source", "dsType") +
+      th("Relations", "relCount", "num") +
+      '<th class="row-arrow" aria-hidden="true"></th>' +
+    '</tr></thead>' +
+    '<tbody>' +
+      sorted.map(function(ot) {
+        var chipCls = ot.dsType === "resource" ? "chip chip-resource" : "chip";
+        var dsDisplay = ot.dsName ? esc(ot.dsType) + ' \u00b7 ' + esc(ot.dsName) : esc(ot.dsType);
+        return '<tr data-href="/bkn/' + enc(knId) + '/ot/' + enc(ot.id) + '" tabindex="0">' +
+          '<td class="name-cell">' + esc(ot.name) + '</td>' +
+          '<td class="num">' + ot.propertyCount + '</td>' +
+          '<td><span class="' + chipCls + '">' + esc(ot.dsType) + '</span>' +
+            (ot.dsName ? ' <span style="color:var(--text-secondary); font-size:12px;">' + esc(ot.dsName) + '</span>' : '') +
+          '</td>' +
+          '<td class="num">' + (ot.relCount || "\u2014") + '</td>' +
+          '<td class="row-arrow">\u2192</td>' +
+        '</tr>';
+      }).join("") +
+    '</tbody>' +
+  '</table></div>';
+}
+
+function bindOtListEvents(knId, m) {
+  // Row click / Enter \u2192 navigate
+  document.querySelectorAll(".ot-list-table tbody tr").forEach(function(tr) {
+    var go = function() { location.hash = tr.getAttribute("data-href"); };
+    tr.addEventListener("click", go);
+    tr.addEventListener("keydown", function(e) { if (e.key === "Enter") go(); });
+  });
+  // Header click \u2192 sort
+  document.querySelectorAll(".ot-list-table thead th[data-sort-key]").forEach(function(th) {
+    th.addEventListener("click", function() {
+      var k = th.getAttribute("data-sort-key");
+      if (OT_LIST_SORT.key === k) {
+        OT_LIST_SORT.dir = OT_LIST_SORT.dir === "asc" ? "desc" : "asc";
+      } else {
+        OT_LIST_SORT.key = k;
+        OT_LIST_SORT.dir = "asc";
+      }
+      mountOtView(knId, m);
+    });
+  });
+}
+
+// \u2500\u2500 Graph view (AntV G6 v5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function renderOtGraphShell() {
+  var current = getOtGraphLayout();
+  var grouped = getOtGraphGroup();
+  var currentPal = getOtGraphPalette();
+  var layoutOpts = [
+    { v: "d3-force", l: "Force" },
+    { v: "radial", l: "Radial" },
+    { v: "concentric", l: "Concentric" },
+    { v: "circular", l: "Circular" },
+    { v: "dagre", l: "Dagre (hierarchy)" },
+    { v: "grid", l: "Grid" },
+  ];
+  var palOpts = [
+    { v: "ocean", l: "Ocean (blue · default)" },
+    { v: "forest", l: "Forest (green)" },
+    { v: "sunset", l: "Sunset (warm)" },
+    { v: "pastel", l: "Pastel (soft)" },
+    { v: "bold", l: "Bold (saturated)" },
+    { v: "mono", l: "Mono (slate)" },
+  ];
+  return '<div class="ot-graph-wrap">' +
+    '<div class="ot-graph-toolbar">' +
+      '<label style="display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;box-shadow:var(--shadow-sm);" title="Group by concept-groups defined in the BKN schema">' +
+        '<input type="checkbox" id="ot-graph-group"' + (grouped ? " checked" : "") + ' style="margin:0;cursor:pointer;"> Group' +
+      '</label>' +
+      '<select id="ot-graph-palette" title="Color palette (applies to whole graph)">' +
+        palOpts.map(function(o) {
+          return '<option value="' + o.v + '"' + (o.v === currentPal ? " selected" : "") + '>' + o.l + '</option>';
+        }).join("") +
+      '</select>' +
+      '<select id="ot-graph-layout" title="Layout algorithm (disabled when Group is on)"' + (grouped ? " disabled" : "") + '>' +
+        layoutOpts.map(function(o) {
+          return '<option value="' + o.v + '"' + (o.v === current ? " selected" : "") + '>' + o.l + '</option>';
+        }).join("") +
+      '</select>' +
+      '<button type="button" data-graph-action="fit" title="Fit view">Fit</button>' +
+      '<button type="button" data-graph-action="export" title="Export PNG (3x for slides)">Export PNG</button>' +
+    '</div>' +
+    '<div id="ot-graph-host" class="ot-graph-host"></div>' +
+  '</div>';
+}
+
+var OT_GRAPH_LAYOUT_KEY = "kweaver.bkn.otGraphLayout";
+var OT_GRAPH_GROUP_KEY = "kweaver.bkn.otGraphGroup";
+function getOtGraphLayout() {
+  try { return localStorage.getItem(OT_GRAPH_LAYOUT_KEY) || "d3-force"; }
+  catch (_) { return "d3-force"; }
+}
+function setOtGraphLayout(v) {
+  try { localStorage.setItem(OT_GRAPH_LAYOUT_KEY, v); } catch (_) {}
+}
+function getOtGraphGroup() {
+  try { return localStorage.getItem(OT_GRAPH_GROUP_KEY) !== "off"; }
+  catch (_) { return true; }
+}
+function setOtGraphGroup(on) {
+  try { localStorage.setItem(OT_GRAPH_GROUP_KEY, on ? "on" : "off"); } catch (_) {}
+}
+
+// Named palettes — picked via Palette dropdown. Each entry has 8 hues.
+// First entry is the primary/accent that drives the whole graph theme.
+var GROUP_PALETTES = {
+  ocean: [
+    { strong: "#0ea5e9", light: "#f0f9ff", darkLight: "rgba(14,165,233,0.20)" },   // sky
+    { strong: "#06b6d4", light: "#ecfeff", darkLight: "rgba(6,182,212,0.20)" },    // cyan
+    { strong: "#3b82f6", light: "#eff6ff", darkLight: "rgba(59,130,246,0.20)" },   // blue
+    { strong: "#6366f1", light: "#eef2ff", darkLight: "rgba(99,102,241,0.20)" },   // indigo
+    { strong: "#14b8a6", light: "#f0fdfa", darkLight: "rgba(20,184,166,0.20)" },   // teal
+    { strong: "#0d9488", light: "#ccfbf1", darkLight: "rgba(13,148,136,0.20)" },   // dark teal
+    { strong: "#1e40af", light: "#dbeafe", darkLight: "rgba(30,64,175,0.20)" },    // dark blue
+    { strong: "#4f46e5", light: "#e0e7ff", darkLight: "rgba(79,70,229,0.20)" },    // dark indigo
+  ],
+  forest: [
+    { strong: "#16a34a", light: "#f0fdf4", darkLight: "rgba(22,163,74,0.20)" },    // green
+    { strong: "#65a30d", light: "#f7fee7", darkLight: "rgba(101,163,13,0.20)" },   // lime
+    { strong: "#15803d", light: "#dcfce7", darkLight: "rgba(21,128,61,0.20)" },    // dark green
+    { strong: "#0d9488", light: "#ccfbf1", darkLight: "rgba(13,148,136,0.20)" },   // teal
+    { strong: "#84cc16", light: "#ecfccb", darkLight: "rgba(132,204,22,0.20)" },   // light lime
+    { strong: "#059669", light: "#d1fae5", darkLight: "rgba(5,150,105,0.20)" },    // emerald
+    { strong: "#365314", light: "#ecfccb", darkLight: "rgba(54,83,20,0.20)" },     // dark lime
+    { strong: "#047857", light: "#a7f3d0", darkLight: "rgba(4,120,87,0.20)" },     // dark emerald
+  ],
+  sunset: [
+    { strong: "#f97316", light: "#fff7ed", darkLight: "rgba(249,115,22,0.20)" },   // orange
+    { strong: "#ef4444", light: "#fef2f2", darkLight: "rgba(239,68,68,0.20)" },    // red
+    { strong: "#f59e0b", light: "#fffbeb", darkLight: "rgba(245,158,11,0.20)" },   // amber
+    { strong: "#ec4899", light: "#fdf2f8", darkLight: "rgba(236,72,153,0.20)" },   // pink
+    { strong: "#dc2626", light: "#fee2e2", darkLight: "rgba(220,38,38,0.20)" },    // dark red
+    { strong: "#ea580c", light: "#ffedd5", darkLight: "rgba(234,88,12,0.20)" },    // dark orange
+    { strong: "#be123c", light: "#ffe4e6", darkLight: "rgba(190,18,67,0.20)" },    // rose
+    { strong: "#b91c1c", light: "#fee2e2", darkLight: "rgba(185,28,28,0.20)" },    // crimson
+  ],
+  pastel: [
+    { strong: "#f9a8d4", light: "#fdf2f8", darkLight: "rgba(249,168,212,0.22)" },  // pink
+    { strong: "#a5b4fc", light: "#eef2ff", darkLight: "rgba(165,180,252,0.22)" },  // indigo
+    { strong: "#86efac", light: "#f0fdf4", darkLight: "rgba(134,239,172,0.22)" },  // green
+    { strong: "#fcd34d", light: "#fffbeb", darkLight: "rgba(252,211,77,0.22)" },   // amber
+    { strong: "#c4b5fd", light: "#f5f3ff", darkLight: "rgba(196,181,253,0.22)" },  // violet
+    { strong: "#7dd3fc", light: "#f0f9ff", darkLight: "rgba(125,211,252,0.22)" },  // sky
+    { strong: "#fca5a5", light: "#fef2f2", darkLight: "rgba(252,165,165,0.22)" },  // red
+    { strong: "#5eead4", light: "#f0fdfa", darkLight: "rgba(94,234,212,0.22)" },   // teal
+  ],
+  bold: [
+    { strong: "#6d28d9", light: "#ede9fe", darkLight: "rgba(109,40,217,0.25)" },   // violet
+    { strong: "#1d4ed8", light: "#dbeafe", darkLight: "rgba(29,78,216,0.25)" },    // blue
+    { strong: "#047857", light: "#d1fae5", darkLight: "rgba(4,120,87,0.25)" },     // emerald
+    { strong: "#b45309", light: "#fef3c7", darkLight: "rgba(180,83,9,0.25)" },     // amber
+    { strong: "#be185d", light: "#fce7f3", darkLight: "rgba(190,24,93,0.25)" },    // pink
+    { strong: "#0f766e", light: "#ccfbf1", darkLight: "rgba(15,118,110,0.25)" },   // teal
+    { strong: "#b91c1c", light: "#fee2e2", darkLight: "rgba(185,28,28,0.25)" },    // red
+    { strong: "#4338ca", light: "#e0e7ff", darkLight: "rgba(67,56,202,0.25)" },    // indigo
+  ],
+  mono: [
+    { strong: "#475569", light: "#f1f5f9", darkLight: "rgba(71,85,105,0.22)" },    // slate
+    { strong: "#64748b", light: "#f8fafc", darkLight: "rgba(100,116,139,0.22)" },
+    { strong: "#94a3b8", light: "#f1f5f9", darkLight: "rgba(148,163,184,0.22)" },
+    { strong: "#475569", light: "#e2e8f0", darkLight: "rgba(71,85,105,0.22)" },
+    { strong: "#334155", light: "#cbd5e1", darkLight: "rgba(51,65,85,0.22)" },
+    { strong: "#1e293b", light: "#f1f5f9", darkLight: "rgba(30,41,59,0.22)" },
+    { strong: "#0f172a", light: "#e2e8f0", darkLight: "rgba(15,23,42,0.22)" },
+    { strong: "#64748b", light: "#f1f5f9", darkLight: "rgba(100,116,139,0.22)" },
+  ],
+};
+
+var OT_GRAPH_PALETTE_KEY = "kweaver.bkn.otGraphPalette";
+function getOtGraphPalette() {
+  try { return localStorage.getItem(OT_GRAPH_PALETTE_KEY) || "ocean"; }
+  catch (_) { return "ocean"; }
+}
+function setOtGraphPalette(v) {
+  try { localStorage.setItem(OT_GRAPH_PALETTE_KEY, v); } catch (_) {}
+}
+function getActivePalette() {
+  return GROUP_PALETTES[getOtGraphPalette()] || GROUP_PALETTES.ocean;
+}
+
+// Normalize a backend-supplied color (e.g. "#ff8800") into our paired format.
+function normalizePaletteEntry(hex) {
+  // Convert hex → rgba light + a darkLight variant
+  if (!hex || !/^#[0-9a-f]{6}$/i.test(hex)) return null;
+  var r = parseInt(hex.slice(1, 3), 16);
+  var g = parseInt(hex.slice(3, 5), 16);
+  var b = parseInt(hex.slice(5, 7), 16);
+  return {
+    strong: hex,
+    light: "rgba(" + r + "," + g + "," + b + ",0.08)",
+    darkLight: "rgba(" + r + "," + g + "," + b + ",0.22)",
+  };
+}
+
+// Group OTs by BKN concept-groups (the business-level concept defined in the schema).
+// Returns null if the BKN has no concept-groups defined.
+function buildConceptGroupCombos(ots, conceptGroups) {
+  if (!conceptGroups || !conceptGroups.length) return null;
+
+  var otIds = {};
+  ots.forEach(function(ot) { otIds[ot.id] = true; });
+
+  var ownerByNode = {};
+  conceptGroups.forEach(function(cg) {
+    (cg.objectTypeIds || []).forEach(function(otId) {
+      if (otIds[otId] && !(otId in ownerByNode)) {
+        // First-wins: if OT belongs to multiple groups, pick first
+        ownerByNode[otId] = cg.id;
+      }
+    });
+  });
+
+  // Build combo list — only include groups that own at least one OT in this BKN
+  var members = {};
+  Object.keys(ownerByNode).forEach(function(id) {
+    var g = ownerByNode[id];
+    members[g] = (members[g] || 0) + 1;
+  });
+  var palette = getActivePalette();
+  var visibleGroups = conceptGroups.filter(function(cg) { return members[cg.id] > 0; });
+  var combos = visibleGroups.map(function(cg, idx) {
+    // User palette choice always wins; backend color ignored
+    var pal = palette[idx % palette.length];
+    return {
+      id: "combo-" + cg.id,
+      data: {
+        label: cg.name + " · " + members[cg.id],
+        color: pal.strong,
+        fill: pal.light,
+        fillDark: pal.darkLight,
+      },
+    };
+  });
+
+  // Orphan OTs (not in any concept-group): collect into a synthetic combo
+  var orphans = ots.filter(function(ot) { return !(ot.id in ownerByNode); });
+  if (orphans.length > 0) {
+    var orphanId = "__ungrouped__";
+    orphans.forEach(function(ot) { ownerByNode[ot.id] = orphanId; });
+    combos.push({
+      id: "combo-" + orphanId,
+      data: {
+        label: "未分组 · " + orphans.length,
+        color: "#94a3b8",
+        fill: "rgba(148,163,184,0.05)",
+        fillDark: "rgba(148,163,184,0.12)",
+      },
+    });
+  }
+
+  // Build node → color map for downstream node styling
+  var nodeColorById = {};
+  Object.keys(ownerByNode).forEach(function(otId) {
+    var comboId = "combo-" + ownerByNode[otId];
+    var combo = combos.find(function(c) { return c.id === comboId; });
+    if (combo) nodeColorById[otId] = combo.data;
+  });
+
+  return { ownerByNode: ownerByNode, combos: combos, nodeColorById: nodeColorById };
+}
+
+function buildLayoutConfig(name, width, height) {
+  var reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  var animation = !reducedMotion;
+  if (name === "radial") {
+    return {
+      type: "radial",
+      unitRadius: 110,
+      preventOverlap: true,
+      nodeSize: 80,
+      strictRadial: false,
+      animation: animation,
+    };
+  }
+  if (name === "concentric") {
+    return {
+      type: "concentric",
+      preventOverlap: true,
+      nodeSize: 80,
+      minNodeSpacing: 30,
+      sortBy: "degree",
+      animation: animation,
+    };
+  }
+  if (name === "circular") {
+    return { type: "circular", radius: Math.min(width, height) / 2.5, animation: animation };
+  }
+  if (name === "dagre") {
+    return {
+      type: "dagre",
+      rankdir: "LR",
+      nodesep: 30,
+      ranksep: 80,
+      animation: animation,
+    };
+  }
+  if (name === "grid") {
+    return { type: "grid", preventOverlap: true, nodeSize: 80, animation: animation };
+  }
+  // default: d3-force — animation OFF to avoid continuous-tick jank
+  return {
+    type: "d3-force",
+    preventOverlap: true,
+    nodeSize: 80,
+    link: { distance: 220, strength: 0.4 },
+    manyBody: { strength: -800 },
+    collide: { radius: 55 },
+    center: { x: width / 2, y: height / 2 },
+    animation: false,
+  };
+}
+
+function renderOtGraphView(knId, ots, rts, conceptGroups) {
+  var host = document.getElementById("ot-graph-host");
+  if (!host) return;
+
+  if (!ots.length) {
+    host.innerHTML = '<div class="ot-graph-empty">No object types to display.</div>';
+    return;
+  }
+  if (typeof G6 === "undefined" || !G6.Graph) {
+    host.innerHTML = '<div class="ot-graph-empty">Graph library failed to load (vendor/g6.min.js missing). Refresh or rebuild.</div>';
+    return;
+  }
+
+  var nodeById = {};
+  ots.forEach(function(ot) { nodeById[ot.id] = true; });
+
+  // Compute combos from BKN concept-groups (business-level grouping)
+  var grouping = getOtGraphGroup() ? buildConceptGroupCombos(ots, conceptGroups) : null;
+
+  // Estimate rect width per node based on label length (Chinese chars ~14px each)
+  function estimateRectSize(name, propertyCount) {
+    var chars = (name || "").length;
+    var width = Math.max(90, Math.min(180, 24 + chars * 14));
+    var height = 40;
+    return [width, height];
+  }
+
+  var nodes = ots.map(function(ot) {
+    var size = estimateRectSize(ot.name, ot.propertyCount);
+    var groupColors = grouping && grouping.nodeColorById && grouping.nodeColorById[ot.id];
+    var node = {
+      id: ot.id,
+      data: {
+        name: ot.name,
+        propertyCount: ot.propertyCount,
+        relCount: ot.relCount,
+        groupColor: groupColors ? groupColors.color : null,
+        groupFill: groupColors ? groupColors.fill : null,
+        groupFillDark: groupColors ? groupColors.fillDark : null,
+      },
+      style: {
+        labelText: ot.name,
+        size: size,
+      },
+    };
+    if (grouping && grouping.ownerByNode[ot.id]) {
+      node.combo = "combo-" + grouping.ownerByNode[ot.id];
+    }
+    return node;
+  });
+  var edges = rts
+    .filter(function(rt) { return nodeById[rt.sourceOtId] && nodeById[rt.targetOtId]; })
+    .map(function(rt, i) {
+      return {
+        id: rt.id || ("edge-" + i),
+        source: rt.sourceOtId,
+        target: rt.targetOtId,
+        data: { name: rt.name || "" },
+        style: { labelText: rt.name || "" },
+      };
+    });
+  var combos = grouping ? grouping.combos : [];
+
+  // Detect dark mode for theming
+  var isDark = document.documentElement.getAttribute("data-theme") === "dark";
+  // Palette[0] is the global "accent" — drives node/edge/selection color even when Group is off
+  var activePal = getActivePalette();
+  var primary = activePal[0];
+  var accentBlue = primary.strong;
+  var accentHover = primary.strong;
+  var accentLight = isDark ? primary.darkLight : primary.light;
+  var textColor = isDark ? "#f8fafc" : "#0f172a";
+  var edgeColor = isDark ? "#475569" : "#cbd5e1";
+  var bgColor = isDark ? "#1e293b" : "#ffffff";
+
+  // Node fills must be OPAQUE so edges (drawn underneath) never bleed through
+  // the rectangle. Dark-mode palette tints are rgba(...,~0.2) — composite them
+  // over the canvas bg to get an equivalent solid color, preserving the hue.
+  function toRgb(c) {
+    if (!c) return null;
+    var m = c.match(/rgba?\(([^)]+)\)/);
+    if (m) {
+      var p = m[1].split(",").map(function(x) { return parseFloat(x); });
+      return { r: p[0], g: p[1], b: p[2], a: p.length > 3 ? p[3] : 1 };
+    }
+    var h = c.replace("#", "");
+    if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    if (h.length === 6) {
+      return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16), a: 1 };
+    }
+    return null;
+  }
+  function opaqueFill(color) {
+    var fg = toRgb(color);
+    if (!fg) return color;
+    if (fg.a >= 1) return color; // already opaque
+    var bg = toRgb(bgColor) || { r: 255, g: 255, b: 255 };
+    var r = Math.round(fg.r * fg.a + bg.r * (1 - fg.a));
+    var g = Math.round(fg.g * fg.a + bg.g * (1 - fg.a));
+    var b = Math.round(fg.b * fg.a + bg.b * (1 - fg.a));
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+
+  // Destroy prior instance if re-rendering
+  if (__g6Instance) {
+    try { __g6Instance.destroy(); } catch (_) {}
+    __g6Instance = null;
+  }
+
+  var width = host.clientWidth || 800;
+  var height = host.clientHeight || 600;
+  var layoutName = getOtGraphLayout();
+  var reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  function buildOuterLayout(name) {
+    if (name === "dagre") {
+      return { type: "dagre", rankdir: "LR", nodesep: 60, ranksep: 120, animation: !reducedMotion };
+    }
+    if (name === "grid") {
+      return { type: "grid", preventOverlap: true, nodeSize: 140, animation: !reducedMotion };
+    }
+    if (name === "radial") {
+      return { type: "radial", unitRadius: 220, preventOverlap: true, nodeSize: 140, animation: !reducedMotion };
+    }
+    if (name === "concentric") {
+      return { type: "concentric", preventOverlap: true, nodeSize: 140, minNodeSpacing: 80, sortBy: "degree", animation: !reducedMotion };
+    }
+    if (name === "circular") {
+      return { type: "circular", radius: Math.min(width, height) / 2.5, animation: !reducedMotion };
+    }
+    // d3-force default — animation OFF: live force ticking every frame is the
+    // main jank source. Settle synchronously, render once.
+    return {
+      type: "d3-force",
+      preventOverlap: true,
+      nodeSize: 140,
+      link: { distance: 320, strength: 0.3 },
+      manyBody: { strength: -1800 },
+      collide: { radius: 90 },
+      center: { x: width / 2, y: height / 2 },
+      animation: false,
+    };
+  }
+
+  // When Group is ON, outer is fixed to force; layout dropdown disabled in UI.
+  var layoutCfg = (grouping && combos.length > 1)
+    ? {
+        type: "combo-combined",
+        spacing: 120,
+        comboPadding: 36,
+        outerLayout: {
+          type: "force",
+          linkDistance: 700,
+          nodeStrength: -6000,
+          edgeStrength: 0.05,
+          preventOverlap: true,
+          nodeSize: 320,
+          collideStrength: 1.0,
+          animation: false,
+        },
+        innerLayout: {
+          // Concentric packs nodes densely in rings — keeps combo bbox compact
+          type: "concentric",
+          preventOverlap: true,
+          minNodeSpacing: 14,
+          nodeSize: 110,
+          sortBy: "degree",
+          animation: false,
+        },
+      }
+    : buildLayoutConfig(layoutName, width, height);
+
+  var graph = new G6.Graph({
+    container: host,
+    background: bgColor,
+    width: width,
+    height: height,
+    padding: 40,
+    autoResize: true,
+    data: { nodes: nodes, edges: edges, combos: combos },
+    combo: combos.length ? {
+      type: "rect",
+      style: {
+        fill: function(d) {
+          var data = d.data || {};
+          return isDark ? (data.fillDark || "rgba(59,130,246,0.12)") : (data.fill || "rgba(59,130,246,0.04)");
+        },
+        stroke: function(d) { return (d.data && d.data.color) || (isDark ? "#94a3b8" : "#94a3b8"); },
+        lineWidth: 1.5,
+        lineDash: [6, 4],
+        strokeOpacity: 0.7,
+        radius: 16,
+        labelText: function(d) { return d.data && d.data.label; },
+        labelFill: function(d) { return (d.data && d.data.color) || (isDark ? "#cbd5e1" : "#475569"); },
+        labelFontSize: 13,
+        labelFontWeight: 700,
+        labelPlacement: "top",
+        labelOffsetY: -10,
+        labelBackground: true,
+        labelBackgroundFill: bgColor,
+        labelBackgroundFillOpacity: 0.98,
+        labelPadding: [4, 10],
+        labelBackgroundRadius: 6,
+        padding: 32,
+        zIndex: -1,
+      },
+    } : undefined,
+    node: {
+      type: "rect",
+      style: {
+        fill: function(d) {
+          var data = d.data || {};
+          if (data.groupColor) {
+            return opaqueFill(isDark ? (data.groupFillDark || accentLight) : (data.groupFill || accentLight));
+          }
+          return opaqueFill(accentLight);
+        },
+        stroke: function(d) {
+          var data = d.data || {};
+          return data.groupColor || accentBlue;
+        },
+        lineWidth: 1.5,
+        radius: 6,
+        labelText: function(d) { return d.data && d.data.name; },
+        labelFill: textColor,
+        labelFontSize: 13,
+        labelFontWeight: 600,
+        labelPlacement: "center",
+        labelMaxWidth: function(d) { return (d.style && d.style.size && d.style.size[0]) ? d.style.size[0] - 12 : 100; },
+        labelTextOverflow: "ellipsis",
+        cursor: "pointer",
+        zIndex: 2,
+      },
+      state: {
+        hover: {
+          fill: function(d) { return (d.data && d.data.groupColor) || accentBlue; },
+          stroke: function(d) { return (d.data && d.data.groupColor) || accentHover; },
+          lineWidth: 2.5,
+          labelFill: "#ffffff",
+          labelFontWeight: 700,
+        },
+        selected: {
+          fill: function(d) { return (d.data && d.data.groupColor) || accentHover; },
+          stroke: function(d) { return (d.data && d.data.groupColor) || accentHover; },
+          lineWidth: 3,
+          labelFill: "#ffffff",
+        },
+      },
+    },
+    edge: {
+      type: "line",
+      style: {
+        stroke: accentBlue,
+        lineWidth: 1.5,
+        strokeOpacity: 0.4,
+        endArrow: true,
+        endArrowType: "vee",
+        endArrowSize: 9,
+        endArrowFill: accentBlue,
+        // Labels hidden by default — show on hover only (cuts clutter)
+        labelFill: isDark ? "#cbd5e1" : "#475569",
+        labelFontSize: 11,
+        labelOpacity: 0,
+        labelBackground: true,
+        labelBackgroundFill: bgColor,
+        labelBackgroundFillOpacity: 0.95,
+        labelBackgroundRadius: 3,
+        labelPadding: [2, 6],
+        labelMaxWidth: 120,
+        labelTextOverflow: "ellipsis",
+        zIndex: 1,
+      },
+      state: {
+        hover: {
+          stroke: accentBlue,
+          lineWidth: 3,
+          strokeOpacity: 1,
+          labelOpacity: 1,
+          labelFontWeight: 700,
+          endArrowFill: accentBlue,
+        },
+        active: {
+          stroke: accentBlue,
+          lineWidth: 2.5,
+          strokeOpacity: 1,
+          labelOpacity: 1,
+        },
+      },
+    },
+    layout: layoutCfg,
+    behaviors: [
+      { type: "drag-canvas", key: "drag-canvas" },
+      { type: "zoom-canvas", key: "zoom-canvas", sensitivity: 1.2 },
+      // drag-element works for both node and combo; drag-element-force
+      // only works with d3-force layout (per G6 v5 bundle constraint)
+      { type: "drag-element", key: "drag-element", enableTransient: true },
+      { type: "hover-activate", key: "hover-activate" },
+    ],
+    animation: false,
+  });
+
+  // Fit + center after layout finishes (handles async layouts like dagre / force)
+  function fitAndCenter() {
+    try {
+      graph.fitView({ padding: [60, 40, 40, 40], when: "always" });
+    } catch (_) {
+      try { graph.fitCenter(); } catch (_) {}
+    }
+  }
+  graph.on("afterlayout", fitAndCenter);
+  graph.on("afterrender", function() { setTimeout(fitAndCenter, 100); });
+
+  graph.render().then(function() {
+    setTimeout(fitAndCenter, 300);
+    setTimeout(fitAndCenter, 800); // fallback for slow layouts
+
+    graph.on("node:click", function(evt) {
+      var id = evt.target && evt.target.id;
+      if (id) location.hash = "/bkn/" + enc(knId) + "/ot/" + enc(id);
+    });
+  }).catch(function(err) {
+    host.innerHTML = '<div class="ot-graph-empty">Graph render error: ' + esc(String(err && err.message || err)) + '</div>';
+  });
+
+  __g6Instance = graph;
+
+  // Toolbar actions
+  var wrap = host.closest(".ot-graph-wrap");
+  if (!wrap) return;
+  wrap.querySelectorAll("[data-graph-action]").forEach(function(btn) {
+    btn.addEventListener("click", function() {
+      var action = btn.getAttribute("data-graph-action");
+      if (action === "fit") {
+        graph.fitView({ padding: 40 });
+      } else if (action === "export") {
+        Promise.resolve(graph.toDataURL("image/png", bgColor)).then(function(dataUrl) {
+          var a = document.createElement("a");
+          a.href = dataUrl;
+          a.download = "bkn-graph-" + Date.now() + ".png";
+          a.click();
+        }).catch(function(err) {
+          alert("Export failed: " + (err && err.message || err));
+        });
+      }
+    });
+  });
+
+  // Layout switcher
+  var layoutSel = wrap.querySelector("#ot-graph-layout");
+  if (layoutSel) {
+    layoutSel.addEventListener("change", function() {
+      var newLayout = layoutSel.value;
+      setOtGraphLayout(newLayout);
+      // Manual layouts only apply when grouping is OFF
+      if (getOtGraphGroup() && combos.length > 1) {
+        return; // grouped graph uses combo-combined, layout dropdown is no-op
+      }
+      var cfg = buildLayoutConfig(newLayout, host.clientWidth, host.clientHeight);
+      try {
+        graph.setLayout(cfg);
+        graph.layout().then(function() {
+          setTimeout(function() {
+            try { graph.fitView({ padding: 40 }); } catch (_) {}
+          }, 150);
+        });
+      } catch (err) {
+        console.error("Layout switch failed:", err);
+      }
+    });
+  }
+
+  // Group toggle — re-renders the graph host (toolbar persists, so sync the
+  // layout dropdown's disabled state here; it's a no-op while grouping is on).
+  var groupChk = wrap.querySelector("#ot-graph-group");
+  if (groupChk) {
+    groupChk.addEventListener("change", function() {
+      setOtGraphGroup(groupChk.checked);
+      if (layoutSel) layoutSel.disabled = groupChk.checked;
+      renderOtGraphView(knId, ots, rts, conceptGroups);
+    });
+  }
+
+  // Palette switcher — re-renders entire graph
+  var palSel = wrap.querySelector("#ot-graph-palette");
+  if (palSel) {
+    palSel.addEventListener("change", function() {
+      setOtGraphPalette(palSel.value);
+      renderOtGraphView(knId, ots, rts, conceptGroups);
+    });
+  }
+}
+
 // ── Object type instance list ───────────────────────────────────────────────
 
 async function renderBknOtList($el, knId, otId, gen) {