Update index.html

frontend/index.html

@@ -664,28 +664,48 @@ function renderRelations() {
   // --- section 2: NPC↔NPC bond graph + directed list ---
   let graphHtml = "";
   if (knownChars.length >= 2) {
-    // Group bonds by unordered pair so we can show both directions together
-    const pairMap = {};
-    for (const b of npcBonds) {
-      const key = [b.source_id, b.target_id].sort().join("|");
-      if (!pairMap[key]) pairMap[key] = [];
-      pairMap[key].push(b);
+    // Group bonds by unordered pair; always show BOTH directions (fill missing with neutral 0)
+    const bondIndex = {};  // "srcId|tgtId" -> bond object
+    for (const b of npcBonds) bondIndex[`${b.source_id}|${b.target_id}`] = b;
+
+    // Collect all unique unordered pairs from all known characters
+    const seenPairs = new Set();
+    const pairList = [];
+    for (let i = 0; i < knownChars.length; i++) {
+      for (let j = i + 1; j < knownChars.length; j++) {
+        const a = knownChars[i], b = knownChars[j];
+        const key = [a.id, b.id].sort().join("|");
+        if (seenPairs.has(key)) continue;
+        seenPairs.add(key);
+        // Only show pairs where at least one direction has a recorded bond
+        const ab = bondIndex[`${a.id}|${b.id}`];
+        const ba = bondIndex[`${b.id}|${a.id}`];
+        if (!ab && !ba) continue;
+        pairList.push({ a, b, ab, ba });
+      }
     }
-    const bondListHtml = Object.values(pairMap).map(pairBonds => {
-      const rows = pairBonds.map(b => {
-        const col = _bondColor(b.note, b.value);
-        const sign = b.value > 0 ? "+" : "";
-        const noteStr = b.note ? b.note : (b.value === 0 ? "neutral" : "");
-        return `<div class="bond-row">
-          <span class="bond-name">${b.source_name}</span>
-          <span class="bond-arrow">→</span>
-          <span class="bond-name">${b.target_name}</span>
-          <span class="bond-note" style="color:${col}">${noteStr}</span>
-          <span class="bond-val" style="color:${col}">${sign}${b.value}</span>
-        </div>`;
-      }).join("");
-      return `<div class="bond-pair">${rows}</div>`;
-    }).join("") || `<div class="je-empty" style="font-size:.78rem">No bonds recorded yet</div>`;
+
+    const _bondRow = (srcName, tgtName, bond) => {
+      const val  = bond ? bond.value : 0;
+      const note = bond ? bond.note  : "";
+      const col  = _bondColor(note, val);
+      const sign = val > 0 ? "+" : "";
+      const noteStr = note || (val === 0 ? "neutral" : "");
+      return `<div class="bond-row">
+        <span class="bond-name">${srcName}</span>
+        <span class="bond-arrow">→</span>
+        <span class="bond-name">${tgtName}</span>
+        <span class="bond-note" style="color:${col}">${noteStr}</span>
+        <span class="bond-val"  style="color:${col}">${sign}${val}</span>
+      </div>`;
+    };
+
+    const bondListHtml = pairList.map(({ a, b, ab, ba }) =>
+      `<div class="bond-pair">
+        ${_bondRow(a.name, b.name, ab)}
+        ${_bondRow(b.name, a.name, ba)}
+      </div>`
+    ).join("") || `<div class="je-empty" style="font-size:.78rem">No bonds recorded yet</div>`;
 
     graphHtml = `<div class="rel-section-title">Between them</div>
       <div class="bond-graph-wrap">${_buildBondGraph(knownChars, npcBonds)}</div>