update

2026-06-21 22:53:54 +02:00
parent b4c686f74f
commit 2e33fa5c47
23 changed files with 442 additions and 560 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -181,7 +181,7 @@ async function loadBausteine() {
  }
 }

-const FORMAT_ORDER = ['Guide', 'OnePager']
+const FORMAT_ORDER = ['Guide', 'Roadmap']

 function autoPreview() {
  const map = doneByFormat.value
--- a/frontend/src/components/RoadmapView.vue
+++ b/frontend/src/components/RoadmapView.vue
@@ -0,0 +1,146 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue'
+import { VueFlow, useVueFlow, Handle, Position, MarkerType } from '@vue-flow/core'
+import '@vue-flow/core/dist/style.css'
+import dagre from '@dagrejs/dagre'
+import { renderMarkdownInline } from '../markdown.js'
+
+// Roadmap = read-only Übersichts-Graph: {knoten:[{id,title,text,prioritaet}],
+// kanten:[{von,nach,typ}], richtung}. Layout via dagre, Knoten-Text via KaTeX.
+const props = defineProps({
+  graph: { type: Object, default: null },
+  height: { type: String, default: '78vh' },
+})
+
+let _seq = 0
+const flowId = `rm-${++_seq}-${Math.floor(performance.now())}`
+const { findNode, fitView, onNodesInitialized } = useVueFlow(flowId)
+
+const nodes = ref([])
+const edges = ref([])
+const bereit = ref(false)
+const fehler = ref(false)
+
+const richtung = computed(() => (props.graph?.richtung === 'LR' ? 'LR' : 'TB'))
+const istLR = computed(() => richtung.value === 'LR')
+const targetPos = computed(() => (istLR.value ? Position.Left : Position.Top))
+const sourcePos = computed(() => (istLR.value ? Position.Right : Position.Bottom))
+
+function build() {
+  bereit.value = false
+  const g = props.graph
+  const kn = g && Array.isArray(g.knoten) ? g.knoten : []
+  if (!kn.length) {
+    fehler.value = true
+    nodes.value = []
+    edges.value = []
+    return
+  }
+  fehler.value = false
+  const ids = new Set(kn.map((k) => String(k.id)))
+  nodes.value = kn.map((k) => ({
+    id: String(k.id),
+    type: 'roadmap',
+    position: { x: 0, y: 0 },
+    data: {
+      title: String(k.title || ''),
+      text: String(k.text || ''),
+      prioritaet: ['grund', 'kern', 'vertiefung'].includes(k.prioritaet) ? k.prioritaet : 'kern',
+    },
+  }))
+  edges.value = (g.kanten || [])
+    .filter((e) => ids.has(String(e.von)) && ids.has(String(e.nach)))
+    .map((e, i) => {
+      const optional = e.typ === 'optional'
+      return {
+        id: `e${i}`,
+        source: String(e.von),
+        target: String(e.nach),
+        type: 'smoothstep',
+        markerEnd: MarkerType.ArrowClosed,
+        style: optional ? { strokeDasharray: '6 4', opacity: 0.7 } : {},
+      }
+    })
+}
+
+// Two-Pass: Vue Flow misst die Knoten, dann rechnet dagre das Layout.
+function layout() {
+  const g = new dagre.graphlib.Graph()
+  g.setDefaultEdgeLabel(() => ({}))
+  g.setGraph({ rankdir: richtung.value, nodesep: 50, ranksep: 70 })
+  for (const n of nodes.value) {
+    const dim = findNode(n.id)?.dimensions
+    g.setNode(n.id, { width: dim?.width || 180, height: dim?.height || 56 })
+  }
+  for (const e of edges.value) g.setEdge(e.source, e.target)
+  dagre.layout(g)
+  nodes.value = nodes.value.map((n) => {
+    const p = g.node(n.id)
+    return { ...n, position: { x: p.x - p.width / 2, y: p.y - p.height / 2 } }
+  })
+}
+
+onNodesInitialized(async () => {
+  if (!nodes.value.length) return
+  await document.fonts.ready
+  layout()
+  bereit.value = true
+  await nextTick()
+  fitView({ padding: 0.2 })
+})
+
+watch(() => props.graph, build, { immediate: true })
+</script>
+
+<template>
+  <div class="roadmap-view" :style="{ height }">
+    <p v-if="fehler" class="rm-fallback">Roadmap nicht verfügbar — neu generieren.</p>
+    <VueFlow
+      v-else
+      :id="flowId"
+      :nodes="nodes"
+      :edges="edges"
+      :style="{ opacity: bereit ? 1 : 0 }"
+      :nodes-draggable="false"
+      :nodes-connectable="false"
+      :elements-selectable="false"
+      :zoom-on-scroll="false"
+      :zoom-on-double-click="false"
+      :min-zoom="0.2"
+      :max-zoom="2"
+      fit-view-on-init
+    >
+      <template #node-roadmap="{ data }">
+        <Handle type="target" :position="targetPos" />
+        <div class="rm-node" :class="'prio-' + data.prioritaet">
+          <div class="rm-title">{{ data.title }}</div>
+          <div v-if="data.text" class="rm-text markdown" v-html="renderMarkdownInline(data.text)"></div>
+        </div>
+        <Handle type="source" :position="sourcePos" />
+      </template>
+    </VueFlow>
+  </div>
+</template>
+
+<style scoped>
+.roadmap-view { width: 100%; position: relative; }
+.rm-fallback { color: var(--text-muted); font-size: 0.85rem; padding: 1rem 0; }
+.rm-node {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-strong, #999);
+  border-left: 4px solid var(--rm-accent, #8b5cf6);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--rm-accent, #8b5cf6) 7%, var(--panel, #fff));
+  color: var(--text, #111);
+  max-width: 260px;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.rm-title { font-weight: 600; font-size: 0.85rem; line-height: 1.25; }
+.rm-text { font-size: 0.74rem; color: var(--text-muted, #555); line-height: 1.3; margin-top: 0.2rem; }
+.rm-text :deep(.katex) { white-space: normal; }
+/* Prioritäts-Farben: grund=grün (Fundament), kern=lila (Hauptstoff), vertiefung=grau (später). */
+.prio-grund { --rm-accent: #22c55e; }
+.prio-kern { --rm-accent: #8b5cf6; }
+.prio-vertiefung { --rm-accent: #94a3b8; }
+</style>
--- a/frontend/src/components/TopicDetail.vue
+++ b/frontend/src/components/TopicDetail.vue
@@ -6,6 +6,7 @@ import { useChat } from '../composables/useChat.js'
 import BausteinPanel from './BausteinPanel.vue'
 import BausteinFokus from './BausteinFokus.vue'
 import GraphView from './GraphView.vue'
+import RoadmapView from './RoadmapView.vue'

 const props = defineProps({
  previewGuide: { type: Object, default: null },
@@ -19,9 +20,9 @@ const props = defineProps({

 const emit = defineEmits(['progressChanged', 'setAnsicht'])

-const isOnePager = computed(() => props.previewGuide?.format === 'OnePager')
+const isRoadmap = computed(() => props.previewGuide?.format === 'Roadmap')

-// Rotierende Kapitel-Akzentfarben (passend zum OnePager-Cheat-Sheet, ohne Rot)
+// Rotierende Kapitel-Akzentfarben (ohne Rot)
 const CH_COLORS = ['#3b82f6', '#8b5cf6', '#14b8a6', '#f59e0b', '#22c55e', '#6366f1']

 // --- Inhalt laden ---
@@ -47,7 +48,7 @@ async function loadContent() {
    loadError.value = 'Inhalt nicht verfügbar — die Datei fehlt. Guide neu generieren (▶).'
    return
  }
-  if (g.format !== 'OnePager') {
+  if (g.format !== 'Roadmap') {
    try {
      lernstand.value = (await fetchBausteinLernstand(g.topic)).bausteine || {}
    } catch { /* offline → leer */ }
@@ -68,7 +69,7 @@ function onBausteinStatus(baustein, status) {
 const fokusIndex = ref(null)        // Index in der flachen Baustein-Liste; null = zu
 const fokusTab = ref('pruefung')
 const bausteine = computed(() =>
-  isOnePager.value || !content.value ? [] : content.value.chapters.flatMap((ch) => ch.sections),
+  isRoadmap.value || !content.value ? [] : content.value.chapters.flatMap((ch) => ch.sections),
 )
 const fokusBaustein = computed(() => (fokusIndex.value === null ? null : bausteine.value[fokusIndex.value]))

@@ -178,14 +179,18 @@ function extractContext() {
 <template>
  <div class="detail">
    <div v-if="previewGuide && content" ref="scrollEl" class="guide-scroll">
-      <div class="guide-content" :class="{ onepager: isOnePager }">
+      <div class="guide-content" :class="{ roadmap: isRoadmap }">
        <header class="guide-head">
          <h1>{{ previewGuide.topic }}</h1>
          <span class="guide-format">{{ previewGuide.format }}</span>
          <span v-if="themaAbgeschlossen" class="thema-done" title="Alle Bausteine gemeistert (18/18)">✓ Thema abgeschlossen</span>
        </header>
+
+        <RoadmapView v-if="isRoadmap" :graph="content.graph || null" height="100%" />
+
        <section
          v-for="(ch, ci) in content.chapters"
+          v-else
          :key="ch.title"
          class="chapter"
          :style="{ '--ch-accent': CH_COLORS[ci % CH_COLORS.length] }"
@@ -195,19 +200,17 @@ function extractContext() {
            <article
              v-for="s in ch.sections"
              :key="s.num"
-              :class="['section-card', isOnePager && s.key ? 'op-card op-' + s.key : '', lernstand[s.title]?.gemeistert ? 'gemeistert' : (lernstand[s.title]?.verstanden ? 'verstanden' : (lernstand[s.title]?.absolviert ? 'absolviert' : ''))]"
-              :style="isOnePager && s.key ? { gridArea: s.key } : null"
+              :class="['section-card', lernstand[s.title]?.gemeistert ? 'gemeistert' : (lernstand[s.title]?.verstanden ? 'verstanden' : (lernstand[s.title]?.absolviert ? 'absolviert' : ''))]"
            >
-              <h3 :class="{ 'baustein-klick': !isOnePager }" @click="!isOnePager && openFokus(s, 'pruefung')">
+              <h3 class="baustein-klick" @click="openFokus(s, 'pruefung')">
                {{ s.title }}
                <span v-if="lernstand[s.title]?.gemeistert" class="baustein-done gemeistert" title="Gemeistert (25/25)">✓✓✓ Gemeistert</span>
                <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>
-              <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>
+              <GraphView v-if="ansichtModus === 'grafik'" :graph="grafiken[s.title] || null" />
+              <div v-else class="section-body markdown" v-html="renderMarkdown(ansichtModus === 'kompakt' ? (s.kompakt || s.md) : s.md)"></div>
              <BausteinPanel
-                v-if="!isOnePager"
                mode="trigger"
                :baustein="s.title"
                :status="lernstand[s.title]"
@@ -394,7 +397,7 @@ function extractContext() {
 }

 /* Absolvierte Bausteine: Karte kippt sichtbar auf Grün */
-.guide-content:not(.onepager) .section-card.absolviert {
+.guide-content:not(.roadmap) .section-card.absolviert {
  border-color: var(--success-border);
  border-top: 3px solid var(--success);
  background: color-mix(in srgb, var(--success) 5%, var(--panel));
@@ -406,7 +409,7 @@ function extractContext() {
  border-color: #8b5cf6;
  color: #6d28d9;
 }
-.guide-content:not(.onepager) .section-card.verstanden {
+.guide-content:not(.roadmap) .section-card.verstanden {
  border-color: #8b5cf6;
  border-top: 3px solid #8b5cf6;
  background: color-mix(in srgb, #8b5cf6 7%, var(--panel));
@@ -418,14 +421,14 @@ function extractContext() {
  border-color: #d4af37;
  color: #8a6d12;
 }
-.guide-content:not(.onepager) .section-card.gemeistert {
+.guide-content:not(.roadmap) .section-card.gemeistert {
  border-color: #d4af37;
  border-top: 3px solid #d4af37;
  background: color-mix(in srgb, #d4af37 8%, var(--panel));
 }

-/* Guides: Karten tragen die Kapitel-Akzentfarbe (OnePager hat eigene op-card-Farben) */
-.guide-content:not(.onepager) .section-card {
+/* Guides: Karten tragen die Kapitel-Akzentfarbe */
+.guide-content:not(.roadmap) .section-card {
  border-top: 3px solid color-mix(in srgb, var(--ch-accent, var(--accent)) 65%, transparent);
  background: color-mix(in srgb, var(--ch-accent, var(--accent)) 3%, var(--panel));
 }
@@ -442,9 +445,8 @@ function extractContext() {
 .section-card h3.baustein-klick { cursor: pointer; width: fit-content; }
 .section-card h3.baustein-klick:hover { color: var(--accent); }

-/* OnePager: festes 3×3-Raster über volle Breite und Höhe.
-   Kein Lese-Zoom (bricht 100%-Höhen) — stattdessen sind die Schriften unten 1.2× skaliert. */
-.guide-content.onepager {
+/* Roadmap: read-only Übersichts-Graph über die volle Fläche, kein Lese-Zoom. */
+.guide-content.roadmap {
  max-width: none;
  height: 100%;
  zoom: 1;
@@ -452,96 +454,9 @@ function extractContext() {
  display: flex;
  flex-direction: column;
 }
-
-.guide-content.onepager .guide-head,
-.guide-content.onepager .chapter-title {
-  display: none; /* Thema steht in der Info-Karte — Platz fürs Raster */
-}
-
-.guide-content.onepager .chapter {
+.guide-content.roadmap .roadmap-view {
  flex: 1;
  min-height: 0;
-  margin-bottom: 0;
-}
-
-.guide-content.onepager .sections {
-  height: 100%;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  grid-template-areas:
-    "info beispiel voraussetzungen"
-    "eigenschaften beispiel modern"
-    "eigenschaften zusammenhaenge veraltet";
-  gap: 0.6rem;
-}
-
-.guide-content.onepager .section-card {
-  margin-bottom: 0;
-  padding: 0.7rem 0.9rem;
-  min-height: 0;
-  overflow-y: auto;
-
-  h3 {
-    font-size: 1.06rem;
-    margin-bottom: 0.3rem;
-  }
-
-  .section-body {
-    font-size: 0.98rem;
-  }
-}
-
-/* Farbkodiertes Cheat-Sheet: feste Akzentfarbe + Icon pro Karte */
-.op-info { --op-accent: #3b82f6; }
-.op-eigenschaften { --op-accent: #8b5cf6; --op-icon: "☰"; }
-.op-beispiel { --op-accent: #64748b; --op-icon: "❯"; }
-.op-zusammenhaenge { --op-accent: #14b8a6; --op-icon: "⇄"; }
-.op-voraussetzungen { --op-accent: #f59e0b; --op-icon: "✓"; }
-.op-modern { --op-accent: #22c55e; --op-icon: "✦"; }
-.op-veraltet { --op-accent: #ef4444; --op-icon: "⚠"; }
-
-.guide-content.onepager .section-card.op-card {
-  border-top: 3px solid var(--op-accent);
-  background: color-mix(in srgb, var(--op-accent) 5%, var(--panel));
-
-  h3 {
-    color: var(--op-accent);
-    font-size: 0.95rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  h3::before {
-    content: var(--op-icon, "");
-    margin-right: 7px;
-  }
-}
-
-/* Info-Karte: Thema als große Headline statt Uppercase-Label */
-.guide-content.onepager .op-card.op-info h3 {
-  font-size: 1.5rem;
-  text-transform: none;
-  letter-spacing: 0;
-  color: var(--text);
-}
-
-/* Mobil: eine Spalte in Quellreihenfolge (info → … → veraltet) */
-@media (max-width: 900px) {
-  .guide-content.onepager {
-    height: auto;
-  }
-
-  .guide-content.onepager .sections {
-    height: auto;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .guide-content.onepager .section-card {
-    overflow-y: visible;
-  }
 }

 .empty-preview {
@@ -583,12 +498,6 @@ function extractContext() {
  max-width: 70ch;
 }

-.onepager .section-card .markdown :deep(p),
-.onepager .section-card .markdown :deep(ul),
-.onepager .section-card .markdown :deep(ol) {
-  max-width: none; /* OnePager-Zellen sind selbst schmal genug */
-}
-
 /* --- Chat --- */
 .chat-fab {
  position: fixed;
--- a/frontend/src/components/TopicSidebar.vue
+++ b/frontend/src/components/TopicSidebar.vue
@@ -52,7 +52,7 @@ const trackerItems = computed(() => {
 })

 const formats = [
-  { key: 'OnePager', label: 'OnePager' },
+  { key: 'Roadmap', label: 'Roadmap' },
  { key: 'Guide', label: 'Guide' },
 ]

@@ -119,12 +119,12 @@ function guideStatus(format) {

 // Schritt-Kugeln der Guide-Pipelines
 const GUIDE_STEPS = ['Auswahl', 'Gliederung', 'Inhalte', 'Inhalts-Check', 'Schreiben', 'Lese-Prüfung']
-const ONEPAGER_STEPS = ['Recherche', 'Bauen', 'Prüfung']
+const ROADMAP_STEPS = ['Bauen', 'Prüfung']

 // Kugeln werden wie bei den Bausteinen immer angezeigt:
 // fertig = alle grün, laufend = live, abgebrochen = Teilfortschritt, sonst grau
 function guideSteps(format) {
-  const labels = format === 'OnePager' ? ONEPAGER_STEPS : GUIDE_STEPS
+  const labels = format === 'Roadmap' ? ROADMAP_STEPS : GUIDE_STEPS
  const st = guideStatus(format)
  if (st === 'generating' || st === 'queued') {
    // Clamp: alte DB-Läufe können step-Werte oberhalb der neuen Listen haben
@@ -409,8 +409,8 @@ function saveQuelle() {
          <span class="format-error-text">{{ bausteine.error }}</span>
        </div>
      </div>
-<!-- OnePager (unabhängig von Bausteinen) steht per CSS-order vor der Bausteine-Zeile -->
-      <div v-for="f in formats" :key="f.key" :style="{ order: f.key === 'OnePager' ? 1 : 3 }">
+<!-- Roadmap (Überblick zuerst lesen) steht per CSS-order vor der Bausteine-Zeile -->
+      <div v-for="f in formats" :key="f.key" :style="{ order: f.key === 'Roadmap' ? 1 : 3 }">
        <div :class="['format-row', 'fmt-' + guideStatus(f.key), { 'fmt-paused': abgebrochen(f.key), 'row-open': isOpen('fmt-' + f.key) }]">
          <button class="format-name" @click="handleFormatClick(f.key)">
            <span class="format-label">{{ f.label }}</span>
@@ -788,7 +788,7 @@ function saveQuelle() {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem 0;
-  /* flex + order: OnePager (order 1) vor Bausteine (order 2) vor den restlichen Formaten (order 3) */
+  /* flex + order: Roadmap (order 1) vor Bausteine (order 2) vor den restlichen Formaten (order 3) */
  display: flex;
  flex-direction: column;
 }