manual ui changes

frontend/src/components/PromptDisplay.jsx

@@ -12,6 +12,7 @@ const PromptDisplay = () => {
     sessions: 0,
     needsRefill: true
   });
+  const [drawButtonDisabled, setDrawButtonDisabled] = useState(false);
 
   useEffect(() => {
     fetchMostRecentPrompt();
@@ -21,6 +22,7 @@ const PromptDisplay = () => {
   const fetchMostRecentPrompt = async () => {
     setLoading(true);
     setError(null);
+    setDrawButtonDisabled(false); // Re-enable draw button when returning to history view
 
     try {
       // Try to fetch from actual API first
@@ -51,6 +53,7 @@ const PromptDisplay = () => {
   };
 
   const handleDrawPrompts = async () => {
+    setDrawButtonDisabled(true); // Disable the button when clicked
     setLoading(true);
     setError(null);
     setSelectedIndex(null);
@@ -109,6 +112,7 @@ const PromptDisplay = () => {
         // The default view shows the most recent prompt from history (position 0)
         fetchMostRecentPrompt();
         fetchPoolStats();
+        setDrawButtonDisabled(false); // Re-enable draw button after selection
       } else {
         const errorData = await response.json();
         setError(`Failed to add prompt to history: ${errorData.detail || 'Unknown error'}`);
@@ -157,7 +161,7 @@ const PromptDisplay = () => {
     return (
       <div className="text-center p-8">
         <div className="spinner mx-auto"></div>
-        <p className="mt-4">Loading prompt...</p>
+        <p className="mt-4">Filling pool...</p>
       </div>
     );
   }
@@ -229,7 +233,7 @@ const PromptDisplay = () => {
             <div className="flex gap-2">
               {viewMode === 'drawn' && (
                 <button
-                  className="btn btn-success flex-1"
+                  className="btn btn-success w-1/2"
                   onClick={() => handleAddToHistory(selectedIndex !== null ? selectedIndex : 0)}
                   disabled={selectedIndex === null}
                 >
@@ -237,7 +241,11 @@ const PromptDisplay = () => {
                   {selectedIndex !== null ? 'Use Selected Prompt' : 'Select a Prompt First'}
                 </button>
               )}
-              <button className={`btn btn-primary ${viewMode === 'drawn' ? 'flex-1' : 'w-full'}`} onClick={handleDrawPrompts}>
+              <button
+                className={`btn btn-primary ${viewMode === 'drawn' ? 'w-1/2' : 'w-full'}`}
+                onClick={handleDrawPrompts}
+                disabled={drawButtonDisabled}
+              >
                 <i className="fas fa-dice"></i>
                 {viewMode === 'history' ? 'Draw 3 New Prompts' : 'Draw 3 More Prompts'}
               </button>

frontend/src/components/StatsDashboard.jsx

@@ -88,6 +88,18 @@ const StatsDashboard = () => {
 
   return (
     <div>
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="text-lg font-semibold">Quick Stats</h3>
+        <button
+          className="btn btn-secondary btn-sm"
+          onClick={fetchStats}
+          disabled={loading}
+        >
+          <i className="fas fa-sync"></i>
+          Refresh
+        </button>
+      </div>
+
       <div className="grid grid-cols-2 gap-4 mb-6">
         <div className="stats-card">
           <div className="p-3">
@@ -124,12 +136,7 @@ const StatsDashboard = () => {
               style={{ width: `${Math.min((stats.pool.total / stats.pool.target) * 100, 100)}%` }}
             ></div>
           </div>
-          <div className="text-xs text-gray-600 mt-1">
-            <span className="text-gray-600">
-              {stats.pool.total}/{stats.pool.target} prompts
-            </span>
-          </div>
-        </div>
+       </div>
 
         <div>
           <div className="flex justify-between items-center mb-1">
@@ -142,14 +149,10 @@ const StatsDashboard = () => {
               style={{ width: `${Math.min((stats.history.total / stats.history.capacity) * 100, 100)}%` }}
             ></div>
           </div>
-          <div className="text-xs text-gray-600 mt-1">
-            {stats.history.available} slots available
-          </div>
-        </div>
+       </div>
       </div>
 
       <div className="mt-6">
-        <h4 className="font-medium mb-3">Quick Insights</h4>
         <ul className="space-y-2 text-sm">
           <li className="flex items-start">
             <i className="fas fa-calendar-day text-blue-600 mt-1 mr-2"></i>