update

frontend/src/components/TopicDetail.vue

@@ -48,6 +48,7 @@ const CH_COLORS = ['#3b82f6', '#8b5cf6', '#14b8a6', '#f59e0b', '#22c55e', '#6366
 
 // --- Inhalt laden ---
 const content = ref(null)
+const loadError = ref(null)
 const doneChapters = ref(new Set())
 const scrollEl = ref(null)
 
@@ -55,6 +56,7 @@ watch(() => props.previewGuide?.id, loadContent, { immediate: true })
 
 async function loadContent() {
   content.value = null
+  loadError.value = null
   doneChapters.value = new Set()
   const g = props.previewGuide
   if (!g || g.status !== 'done') return
@@ -62,6 +64,7 @@ async function loadContent() {
     content.value = await fetchGuideContent(g.id)
   } catch (e) {
     console.error('Fehler beim Laden des Guides:', e)
+    loadError.value = 'Inhalt nicht verfügbar — die Datei fehlt. Guide neu generieren (▶).'
     return
   }
   try {
@@ -236,7 +239,7 @@ async function send() {
     </div>
 
     <div v-else-if="previewGuide" class="empty-preview">
-      <p>Lade Inhalt…</p>
+      <p>{{ loadError || 'Lade Inhalt…' }}</p>
     </div>
 
     <div class="empty-preview" v-else>

frontend/src/components/TopicSidebar.vue

@@ -9,6 +9,7 @@ const props = defineProps({
   doneByFormat: { type: Object, default: () => ({}) },
   latestByFormat: { type: Object, default: () => ({}) },
   allGuides: { type: Array, default: () => [] },
+  dismissedErrors: { type: Object, default: () => new Set() },
   bausteine: { type: Object, default: () => ({ ready: false, generating: false, progress: null, error: null }) },
   activeBausteine: { type: Array, default: () => [] },
   pinned: { type: Boolean, default: true },
@@ -17,7 +18,7 @@ const props = defineProps({
   providers: { type: Array, default: () => [] },
 })
 
-const emit = defineEmits(['select', 'create', 'formatClick', 'bausteineClick', 'cancelBausteine', 'resetBausteine', 'deleteTopic', 'deleteProject', 'cancelGuide', 'deleteGuide', 'preview', 'togglePin', 'sidebarLeave', 'toggleDark', 'setProvider'])
+const emit = defineEmits(['select', 'create', 'formatClick', 'bausteineClick', 'cancelBausteine', 'resetBausteine', 'deleteTopic', 'deleteProject', 'cancelGuide', 'deleteGuide', 'dismissError', 'preview', 'togglePin', 'sidebarLeave', 'toggleDark', 'setProvider'])
 
 function providerAvailable(id) {
   const p = props.providers.find((x) => x.id === id)
@@ -104,21 +105,38 @@ function guideStatus(format) {
 const GUIDE_STEPS = ['Auswahl', 'Auswahl-Prüfung', 'Gliederung', 'Gliederungs-Prüfung', 'Schreiben', 'Lese-Prüfung']
 const ONEPAGER_STEPS = ['Recherche', 'Recherche-Prüfung', '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 st = guideStatus(format)
-  if (st !== 'generating' && st !== 'queued') return []
   const labels = format === 'OnePager' ? ONEPAGER_STEPS : GUIDE_STEPS
-  const step = props.latestByFormat[format]?.step ?? -1
-  return labels.map((label, i) => ({
-    label,
-    state: i < step ? 'done' : i === step ? 'active' : 'pending',
-  }))
+  const st = guideStatus(format)
+  if (st === 'generating' || st === 'queued') {
+    const step = props.latestByFormat[format]?.step ?? -1
+    return labels.map((label, i) => ({
+      label,
+      state: i < step ? 'done' : i === step ? 'active' : 'pending',
+    }))
+  }
+  if (props.doneByFormat[format]) {
+    return labels.map((label) => ({ label, state: 'done' }))
+  }
+  if (abgebrochen(format)) {
+    const step = props.latestByFormat[format]?.step ?? 0
+    return labels.map((label, i) => ({ label, state: i < step ? 'done' : 'pending' }))
+  }
+  return labels.map((label) => ({ label, state: 'pending' }))
 }
 
 function errorMsg(format) {
   const latest = props.latestByFormat[format]
-  if (latest?.status === 'error') return latest.error_msg || 'Fehler bei der Generierung'
-  return ''
+  if (latest?.status !== 'error' || props.dismissedErrors.has(latest.id)) return ''
+  return latest.error_msg || 'Fehler bei der Generierung'
+}
+
+// Abgebrochener Lauf = Teilfortschritt vorhanden: ▶ setzt fort, ✕ löscht den Fortschritt
+function abgebrochen(format) {
+  const latest = props.latestByFormat[format]
+  return latest?.status === 'error' && (latest.error_msg || '').startsWith('Abgebrochen')
 }
 
 function handleFormatClick(format) {
@@ -150,11 +168,10 @@ function handlePlay(format) {
   emit('formatClick', { format, instructions: '' })
 }
 
+// Flash-Message-Verhalten: × blendet nur aus, nichts wird gelöscht
 function dismissError(format) {
   const latest = props.latestByFormat[format]
-  if (latest?.status === 'error') {
-    emit('deleteGuide', latest.id)
-  }
+  if (latest?.status === 'error') emit('dismissError', latest.id)
 }
 
 function handleDelete(format) {
@@ -297,7 +314,7 @@ function confirmDeleteProject(name) {
             <template v-if="guideStatus(f.key) !== 'generating' && guideStatus(f.key) !== 'queued'">
               <button
                 class="action-btn play"
-                :title="playLock(f.key) || 'Generieren'"
+                :title="playLock(f.key) || (abgebrochen(f.key) ? 'Fortsetzen' : 'Generieren')"
                 :disabled="!!playLock(f.key)"
                 @click="handlePlay(f.key)"
               >▶</button>
@@ -306,7 +323,7 @@ function confirmDeleteProject(name) {
         </div>
         <div v-if="errorMsg(f.key)" class="format-error">
           <span class="format-error-text">{{ errorMsg(f.key) }}</span>
-          <button class="format-error-x" title="Fehler entfernen" @click="dismissError(f.key)">&times;</button>
+          <button class="format-error-x" title="Ausblenden" @click="dismissError(f.key)">×</button>
         </div>
       </div>
     </div>
@@ -664,6 +681,7 @@ function confirmDeleteProject(name) {
 }
 
 .format-x.armed,
+.format-error-x.armed,
 .delete-topic.armed {
   display: inline-block;
   font-size: 0.7rem;