first pass async feedback complete, regressions added

frontend/src/components/PromptDisplay.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import FeedbackWeighting from './FeedbackWeighting';
 
 const PromptDisplay = () => {
   const [prompts, setPrompts] = useState([]); // Changed to array to handle multiple prompts
@@ -12,7 +13,8 @@ const PromptDisplay = () => {
     sessions: 0,
     needsRefill: true
   });
-  const [drawButtonDisabled, setDrawButtonDisabled] = useState(false);
+  const [showFeedbackWeighting, setShowFeedbackWeighting] = useState(false);
+  const [fillPoolLoading, setFillPoolLoading] = useState(false);
 
   useEffect(() => {
     fetchMostRecentPrompt();
@@ -140,28 +142,51 @@ const PromptDisplay = () => {
   };
 
   const handleFillPool = async () => {
-    setLoading(true);
+    // Show feedback weighting UI instead of directly filling pool
+    setShowFeedbackWeighting(true);
+  };
+
+  const handleFeedbackComplete = async (feedbackData) => {
+    // After feedback is submitted, fill the pool
+    setFillPoolLoading(true);
+    setShowFeedbackWeighting(false);
+
     try {
       const response = await fetch('/api/v1/prompts/fill-pool', { method: 'POST' });
       if (response.ok) {
-        // Refresh the prompt and pool stats - no alert needed, UI will show updated stats
+        // Refresh the prompt and pool stats
         fetchMostRecentPrompt();
         fetchPoolStats();
       } else {
-        setError('Failed to fill prompt pool');
+        setError('Failed to fill prompt pool after feedback');
       }
     } catch (err) {
-      setError('Failed to fill prompt pool');
+      setError('Failed to fill prompt pool after feedback');
     } finally {
-      setLoading(false);
+      setFillPoolLoading(false);
     }
   };
 
-  if (loading) {
+  const handleFeedbackCancel = () => {
+    setShowFeedbackWeighting(false);
+  };
+
+  if (showFeedbackWeighting) {
     return (
-      <div className="text-center p-8">
-        <div className="spinner mx-auto"></div>
-        <p className="mt-4">Filling pool...</p>
+      <FeedbackWeighting
+        onComplete={handleFeedbackComplete}
+        onCancel={handleFeedbackCancel}
+      />
+    );
+  }
+
+  if (fillPoolLoading) {
+    return (
+      <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+        <div className="flex items-center justify-center py-8">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+          <span className="ml-3 text-gray-600">Filling prompt pool...</span>
+        </div>
       </div>
     );
   }