Update templates/index.html

templates/index.html

@@ -389,13 +389,12 @@
     }
 
     /* ── Markdown Elements ── */
-    .bubble p, .best-answer-bubble p, .other-answer-text p, .version-text p { margin: 3px 0; white-space: normal; }
+    .bubble p, .best-answer-bubble p, .other-answer-text p { margin: 3px 0; white-space: normal; }
 
     .bubble h1, .bubble h2, .bubble h3, .bubble h4, .bubble h5, .bubble h6,
     .best-answer-bubble h1, .best-answer-bubble h2, .best-answer-bubble h3,
     .best-answer-bubble h4, .best-answer-bubble h5, .best-answer-bubble h6,
-    .other-answer-text h1, .other-answer-text h2, .other-answer-text h3,
-    .version-text h1, .version-text h2, .version-text h3 {
+    .other-answer-text h1, .other-answer-text h2, .other-answer-text h3 {
       line-height: 1.3; margin: 8px 0 3px; white-space: normal;
     }
     .bubble h1, .best-answer-bubble h1 { font-size: 1.35em; font-weight: 800; }
@@ -406,10 +405,10 @@
     .bubble h6, .best-answer-bubble h6  { font-size: .88em;  font-weight: 700; }
 
     .bubble ul, .bubble ol, .best-answer-bubble ul, .best-answer-bubble ol,
-    .other-answer-text ul, .other-answer-text ol, .version-text ul, .version-text ol {
+    .other-answer-text ul, .other-answer-text ol {
       margin: 3px 0 3px 18px; padding: 0; white-space: normal;
     }
-    .bubble li, .best-answer-bubble li, .other-answer-text li, .version-text li { margin: 1px 0; white-space: normal; }
+    .bubble li, .best-answer-bubble li, .other-answer-text li { margin: 1px 0; white-space: normal; }
 
     /* Task lists */
     .task-item { list-style: none; margin-left: -18px; }
@@ -420,7 +419,7 @@
       cursor: default;
     }
 
-    .bubble code, .best-answer-bubble code, .other-answer-text code, .version-text code {
+    .bubble code, .best-answer-bubble code, .other-answer-text code {
       font-family: var(--mono); font-size: .87em;
       background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
       border-radius: var(--radius-xs); padding: 1px 5px;
@@ -430,18 +429,18 @@
     .code-block-wrapper {
       position: relative; margin: 6px 0;
     }
-    .bubble pre, .best-answer-bubble pre, .other-answer-text pre, .version-text pre {
+    .bubble pre, .best-answer-bubble pre, .other-answer-text pre {
       background: rgba(0,0,0,.38); border: 1px solid var(--border);
       border-radius: var(--radius-sm); padding: 10px 12px;
       overflow-x: auto; white-space: pre;
       font-family: var(--mono); font-size: .84em; line-height: 1.5;
       margin: 0;
     }
-    .bubble pre code, .best-answer-bubble pre code, .other-answer-text pre code, .version-text pre code {
+    .bubble pre code, .best-answer-bubble pre code, .other-answer-text pre code {
       background: none; border: none; padding: 0; font-size: inherit;
     }
     .code-lang-label {
-      position: absolute; top: 0; right: 32px;
+      position: absolute; top: 5px; left: 6px;
       background: rgba(255,255,255,.06);
       border-radius: 0 0 var(--radius-xs) var(--radius-xs);
       padding: 2px 8px;
@@ -466,17 +465,8 @@
     .copy-code-btn:hover { color: var(--text); border-color: rgba(108,131,255,.4); }
     .copy-code-btn.copied { color: var(--good); border-color: rgba(45,212,191,.4); opacity: 1; }
 
-    /* Syntax highlight tokens */
-    .tok-kw  { color: #c792ea; }
-    .tok-str { color: #c3e88d; }
-    .tok-num { color: #f78c6c; }
-    .tok-cmt { color: #546e7a; font-style: italic; }
-    .tok-fn  { color: #82aaff; }
-    .tok-op  { color: #89ddff; }
-    .tok-cls { color: #ffcb6b; }
-
     .bubble blockquote, .best-answer-bubble blockquote,
-    .other-answer-text blockquote, .version-text blockquote {
+    .other-answer-text blockquote {
       border-left: 3px solid var(--accent);
       background: rgba(124,166,255,.04);
       border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
@@ -485,20 +475,19 @@
       font-style: italic;
     }
     .bubble hr, .best-answer-bubble hr { border: none; border-top: 1px solid var(--border2); margin: 8px 0; }
-    .bubble a, .best-answer-bubble a, .other-answer-text a, .version-text a {
+    .bubble a, .best-answer-bubble a, .other-answer-text a {
       color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
     }
     .bubble a[href^="http"]::after,
     .best-answer-bubble a[href^="http"]::after {
       content: " ↗"; font-size: .75em; opacity: .5;
     }
-    .bubble table, .best-answer-bubble table, .other-answer-text table, .version-text table {
+    .bubble table, .best-answer-bubble table, .other-answer-text table {
       border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; white-space: normal;
     }
     .bubble th, .bubble td,
     .best-answer-bubble th, .best-answer-bubble td,
-    .other-answer-text th, .other-answer-text td,
-    .version-text th, .version-text td {
+    .other-answer-text th, .other-answer-text td {
       border: 1px solid var(--border2); padding: 6px 10px; text-align: left;
     }
     .bubble th, .best-answer-bubble th { background: rgba(255,255,255,.05); font-weight: 600; }
@@ -568,22 +557,6 @@
     }
     .action-btn:hover { border-color: rgba(108,131,255,.35); color: var(--text); background: rgba(108,131,255,.05); }
 
-    /* Card loading shimmer */
-    .card-loading { position: relative; overflow: hidden; }
-    .card-loading::after {
-      content: "";
-      position: absolute; inset: 0;
-      background: linear-gradient(90deg, transparent, rgba(108,131,255,.05), transparent);
-      background-size: 200% 100%;
-      animation: shimmer 1.5s ease infinite;
-      border-radius: inherit;
-      pointer-events: none;
-    }
-    @keyframes shimmer {
-      from { background-position: 200% 0; }
-      to { background-position: -200% 0; }
-    }
-
     /* ── Write answer inline panel ── */
     .write-answer-btn {
       border: 1px solid rgba(45,212,191,.3);
@@ -696,13 +669,6 @@
     .other-answer-card.related {
       background: linear-gradient(180deg, rgba(108,131,255,.05), rgba(255,255,255,.02));
       border-color: rgba(108,131,255,.16);
-      opacity: .9;
-    }
-    .other-answer-card.related::after {
-      content: "From similar question";
-      position: absolute; top: 8px; right: 10px;
-      font-size: 9px; color: var(--accent);
-      font-family: var(--mono); pointer-events: none;
     }
     .other-answer-head {
       display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
@@ -710,6 +676,55 @@
     }
     .other-answer-text { font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
 
+    /* ── Preview lines (similar questions + versions) ── */
+    .preview-block {
+      display: flex; gap: 8px; align-items: flex-start;
+      margin-top: 6px;
+    }
+    .preview-label {
+      flex: 0 0 auto;
+      font-family: var(--mono); font-size: 9px;
+      color: var(--muted);
+      background: rgba(255,255,255,.04);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-xs);
+      padding: 2px 6px; line-height: 1.3;
+      letter-spacing: .06em;
+    }
+    .preview-text {
+      flex: 1; min-width: 0;
+      font-size: 12.5px; line-height: 1.5;
+      color: var(--text);
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      white-space: normal; word-break: break-word;
+    }
+    .preview-text.muted-preview { color: var(--muted); }
+    .preview-actions {
+      display: flex; align-items: center; gap: 6px;
+      margin-top: 8px; flex-wrap: wrap;
+    }
+    .preview-actions .vote-row { margin-top: 0; }
+
+    /* Ask button */
+    .ask-btn {
+      border: 1px solid rgba(108,131,255,.35);
+      background: rgba(108,131,255,.1);
+      color: var(--accent);
+      border-radius: var(--radius-sm);
+      padding: 4px 11px;
+      font: inherit; font-size: 11px; font-weight: 600;
+      cursor: pointer;
+      transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-spring);
+      display: inline-flex; align-items: center; gap: 4px;
+    }
+    .ask-btn:hover { background: rgba(108,131,255,.2); border-color: rgba(108,131,255,.55); }
+    .ask-btn:active { transform: scale(.95); }
+    .ask-btn svg { width: 11px; height: 11px; }
+
     /* ── Versions ── */
     .versions-toggle {
       margin-top: var(--space-1); color: var(--muted); font-size: 10px;
@@ -735,7 +750,6 @@
       font-size: 10px; color: var(--muted); font-family: var(--mono);
       display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: var(--space-1);
     }
-    .version-text { font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
 
     /* ── Propose version ── */
     .propose-panel {
@@ -1150,6 +1164,7 @@
     .top-btn:focus-visible,
     .vote-btn:focus-visible,
     .action-btn:focus-visible,
+    .ask-btn:focus-visible,
     .write-answer-btn:focus-visible,
     .other-answers-toggle:focus-visible,
     .related-toggle:focus-visible,
@@ -1180,7 +1195,7 @@
       #jumpLatest { bottom: 120px; max-width: calc(100vw - 24px); white-space: nowrap; }
     }
     @media (pointer: coarse) {
-      .vote-btn, .action-btn, .versions-toggle, .other-answers-toggle,
+      .vote-btn, .action-btn, .ask-btn, .versions-toggle, .other-answers-toggle,
       .related-toggle, .write-answer-btn {
         min-height: 44px; padding: 8px 14px;
       }
@@ -1441,6 +1456,18 @@
     }
     function nl2br(s) { return esc(s).replace(/\n/g, '<br>'); }
 
+    /* Strip markdown markers for clean inline previews */
+    function previewText(s) {
+      return String(s || '')
+        .replace(/```[\s\S]*?```/g, ' [code] ')
+        .replace(/!\[[^\]]*\]\([^)]*\)/g, ' [image] ')
+        .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+        .replace(/^[#>\-*+]\s+/gm, '')
+        .replace(/[*_~`]+/g, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+    }
+
     /* ═══════════════════════════════════════════════
        SYNTAX HIGHLIGHTER (lightweight)
     ═══════���═══════════════════════════════════════ */
@@ -1880,8 +1907,17 @@
                 <span>${relativeTime(v.created_at)}</span><span aria-hidden="true">·</span>
                 <span>${Number(v.votes || 0)} vote${Number(v.votes || 0) !== 1 ? 's' : ''}</span>
               </div>
-              <div class="version-text">${renderMarkdown(v.text || '')}</div>
-              ${renderVoteRow(answer.id, v)}
+              <div class="preview-block">
+                <span class="preview-label">A</span>
+                <div class="preview-text">${esc(previewText(v.text || ''))}</div>
+              </div>
+              <div class="preview-actions">
+                ${renderVoteRow(answer.id, v)}
+                <button class="ask-btn" type="button" data-ask-current="1" aria-label="Ask this question again in a fresh conversation">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+                  Ask
+                </button>
+              </div>
             </div>`).join('')}
         </div>`;
     }
@@ -1989,17 +2025,31 @@
             <span class="arrow" aria-hidden="true">▶</span> ${rel.length} related answer${rel.length > 1 ? 's' : ''}
           </button>
           <div class="related-panel" id="relatedPanel" role="region" aria-label="Related answers">
-            ${rel.map(r => `
+            ${rel.map(r => {
+              const q = String(r.question || '');
+              return `
               <div class="other-answer-card related">
                 <div class="other-answer-head">
                   <span class="chip matched">related</span>
-                  <span>${esc(r.question || '')}</span>
-                  <span aria-hidden="true">·</span>
                   <span class="chip related-score">score ${Number(r.score || 0).toFixed(2)}</span>
                 </div>
-                <div class="other-answer-text">${renderMarkdown(r.answer || '')}</div>
-              </div>`).join('')}
-            <p class="related-note">Read-only answers from semantically similar questions — useful context, separate thread.</p>
+                <div class="preview-block">
+                  <span class="preview-label">Q</span>
+                  <div class="preview-text">${esc(previewText(q))}</div>
+                </div>
+                <div class="preview-block">
+                  <span class="preview-label">A</span>
+                  <div class="preview-text muted-preview">${esc(previewText(r.answer || ''))}</div>
+                </div>
+                <div class="preview-actions">
+                  <button class="ask-btn" type="button" data-ask-question="${esc(q)}" aria-label="Ask this question">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+                    Ask
+                  </button>
+                </div>
+              </div>`;
+            }).join('')}
+            <p class="related-note">Previews of answers from semantically similar questions. Click Ask to start a fresh conversation.</p>
           </div>
         </div>`;
     }
@@ -2181,6 +2231,13 @@
         const voteBtn = e.target.closest('[data-vote]');
         if (voteBtn) { await handleVote(voteBtn); return; }
 
+        // Ask a related/similar question
+        const askQ = e.target.closest('[data-ask-question]');
+        if (askQ) { handleAskFromCard(askQ.getAttribute('data-ask-question')); return; }
+
+        // Re-ask the current question
+        if (e.target.closest('[data-ask-current]')) { handleAskFromCard(S.currentQuestion); return; }
+
         // Copy answer text
         const copyAns = e.target.closest('[data-copy-answer]');
         if (copyAns) { await handleCopyAnswer(copyAns); return; }
@@ -2341,6 +2398,14 @@
       } catch { toast('Could not copy', 'bad'); }
     }
 
+    function handleAskFromCard(q) {
+      const text = String(q || '').trim();
+      if (!text || S.loading) return;
+      const p = $('prompt');
+      if (p) { p.value = text; autoGrow(p); }
+      submitPrompt();
+    }
+
     function handleToggleVersions(btn) {
       const id = btn.getAttribute('data-toggle-versions');
       const p = $('vp-' + id);