fix

backend/api/demo.py

@@ -649,26 +649,34 @@ class FeedbackRequest(BaseModel):
     question: str
     sql: str
     correct: bool
+    remark: Optional[str] = None  # user's free-text explanation of what was wrong
 
 
 @router.post("/feedback")
 async def submit_feedback(req: FeedbackRequest):
     gepa = get_gepa()
+    errors = []
+    if not req.correct:
+        errors.append("User marked as incorrect")
+        if req.remark:
+            errors.append(f"User remark: {req.remark}")
+
     gepa.record_result(QueryResult(
         question=req.question,
         final_sql=req.sql,
         attempts=1,
         success=req.correct,
-        errors=[] if req.correct else ["User marked as incorrect"],
+        errors=errors,
         timestamp=time.time(),
     ))
 
     result = None
     if not req.correct and gepa.should_optimize():
+        feedback_ctx = f"User marked query as incorrect.\nQuestion: {req.question}\nSQL: {req.sql}"
+        if req.remark:
+            feedback_ctx += f"\nUser explanation: {req.remark}"
         try:
-            result = await gepa.run_optimization_cycle(
-                user_feedback_context=f"User marked query as incorrect.\nQuestion: {req.question}\nSQL: {req.sql}"
-            )
+            result = await gepa.run_optimization_cycle(user_feedback_context=feedback_ctx)
         except Exception:
             pass
 

frontend/src/components/ChatPanel.tsx

@@ -201,10 +201,12 @@ function MessageCard({
   onRetry,
 }: {
   msg: ChatMessage
-  onFeedback: (id: string, correct: boolean) => Promise<void>
+  onFeedback: (id: string, correct: boolean, remark?: string) => Promise<void>
   onRetry: (q: string, previousSql?: string) => void
 }) {
   const [sqlOpen, setSqlOpen] = useState(true)
+  const [wrongOpen, setWrongOpen] = useState(false)
+  const [remark, setRemark] = useState('')
 
   return (
     <div className="flex flex-col gap-2.5">
@@ -306,53 +308,95 @@ function MessageCard({
 
         {/* Feedback */}
         {msg.status === 'done' && msg.attempts > 0 && (
-          <div className="flex items-center gap-2">
-            {msg.feedback ? (
-              <div
-                className={`text-xs flex items-center gap-1.5 ${
-                  msg.feedback === 'correct' ? 'text-green-400' : 'text-red-400'
-                }`}
-              >
-                {msg.feedback === 'correct' ? (
-                  <CheckCircle2 size={12} />
-                ) : (
-                  <XCircle size={12} />
-                )}
-                Marked as {msg.feedback}
-              </div>
-            ) : (
-              <>
-                <span className="text-[10px] text-gray-600 mr-0.5">Was this correct?</span>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              {msg.feedback ? (
+                <div className={`text-xs flex items-center gap-1.5 ${msg.feedback === 'correct' ? 'text-green-400' : 'text-red-400'}`}>
+                  {msg.feedback === 'correct' ? <CheckCircle2 size={12} /> : <XCircle size={12} />}
+                  Marked as {msg.feedback}
+                </div>
+              ) : (
+                <>
+                  <span className="text-[10px] text-gray-600 mr-0.5">Was this correct?</span>
+                  <button
+                    disabled={msg.feedbackSending}
+                    onClick={() => onFeedback(msg.id, true)}
+                    className="flex items-center gap-1 px-2 py-1 text-[10px] font-medium rounded-lg border border-green-500/25 bg-green-500/8 text-green-400 hover:bg-green-500/15 transition-all disabled:opacity-40"
+                  >
+                    <CheckCircle2 size={10} />
+                    Correct
+                  </button>
+                  <button
+                    disabled={msg.feedbackSending}
+                    onClick={() => setWrongOpen((v) => !v)}
+                    className={`flex items-center gap-1 px-2 py-1 text-[10px] font-medium rounded-lg border transition-all disabled:opacity-40 ${
+                      wrongOpen
+                        ? 'border-red-500/40 bg-red-500/15 text-red-300'
+                        : 'border-red-500/25 bg-red-500/8 text-red-400 hover:bg-red-500/15'
+                    }`}
+                  >
+                    <XCircle size={10} />
+                    Wrong
+                    <ChevronDown size={9} className={`transition-transform ${wrongOpen ? 'rotate-180' : ''}`} />
+                  </button>
+                </>
+              )}
+              {(msg.status === 'done' || msg.status === 'error') && (
                 <button
-                  disabled={msg.feedbackSending}
-                  onClick={() => onFeedback(msg.id, true)}
-                  className="flex items-center gap-1 px-2 py-1 text-[10px] font-medium rounded-lg border border-green-500/25 bg-green-500/8 text-green-400 hover:bg-green-500/15 transition-all disabled:opacity-40"
+                  onClick={() => onRetry(msg.question, msg.feedback === 'wrong' ? msg.sql : undefined)}
+                  className="ml-auto flex items-center gap-1 text-[10px] text-gray-600 hover:text-gray-400 transition-colors"
                 >
-                  <CheckCircle2 size={10} />
-                  Correct
+                  <RefreshCw size={10} />
+                  {msg.feedback === 'wrong' ? 'Retry differently' : 'Retry'}
                 </button>
-                <button
-                  disabled={msg.feedbackSending}
-                  onClick={() => onFeedback(msg.id, false)}
-                  className="flex items-center gap-1 px-2 py-1 text-[10px] font-medium rounded-lg border border-red-500/25 bg-red-500/8 text-red-400 hover:bg-red-500/15 transition-all disabled:opacity-40"
+              )}
+            </div>
+
+            {/* Remarks dropdown for Wrong */}
+            <AnimatePresence>
+              {wrongOpen && !msg.feedback && (
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: 'auto', opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{ duration: 0.15 }}
+                  className="overflow-hidden"
                 >
-                  <XCircle size={10} />
-                  Wrong
-                </button>
-              </>
-            )}
-            {(msg.status === 'done' || msg.status === 'error') && (
-              <button
-                onClick={() => onRetry(
-                  msg.question,
-                  msg.feedback === 'wrong' ? msg.sql : undefined
-                )}
-                className="ml-auto flex items-center gap-1 text-[10px] text-gray-600 hover:text-gray-400 transition-colors"
-              >
-                <RefreshCw size={10} />
-                {msg.feedback === 'wrong' ? 'Retry differently' : 'Retry'}
-              </button>
-            )}
+                  <div className="flex flex-col gap-2 p-3 rounded-xl border border-red-500/20 bg-red-500/5">
+                    <p className="text-[10px] text-red-400/80 font-medium">
+                      What was wrong? <span className="text-gray-600">(optional — helps improve the prompt)</span>
+                    </p>
+                    <textarea
+                      value={remark}
+                      onChange={(e) => setRemark(e.target.value)}
+                      placeholder="e.g. wrong JOIN logic, missing GROUP BY, incorrect column name…"
+                      rows={2}
+                      className="w-full px-3 py-2 text-xs rounded-lg border border-white/10 bg-black/20 text-gray-300 placeholder-gray-600 resize-none focus:outline-none focus:border-red-500/40 transition-colors"
+                    />
+                    <div className="flex items-center gap-2 justify-end">
+                      <button
+                        onClick={() => { setWrongOpen(false); setRemark('') }}
+                        className="text-[10px] text-gray-600 hover:text-gray-400 transition-colors px-2 py-1"
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        disabled={msg.feedbackSending}
+                        onClick={() => {
+                          void onFeedback(msg.id, false, remark.trim() || undefined)
+                          setWrongOpen(false)
+                          setRemark('')
+                        }}
+                        className="flex items-center gap-1 px-3 py-1 text-[10px] font-semibold rounded-lg bg-red-500/20 border border-red-500/30 text-red-300 hover:bg-red-500/30 transition-all disabled:opacity-40"
+                      >
+                        {msg.feedbackSending ? <Loader2 size={9} className="animate-spin" /> : <XCircle size={9} />}
+                        Submit feedback
+                      </button>
+                    </div>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
           </div>
         )}
       </div>
@@ -380,12 +424,12 @@ export function ChatPanel() {
   }, [messages.length])
 
   const handleFeedback = useCallback(
-    async (id: string, correct: boolean) => {
+    async (id: string, correct: boolean, remark?: string) => {
       const msg = messages.find((m) => m.id === id)
       if (!msg) return
       updateMessage(id, { feedbackSending: true })
       try {
-        await submitFeedback(msg.question, msg.sql, correct)
+        await submitFeedback(msg.question, msg.sql, correct, remark)
         updateMessage(id, { feedback: correct ? 'correct' : 'wrong', feedbackSending: false })
       } catch {
         updateMessage(id, { feedbackSending: false })

frontend/src/components/DemoMode.tsx

@@ -783,11 +783,10 @@ export function DemoMode({ onClose }: { onClose: () => void }) {
                 </AnimatePresence>
 
                 {appState === 'done' && (
-                  <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="border border-green-500/25 rounded-2xl p-5 bg-green-500/5 text-center mt-2">
-                    <div className="text-3xl font-bold text-green-400 mb-1 tabular-nums">91%</div>
-                    <div className="text-sm font-semibold text-white mb-1">Demo complete</div>
+                  <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="border border-violet-500/20 rounded-2xl p-5 bg-violet-500/5 text-center mt-2">
+                    <div className="text-3xl font-bold text-violet-300 mb-1 tabular-nums">91%</div>
                     <div className="text-xs text-gray-500 max-w-xs mx-auto leading-relaxed">
-                      Agent improved from 42% → 91% accuracy through RL-driven repair strategies and two GEPA prompt evolution cycles.
+                      Agent improved from 42% → 91% accuracy through RL repair strategies and two GEPA prompt evolution cycles.
                     </div>
                   </motion.div>
                 )}

frontend/src/lib/api.ts

@@ -84,12 +84,13 @@ export async function fetchSchemaGraph(): Promise<SchemaGraph> {
 export async function submitFeedback(
   question: string,
   sql: string,
-  correct: boolean
+  correct: boolean,
+  remark?: string,
 ): Promise<void> {
   await fetch(`${BASE_URL}/api/feedback`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ question, sql, correct }),
+    body: JSON.stringify({ question, sql, correct, remark }),
   })
 }