Implementation Plan: UI & Backend Reliability Overhaul

1. Project Goal

To deliver a stable, polished, and professional chat application by:

Fixing the Backend: Making the API resilient to external service failures.
Fixing the Frontend: Implementing a high-fidelity UI that accurately matches the provided Figma design.
Ensuring Reliable Communication: Debugging and fixing backend-frontend connection issues.

Backend Resilience: The API must not crash if an external dependency like the Groq API is unavailable on startup. It needs to handle this gracefully and report the issue to the user through the UI.
High-Fidelity UI: Translating a design into code requires meticulous attention to detail. The previous attempt failed because it only created the HTML structure without the specific Tailwind CSS classes for spacing, colors, fonts, shadows, and layout.
Conversational State: The solution must maintain the previously implemented conversational memory.
Backend-Frontend Communication: The frontend is receiving 500 errors when trying to communicate with the backend, indicating potential issues with API initialization, CORS, or environment configuration.

Goal: Fix the 500 errors occurring during frontend-backend communication
Tasks:
1. Environment Configuration Check:
  - Verify GROQ_API_KEY is properly set in the backend environment
  - Ensure all required Python packages are installed and up to date
  - Check that the backend server is running on the expected port (8000)
2. Backend API Verification:
  - Add detailed logging to track API request/response cycle
  - Implement proper error handling in the /query endpoint
  - Add health check endpoint (/health) to verify API status
  - Test API endpoints independently using curl/Postman
3. Frontend API Integration:
  - Update frontend API call to include proper error handling
  - Add retry logic for transient failures
  - Implement proper loading states during API calls
  - Add detailed console logging for debugging
4. CORS and Network Configuration:
  - Verify CORS configuration is working correctly
  - Ensure backend is accessible from frontend origin
  - Test with explicit CORS configuration instead of wildcard
  - Add proper error messages for CORS issues

Goal: Ensure the backend API can always start and respond, even if the Groq RAG system fails to initialize.
Tasks:
1. Add tenacity library: Update requirements.txt to include the tenacity library for robust retry logic.
2. Graceful RAG Initialization: In src/groq_medical_rag.py, modify _test_groq_connection to use @retry from tenacity. This will automatically handle transient network errors during startup.
3. Fault-Tolerant API: In src/api/main.py, modify the lifespan manager. If the RAG system fails to initialize after all retries, the API should still start but log the critical error. The rag_system global will remain None.
4. User-Friendly Error Response: In the /query endpoint, check if rag_system is None. If it is, return a 200 OK with a clear JSON error message (e.g., { "response": "Sorry, the clinical assistant is currently offline. Please try again later." }) instead of a 503 error. This allows the frontend to handle the error gracefully.

Goal: Overhaul frontend/src/app/page.tsx to be a pixel-perfect implementation of the Figma design.
Tasks:
1. Add clsx utility: Install the clsx library (npm install clsx) in the frontend directory to make conditional styling cleaner.
2. Full UI Overhaul (page.tsx): Replace the entire component with a new version that meticulously applies Tailwind CSS to match the design.
  - Layout: Use flexbox to create the main header, main (chat), and footer (input) structure.
  - Welcome Screen:
    - Use correct font sizes (text-5xl, text-4xl, text-lg), weights (font-bold, font-semibold), and colors (text-gray-800, text-gray-600).
    - Implement the vertical list of template questions with correct borders, padding, and hover effects.
  - Chat Form:
    - Style the textarea and button to exactly match the design, including borders, rounded corners, shadows, and the new "N" icon for the send button.
  - Chat History:
    - Style user and assistant messages as distinct "chat bubbles" with different background colors.
    - Ensure the prose class is used on the markdown renderer for beautiful typography of the bot's response.
3. Error Handling: Update the handleSubmit function in the frontend to gracefully handle the new error message from the backend in case the RAG system is offline.

Phase 0: Backend-Frontend Connection Debugging
- Environment Configuration Check
  - Verify GROQ_API_KEY
  - Update Python dependencies
  - Verify server port configuration
- Backend API Verification
  - Add detailed logging
  - Implement error handling
  - Add health check endpoint
  - Test API independently
- Frontend API Integration
  - Update error handling
  - Add retry logic
  - Implement loading states
  - Add debug logging
- CORS and Network Configuration
  - Verify CORS setup
  - Test backend accessibility
  - Update CORS configuration
  - Add error messages
Phase 1: Backend Stabilization
- Add tenacity to requirements.txt.
- Implement retry logic in groq_medical_rag.py.
- Make API startup fault-tolerant in api/main.py.
- Implement user-friendly error response in /query.
Phase 2: Frontend UI Overhaul
- Install clsx utility.
- Re-implement page.tsx with high-fidelity styling.
- Implement frontend error handling for offline RAG system.

fix/ui-and-backend-stability