From dbe42f2e88b0c931d6bb7056fb88ce6f748d99a6 Mon Sep 17 00:00:00 2001
From: Kagamine Rin <rin.kagamine@captcouch.xyz>
Date: Sun, 31 May 2026 10:54:23 -0400
Subject: [PATCH] fix: prevent accordion buttons from submitting form

Buttons inside <form> default to type='submit'. Clicking to
collapse/expand a structured prompt field was triggering the form's
submit handler, which fires audio generation. Added explicit
type='button' to all non-submit buttons in StructuredPromptEditor.
---
 frontend/src/components/Generator.tsx              | 8 +++++---
 frontend/src/components/StructuredPromptEditor.tsx | 2 ++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Generator.tsx b/frontend/src/components/Generator.tsx
index 9607d56..5669a40 100644
--- a/frontend/src/components/Generator.tsx
+++ b/frontend/src/components/Generator.tsx
@@ -186,7 +186,7 @@ export default function Generator({ onGenerate }: Props) {
             <div className="flex items-center justify-between mb-1.5">
               <label className="text-xs text-kithara-muted">Prompt</label>
               <MaestroButton
-                prompt={prompt}
+                prompt={prompt || Object.values(structuredPrompt).filter(Boolean).join(' ')}
                 onResult={(_result, _mode) => {
                   setPrompt(_result)
                   setError('')
@@ -211,9 +211,11 @@ export default function Generator({ onGenerate }: Props) {
               <MaestroButton
                 prompt={Object.values(structuredPrompt).filter(Boolean).join(' ')}
                 structured={isPro}
-                onResult={(_result, _mode) => { /* handled by onStructuredResult */ }}
+                onResult={(_result, _mode) => {
+                  setPrompt(_result)
+                  setError('')
+                }}
                 onStructuredResult={(fields, mode) => {
-                  // Structured mode: merge fields into structuredPrompt, preserving user edits
                   setStructuredPrompt(prev => ({
                     ...prev,
                     ...Object.fromEntries(
diff --git a/frontend/src/components/StructuredPromptEditor.tsx b/frontend/src/components/StructuredPromptEditor.tsx
index c0c3f5f..b5c9f63 100644
--- a/frontend/src/components/StructuredPromptEditor.tsx
+++ b/frontend/src/components/StructuredPromptEditor.tsx
@@ -55,6 +55,7 @@ export default function StructuredPromptEditor({ value, onChange }: Props) {
           {filledCount} of {FIELDS.length} fields filled
         </span>
         <button
+          type="button"
           onClick={() => setExpanded(new Set(FIELDS.map(f => f.key)))}
           className="text-xs text-kithara-accent hover:text-kithara-accent/80 transition-colors"
         >
@@ -69,6 +70,7 @@ export default function StructuredPromptEditor({ value, onChange }: Props) {
         return (
           <div key={key} className="border border-white/5 rounded-lg overflow-hidden">
             <button
+              type="button"
               onClick={() => toggleField(key)}
               className={`w-full flex items-center justify-between px-3 py-2 text-sm transition-colors ${
                 hasValue ? 'bg-white/5' : 'bg-transparent hover:bg-white/5'