update

frontend/src/components/TopicSidebar.vue

@@ -67,6 +67,17 @@ const bausteineState = computed(() => {
   return props.bausteine.ready ? 'done' : 'none'
 })
 
+// Re-Run ab gewählter Phase (1-basiert). null = ab Anfang / Fortsetzen.
+const gewaehltePhase = ref(null)
+// Phasen anklickbar, sobald etwas (teil-)gebaut ist und gerade nicht generiert wird.
+const phasenWaehlbar = computed(() => (props.bausteine.ready || props.bausteine.partial) && !props.bausteine.generating)
+const gewaehltesLabel = computed(() => (props.bausteine.steps || [])[(gewaehltePhase.value || 0) - 1]?.label || '')
+
+function phaseKlick(n) {
+  if (!phasenWaehlbar.value) return
+  gewaehltePhase.value = gewaehltePhase.value === n ? null : n
+}
+
 // Nur FREMDE Themen — das gewählte Thema zeigt seinen Fortschritt inline an der Zeile
 const activeGenerations = computed(() => {
   const bausteinLines = props.activeBausteine
@@ -90,7 +101,10 @@ function confirmResetBausteine() {
 
 function handleBausteinePlay() {
   if (bausteineState.value === 'generating') return
-  emit('bausteineClick', { instructions: '' })
+  // Nur „Neu generieren" (ready) nutzt eine Phase; Fortsetzen/Erstbau resumen ohne Löschen.
+  const abPhase = props.bausteine.ready ? (gewaehltePhase.value ?? 1) : null
+  emit('bausteineClick', { instructions: '', abPhase })
+  gewaehltePhase.value = null
 }
 
 // Name-Klick = Primäraktion: fertige Bausteine → Übersicht, sonst Panel auf/zu.
@@ -361,12 +375,13 @@ function saveQuelle() {
             >Pausiert</span>
             <span class="step-dots">
               <span
-                v-for="s in (bausteine.steps || [])"
+                v-for="(s, i) in (bausteine.steps || [])"
                 :key="s.label"
-                class="step-dot"
-                :class="s.state"
-                :title="s.state === 'active' ? (bausteine.progress || s.label) : s.label"
-              ></span>
+                class="step-pill"
+                :class="[s.state, { sel: gewaehltePhase === i + 1, klickbar: phasenWaehlbar }]"
+                :title="(s.state === 'active' ? (bausteine.progress || s.label) : s.label) + (phasenWaehlbar ? ' — Klick: ab hier neu' : '')"
+                @click.stop="phaseKlick(i + 1)"
+              >{{ i + 1 }}</span>
             </span>
           </button>
           <button class="panel-toggle" :class="{ open: isOpen('bausteine') }" title="Aktionen" @click.stop="togglePanel('bausteine')">▾</button>
@@ -376,7 +391,7 @@ function saveQuelle() {
             <button class="panel-btn danger" :class="{ armed: pendingConfirm === 'bausteine' }" @click="confirmCancelBausteine">{{ pendingConfirm === 'bausteine' ? 'Sicher?' : 'Abbrechen' }}</button>
           </template>
           <template v-else>
-            <button class="panel-btn play" @click="handleBausteinePlay">{{ bausteine.partial ? 'Fortsetzen' : bausteine.ready ? 'Neu generieren' : 'Generieren' }}</button>
+            <button class="panel-btn play" @click="handleBausteinePlay">{{ bausteine.partial ? 'Fortsetzen' : bausteine.ready ? (gewaehltePhase ? `Ab «${gewaehltesLabel}» neu` : 'Neu generieren') : 'Generieren' }}</button>
             <button
               v-if="bausteine.ready || bausteine.partial"
               class="panel-btn danger"
@@ -717,27 +732,45 @@ function saveQuelle() {
 
 .step-dots {
   display: inline-flex;
-  gap: 4px;
+  gap: 5px;
   flex: 1;
 }
 
-.step-dot {
-  width: 7px;
-  height: 7px;
+/* Grobe Phasen als nummerierte Pillen (1–5) — Anzeige + anklickbar für Re-Run ab hier. */
+.step-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 17px;
+  height: 17px;
   border-radius: 50%;
   background: var(--border-strong);
+  color: var(--bg);
+  font-size: 0.62rem;
+  font-weight: 700;
+  line-height: 1;
   flex-shrink: 0;
+  border: 1.5px solid transparent;
 }
 
-.step-dot.done {
+.step-pill.done {
   background: var(--success-border);
 }
 
-.step-dot.active {
+.step-pill.active {
   background: var(--warning-border);
   animation: dot-pulse 1.2s ease-in-out infinite;
 }
 
+.step-pill.klickbar {
+  cursor: pointer;
+}
+
+.step-pill.sel {
+  border-color: var(--text);
+  box-shadow: 0 0 0 1px var(--text);
+}
+
 @keyframes dot-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.35; }