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>

frontend/src/layouts/Layout.astro

@@ -19,8 +19,8 @@ import '../styles/global.css';
         </div>
         <div class="nav-links">
           <a href="/"><i class="fas fa-home"></i> Home</a>
-          <a href="/history"><i class="fas fa-history"></i> History</a>
-          <a href="/stats"><i class="fas fa-chart-bar"></i> Stats</a>
+          <a href="/api/v1/prompts/history"><i class="fas fa-history"></i> History</a>
+          <a href="/api/v1/prompts/stats"><i class="fas fa-chart-bar"></i> Stats</a>
         </div>
       </nav>
     </header>
@@ -30,8 +30,7 @@ import '../styles/global.css';
     </main>
 
     <footer>
-      <p>Daily Journal Prompt Generator &copy; 2026</p>
-      <p>Powered by AI creativity</p>
+      <p>daily-journal-prompt &copy; 2026</p>
     </footer>
   </body>
 </html>

frontend/src/pages/index.astro

@@ -7,7 +7,7 @@ import StatsDashboard from '../components/StatsDashboard.jsx';
 <Layout>
   <div class="container">
     <div class="text-center mb-4">
-      <h1><i class="fas fa-magic"></i> Welcome to Daily Journal Prompt Generator</h1>
+      <h1><i class="fas fa-magic"></i> daily-journal-prompt</h1>
       <p class="mt-2">Get inspired with AI-generated writing prompts for your daily journal practice</p>
     </div>
 
@@ -40,10 +40,7 @@ import StatsDashboard from '../components/StatsDashboard.jsx';
             <button class="btn btn-warning" onclick="window.location.href='/api/v1/prompts/history'">
               <i class="fas fa-history"></i> View History (API)
             </button>
-            <button class="btn btn-info" onclick="window.location.href='/docs'">
-              <i class="fas fa-book"></i> API Documentation
-            </button>
-          </div>
+         </div>
         </div>
       </div>
     </div>
@@ -58,7 +55,7 @@ import StatsDashboard from '../components/StatsDashboard.jsx';
           <div class="p-4">
             <i class="fas fa-robot fa-3x mb-3" style="color: var(--primary-color);"></i>
             <h3>AI-Powered</h3>
-            <p>Prompts are generated using advanced AI models trained on creative writing</p>
+            <p>Prompts are generated using AI models trained on creative writing</p>
           </div>
         </div>
 
@@ -74,7 +71,7 @@ import StatsDashboard from '../components/StatsDashboard.jsx';
           <div class="p-4">
             <i class="fas fa-battery-full fa-3x mb-3" style="color: var(--success-color);"></i>
             <h3>Prompt Pool</h3>
-            <p>Always have prompts ready with our caching system that maintains a pool of generated prompts</p>
+            <p>Prompt pool caching system is a proof of concept with the ultimate goal being offline use on mobile devices. Airplane mode is a path to distraction-free writing.</p>
           </div>
         </div>
       </div>