From a0ce9c92f85d759161df64f47434c36f7d93ad22 Mon Sep 17 00:00:00 2001
From: root <root@dflike.hookstrapmx>
Date: Sat, 7 Mar 2026 16:10:03 +0000
Subject: [PATCH] feat: add click-to-expand for relationship tier groups and
 memories

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/src/ui/NpcInfoPanel.ts | 67 +++++++++++++++++++++++++++++++++--
 1 file changed, 64 insertions(+), 3 deletions(-)

diff --git a/client/src/ui/NpcInfoPanel.ts b/client/src/ui/NpcInfoPanel.ts
index 27973eb..d466371 100644
--- a/client/src/ui/NpcInfoPanel.ts
+++ b/client/src/ui/NpcInfoPanel.ts
@@ -512,7 +512,7 @@ export class NpcInfoPanel {
 
       const showCount = 2;
       const shown = group.slice(0, showCount);
-      const remaining = group.length - showCount;
+      const hidden = group.slice(showCount);
 
       const tierEl = document.createElement('div');
       tierEl.style.cssText = 'margin-bottom: 8px;';
@@ -520,13 +520,41 @@ export class NpcInfoPanel {
       const tierLabel = document.createElement('div');
       const icon = tierIcons[tier] ?? '';
       tierLabel.style.cssText = `font-size: 8px; color: ${EB.textSecondary}; margin-bottom: 4px;`;
-      tierLabel.textContent = `${icon} ${tier}${remaining > 0 ? ` (${remaining} more...)` : ''}`;
+      tierLabel.textContent = `${icon} ${tier}`;
       tierEl.appendChild(tierLabel);
 
       for (const rel of shown) {
         tierEl.appendChild(this.createRelSlider(rel.name, rel.value, tier));
       }
 
+      if (hidden.length > 0) {
+        const overflow = document.createElement('div');
+        overflow.style.cssText = 'display: none;';
+        for (const rel of hidden) {
+          overflow.appendChild(this.createRelSlider(rel.name, rel.value, tier));
+        }
+        tierEl.appendChild(overflow);
+
+        const toggle = document.createElement('div');
+        toggle.style.cssText = `
+          font-size: 7px;
+          color: ${EB.borderOuter};
+          cursor: pointer;
+          user-select: none;
+          padding: 2px 0;
+          text-align: center;
+        `;
+        toggle.textContent = `\u25BC ${hidden.length} more...`;
+        toggle.addEventListener('click', () => {
+          const expanded = overflow.style.display !== 'none';
+          overflow.style.display = expanded ? 'none' : '';
+          toggle.textContent = expanded
+            ? `\u25BC ${hidden.length} more...`
+            : '\u25B2 show less';
+        });
+        tierEl.appendChild(toggle);
+      }
+
       this.relationshipsContent.appendChild(tierEl);
     }
 
@@ -537,9 +565,42 @@ export class NpcInfoPanel {
       memLabel.style.cssText = `font-size: 8px; color: ${EB.textMuted}; margin-bottom: 4px;`;
       memLabel.textContent = '\u25CB Memories';
       memEl.appendChild(memLabel);
-      for (const rel of memories.slice(0, 2)) {
+
+      const memShown = memories.slice(0, 2);
+      const memHidden = memories.slice(2);
+
+      for (const rel of memShown) {
         memEl.appendChild(this.createRelSlider(rel.name + ' \u2020', rel.value, 'memory'));
       }
+
+      if (memHidden.length > 0) {
+        const overflow = document.createElement('div');
+        overflow.style.cssText = 'display: none;';
+        for (const rel of memHidden) {
+          overflow.appendChild(this.createRelSlider(rel.name + ' \u2020', rel.value, 'memory'));
+        }
+        memEl.appendChild(overflow);
+
+        const toggle = document.createElement('div');
+        toggle.style.cssText = `
+          font-size: 7px;
+          color: ${EB.borderOuter};
+          cursor: pointer;
+          user-select: none;
+          padding: 2px 0;
+          text-align: center;
+        `;
+        toggle.textContent = `\u25BC ${memHidden.length} more...`;
+        toggle.addEventListener('click', () => {
+          const expanded = overflow.style.display !== 'none';
+          overflow.style.display = expanded ? 'none' : '';
+          toggle.textContent = expanded
+            ? `\u25BC ${memHidden.length} more...`
+            : '\u25B2 show less';
+        });
+        memEl.appendChild(toggle);
+      }
+
       this.relationshipsContent.appendChild(memEl);
     }
   }