update

frontend/src/api.js

@@ -62,6 +62,14 @@ export async function deleteBaustein(id) {
   await fetch(`${BASE}/bausteine/${id}`, { method: 'DELETE' })
 }
 
+export async function reworkBaustein(id, instructions) {
+  await fetch(`${BASE}/bausteine/${id}/rework`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ instructions }),
+  })
+}
+
 export async function fetchSuggestions(topic) {
   const res = await fetch(`${BASE}/bausteine/suggestions?topic=${encodeURIComponent(topic)}`)
   return res.json()

frontend/src/components/BausteineView.vue

@@ -4,6 +4,7 @@ import {
   fetchBausteine,
   createBaustein,
   deleteBaustein,
+  reworkBaustein,
   fetchSuggestions,
   generateSuggestions,
   fetchSuggestionsStatus,
@@ -19,7 +20,11 @@ const bausteine = ref([])
 const suggestions = ref([])
 const suggestionsLoading = ref(false)
 const newTitle = ref('')
+const reworkInputs = ref({})
+const reworkingIds = ref(new Set())
+const reworkingSnapshots = new Map()
 let pollTimer = null
+let bausteinPollTimer = null
 
 const pendingSuggestions = computed(() => suggestions.value.filter((s) => s.status === 'pending'))
 const ignoredSuggestions = computed(() => suggestions.value.filter((s) => s.status === 'ignored'))
@@ -44,10 +49,6 @@ async function checkAndGenerate() {
   if (status.generating) {
     suggestionsLoading.value = true
     startPolling()
-  } else if (suggestions.value.length === 0) {
-    suggestionsLoading.value = true
-    await generateSuggestions(props.topic)
-    startPolling()
   }
 }
 
@@ -88,6 +89,37 @@ async function handleRegenerate() {
   startPolling()
 }
 
+async function handleRework(b) {
+  const instructions = (reworkInputs.value[b.id] || '').trim()
+  if (!instructions) return
+  reworkingSnapshots.set(b.id, b.updated_at)
+  reworkingIds.value = new Set([...reworkingIds.value, b.id])
+  reworkInputs.value[b.id] = ''
+  await reworkBaustein(b.id, instructions)
+  startBausteinPolling()
+}
+
+function startBausteinPolling() {
+  if (bausteinPollTimer) return
+  bausteinPollTimer = setInterval(async () => {
+    const fresh = await fetchBausteine(props.topic)
+    bausteine.value = fresh
+    const remaining = new Set(reworkingIds.value)
+    for (const id of reworkingIds.value) {
+      const b = fresh.find((x) => x.id === id)
+      if (!b || b.updated_at !== reworkingSnapshots.get(id)) {
+        remaining.delete(id)
+        reworkingSnapshots.delete(id)
+      }
+    }
+    reworkingIds.value = remaining
+    if (remaining.size === 0) {
+      clearInterval(bausteinPollTimer)
+      bausteinPollTimer = null
+    }
+  }, 3000)
+}
+
 function startPolling() {
   stopPolling()
   pollTimer = setInterval(async () => {
@@ -105,6 +137,10 @@ function stopPolling() {
     clearInterval(pollTimer)
     pollTimer = null
   }
+  if (bausteinPollTimer) {
+    clearInterval(bausteinPollTimer)
+    bausteinPollTimer = null
+  }
 }
 
 async function init() {
@@ -147,23 +183,39 @@ onUnmounted(stopPolling)
         <div v-if="b.example" class="examples">
           <div v-for="(ex, i) in parseExamples(b.example)" :key="i" class="code-block">
             <span v-if="ex.label" class="code-label">{{ ex.label }}</span>
-            <pre>{{ ex.code }}</pre>
+            <pre v-html="ex.code"></pre>
           </div>
         </div>
-        <p v-if="!b.description && !b.purpose" class="loading-text">Wird generiert…</p>
+        <p v-if="reworkingIds.has(b.id)" class="loading-text">Wird überarbeitet…</p>
+        <p v-else-if="!b.description && !b.purpose" class="loading-text">Wird generiert…</p>
+        <div class="rework-row">
+          <input
+            v-model="reworkInputs[b.id]"
+            placeholder="Anpassen…"
+            :disabled="reworkingIds.has(b.id)"
+            @keyup.enter="handleRework(b)"
+          />
+          <button
+            class="rework-btn"
+            :disabled="!reworkInputs[b.id]?.trim() || reworkingIds.has(b.id)"
+            @click="handleRework(b)"
+            title="Überarbeiten"
+          >↻</button>
+        </div>
       </div>
     </div>
 
-    <hr v-if="pendingSuggestions.length || suggestionsLoading" class="divider" />
+    <hr class="divider" />
 
-    <div v-if="suggestionsLoading" class="loading-indicator">Generiere Vorschläge…</div>
-
-    <div v-if="pendingSuggestions.length" class="suggestions-section">
+    <div class="suggestions-section">
       <div class="section-header">
         <h3>Vorschläge</h3>
-        <button class="regenerate-btn" @click="handleRegenerate" :disabled="suggestionsLoading">Neu generieren</button>
+        <button class="regenerate-btn" @click="handleRegenerate" :disabled="suggestionsLoading">
+          {{ suggestionsLoading ? 'Generiere…' : 'Generieren' }}
+        </button>
       </div>
-      <div class="suggestions-grid">
+      <div v-if="suggestionsLoading" class="loading-indicator">Generiere Vorschläge…</div>
+      <div v-if="pendingSuggestions.length" class="suggestions-grid">
         <div v-for="s in pendingSuggestions" :key="s.id" class="card suggestion-card">
           <h3>{{ s.title }}</h3>
           <p v-if="s.description" class="desc">{{ s.description }}</p>
@@ -171,7 +223,7 @@ onUnmounted(stopPolling)
           <div v-if="s.example" class="examples">
             <div v-for="(ex, i) in parseExamples(s.example)" :key="i" class="code-block">
               <span v-if="ex.label" class="code-label">{{ ex.label }}</span>
-              <pre>{{ ex.code }}</pre>
+              <pre v-html="ex.code"></pre>
             </div>
           </div>
           <div class="suggestion-actions">
@@ -205,7 +257,7 @@ onUnmounted(stopPolling)
 .bausteine-grid,
 .suggestions-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
 }
 
@@ -328,12 +380,67 @@ onUnmounted(stopPolling)
   display: block;
 }
 
+.code-block :deep(.k) { color: #ff79c6; }
+.code-block :deep(.v) { color: #ffb86c; }
+.code-block :deep(.s) { color: #f1c40f; }
+.code-block :deep(.f) { color: #50fa7b; }
+.code-block :deep(.t) { color: #8be9fd; }
+.code-block :deep(.c) { color: #6b8aae; font-style: italic; }
+.code-block :deep(.n) { color: #ffb86c; }
+.code-block :deep(.p) { color: #e6e6e6; }
+
 .loading-text {
   font-size: 0.8rem;
   color: #9ca3af;
   font-style: italic;
 }
 
+.rework-row {
+  display: flex;
+  gap: 6px;
+  margin-top: auto;
+  padding-top: 8px;
+}
+
+.rework-row input {
+  flex: 1;
+  padding: 5px 8px;
+  border: 1px solid #d8dde3;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  outline: none;
+}
+
+.rework-row input:focus {
+  border-color: #6366f1;
+}
+
+.rework-row input:disabled {
+  background: #f3f4f6;
+  cursor: not-allowed;
+}
+
+.rework-btn {
+  width: 28px;
+  height: 28px;
+  border: 1px solid #d8dde3;
+  border-radius: 4px;
+  background: #fff;
+  color: #4b5563;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.rework-btn:hover:not(:disabled) {
+  border-color: #6366f1;
+  color: #6366f1;
+}
+
+.rework-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 .divider {
   border: none;
   border-top: 1px solid #e2e5e9;