update

frontend/src/components/TopicDetail.vue

@@ -1,11 +1,11 @@
 <script setup>
 import { computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
-import { fetchGuideContent, chatGuide, fetchBausteinLernstand } from '../api.js'
+import { fetchGuideContent, chatGuide, fetchBausteinLernstand, fetchGrafiken } from '../api.js'
 import { renderMarkdown } from '../markdown.js'
 import { useChat } from '../composables/useChat.js'
 import BausteinPanel from './BausteinPanel.vue'
 import BausteinFokus from './BausteinFokus.vue'
-import MermaidView from './MermaidView.vue'
+import GraphView from './GraphView.vue'
 
 const props = defineProps({
   previewGuide: { type: Object, default: null },
@@ -28,6 +28,7 @@ const CH_COLORS = ['#3b82f6', '#8b5cf6', '#14b8a6', '#f59e0b', '#22c55e', '#6366
 const content = ref(null)
 const loadError = ref(null)
 const scrollEl = ref(null)
+const grafiken = ref({}) // Baustein-Titel → {knoten,kanten,richtung} (Sidecar, von allen Guides geteilt)
 const lernstand = ref({}) // Prüfungs-Stand pro Baustein-Titel — VOR dem immediate-Watch (loadContent nutzt es)
 
 watch(() => props.previewGuide?.id, loadContent, { immediate: true })
@@ -36,6 +37,7 @@ async function loadContent() {
   content.value = null
   loadError.value = null
   lernstand.value = {}
+  grafiken.value = {}
   const g = props.previewGuide
   if (!g || g.status !== 'done') return
   try {
@@ -49,6 +51,9 @@ async function loadContent() {
     try {
       lernstand.value = (await fetchBausteinLernstand(g.topic)).bausteine || {}
     } catch { /* offline → leer */ }
+    try {
+      grafiken.value = (await fetchGrafiken(g.topic)).grafiken || {}
+    } catch { /* keine Grafiken → Fallback */ }
   }
 }
 
@@ -205,7 +210,7 @@ function extractContext() {
                 <span v-else-if="lernstand[s.title]?.verstanden" class="baustein-done verstanden" title="Vollständig verstanden (10/10)">✓✓ Verstanden</span>
                 <span v-else-if="lernstand[s.title]?.absolviert" class="baustein-done" title="Prüfung bestanden">✓ Absolviert</span>
               </h3>
-              <MermaidView v-if="!isOnePager && ansichtModus === 'grafik'" :code="s.grafik || ''" />
+              <GraphView v-if="!isOnePager && ansichtModus === 'grafik'" :graph="grafiken[s.title] || null" />
               <div v-else class="section-body markdown" v-html="renderMarkdown(!isOnePager && ansichtModus === 'kompakt' ? (s.kompakt || s.md) : s.md)"></div>
               <BausteinPanel
                 v-if="!isOnePager"
@@ -233,6 +238,7 @@ function extractContext() {
     <BausteinFokus
       v-if="fokusBaustein"
       :baustein="fokusBaustein"
+      :graph="grafiken[fokusBaustein.title] || null"
       :topic="previewGuide.topic"
       :provider="provider"
       :fortschritt="fortschritt"