Update templates/index.html

templates/index.html

@@ -504,6 +504,40 @@
     .related-stack .chip {
       margin-bottom: 6px;
     }
+    .related-toggle {
+      margin-top: 2px;
+      border: 1px solid var(--border);
+      background: rgba(255,255,255,.02);
+      color: var(--muted);
+      border-radius: 10px;
+      padding: 6px 12px;
+      font: inherit; font-size: 11px;
+      cursor: pointer;
+      transition: all 180ms ease;
+      display: inline-flex; align-items: center; gap: 5px;
+    }
+    .related-toggle:hover {
+      border-color: rgba(108,131,255,.3);
+      color: var(--text);
+    }
+    .related-toggle .arrow {
+      display: inline-block;
+      transition: transform 200ms ease;
+      font-size: 10px;
+    }
+    .related-toggle.open .arrow { transform: rotate(90deg); }
+    .related-panel {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 280ms ease, opacity 180ms ease, margin-top 180ms ease;
+      opacity: 0;
+      margin-top: 0;
+    }
+    .related-panel.open {
+      max-height: 3000px;
+      opacity: 1;
+      margin-top: 6px;
+    }
     .related-score {
       color: var(--accent);
       border-color: rgba(108,131,255,.22);
@@ -969,18 +1003,23 @@
         return `
           <div class="related-stack">
             <div class="chip muted">from similar questions</div>
-            ${rel.map(r => `
-              <div class="other-answer-card related">
-                <div class="other-answer-head">
-                  <span class="chip matched">related</span>
-                  <span>${esc(r.question || "")}</span>
-                  <span>·</span>
-                  <span class="chip related-score">score ${(Number(r.score || 0)).toFixed(2)}</span>
+            <button class="related-toggle" id="relatedToggle">
+              <span class="arrow">▶</span> ${rel.length} related answer${rel.length > 1 ? "s" : ""}
+            </button>
+            <div class="related-panel" id="relatedPanel">
+              ${rel.map(r => `
+                <div class="other-answer-card related">
+                  <div class="other-answer-head">
+                    <span class="chip matched">related</span>
+                    <span>${esc(r.question || "")}</span>
+                    <span>·</span>
+                    <span class="chip related-score">score ${(Number(r.score || 0)).toFixed(2)}</span>
+                  </div>
+                  <div class="other-answer-text">${nl2br(r.answer || "")}</div>
                 </div>
-                <div class="other-answer-text">${nl2br(r.answer || "")}</div>
-              </div>
-            `).join("")}
-            <div class="related-note">These are read-only answers from semantically similar questions, so you can reuse context without writing into the wrong thread.</div>
+              `).join("")}
+              <div class="related-note">These are read-only answers from semantically similar questions, so you can reuse context without writing into the wrong thread.</div>
+            </div>
           </div>
         `;
       }
@@ -1023,7 +1062,7 @@
                 <div class="bubble no-answer-bubble">No answer yet. Be the first to write one.</div>
                 <div class="turn-meta"><span class="chip warn">awaiting answer</span></div>
                 ${renderWriteAnswer()}
-                ${renderRelated(S.relatedAnswers)}
+                <div id="relatedMount"></div>
               </div>
             </div>`);
         } else {
@@ -1036,7 +1075,7 @@
                 ${renderAnswerBlock(best, 0, true)}
                 ${renderWriteAnswer()}
                 ${renderOtherAnswers(answers)}
-                ${renderRelated(S.relatedAnswers)}
+                <div id="relatedMount"></div>
               </div>
             </div>`);
 
@@ -1052,6 +1091,11 @@
           }
         }
 
+        const relatedMount = $("relatedMount");
+        if (relatedMount && S.relatedAnswers.length) {
+          relatedMount.innerHTML = renderRelated(S.relatedAnswers);
+        }
+
         bindHandlers();
         scrollBottom();
       }
@@ -1096,6 +1140,14 @@
           oat.classList.toggle("open", open);
         };
 
+        const rt = $("relatedToggle");
+        if (rt) rt.onclick = () => {
+          const p = $("relatedPanel");
+          if (!p) return;
+          const open = p.classList.toggle("open");
+          rt.classList.toggle("open", open);
+        };
+
         // Propose toggle
         document.querySelectorAll("[data-propose]").forEach(btn => {
           btn.onclick = () => {