update

frontend/src/api.js

@@ -49,11 +49,11 @@ export async function fetchBausteine(topic) {
   return res.json()
 }
 
-export async function createBaustein(topic, title) {
+export async function createBaustein(topic, title, instructions = '') {
   const res = await fetch(`${BASE}/bausteine`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ topic, title }),
+    body: JSON.stringify({ topic, title, instructions }),
   })
   return res.json()
 }

frontend/src/components/BausteineView.vue

@@ -20,6 +20,7 @@ const bausteine = ref([])
 const suggestions = ref([])
 const suggestionsLoading = ref(false)
 const newTitle = ref('')
+const newInfo = ref('')
 const reworkInputs = ref({})
 const reworkingIds = ref(new Set())
 const reworkingSnapshots = new Map()
@@ -55,8 +56,10 @@ async function checkAndGenerate() {
 async function handleAdd() {
   const title = newTitle.value.trim()
   if (!title) return
+  const info = newInfo.value.trim()
   newTitle.value = ''
-  const created = await createBaustein(props.topic, title)
+  newInfo.value = ''
+  const created = await createBaustein(props.topic, title, info)
   bausteine.value.push(created)
   reworkingSnapshots.set(created.id, created.updated_at)
   reworkingIds.value = new Set([...reworkingIds.value, created.id])
@@ -168,12 +171,18 @@ onUnmounted(stopPolling)
   <div class="bausteine-view">
     <div class="bausteine-grid">
       <div class="card new-card">
+        <h3>Neuer Baustein</h3>
         <input
           v-model="newTitle"
-          placeholder="Neuer Baustein…"
+          placeholder="Thema…"
           @keyup.enter="handleAdd"
         />
-        <button @click="handleAdd" :disabled="!newTitle.trim()">+</button>
+        <textarea
+          v-model="newInfo"
+          placeholder="Zusätzliche Infos (optional)…"
+          rows="4"
+        ></textarea>
+        <button class="new-btn" @click="handleAdd" :disabled="!newTitle.trim()">Generieren</button>
       </div>
 
       <div v-for="b in bausteine" :key="b.id" class="card">
@@ -272,41 +281,52 @@ onUnmounted(stopPolling)
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  max-height: 400px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
 .new-card {
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
   background: #f8f9fb;
   border-style: dashed;
 }
 
-.new-card input {
-  flex: 1;
+.new-card h3 {
+  font-size: 0.95rem;
+  color: #1a1a1a;
+  margin: 0;
+}
+
+.new-card input,
+.new-card textarea {
+  width: 100%;
   padding: 8px 10px;
   border: 1px solid #d8dde3;
   border-radius: 6px;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
+  font-family: inherit;
   outline: none;
+  resize: vertical;
 }
 
-.new-card input:focus {
+.new-card input:focus,
+.new-card textarea:focus {
   border-color: #6366f1;
 }
 
-.new-card button {
+.new-btn {
   padding: 8px 12px;
   border: none;
   background: #6366f1;
   color: white;
   border-radius: 6px;
-  font-size: 1rem;
-  font-weight: 700;
+  font-size: 0.85rem;
+  font-weight: 600;
   cursor: pointer;
+  margin-top: auto;
 }
 
-.new-card button:disabled {
+.new-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }