feat(web): cited sources as a reference list ([n] title, page)

Author: NorthernLightx

web/app/chat.jsx

@@ -147,17 +147,17 @@ function AiMessage({ msg, onCite, onFig, paperTitle, pendingLabel }) {
         )}
       </div>
       {done && !msg.error && cited.length > 0 && (
-        <div className="answer-figs rise">
-          {cited.slice(0, 6).map((c) => (
-            <button key={c.id} className="answer-fig" title="View cited source"
+        <div className="answer-sources rise">
+          <div className="src-head">Sources</div>
+          {cited.map((c) => (
+            <button key={c.id} className="src-row" title="View source"
               onClick={() => onFig({
                 chunk_id: c.id, paper: c.paper, page: c.page, pages: [c.page],
                 kind: c.kind, bbox: c.bbox || null, text: c.quote || "", page_cite: !!c.page_cite,
               })}>
-              <div className="answer-fig-img" style={{ height: 92 }}>
-                <img src={window.RAG.pageImageUrl(c.paper, c.page)} alt={`page ${c.page}`} loading="lazy" />
-              </div>
-              <div className="cap"><b>[{c.n}] p.{c.page}</b> {previewQuote(c.quote || "", 56)}</div>
+              <span className="src-n">[{c.n}]</span>
+              <span className="src-title">{previewQuote(paperTitle ? paperTitle(c.paper) : c.paper, 80)}</span>
+              <span className="src-page">{c.kind === "visual" && <Icon name="image" size={11} />} p.{c.page}</span>
             </button>
           ))}
         </div>

web/app/styles.css

@@ -552,6 +552,21 @@ body {
 .answer-fig-img { overflow: hidden; background: #fdfdfb; }
 .answer-fig-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
 
+/* Cited-sources reference list under an answer (paper-style [n] title · p.N). */
+.answer-sources { display: flex; flex-direction: column; gap: 1px; margin: 14px 0 2px; }
+.answer-sources .src-head { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px; }
+.src-row {
+  display: flex; align-items: baseline; gap: 9px; width: 100%; text-align: left;
+  padding: 5px 9px; border: none; border-left: 2px solid var(--border); background: none;
+  border-radius: 0 7px 7px 0; cursor: pointer; color: var(--text-dim); font-size: 12.5px;
+  font-family: inherit; transition: background .12s, border-color .12s, color .12s;
+}
+.src-row:hover { background: var(--border-soft); color: var(--text); border-left-color: var(--accent-line); }
+.src-n { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--accent); flex: none; }
+.src-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.src-page { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--text-faint); flex: none; display: inline-flex; align-items: center; gap: 4px; }
+.src-page .ico { color: var(--visual); }
+
 .ai-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
 .metric { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-faint); }
 .metric b { font-family: "IBM Plex Mono", monospace; color: var(--text-dim); font-weight: 500; }