# Implementation Plan: UI & Backend Reliability Overhaul

## 1. Project Goal

To deliver a stable, polished, and professional chat application by:
1.  **Fixing the Backend:** Making the API resilient to external service failures.
2.  **Fixing the Frontend:** Implementing a high-fidelity UI that accurately matches the provided Figma design.
3.  **Ensuring Reliable Communication:** Debugging and fixing backend-frontend connection issues.

## 2. Key Challenges and Analysis

*   **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.

## 3. High-level Task Breakdown

### Phase 0: Backend-Frontend Connection Debugging (HIGHEST Priority)

*   **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

### Phase 1: Backend Stabilization (Immediate Priority)

*   **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.

### Phase 2: High-Fidelity Frontend Implementation

*   **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.

## 4. Project Status Board

- [ ] **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
- [x] **Phase 1: Backend Stabilization**
    - [x] Add `tenacity` to `requirements.txt`.
    - [x] Implement retry logic in `groq_medical_rag.py`.
    - [x] Make API startup fault-tolerant in `api/main.py`.
    - [x] 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.

## 5. Branch Name

`fix/ui-and-backend-stability`