Chat atelier : evenement SSE sources + affichage des pages utilisees

Le Brain emet un evenement sources (source_id, page, score des passages
retenus) AVANT le premier token ; le Core le relaie tel quel (JSON brut) ;
l UI affiche une ligne discrete sous la reponse (ex: 12, 47, 103),
prefixee du nom de fichier si plusieurs sources. Transparence pour le MJ
et diagnostic immediat quand le RAG repond a cote.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/app/campaigns/notebook/notebook-detail/notebook-detail.component.html

@@ -91,6 +91,11 @@
                       (created)="onActionCreated()">
                     </app-notebook-action-card>
                   }
+                  @if (sourcesLabel(m); as label) {
+                    <div class="nbd-msg-sources" title="Pages de la source utilisées pour ancrer cette réponse">
+                      📖 {{ label }}
+                    </div>
+                  }
                 }
               } @else {
                 <div class="nbd-msg-content">{{ m.content }}</div>

web/src/app/campaigns/notebook/notebook-detail/notebook-detail.component.scss

@@ -104,3 +104,10 @@
   display: inline-flex; align-items: center; gap: 0.35rem;
   font-size: 0.82rem; color: #c4a8ff; font-style: italic;
 }
+
+// Pages de la source utilisées par le RAG (transparence de la réponse)
+.nbd-msg-sources {
+  margin-top: 0.35rem;
+  font-size: 0.75rem;
+  opacity: 0.65;
+}

web/src/app/campaigns/notebook/notebook-detail/notebook-detail.component.ts

@@ -107,7 +107,29 @@ export class NotebookDetailComponent implements OnInit {
     return cache._parsed;
   }
 
-  /** trackBy stable pour les cartes d'action (évite toute recréation parasite). */
+  /**
+   * Libellé compact des pages utilisées par le RAG pour une réponse
+   * (« p. 12, 47, 103 » — préfixé du nom du fichier si plusieurs sources).
+   */
+  sourcesLabel(m: NotebookMessage): string {
+    const src = m.sources ?? [];
+    if (!src.length) return '';
+    const bySource = new Map<string, number[]>();
+    for (const s of src) {
+      if (s.page == null) continue;
+      const pages = bySource.get(s.sourceId) ?? [];
+      if (!pages.includes(s.page)) pages.push(s.page);
+      bySource.set(s.sourceId, pages);
+    }
+    if (bySource.size === 0) return '';
+    const nameOf = (id: string) => this.sources.find(x => x.id === id)?.filename ?? '';
+    return [...bySource.entries()]
+      .map(([id, pages]) => {
+        const label = `p. ${pages.sort((a, b) => a - b).join(', ')}`;
+        return bySource.size > 1 && nameOf(id) ? `${nameOf(id)} — ${label}` : label;
+      })
+      .join(' · ');
+  }
 
   load(): void {
     this.service.get(this.notebookId).subscribe({
@@ -162,6 +184,7 @@ export class NotebookDetailComponent implements OnInit {
     this.service.streamChat(this.notebookId, text, deep).subscribe({
       next: (ev) => {
         if (ev.type === 'token') { this.deepProgress = null; assistant.content += ev.value; }
+        else if (ev.type === 'sources') assistant.sources = ev.sources;
         else if (ev.type === 'progress') this.deepProgress = { current: ev.current, total: ev.total };
         else if (ev.type === 'error') assistant.content += (assistant.content ? '\n\n' : '') + `⚠️ ${ev.message}`;
       },