Hinweise und Spezialisierung je Version: im Lauf sichtbar, bei „Neue Version“ änderbar

Eingaben liegen jetzt in vN/state.json; alte Versionen ohne eigene
Eingaben nehmen die des Themas. „Neue Version“ öffnet ein Formular mit
den bisherigen Werten, Thema bleibt fest. Zurücksetzen behält die Eingaben.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/App.vue

@@ -113,10 +113,10 @@ async function anlegen() {
     themaWaehlen(t.slug)
   } catch (e) { fehler.value = String(e.message || e) }
 }
-// Neue Version: gleiche Eingaben, frischer Lauf; die alte Version bleibt samt Leseposition erhalten.
-async function neueVersion() {
+// Neue Version: frischer Lauf mit ggf. geänderten Hinweisen/Spezialisierung; die alte Version bleibt samt Leseposition erhalten.
+async function neueVersion(eingaben) {
   try {
-    const r = await api.versionAnlegen(slug.value)
+    const r = await api.versionAnlegen(slug.value, eingaben)
     await topicsLaden()
     geheZu({ v: r.v, tab: 'lauf' })
     await aktion(() => api.start(slug.value, r.v))

frontend/src/api.js

@@ -20,7 +20,7 @@ export const api = {
   themen: () => req('/themen'),
   anlegen: (name, hinweise = '', spezialisierung = '') => req('/themen', { method: 'POST', body: { name, hinweise, spezialisierung } }),
   loeschen: (slug) => req(`/themen/${e(slug)}`, { method: 'DELETE' }),
-  versionAnlegen: (slug) => req(`/themen/${e(slug)}/versionen`, { method: 'POST' }),
+  versionAnlegen: (slug, eingaben) => req(`/themen/${e(slug)}/versionen`, { method: 'POST', body: eingaben }),
   versionLoeschen: (slug, n) => req(v(slug, n), { method: 'DELETE' }),
   state: (slug, n) => req(v(slug, n)),
   start: (slug, n) => req(v(slug, n) + '/start', { method: 'POST' }),

frontend/src/components/Lauf.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { render } from '../markdown.js'
 
 const props = defineProps({ state: Object })
@@ -36,7 +36,12 @@ const gruppen = computed(() => {
 const ereignisse = computed(() => (props.state?.ereignisse || []).slice(-100).reverse())
 
 function reset() { if (confirm('Lauf zurücksetzen? Alles außer dem Thema wird gelöscht.')) emit('reset') }
-function neueVersion() { if (confirm('Neue Version erzeugen? Gleiche Eingaben, kompletter neuer Lauf. Die bisherige Version bleibt erhalten.')) emit('neue-version') }
+// Neue Version: Formular mit den Eingaben dieser Version vorbelegt; Thema bleibt, Hinweise und Spezialisierung sind änderbar.
+const neuOffen = ref(false)
+const neuHinweise = ref('')
+const neuSpezialisierung = ref('')
+function neuOeffnen() { neuHinweise.value = props.state.hinweise || ''; neuSpezialisierung.value = props.state.spezialisierung || ''; neuOffen.value = true }
+function neuStarten() { neuOffen.value = false; emit('neue-version', { hinweise: neuHinweise.value.trim(), spezialisierung: neuSpezialisierung.value.trim() }) }
 </script>
 
 <template>
@@ -45,7 +50,7 @@ function neueVersion() { if (confirm('Neue Version erzeugen? Gleiche Eingaben, k
       <button v-if="!laeuft && !fertig" @click="emit('start')">{{ begonnen ? 'Fortsetzen' : 'Buch erzeugen' }}</button>
       <button v-if="laeuft" class="sekundaer" @click="emit('pause')">Pause</button>
       <button v-if="!laeuft && begonnen && !fertig" class="sekundaer" @click="reset">Zurücksetzen</button>
-      <button v-if="!laeuft && begonnen" class="sekundaer" title="Gleiches Thema, gleiche Hinweise und Spezialisierung, neuer Lauf" @click="neueVersion">Neue Version</button>
+      <button v-if="!laeuft && begonnen" class="sekundaer" title="Gleiches Thema, kompletter neuer Lauf; Hinweise und Spezialisierung änderbar" @click="neuOeffnen">Neue Version</button>
       <span class="spacer"></span>
       <span class="badge" :class="statusFarbe[state.status]">{{ statusText[state.status] || state.status }}<template v-if="state.stufe && laeuft"> · {{ state.stufe }}</template></span>
       <span class="badge">{{ usd(state.kosten_usd) }}</span>
@@ -53,6 +58,19 @@ function neueVersion() { if (confirm('Neue Version erzeugen? Gleiche Eingaben, k
     </div>
     <div v-if="state.grund" class="grund">{{ state.grund }}</div>
 
+    <div v-if="neuOffen" class="neu-version">
+      <div class="titel">Neue Version von „{{ state.name }}“</div>
+      <input v-model="neuHinweise" placeholder="Hinweise (optional), z. B. für Entwickler, ab Version 4.6" @keyup.enter="neuStarten" />
+      <input v-model="neuSpezialisierung" placeholder="Spezialisierung (optional), z. B. Kartenspiel gegen KI" title="Begrenzt den Umfang: nur, was dafür gebraucht wird" @keyup.enter="neuStarten" />
+      <div class="knoepfe"><button @click="neuStarten">Buch erzeugen</button><button class="sekundaer" @click="neuOffen = false">Abbrechen</button></div>
+    </div>
+
+    <div class="eingaben">
+      <span><b>Thema</b> {{ state.name }}</span>
+      <span><b>Hinweise</b> {{ state.hinweise || '–' }}</span>
+      <span><b>Spezialisierung</b> {{ state.spezialisierung || '–' }}</span>
+    </div>
+
     <div v-if="state.deutung" class="deutung">
       <div class="titel">{{ state.deutung.titel }}</div>
       <div v-if="state.deutung.untertitel" class="sub">{{ state.deutung.untertitel }}</div>

frontend/src/style.css

@@ -80,6 +80,11 @@ a.knopf { display: inline-block; text-decoration: none; line-height: normal; }
 .lauf { padding: 18px max(22px, calc((100% - 760px) / 2)); overflow-y: auto; }  /* Spalte zentriert wie in der Buchansicht */
 .lauf .aktionen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
 .lauf .grund { margin: 8px 0 14px; padding: 8px 12px; background: var(--karte); border-left: 3px solid var(--gelb); border-radius: 4px; }
+.lauf .eingaben { max-width: 760px; margin: 0 0 12px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); }
+.lauf .eingaben b { font-weight: 600; color: var(--text); margin-right: 4px; }
+.neu-version { max-width: 760px; margin: 0 0 16px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--rand); border-radius: 8px; display: grid; gap: 8px; }
+.neu-version .titel { font-weight: 600; }
+.neu-version .knoepfe { display: flex; gap: 8px; }
 .deutung { max-width: 760px; margin: 0 0 16px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--rand); border-radius: 8px; }
 .deutung .titel { font-weight: 600; font-size: 15px; }
 .deutung .sub { color: var(--dim); font-size: 12.5px; }