Ajout d'un mode "jeu" (possibilité de lancer des sessions dans une campagne). Cela permet de faire de prendre des notes en live au cours d'une partie et d'avoir plusieurs outils sous la main pour aider le mj :

- Possibilité de parler à une IA pour règle de jeu ou élément de lore / campagne au cours d'une partie comme aide mémoire
- Onglet dédié aux personnages de la campagne
- Onglet dédié aux scènes
- Onglet avec dès pour ceux qui souhaitent ;

Possibilité de rajouté une note en tant qu'évènement, jet de dès ou encore action du joueur par exemple. D'autres ajouts seront fait dans le futur (notamment des tables aléatoires pour PNJ en live).

web/src/app/sessions/session-reference-panel/session-reference-panel.component.html

@@ -0,0 +1,120 @@
+<div class="reference-panel">
+
+  <nav class="ref-tabs">
+    <button type="button"
+            class="ref-tab"
+            [class.ref-tab--active]="activeTab === 'ai'"
+            (click)="selectTab('ai')">
+      <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
+      IA
+    </button>
+    <button type="button"
+            class="ref-tab"
+            [class.ref-tab--active]="activeTab === 'dice'"
+            (click)="selectTab('dice')">
+      <lucide-icon [img]="Dices" [size]="14"></lucide-icon>
+      Dés
+    </button>
+    <button type="button"
+            class="ref-tab"
+            [class.ref-tab--active]="activeTab === 'characters'"
+            (click)="selectTab('characters')">
+      <lucide-icon [img]="User" [size]="14"></lucide-icon>
+      PJ/PNJ
+    </button>
+    <button type="button"
+            class="ref-tab"
+            [class.ref-tab--active]="activeTab === 'scenes'"
+            (click)="selectTab('scenes')">
+      <lucide-icon [img]="Swords" [size]="14"></lucide-icon>
+      Scènes
+    </button>
+  </nav>
+
+  <div class="ref-content" [class.ref-content--fill]="activeTab === 'ai'">
+
+    <!-- ====== IA ====== -->
+    <app-session-ai-chat-panel
+      *ngIf="activeTab === 'ai'"
+      [sessionId]="sessionId"
+      [canSaveToJournal]="canAddToJournal"
+      (saveToJournal)="onAiSaveToJournal($event)">
+    </app-session-ai-chat-panel>
+
+    <!-- ====== Dés ====== -->
+    <app-session-dice-panel
+      *ngIf="activeTab === 'dice'"
+      [canAddToJournal]="canAddToJournal"
+      (rolled)="onDiceRolled($event)">
+    </app-session-dice-panel>
+
+    <!-- ====== Personnages (PJ + PNJ) ====== -->
+    <div *ngIf="activeTab === 'characters'" class="ref-list">
+      <p class="loading-hint" *ngIf="loadingChars">Chargement…</p>
+
+      <div *ngIf="!loadingChars">
+        <div class="ref-group" *ngIf="characters.length > 0">
+          <h4>
+            <lucide-icon [img]="User" [size]="13"></lucide-icon>
+            Personnages joueurs
+          </h4>
+          <button *ngFor="let c of characters"
+                  type="button"
+                  class="ref-item"
+                  (click)="openInNewTab(['campaigns', campaignId, 'characters', c.id!])">
+            <span class="ref-item-name">{{ c.name }}</span>
+            <lucide-icon [img]="ExternalLink" [size]="12" class="ref-item-icon"></lucide-icon>
+          </button>
+        </div>
+
+        <div class="ref-group" *ngIf="npcs.length > 0">
+          <h4>
+            <lucide-icon [img]="Drama" [size]="13"></lucide-icon>
+            Personnages non-joueurs
+          </h4>
+          <button *ngFor="let n of npcs"
+                  type="button"
+                  class="ref-item"
+                  (click)="openInNewTab(['campaigns', campaignId, 'npcs', n.id!])">
+            <span class="ref-item-name">{{ n.name }}</span>
+            <lucide-icon [img]="ExternalLink" [size]="12" class="ref-item-icon"></lucide-icon>
+          </button>
+        </div>
+
+        <p class="empty-hint" *ngIf="characters.length === 0 && npcs.length === 0">
+          Aucun personnage dans cette campagne.
+        </p>
+      </div>
+    </div>
+
+    <!-- ====== Scènes (arborescence aplatie) ====== -->
+    <div *ngIf="activeTab === 'scenes'" class="ref-list">
+      <p class="loading-hint" *ngIf="loadingTree">Chargement…</p>
+
+      <ng-container *ngIf="!loadingTree && treeData">
+        <p class="empty-hint" *ngIf="treeData.arcs.length === 0">
+          Aucun arc narratif. Construis le scénario de ta campagne pour le retrouver ici.
+        </p>
+
+        <div *ngFor="let arc of treeData.arcs" class="ref-group">
+          <h4>
+            <lucide-icon [img]="Swords" [size]="13"></lucide-icon>
+            {{ arc.name }}
+          </h4>
+
+          <div *ngFor="let chapter of chaptersOf(arc)" class="ref-subgroup">
+            <span class="ref-subgroup-title">{{ chapter.name }}</span>
+            <button *ngFor="let scene of scenesOf(chapter)"
+                    type="button"
+                    class="ref-item ref-item--nested"
+                    (click)="openInNewTab(['campaigns', campaignId, 'arcs', arc.id!, 'chapters', chapter.id!, 'scenes', scene.id!])">
+              <span class="ref-item-name">{{ scene.name }}</span>
+              <lucide-icon [img]="ExternalLink" [size]="12" class="ref-item-icon"></lucide-icon>
+            </button>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+
+  </div>
+</div>