Update application with new features and components

backend/app.py

@@ -10,7 +10,7 @@ from io import BytesIO
 from PIL import Image
 import uvicorn
 import traceback
-from backend.inference import infer_aw_contour, analyze_frame, analyze_video_frame
+from inference import infer_aw_contour, analyze_frame, analyze_video_frame, infer_cervix_bbox
 
 app = FastAPI(title="Pathora Colposcopy API", version="1.0.0")
 
@@ -235,6 +235,69 @@ async def infer_video(file: UploadFile = File(...)):
         raise HTTPException(status_code=500, detail=str(e))
 
 
+@app.post("/api/infer-cervix-bbox")
+async def infer_cervix_bbox_endpoint(file: UploadFile = File(...), conf_threshold: float = 0.4):
+    """
+    Cervix bounding box detection endpoint for annotation.
+    Detects cervix location and returns bounding boxes.
+    
+    Args:
+        file: Image file (jpg, png, etc.)
+        conf_threshold: Confidence threshold for YOLO model (0.0-1.0)
+    
+    Returns:
+        JSON with base64 encoded annotated image and bounding box coordinates
+    """
+    try:
+        # Read image file
+        image_data = await file.read()
+        
+        # Try to open image
+        try:
+            image = Image.open(BytesIO(image_data))
+        except Exception as e:
+            raise HTTPException(status_code=400, detail=f"Invalid image file: {str(e)}")
+        
+        # Convert to numpy array and BGR format (OpenCV uses BGR)
+        if image.mode == 'RGBA':
+            image = image.convert('RGB')
+        elif image.mode != 'RGB':
+            image = image.convert('RGB')
+        
+        frame = cv2.cvtColor(np.array(image), cv2.COLOR_RGB2BGR)
+        
+        # Run inference
+        result = infer_cervix_bbox(frame, conf_threshold=conf_threshold)
+        
+        # Convert result overlay back to RGB for JSON serialization
+        if result["overlay"] is not None:
+            result_rgb = cv2.cvtColor(result["overlay"], cv2.COLOR_BGR2RGB)
+            result_image = Image.fromarray(result_rgb)
+            
+            # Encode to base64
+            buffer = BytesIO()
+            result_image.save(buffer, format="PNG")
+            buffer.seek(0)
+            import base64
+            image_base64 = base64.b64encode(buffer.getvalue()).decode()
+        else:
+            image_base64 = None
+        
+        return JSONResponse({
+            "status": "success",
+            "message": "Cervix bounding box detection completed",
+            "result_image": image_base64,
+            "bounding_boxes": result["bounding_boxes"],
+            "detections": result["detections"],
+            "frame_width": result["frame_width"],
+            "frame_height": result["frame_height"],
+            "confidence_threshold": conf_threshold
+        })
+    
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error during cervix bbox inference: {str(e)}")
+
+
 # Serve the built frontend if present (Space/Docker runtime)
 frontend_dist = os.path.join(os.path.dirname(__file__), "..", "dist")
 if os.path.isdir(frontend_dist):
@@ -242,4 +305,4 @@ if os.path.isdir(frontend_dist):
 
 
 if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=8000)
+    uvicorn.run(app, host="0.0.0.0", port=8000)

backend/inference.py

@@ -275,3 +275,95 @@ def analyze_video_frame(frame, conf_threshold=0.3):
         result["status"] = "Searching Cervix"
 
     return result
+
+#-----------------------------------------------
+# Cervix Bounding Box Detection for Annotations
+# -----------------------------------------------
+
+def infer_cervix_bbox(frame, conf_threshold=0.4):
+    """
+    Detect cervix bounding boxes using YOLO model.
+    Returns bounding boxes and annotated frame.
+    
+    Args:
+        frame: Input image frame (BGR)
+        conf_threshold: Confidence threshold for detection
+        
+    Returns:
+        Dictionary with annotated overlay and bounding boxes
+    """
+    
+    if frame is None or cervix_model is None:
+        return {
+            "overlay": None,
+            "bounding_boxes": [],
+            "detections": 0,
+            "frame_width": 0,
+            "frame_height": 0
+        }
+    
+    try:
+        results = cervix_model.predict(
+            frame,
+            conf=conf_threshold,
+            imgsz=640,
+            verbose=False,
+            device='cpu'
+        )[0]
+        
+        overlay = frame.copy()
+        bounding_boxes = []
+        detection_count = 0
+        
+        if results.boxes is not None and len(results.boxes) > 0:
+            boxes = results.boxes.xyxy.cpu().numpy()
+            confidences = results.boxes.conf.cpu().numpy()
+            
+            for idx, box in enumerate(boxes):
+                x1, y1, x2, y2 = box.astype(int)
+                confidence = float(confidences[idx])
+                
+                # Draw bounding box
+                cv2.rectangle(
+                    overlay,
+                    (x1, y1),
+                    (x2, y2),
+                    (255, 0, 0),  # Blue color
+                    3
+                )
+                
+                # Store bounding box info
+                bounding_boxes.append({
+                    "x1": int(x1),
+                    "y1": int(y1),
+                    "x2": int(x2),
+                    "y2": int(y2),
+                    "width": int(x2 - x1),
+                    "height": int(y2 - y1),
+                    "confidence": round(confidence, 3),
+                    "center_x": int((x1 + x2) / 2),
+                    "center_y": int((y1 + y2) / 2)
+                })
+                
+                detection_count += 1
+        
+        return {
+            "overlay": overlay if detection_count > 0 else None,
+            "bounding_boxes": bounding_boxes,
+            "detections": detection_count,
+            "frame_width": frame.shape[1],
+            "frame_height": frame.shape[0]
+        }
+    
+    except Exception as e:
+        print(f"❌ Cervix bounding box detection error: {e}")
+        import traceback
+        traceback.print_exc()
+        return {
+            "overlay": None,
+            "bounding_boxes": [],
+            "detections": 0,
+            "frame_width": frame.shape[1],
+            "frame_height": frame.shape[0]
+        }
+

src/App.tsx

@@ -43,7 +43,10 @@ export function App() {
   const goToAcetowhite = () => setCurrentPage('acetowhite');
   const goToGreenFilter = () => setCurrentPage('greenfilter');
   const goToLugol = () => setCurrentPage('lugol');
-  const goToGuidedCapture = () => setCurrentPage('guidedcapture');
+  const goToGuidedCapture = () => {
+    setCurrentPage('capture');
+    setGuidanceMode('capture');
+  };
   const goToBiopsyMarking = () => setCurrentPage('biopsymarking');
   const goToCapture = () => {
     setCurrentPage('capture');
@@ -64,7 +67,7 @@ export function App() {
       case 'home':
         return <HomePage onNavigateToPatients={goToPatientRegistry} onNext={goToPatientRegistry} />;
       case 'patientinfo':
-        return <PatientRegistry onNewPatient={() => goToPatientHistory(undefined)} onSelectExisting={(id: string) => goToPatientHistory(id)} onBackToHome={goToHome} onNext={goToGuidedCapture} />;
+        return <PatientRegistry onNewPatient={(newPatientId) => goToPatientHistory(newPatientId, true)} onSelectExisting={(id: string) => goToPatientHistory(id)} onBackToHome={goToHome} onNext={goToGuidedCapture} />;
       case 'patienthistory':
         return <PatientHistoryPage goToImaging={goToGuidedCapture} goBackToRegistry={goToPatientRegistry} patientID={currentPatientId} goToGuidedCapture={isNewPatientFlow ? goToGuidedCapture : undefined} />;
       
@@ -74,8 +77,6 @@ export function App() {
         return <GreenFilterPage goBack={goToAcetowhite} onNext={goToLugol} />;
       case 'lugol':
         return <LugolExamPage goBack={goToGreenFilter} onNext={goToGuidedCapture} />;
-      case 'guidedcapture':
-        return <GuidedCapturePage onNext={goToBiopsyMarking} onGoToPatientRecords={goToPatientRegistry} onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
       case 'biopsymarking':
         return <BiopsyMarking onBack={goToGuidedCapture} onNext={goToReport} capturedImages={capturedImages} />;
       case 'capture':
@@ -93,7 +94,7 @@ export function App() {
 
   // Sidebar is shown on all pages except home
   const showSidebar = currentPage !== 'home';
-  const sidebarKey = currentPage === 'patienthistory' ? 'patientinfo' : ['capture', 'annotation', 'compare', 'guidedcapture'].includes(currentPage) ? guidanceMode : currentPage;
+  const sidebarKey = currentPage === 'patienthistory' ? 'patientinfo' : (currentPage === 'guidedcapture' && guidanceMode === 'report') ? 'report' : ['capture', 'annotation', 'compare', 'guidedcapture'].includes(currentPage) ? guidanceMode : currentPage;
 
   return (
     <div className="flex flex-col min-h-screen">

src/components/AceticAnnotator.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useImperativeHandle, forwardRef } from 'react';
-import { Wrench, Trash2, Circle as CircleIcon, Hexagon, Square as SquareIcon, ChevronDown, ChevronUp } from 'lucide-react';
+import { Wrench, Trash2, Circle as CircleIcon, Hexagon, Square as SquareIcon, ChevronDown, ChevronUp, Sparkles, Loader } from 'lucide-react';
 
 type ShapeType = 'rect' | 'circle' | 'polygon';
 
@@ -64,10 +64,6 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
   const [selectedImageIndex, setSelectedImageIndex] = useState(0);
   const [isAnnotationsOpen, setIsAnnotationsOpen] = useState(true);
   const [isLabelDropdownOpen, setIsLabelDropdownOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState<'annotate' | 'findings'>('annotate');
-  const [selectedCategories, setSelectedCategories] = useState<Record<string, boolean>>({});
-  const [selectedFindings, setSelectedFindings] = useState<Record<string, boolean>>({});
-  const [additionalNotes, setAdditionalNotes] = useState('');
 
   // Edit state for annotation list
   const [editingId, setEditingId] = useState<string | null>(null);
@@ -81,6 +77,7 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
   // AI state
   const [isAILoading, setIsAILoading] = useState(false);
   const [aiError, setAIError] = useState<string | null>(null);
+  const [isAIAssistEnabled, setIsAIAssistEnabled] = useState(false);
   
   // Get annotations for current image
   const annotations = annotationsByImage[selectedImageIndex] ?? emptyAnnotationsRef.current;
@@ -106,53 +103,14 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
     'Border'
   ];
 
-  // Category-based findings structure
-  const findingsCategories = [
-    {
-      name: 'Thin Acetowhite Epithelium',
-      features: ['Dull white', 'Appears slowly', 'Fades quickly']
-    },
-    {
-      name: 'Borders',
-      features: ['Irregular', 'Geographic', 'Feathered edges', 'Sharp', 'Raised', 'Rolled edges', 'Inner border sign']
-    },
-    {
-      name: 'Vascular Pattern',
-      features: ['Fine punctation', 'Fine mosaic', 'Coarse punctation', 'Coarse mosaic']
-    },
-    {
-      name: 'Dense Acetowhite Epithelium',
-      features: ['Chalky white', 'Oyster white', 'Greyish white', 'Rapid onset', 'Persists']
-    },
-    {
-      name: 'Gland Openings',
-      features: ['Cuffed', 'Enlarged crypt openings']
-    },
-    {
-      name: 'Non-Specific Abnormal Findings',
-      features: ['Leukoplakia (keratosis)', 'Hyperkeratosis', 'Erosion']
-    }
-  ];
+
 
   // Filter labels based on input
   const filteredLabels = labelOptions.filter(label =>
     label.toLowerCase().includes(labelInput.toLowerCase())
   );
 
-  // Finding checkboxes
-  const toggleFinding = (label: string) => {
-    setSelectedFindings(prev => ({
-      ...prev,
-      [label]: !prev[label]
-    }));
-  };
 
-  const toggleCategory = (name: string) => {
-    setSelectedCategories(prev => ({
-      ...prev,
-      [name]: !prev[name]
-    }));
-  };
 
   // Helper function to get bounding box from polygon points
   const getBoundsFromPoints = (points: any[]) => {
@@ -210,7 +168,7 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
 
       console.log('🚀 Sending to backend with image dimensions:', imageDimensions);
 
-      const backendResponse = await fetch('/api/infer-aw-contour', {
+      const backendResponse = await fetch('http://localhost:8000/api/infer-aw-contour', {
         method: 'POST',
         body: formData,
       });
@@ -775,6 +733,16 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
   };
   const deleteAnnotation = (id: string) => setAnnotations(prev => prev.filter(a => a.id !== id));
 
+  const handleAIAssistToggle = async () => {
+    if (isAILoading) return;
+    if (isAIAssistEnabled) {
+      setIsAIAssistEnabled(false);
+      return;
+    }
+    setIsAIAssistEnabled(true);
+    await runAIAssist();
+  };
+
   const getShapeTypeName = (type: ShapeType): string => {
     const typeMap: Record<ShapeType, string> = {
       'rect': 'Rectangle',
@@ -826,40 +794,40 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
       <div className="flex justify-between items-center">
         <div className="flex justify-center flex-1">
           <div className="inline-flex bg-gray-100 rounded-lg p-1 border border-gray-300">
-            <button
-              onClick={() => setActiveTab('annotate')}
-              className={`px-6 py-2 rounded-md font-semibold text-sm transition-all ${
-                activeTab === 'annotate'
-                  ? 'bg-[#05998c] text-white shadow-sm'
-                  : 'bg-transparent text-gray-700 hover:text-gray-900'
-              }`}
-            >
-              Annotate
-            </button>
-            <button
-              onClick={() => setActiveTab('findings')}
-              className={`px-6 py-2 rounded-md font-semibold text-sm transition-all ${
-                activeTab === 'findings'
-                  ? 'bg-[#05998c] text-white shadow-sm'
-                  : 'bg-transparent text-gray-700 hover:text-gray-900'
-              }`}
-            >
-              Findings
-            </button>
           </div>
         </div>
         <button 
-          onClick={runAIAssist} 
+          onClick={handleAIAssistToggle} 
           disabled={isAILoading}
-          className="px-5 py-2.5 text-sm md:text-base font-bold text-white bg-blue-600 border border-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-md hover:shadow-lg"
+          className={`px-4 md:px-6 py-2 md:py-3 text-sm md:text-base font-bold text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2 ${
+            isAIAssistEnabled
+              ? 'bg-gradient-to-r from-green-500 to-green-600 border border-green-600 hover:from-green-600 hover:to-green-700'
+              : 'bg-gradient-to-r from-blue-600 to-blue-700 border border-blue-700 hover:from-blue-700 hover:to-blue-800'
+          }`}
+          title={isAIAssistEnabled ? 'AI Assist is ON' : 'Run AI model to automatically detect annotations'}
         >
-          {isAILoading ? 'Analyzing...' : '✨ AI Assist'}
+          {isAILoading ? (
+            <>
+              <div className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isAIAssistEnabled ? 'bg-white' : 'bg-gray-300'}`}>
+                <span className={`inline-block h-4 w-4 transform rounded-full bg-gradient-to-br transition-transform ${isAIAssistEnabled ? 'translate-x-6 from-green-400 to-green-600' : 'translate-x-1 from-blue-400 to-blue-600'}`} />
+              </div>
+              <Loader className="w-5 h-5 animate-spin" />
+              <span>Analyzing...</span>
+            </>
+          ) : (
+            <>
+              <div className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isAIAssistEnabled ? 'bg-white' : 'bg-gray-300'}`}>
+                <span className={`inline-block h-4 w-4 transform rounded-full bg-gradient-to-br transition-transform ${isAIAssistEnabled ? 'translate-x-6 from-green-400 to-green-600' : 'translate-x-1 from-blue-400 to-blue-600'}`} />
+              </div>
+              <Sparkles className="h-5 w-5" />
+              <span>{isAIAssistEnabled ? 'AI Assist On' : 'AI Assist'}</span>
+            </>
+          )}
         </button>
       </div>
 
-      {/* Annotate Tab */}
-      {activeTab === 'annotate' && (
-        <>
+      {/* Annotate Section */}
+      <>
           <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2 md:gap-3">
             <div className="flex items-center gap-2">
               <div className="flex items-center gap-2 text-xs md:text-sm text-gray-600 bg-blue-50 px-3 py-1.5 rounded-lg border border-blue-100 whitespace-nowrap">
@@ -1141,83 +1109,7 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
               </div>
             )}
           </div>
-        </>
-      )}
-
-      {/* Findings Tab */}
-      {activeTab === 'findings' && (
-        <div className="flex flex-col md:flex-row gap-4 items-start">
-          {/* Left Side - Image Viewer */}
-          <div className="flex-1">
-            <div ref={containerRef} className="relative bg-gray-900 rounded-xl overflow-hidden shadow-2xl border-2 border-gray-700">
-              <canvas ref={canvasRef} className="w-full cursor-default" style={{ pointerEvents: 'none' }} />
-            </div>
-          </div>
-
-          {/* Right Side - Clinical Findings Form */}
-          <div className="w-full md:w-96 bg-gradient-to-b from-white to-blue-50 border-2 border-[#05998c] rounded-xl shadow-lg p-5 md:p-6 max-h-[600px] overflow-y-auto">
-            {/* Header */}
-            <div className="mb-5 pb-4 border-b-2 border-[#05998c]">
-              <div className="flex items-center gap-2 mb-1">
-                <div className="w-1 h-5 bg-[#05998c] rounded-full"></div>
-                <p className="text-sm uppercase tracking-wider font-bold text-[#05998c]">Clinical Findings</p>
-              </div>
-              <p className="text-xs text-gray-600 ml-3">Select findings for each category</p>
-            </div>
-
-            <div className="space-y-5 text-sm text-gray-800">
-              {/* Render all categories with their features */}
-              {findingsCategories.map(category => (
-                <div key={category.name} className="space-y-3 pb-4 border-b border-gray-300">
-                  {/* Category as Checkbox (multi-select) */}
-                  <label className="flex items-center gap-3 cursor-pointer hover:bg-blue-50 p-2 rounded transition-colors -ml-2">
-                    <input
-                      type="checkbox"
-                      checked={!!selectedCategories[category.name]}
-                      onChange={() => toggleCategory(category.name)}
-                      className="w-4 h-4 cursor-pointer accent-[#05998c] flex-shrink-0"
-                    />
-                    <div className="flex items-center gap-2 flex-1">
-                      <span className="inline-block w-2 h-2 bg-[#05998c] rounded-full flex-shrink-0"></span>
-                      <p className="font-bold text-gray-900">{category.name}</p>
-                    </div>
-                  </label>
-
-                  {/* Features as Checkboxes */}
-                  <div className="space-y-2 pl-8">
-                    {category.features.map(feature => (
-                      <label key={feature} className="flex items-center gap-3 text-gray-700 hover:text-[#05998c] cursor-pointer transition-colors">
-                        <input
-                          type="checkbox"
-                          checked={!!selectedFindings[feature]}
-                          onChange={() => toggleFinding(feature)}
-                          className="w-4 h-4 rounded border-[#05998c] cursor-pointer accent-[#05998c] flex-shrink-0"
-                        />
-                        <span className="text-sm">{feature}</span>
-                      </label>
-                    ))}
-                  </div>
-                </div>
-              ))}
-
-              {/* Additional Notes Section */}
-              <div className="space-y-2 pt-1">
-                <label className="flex items-center gap-2">
-                  <span className="inline-block w-2 h-2 bg-[#05998c] rounded-full flex-shrink-0"></span>
-                  <p className="font-bold text-gray-900">Additional Notes</p>
-                </label>
-                <textarea
-                  value={additionalNotes}
-                  onChange={e => setAdditionalNotes(e.target.value)}
-                  placeholder="Add any clinical observations..."
-                  className="w-full border-2 border-[#05998c] rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#05998c] focus:border-transparent bg-white/80"
-                  rows={3}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
+      </>
     </div>
   );
 });

src/components/AceticFindingsForm.tsx

@@ -0,0 +1,121 @@
+import { useState, useEffect } from 'react';
+import { sessionStore } from '../store/sessionStore';
+
+const findingsCategories = [
+    {
+        name: 'Thin Acetowhite Epithelium',
+        features: ['Dull white', 'Appears slowly', 'Fades quickly']
+    },
+    {
+        name: 'Borders',
+        features: ['Irregular', 'Geographic', 'Feathered edges', 'Sharp', 'Raised', 'Rolled edges', 'Inner border sign']
+    },
+    {
+        name: 'Vascular Pattern',
+        features: ['Fine punctation', 'Fine mosaic', 'Coarse punctation', 'Coarse mosaic']
+    },
+    {
+        name: 'Dense Acetowhite Epithelium',
+        features: ['Chalky white', 'Oyster white', 'Greyish white', 'Rapid onset', 'Persists']
+    },
+    {
+        name: 'Gland Openings',
+        features: ['Cuffed', 'Enlarged crypt openings']
+    },
+    {
+        name: 'Non-Specific Abnormal Findings',
+        features: ['Leukoplakia (keratosis)', 'Hyperkeratosis', 'Erosion']
+    }
+];
+
+export function AceticFindingsForm() {
+    // Restore previously saved findings from sessionStore
+    const savedAcetic = sessionStore.get().aceticFindings ?? {};
+
+    const [selectedCategories, setSelectedCategories] = useState<Record<string, boolean>>(
+        savedAcetic.selectedCategories ?? {}
+    );
+    const [selectedFindings, setSelectedFindings] = useState<Record<string, boolean>>(
+        savedAcetic.selectedFindings ?? {}
+    );
+    const [additionalNotes, setAdditionalNotes] = useState<string>(
+        savedAcetic.additionalNotes ?? ''
+    );
+
+    // Persist to sessionStore whenever selections change
+    useEffect(() => {
+        sessionStore.merge({
+            aceticFindings: { selectedCategories, selectedFindings, additionalNotes }
+        });
+    }, [selectedCategories, selectedFindings, additionalNotes]);
+
+
+    const toggleCategory = (name: string) =>
+        setSelectedCategories(prev => ({ ...prev, [name]: !prev[name] }));
+
+    const toggleFinding = (label: string) =>
+        setSelectedFindings(prev => ({ ...prev, [label]: !prev[label] }));
+
+    return (
+        <div className="bg-gradient-to-b from-white to-blue-50 border-2 border-[#05998c] rounded-xl shadow-lg p-5 md:p-6">
+            {/* Header */}
+            <div className="mb-6 pb-5 border-b-2 border-[#05998c]">
+                <div className="flex items-center gap-2 mb-2">
+                    <div className="w-1 h-6 bg-[#05998c] rounded-full" />
+                    <p className="text-lg uppercase tracking-wider font-bold text-[#05998c]">Clinical Findings</p>
+                </div>
+                <p className="text-sm text-gray-600 ml-3">Select findings observed during acetic acid examination</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6 text-base text-gray-800">
+                {findingsCategories.map((category, index) => (
+                    <div key={category.name} className={`space-y-3 ${index < findingsCategories.length - 1 && 'lg:border-r lg:border-gray-300 lg:pr-8'}`}>
+                        {/* Category header */}
+                        <label className="flex items-center gap-3 cursor-pointer hover:bg-blue-50 p-2 rounded transition-colors -ml-2">
+                            <input
+                                type="checkbox"
+                                checked={!!selectedCategories[category.name]}
+                                onChange={() => toggleCategory(category.name)}
+                                className="w-5 h-5 cursor-pointer accent-[#05998c] flex-shrink-0"
+                            />
+                            <div className="flex items-center gap-2 flex-1">
+                                <span className="inline-block w-2 h-2 bg-[#05998c] rounded-full flex-shrink-0" />
+                                <p className="font-bold text-gray-900 text-sm md:text-base">{category.name}</p>
+                            </div>
+                        </label>
+
+                        {/* Feature checkboxes */}
+                        <div className="space-y-2 pl-8">
+                            {category.features.map(feature => (
+                                <label key={feature} className="flex items-center gap-2 text-gray-700 hover:text-[#05998c] cursor-pointer transition-colors">
+                                    <input
+                                        type="checkbox"
+                                        checked={!!selectedFindings[feature]}
+                                        onChange={() => toggleFinding(feature)}
+                                        className="w-4 h-4 rounded border-[#05998c] cursor-pointer accent-[#05998c] flex-shrink-0"
+                                    />
+                                    <span className="text-sm">{feature}</span>
+                                </label>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Additional Notes */}
+            <div className="mt-6 pt-5 border-t border-gray-300">
+                <label className="flex items-center gap-2 mb-3">
+                    <span className="inline-block w-2 h-2 bg-[#05998c] rounded-full flex-shrink-0" />
+                    <p className="font-bold text-gray-900 text-base">Additional Notes</p>
+                </label>
+                <textarea
+                    value={additionalNotes}
+                    onChange={e => setAdditionalNotes(e.target.value)}
+                    placeholder="Add any clinical observations from the acetic acid examination..."
+                    className="w-full border-2 border-[#05998c] rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#05998c] focus:border-transparent bg-white/80 resize-none"
+                    rows={4}
+                />
+            </div>
+        </div>
+    );
+}

src/components/ChatBot.tsx

@@ -1,72 +1,144 @@
-import React, { useState } from 'react';
-import { MessageCircle, X, Send, Bot } from 'lucide-react';
+import React, { useState, useRef, useEffect } from 'react';
+import { MessageCircle, X, Send, Bot, Loader2, AlertCircle } from 'lucide-react';
+import { CHAT_SYSTEM_PROMPT } from '../config/geminiConfig';
 
 interface Message {
   id: string;
   text: string;
-  sender: 'user' | 'bot';
+  sender: 'user' | 'bot' | 'error';
   timestamp: Date;
 }
 
+// Shape of a single turn sent to Gemini's REST API
+interface GeminiPart { text: string; }
+interface GeminiContent { role: 'user' | 'model'; parts: GeminiPart[]; }
+
 export function ChatBot() {
   const [isOpen, setIsOpen] = useState(false);
   const [messages, setMessages] = useState<Message[]>([
     {
       id: '1',
-      text: 'Hello! I\'m your AI assistant for colposcopy examinations. How can I help you today?',
+      text: "Hello! I'm Pathora AI — your colposcopy expert assistant. Ask me anything about examination techniques, findings interpretation, or management guidelines.",
       sender: 'bot',
-      timestamp: new Date()
-    }
+      timestamp: new Date(),
+    },
   ]);
   const [inputMessage, setInputMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when a new message arrives
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, isLoading]);
+
+  // ── Call Gemini REST API ─────────────────────────────────────────────────
+  const callGemini = async (history: Message[], userText: string): Promise<string> => {
+    const apiKey = import.meta.env.VITE_GEMINI_API_KEY as string | undefined;
+    if (!apiKey) {
+      throw new Error('API key missing — add VITE_GEMINI_API_KEY to your .env file and restart the dev server.');
+    }
+
+    const baseUrl = 'https://generativelanguage.googleapis.com/v1beta';
+
+    // Auto-discover the best available model
+    const listRes = await fetch(`${baseUrl}/models?key=${apiKey}`);
+    if (!listRes.ok) {
+      const e = await listRes.json();
+      throw new Error(e?.error?.message || `Model list failed: HTTP ${listRes.status}`);
+    }
+    const allModels: any[] = (await listRes.json()).models || [];
+    const model =
+      allModels.find(m => m.name?.includes('flash') && m.supportedGenerationMethods?.includes('generateContent')) ||
+      allModels.find(m => m.supportedGenerationMethods?.includes('generateContent'));
+    if (!model) throw new Error('No generateContent-capable model available for this API key.');
+
+    const modelId = (model.name as string).replace(/^models\//, '');
+
+    // Build conversation history for context (bot turns labelled as 'model')
+    const conversationHistory: GeminiContent[] = history
+      .filter(m => m.sender === 'user' || m.sender === 'bot')
+      .map(m => ({
+        role: m.sender === 'user' ? 'user' : 'model',
+        parts: [{ text: m.text }],
+      }));
+
+    // Append the new user turn
+    conversationHistory.push({ role: 'user', parts: [{ text: userText }] });
+
+    const endpoint = `${baseUrl}/models/${modelId}:generateContent?key=${apiKey}`;
+    const body = {
+      system_instruction: { parts: [{ text: CHAT_SYSTEM_PROMPT }] },
+      contents: conversationHistory,
+      generationConfig: { temperature: 0.4, maxOutputTokens: 2048 },
+    };
 
-  const dummyResponses = [
-    'I can help you with colposcopy examination procedures and best practices.',
-    'For acetic acid application, wait 1-3 minutes before capturing images.',
-    'Lugol\'s iodine staining helps identify abnormal cervical tissue.',
-    'Green filter enhances vascular patterns in cervical images.',
-    'Biopsy should be taken from the most suspicious areas identified during examination.',
-    'Regular follow-up is important for patients with abnormal findings.',
-    'I can assist with image annotation and lesion identification.',
-    'Would you like me to explain any specific examination technique?'
-  ];
-
-  const handleSendMessage = () => {
-    if (!inputMessage.trim()) return;
-
-    const userMessage: Message = {
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    if (!res.ok) {
+      const errData = await res.json();
+      throw new Error(errData?.error?.message || `HTTP ${res.status}`);
+    }
+
+    const data = await res.json();
+    const text = (data.candidates?.[0]?.content?.parts?.[0]?.text ?? '').trim();
+    if (!text) throw new Error('Gemini returned an empty response.');
+    return text;
+  };
+
+  // ── Send handler ─────────────────────────────────────────────────────────
+  const handleSendMessage = async () => {
+    const trimmed = inputMessage.trim();
+    if (!trimmed || isLoading) return;
+
+    const userMsg: Message = {
       id: Date.now().toString(),
-      text: inputMessage,
+      text: trimmed,
       sender: 'user',
-      timestamp: new Date()
+      timestamp: new Date(),
     };
 
-    setMessages(prev => [...prev, userMessage]);
+    setMessages(prev => [...prev, userMsg]);
     setInputMessage('');
+    setIsLoading(true);
 
-    // Simulate bot response after a short delay
-    setTimeout(() => {
-      const randomResponse = dummyResponses[Math.floor(Math.random() * dummyResponses.length)];
-      const botMessage: Message = {
-        id: (Date.now() + 1).toString(),
-        text: randomResponse,
-        sender: 'bot',
-        timestamp: new Date()
-      };
-      setMessages(prev => [...prev, botMessage]);
-    }, 1000);
+    try {
+      // Pass current messages (before adding userMsg) as history for context
+      const reply = await callGemini(messages, trimmed);
+      setMessages(prev => [
+        ...prev,
+        { id: (Date.now() + 1).toString(), text: reply, sender: 'bot', timestamp: new Date() },
+      ]);
+    } catch (err: any) {
+      setMessages(prev => [
+        ...prev,
+        {
+          id: (Date.now() + 1).toString(),
+          text: err?.message || 'Something went wrong. Please try again.',
+          sender: 'error',
+          timestamp: new Date(),
+        },
+      ]);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
-  const handleKeyPress = (e: React.KeyboardEvent) => {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSendMessage();
     }
   };
 
+  // ── Render ────────────────────────────────────────────────────────────────
   return (
     <>
-      {/* Chat Button */}
+      {/* Toggle button */}
       <button
         onClick={() => setIsOpen(!isOpen)}
         className="fixed bottom-6 right-6 bg-[#05998c] hover:bg-[#047569] text-white p-4 rounded-full shadow-lg transition-all duration-300 hover:scale-110 z-50"
@@ -75,15 +147,15 @@ export function ChatBot() {
         {isOpen ? <X className="w-6 h-6" /> : <MessageCircle className="w-6 h-6" />}
       </button>
 
-      {/* Chat Window */}
+      {/* Chat window */}
       {isOpen && (
-        <div className="fixed bottom-20 right-6 w-80 h-96 bg-white rounded-lg shadow-2xl border border-gray-200 z-40 flex flex-col">
+        <div className="fixed bottom-20 right-6 w-80 h-[480px] bg-white rounded-xl shadow-2xl border border-gray-200 z-40 flex flex-col overflow-hidden">
           {/* Header */}
-          <div className="bg-[#05998c] text-white p-4 rounded-t-lg flex items-center gap-3">
+          <div className="bg-[#05998c] text-white p-4 flex items-center gap-3 shrink-0">
             <Bot className="w-6 h-6" />
             <div>
-              <h3 className="font-semibold">AI Assistant</h3>
-              <p className="text-sm opacity-90">Colposcopy Expert</p>
+              <h3 className="font-semibold leading-tight">Pathora AI</h3>
+              <p className="text-xs opacity-80">Colposcopy Expert Assistant</p>
             </div>
           </div>
 
@@ -94,37 +166,56 @@ export function ChatBot() {
                 key={message.id}
                 className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`}
               >
-                <div
-                  className={`max-w-[80%] p-3 rounded-lg text-sm ${
-                    message.sender === 'user'
-                      ? 'bg-[#05998c] text-white'
-                      : 'bg-gray-100 text-gray-800'
-                  }`}
-                >
-                  {message.text}
-                </div>
+                {message.sender === 'error' ? (
+                  <div className="flex items-start gap-2 max-w-[85%] bg-red-50 border border-red-200 text-red-700 rounded-lg p-3 text-xs">
+                    <AlertCircle className="w-4 h-4 shrink-0 mt-0.5" />
+                    <span>{message.text}</span>
+                  </div>
+                ) : (
+                  <div
+                    className={`max-w-[85%] p-3 rounded-xl text-sm whitespace-pre-wrap leading-relaxed ${message.sender === 'user'
+                      ? 'bg-[#05998c] text-white rounded-br-sm'
+                      : 'bg-gray-100 text-gray-800 rounded-bl-sm'
+                      }`}
+                  >
+                    {message.text}
+                  </div>
+                )}
               </div>
             ))}
+
+            {/* Typing indicator */}
+            {isLoading && (
+              <div className="flex justify-start">
+                <div className="bg-gray-100 rounded-xl rounded-bl-sm p-3 flex items-center gap-2 text-gray-500 text-sm">
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  <span>Pathora AI is thinking…</span>
+                </div>
+              </div>
+            )}
+
+            <div ref={messagesEndRef} />
           </div>
 
           {/* Input */}
-          <div className="p-4 border-t border-gray-200">
+          <div className="p-3 border-t border-gray-200 shrink-0">
             <div className="flex gap-2">
               <input
                 type="text"
                 value={inputMessage}
                 onChange={(e) => setInputMessage(e.target.value)}
-                onKeyPress={handleKeyPress}
-                placeholder="Ask me anything about colposcopy..."
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#05998c] focus:border-transparent text-sm"
+                onKeyDown={handleKeyDown}
+                disabled={isLoading}
+                placeholder="Ask about colposcopy findings…"
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#05998c] focus:border-transparent text-sm outline-none disabled:opacity-60"
               />
               <button
                 onClick={handleSendMessage}
-                disabled={!inputMessage.trim()}
-                className="bg-[#05998c] hover:bg-[#047569] disabled:opacity-50 disabled:cursor-not-allowed text-white p-2 rounded-lg transition-colors"
+                disabled={!inputMessage.trim() || isLoading}
+                className="bg-[#05998c] hover:bg-[#047569] disabled:opacity-50 disabled:cursor-not-allowed text-white p-2 rounded-lg transition-colors shrink-0"
                 aria-label="Send message"
               >
-                <Send className="w-4 h-4" />
+                {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
               </button>
             </div>
           </div>

src/components/ImageAnnotator.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useImperativeHandle, forwardRef } from 'react';
-import { Wrench, Trash2, Circle as CircleIcon, Hexagon, Square as SquareIcon, ChevronDown, ChevronUp, Zap, Loader } from 'lucide-react';
+import { Wrench, Trash2, Circle as CircleIcon, Hexagon, Square as SquareIcon, ChevronDown, ChevronUp, Sparkles, Loader } from 'lucide-react';
 
 type ShapeType = 'rect' | 'circle' | 'polygon';
 
@@ -40,7 +40,7 @@ export interface ImageAnnotatorHandle {
   waitForImageReady: () => Promise<void>;
 }
 
-const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorProps>(({ imageUrl, imageUrls, onAnnotationsChange, onAIAssist, isAILoading = false }, ref) => {
+const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorProps>(({ imageUrl, imageUrls, onAnnotationsChange, onAIAssist, isAILoading: externalAILoading = false }, ref) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const imageReadyResolveRef = useRef<(() => void) | null>(null);
@@ -60,6 +60,11 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
   const [selectedImageIndex, setSelectedImageIndex] = useState(0);
   const [isAnnotationsOpen, setIsAnnotationsOpen] = useState(true);
   const [isLabelDropdownOpen, setIsLabelDropdownOpen] = useState(false);
+  const [isAIAssistEnabled, setIsAIAssistEnabled] = useState(false);
+  const [internalAILoading, setInternalAILoading] = useState(false);
+  
+  // Use internal loading state or external prop
+  const isAILoading = externalAILoading || internalAILoading;
 
   // Edit state for annotation list
   const [editingId, setEditingId] = useState<string | null>(null);
@@ -67,7 +72,7 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
   const [editColor, setEditColor] = useState('#05998c');
   
   // Annotation metadata state
-  const [annotationIdentified, setAnnotationIdentified] = useState<Record<string, boolean>>({});
+  const [_annotationIdentified, setAnnotationIdentified] = useState<Record<string, boolean>>({});
   const [annotationAccepted, setAnnotationAccepted] = useState<Record<string, boolean>>({});
   // Predefined label options
   const labelOptions = [
@@ -361,8 +366,11 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
     ctx.setLineDash([]);
     if (annotation.type === 'rect') {
       ctx.strokeRect(annotation.x * scaleX, annotation.y * scaleY, annotation.width * scaleX, annotation.height * scaleY);
-      ctx.fillStyle = annotation.color + '20';
-      ctx.fillRect(annotation.x * scaleX, annotation.y * scaleY, annotation.width * scaleX, annotation.height * scaleY);
+      // Only fill for manual annotations, not for AI-detected bounding boxes
+      if (annotation.source !== 'ai') {
+        ctx.fillStyle = annotation.color + '20';
+        ctx.fillRect(annotation.x * scaleX, annotation.y * scaleY, annotation.width * scaleX, annotation.height * scaleY);
+      }
     } else if (annotation.type === 'circle') {
       const cx = (annotation.x + annotation.width / 2) * scaleX;
       const cy = (annotation.y + annotation.height / 2) * scaleY;
@@ -370,8 +378,11 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
       ctx.beginPath();
       ctx.arc(cx, cy, r, 0, Math.PI * 2);
       ctx.stroke();
-      ctx.fillStyle = annotation.color + '20';
-      ctx.fill();
+      // Only fill for manual annotations, not for AI-detected shapes
+      if (annotation.source !== 'ai') {
+        ctx.fillStyle = annotation.color + '20';
+        ctx.fill();
+      }
     } else if (annotation.type === 'polygon' && annotation.points && Array.isArray(annotation.points) && annotation.points.length > 0) {
       ctx.beginPath();
       annotation.points.forEach((p, i) => {
@@ -383,8 +394,11 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
       });
       ctx.closePath();
       ctx.stroke();
-      ctx.fillStyle = annotation.color + '20';
-      ctx.fill();
+      // Only fill for manual annotations, not for AI-detected shapes
+      if (annotation.source !== 'ai') {
+        ctx.fillStyle = annotation.color + '20';
+        ctx.fill();
+      }
     }
   };
 
@@ -400,6 +414,25 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
   };
   const deleteAnnotation = (id: string) => setAnnotations(prev => prev.filter(a => a.id !== id));
 
+  const handleAIAssistToggle = async () => {
+    if (isAILoading) return;
+    if (isAIAssistEnabled) {
+      setIsAIAssistEnabled(false);
+      return;
+    }
+    setIsAIAssistEnabled(true);
+    if (onAIAssist) {
+      setInternalAILoading(true);
+      try {
+        await onAIAssist();
+      } catch (error) {
+        console.error('AI Assist error:', error);
+      } finally {
+        setInternalAILoading(false);
+      }
+    }
+  };
+
   const getShapeTypeName = (type: ShapeType): string => {
     const typeMap: Record<ShapeType, string> = {
       'rect': 'Rectangle',
@@ -460,63 +493,81 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
           </div>
         </div>
 
-        <div className="flex flex-col md:flex-row md:items-center gap-2">
-          <div className="relative">
-            <input 
-              aria-label="Annotation label" 
-              placeholder="Search or select label" 
-              value={labelInput} 
-              onChange={e => setLabelInput(e.target.value)}
-              onFocus={() => setIsLabelDropdownOpen(true)}
-              onBlur={() => setTimeout(() => setIsLabelDropdownOpen(false), 200)}
-              className="px-3 py-1 border rounded text-xs md:text-sm w-48" 
-            />
-            {isLabelDropdownOpen && filteredLabels.length > 0 && (
-              <div className="absolute top-full left-0 mt-1 w-48 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto z-50">
-                {filteredLabels.map((label, idx) => (
-                  <button
-                    key={idx}
-                    type="button"
-                    onMouseDown={(e) => {
-                      e.preventDefault();
-                      setLabelInput(label);
-                      setIsLabelDropdownOpen(false);
-                    }}
-                    className="w-full text-left px-3 py-2 text-xs md:text-sm hover:bg-gray-100 transition-colors"
-                  >
-                    {label}
-                  </button>
-                ))}
-              </div>
+        <div className="flex flex-col gap-2">
+          {/* First row: AI Assist on right side */}
+          <div className="flex justify-end">
+            {onAIAssist && (
+              <button 
+                onClick={handleAIAssistToggle} 
+                disabled={isAILoading} 
+                className={`px-4 md:px-6 py-2 md:py-3 text-sm md:text-base font-bold text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2 ${
+                  isAIAssistEnabled
+                    ? 'bg-gradient-to-r from-green-500 to-green-600 border border-green-600 hover:from-green-600 hover:to-green-700'
+                    : 'bg-gradient-to-r from-blue-600 to-blue-700 border border-blue-700 hover:from-blue-700 hover:to-blue-800'
+                }`}
+                title={isAIAssistEnabled ? 'AI Assist is ON' : 'Run AI model to automatically detect annotations'}
+              >
+                {isAILoading ? (
+                  <>
+                    <div className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isAIAssistEnabled ? 'bg-white' : 'bg-gray-300'}`}>
+                      <span className={`inline-block h-4 w-4 transform rounded-full bg-gradient-to-br transition-transform ${isAIAssistEnabled ? 'translate-x-6 from-green-400 to-green-600' : 'translate-x-1 from-blue-400 to-blue-600'}`} />
+                    </div>
+                    <Loader className="w-5 h-5 animate-spin" />
+                    <span>Analyzing...</span>
+                  </>
+                ) : (
+                  <>
+                    <div className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isAIAssistEnabled ? 'bg-white' : 'bg-gray-300'}`}>
+                      <span className={`inline-block h-4 w-4 transform rounded-full bg-gradient-to-br transition-transform ${isAIAssistEnabled ? 'translate-x-6 from-green-400 to-green-600' : 'translate-x-1 from-blue-400 to-blue-600'}`} />
+                    </div>
+                    <Sparkles className="h-5 w-5" />
+                    <span>{isAIAssistEnabled ? 'AI Assist On' : 'AI Assist'}</span>
+                  </>
+                )}
+              </button>
             )}
           </div>
-          <input aria-label="Annotation color" type="color" value={color} onChange={e => setColor(e.target.value)} className="w-10 h-8 p-0 border rounded" />
-          {onAIAssist && (
-            <button 
-              onClick={onAIAssist} 
-              disabled={isAILoading} 
-              className="px-4 md:px-6 py-2 md:py-3 text-sm md:text-base font-bold text-white bg-gradient-to-r from-blue-600 to-blue-700 border border-blue-700 rounded-lg hover:from-blue-700 hover:to-blue-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2"
-              title="Run AI model to automatically detect annotations"
-            >
-              {isAILoading ? (
-                <>
-                  <Loader className="w-5 h-5 animate-spin" />
-                  <span>Analyzing...</span>
-                </>
-              ) : (
-                <>
-                  <Zap className="w-5 h-5" />
-                  <span>AI Assist</span>
-                </>
+
+          {/* Second row: Label, Color, Undo on left, Clear All on right */}
+          <div className="flex flex-col md:flex-row md:items-center gap-2">
+            <div className="relative">
+              <input 
+                aria-label="Annotation label" 
+                placeholder="Search or select label" 
+                value={labelInput} 
+                onChange={e => setLabelInput(e.target.value)}
+                onFocus={() => setIsLabelDropdownOpen(true)}
+                onBlur={() => setTimeout(() => setIsLabelDropdownOpen(false), 200)}
+                className="px-3 py-1 border rounded text-xs md:text-sm w-48" 
+              />
+              {isLabelDropdownOpen && filteredLabels.length > 0 && (
+                <div className="absolute top-full left-0 mt-1 w-48 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto z-50">
+                  {filteredLabels.map((label, idx) => (
+                    <button
+                      key={idx}
+                      type="button"
+                      onMouseDown={(e) => {
+                        e.preventDefault();
+                        setLabelInput(label);
+                        setIsLabelDropdownOpen(false);
+                      }}
+                      className="w-full text-left px-3 py-2 text-xs md:text-sm hover:bg-gray-100 transition-colors"
+                    >
+                      {label}
+                    </button>
+                  ))}
+                </div>
               )}
+            </div>
+            <input aria-label="Annotation color" type="color" value={color} onChange={e => setColor(e.target.value)} className="w-10 h-8 p-0 border rounded" />
+            <button onClick={deleteLastAnnotation} disabled={annotations.length === 0} className="px-3 md:px-4 py-1 md:py-2 text-xs md:text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-1 md:gap-2">
+              <Trash2 className="w-4 h-4" />
+              <span className="hidden md:inline">Undo</span>
+              <span className="inline md:hidden">Undo</span>
             </button>
-          )}
-          <button onClick={deleteLastAnnotation} disabled={annotations.length === 0} className="px-3 md:px-4 py-1 md:py-2 text-xs md:text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-1 md:gap-2">
-            <Trash2 className="w-4 h-4" />
-            <span className="hidden md:inline">Undo</span>
-            <span className="inline md:hidden">Undo</span>
-          </button>
-          <button onClick={clearAnnotations} disabled={annotations.length === 0} className="px-3 md:px-4 py-1 md:py-2 text-xs md:text-sm font-medium text-red-600 bg-white border border-red-200 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">Clear All</button>
+            <div className="flex-1"></div>
+            <button onClick={clearAnnotations} disabled={annotations.length === 0} className="px-3 md:px-4 py-1 md:py-2 text-xs md:text-sm font-medium text-red-600 bg-white border border-red-200 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">Clear All</button>
+          </div>
         </div>
       </div>
 

src/components/ImagingObservations.tsx

@@ -1,12 +1,16 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { CheckSquare, FileText } from 'lucide-react';
+import { sessionStore } from '../store/sessionStore';
+
 interface ImagingObservationsProps {
   onObservationsChange?: (observations: any) => void;
   layout?: 'vertical' | 'horizontal';
+  stepId?: 'native' | 'acetowhite' | 'greenFilter' | 'lugol' | 'biopsyMarking';
 }
 export function ImagingObservations({
   onObservationsChange,
-  layout = 'vertical'
+  layout = 'vertical',
+  stepId
 }: ImagingObservationsProps) {
   const [observations, setObservations] = useState({
     obviousGrowths: false,
@@ -73,6 +77,38 @@ export function ImagingObservations({
       onObservationsChange(updated);
     }
   };
+
+  // Load previously saved findings for this step from sessionStore on mount
+  useEffect(() => {
+    if (!stepId) return;
+    const session = sessionStore.get();
+    if (session.stepFindings?.[stepId]) {
+      setObservations(prev => ({
+        ...prev,
+        ...session.stepFindings[stepId]
+      }));
+      console.log(`[ImagingObservations] Loaded saved findings for step: ${stepId}`, session.stepFindings[stepId]);
+    }
+  }, [stepId]);
+
+  // Save observations to sessionStore for this step on every change with debouncing
+  useEffect(() => {
+    if (!stepId) return;
+    
+    // Debounce: save after 500ms of inactivity
+    const timer = setTimeout(() => {
+      const session = sessionStore.get();
+      const newStepFindings = {
+        ...(session.stepFindings || {}),
+        [stepId]: observations
+      };
+      sessionStore.merge({ stepFindings: newStepFindings });
+      console.log(`[ImagingObservations] Saved observations for step: ${stepId}`, observations);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [stepId, JSON.stringify(observations)]);
+
   return <div className={`bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden ${layout === 'vertical' ? 'h-full flex flex-col' : ''}`}>
       <div className="bg-teal-50/50 p-3 md:p-4 border-b border-teal-100 flex items-center gap-2 md:gap-3">
         <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center flex-shrink-0">

src/components/PatientHistoryForm.tsx

@@ -1,20 +1,30 @@
 import React, { useState } from 'react';
 import { User, Calendar, Stethoscope, AlertTriangle, Save, ChevronRight, ArrowLeft } from 'lucide-react';
+import { sessionStore } from '../store/sessionStore';
+import { savePatientRecord } from '../store/patientIdStore';
+
 interface PatientHistoryFormProps {
   onContinue: () => void;
   onBack: () => void;
   patientID?: string | undefined;
+  autoGeneratedPatientId?: string | undefined;
 }
 export function PatientHistoryForm({
   onContinue,
   onBack,
-  patientID
+  patientID,
+  autoGeneratedPatientId
 }: PatientHistoryFormProps) {
   const [formData, setFormData] = useState({
     // Patient Profile
+    name: '',
     age: '',
     bloodGroup: '',
     parity: '',
+    pregnancyStatus: '',
+    gestationalAgeWeeks: '',
+    monthsSinceLastDelivery: '',
+    monthsSinceAbortion: '',
     menstrualStatus: '',
     sexualHistory: '',
     hpvStatus: '',
@@ -45,14 +55,30 @@ export function PatientHistoryForm({
     riskFactorsNotes: ''
   });
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
-    const {
-      name,
-      value
-    } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value
-    }));
+    const { name, value, type } = e.target as any;
+    
+    // Handle checkboxes separately
+    if (type === 'checkbox') {
+      const checked = (e.target as HTMLInputElement).checked;
+      setFormData(prev => ({
+        ...prev,
+        [name]: checked
+      }));
+    } else if (name === 'pregnancyStatus') {
+      setFormData(prev => ({
+        ...prev,
+        pregnancyStatus: value,
+        gestationalAgeWeeks: value === 'Pregnant' ? prev.gestationalAgeWeeks : '',
+        monthsSinceLastDelivery: value === 'Postpartum' ? prev.monthsSinceLastDelivery : '',
+        monthsSinceAbortion: value === 'Post-abortion' ? prev.monthsSinceAbortion : ''
+      }));
+    } else {
+      // Handle text inputs, textareas, and selects
+      setFormData(prev => ({
+        ...prev,
+        [name]: value
+      }));
+    }
   };
   const handleNestedCheckboxChange = (category: 'pastProcedures' | 'immunosuppression', field: string) => {
     if (category === 'pastProcedures') {
@@ -77,11 +103,45 @@ export function PatientHistoryForm({
   };
   const handleSave = () => {
     console.log('Saving patient history:', formData);
+    // Save patient record if auto-generated ID is available
+    if (autoGeneratedPatientId && formData.name) {
+      const examDate = new Date().toISOString().split('T')[0];
+      savePatientRecord({
+        id: autoGeneratedPatientId,
+        name: formData.name,
+        examDate: examDate
+      });
+      // Also update sessionStore with patient info
+      sessionStore.merge({
+        patientInfo: {
+          id: autoGeneratedPatientId,
+          name: formData.name,
+          examDate: examDate
+        }
+      });
+    }
   };
   const handleSaveAndContinue = () => {
     handleSave();
     onContinue();
   };
+
+  // Load previously saved patient history from sessionStore on mount
+  React.useEffect(() => {
+    const session = sessionStore.get();
+    if (session.patientHistory) {
+      setFormData(prev => ({
+        ...prev,
+        ...session.patientHistory
+      }));
+    }
+  }, []);
+
+  // Save formData to sessionStore on every change
+  React.useEffect(() => {
+    sessionStore.merge({ patientHistory: formData as any });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(formData)]);
   return <div className="w-full max-w-8xl mx-auto p-4 md:p-6 lg:p-10">
       <div className="mb-4 md:mb-6 lg:mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-0">
         <h2 className="text-xl md:text-2xl lg:text-3xl font-bold text-[#0A2540]">
@@ -90,7 +150,7 @@ export function PatientHistoryForm({
         <div className="flex items-center gap-2 text-xs md:text-sm text-gray-500 bg-white px-3 md:px-4 py-2 rounded-lg shadow-sm whitespace-nowrap">
           <span>Patient ID:</span>
           <span className="font-mono font-bold text-[#0A2540]">
-            {patientID ?? 'New - unsaved'}
+            {autoGeneratedPatientId || patientID || 'New - unsaved'}
           </span>
         </div>
       </div>
@@ -103,7 +163,7 @@ export function PatientHistoryForm({
               <User className="w-4 h-4 md:w-5 md:h-5" />
             </div>
             <h3 className="font-bold text-sm md:text-base text-[#0A2540]">Patient Name</h3>
-            <input type="text" name="name" className="w-full px-3 md:px-4 py-2 md:py-3 text-sm md:text-base bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#05998c] focus:border-transparent outline-none transition-all" placeholder="Full name" />
+            <input type="text" name="name" value={formData.name} onChange={handleInputChange} className="w-full px-3 md:px-4 py-2 md:py-3 text-sm md:text-base bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#05998c] focus:border-transparent outline-none transition-all" placeholder="Full name" />
           </div>
 
           <div className="p-4 md:p-6 lg:p-8 space-y-4 md:space-y-5 lg:space-y-6 flex-1">
@@ -141,47 +201,78 @@ export function PatientHistoryForm({
             </div>
 
             <div>
-              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">
-                Menstrual Status
-              </label>
+              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">Pregnancy / Recent Pregnancy Status</label>
               <div className="space-y-2">
-                {['Pre-menopausal', 'Post-menopausal', 'Pregnant'].map(status => <label key={status} className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer border border-transparent hover:border-gray-100 transition-all">
-                      <input type="radio" name="menstrualStatus" value={status} className="w-4 h-4 text-[#4ECDC4] focus:ring-[#4ECDC4]" />
-                      <span className="text-base text-gray-700">{status}</span>
-                    </label>)}
+                {['Pregnant', 'Not pregnant', 'Postpartum', 'Post-abortion', 'Unknown'].map(status => (
+                  <label key={status} className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer border border-transparent hover:border-gray-100 transition-all">
+                    <input type="radio" name="pregnancyStatus" value={status} checked={formData.pregnancyStatus === status} onChange={handleInputChange} className="w-4 h-4 text-[#4ECDC4] focus:ring-[#4ECDC4]" />
+                    <span className="text-base text-gray-700">{status}</span>
+                  </label>
+                ))}
               </div>
-            </div>
 
-            <div>
-              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">
-                HPV Status
-              </label>
-              <div className="flex flex-wrap gap-2">
-                {['Positive', 'Negative', 'Unknown'].map(status => <label key={status} className="flex-1 min-w-[80px] text-center cursor-pointer">
-                    <input type="radio" name="hpvStatus" value={status} className="peer sr-only" />
-                    <div className="px-3 py-1.5 rounded-md text-sm font-medium bg-gray-50 text-gray-600 border border-gray-200 peer-checked:bg-[#0A2540] peer-checked:text-white peer-checked:border-[#0A2540] transition-all">
-                      {status}
-                    </div>
-                  </label>)}
-              </div>
+              {formData.pregnancyStatus === 'Pregnant' && (
+                <div className="mt-3">
+                  <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">Gestational age (weeks)</label>
+                  <input
+                    type="number"
+                    name="gestationalAgeWeeks"
+                    value={formData.gestationalAgeWeeks}
+                    onChange={handleInputChange}
+                    className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all text-sm"
+                    placeholder="Enter weeks"
+                  />
+                </div>
+              )}
+
+              {formData.pregnancyStatus === 'Postpartum' && (
+                <div className="mt-3">
+                  <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">Months since last delivery</label>
+                  <input
+                    type="number"
+                    name="monthsSinceLastDelivery"
+                    value={formData.monthsSinceLastDelivery}
+                    onChange={handleInputChange}
+                    className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all text-sm"
+                    placeholder="Enter months"
+                  />
+                </div>
+              )}
+
+              {formData.pregnancyStatus === 'Post-abortion' && (
+                <div className="mt-3">
+                  <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">Months since abortion</label>
+                  <input
+                    type="number"
+                    name="monthsSinceAbortion"
+                    value={formData.monthsSinceAbortion}
+                    onChange={handleInputChange}
+                    className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all text-sm"
+                    placeholder="Enter months"
+                  />
+                </div>
+              )}
             </div>
 
             <div>
-              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">
-                HPV Vaccination
-              </label>
-              <div className="flex gap-4">
-                {['Yes', 'No', 'Unknown'].map(opt => <label key={opt} className="flex items-center gap-2 cursor-pointer">
-                    <input type="radio" name="hpvVaccination" value={opt} className="w-4 h-4 text-[#4ECDC4] focus:ring-[#4ECDC4]" />
-                    <span className="text-base text-gray-700">{opt}</span>
-                  </label>)}
-              </div>
+              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">Menstrual Status</label>
+              <select
+                name="menstrualStatus"
+                value={formData.menstrualStatus}
+                onChange={handleInputChange}
+                className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all text-sm"
+              >
+                <option value="">Select</option>
+                <option value="Premenarchal">Premenarchal</option>
+                <option value="Reproductive age">Reproductive age</option>
+                <option value="Currently menstruating">Currently menstruating</option>
+                <option value="Perimenopausal">Perimenopausal</option>
+                <option value="Postmenopausal">Postmenopausal</option>
+              </select>
             </div>
 
             <div className="pt-4 border-t border-gray-100">
-              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">
-                Additional Notes
-              </label>
+              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">Additional Notes</label>
               <textarea name="patientProfileNotes" value={formData.patientProfileNotes} onChange={handleInputChange} rows={3} className="w-full px-4 py-3 text-base bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all resize-none" placeholder="Add any additional notes about patient profile..." />
             </div>
           </div>
@@ -197,9 +288,52 @@ export function PatientHistoryForm({
           </div>
 
           <div className="p-8 space-y-4 flex-1">
+            <div>
+              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">Sexual History</label>
+              <input
+                type="text"
+                name="sexualHistory"
+                value={formData.sexualHistory}
+                onChange={handleInputChange}
+                className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all text-sm"
+                placeholder="e.g. Sexually active, Duration of relationship, etc."
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">HPV Status</label>
+              <div className="flex flex-wrap gap-2">
+                {['Positive', 'Negative', 'Unknown'].map(status => (
+                  <label key={status} className="flex-1 min-w-[80px] text-center cursor-pointer">
+                    <input type="radio" name="hpvStatus" value={status} checked={formData.hpvStatus === status} onChange={handleInputChange} className="peer sr-only" />
+                    <div className="px-3 py-1.5 rounded-md text-sm font-medium bg-gray-50 text-gray-600 border border-gray-200 peer-checked:bg-[#0A2540] peer-checked:text-white peer-checked:border-[#0A2540] transition-all">
+                      {status}
+                    </div>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-semibold text-gray-500 uppercase mb-2">HPV Vaccination</label>
+              <div className="flex gap-4">
+                {['Yes', 'No', 'Unknown'].map(opt => (
+                  <label key={opt} className="flex items-center gap-2 cursor-pointer">
+                    <input type="radio" name="hpvVaccination" value={opt} checked={formData.hpvVaccination === opt} onChange={handleInputChange} className="w-4 h-4 text-[#4ECDC4] focus:ring-[#4ECDC4]" />
+                    <span className="text-base text-gray-700">{opt}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+
             <label className="flex items-start gap-3 p-4 rounded-lg border border-gray-100 hover:border-[#4ECDC4]/50 hover:bg-teal-50/10 cursor-pointer transition-all">
               <div className="flex items-center h-5">
-                <input type="checkbox" name="postCoitalBleeding" className="w-5 h-5 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
+                <input 
+                  type="checkbox" 
+                  name="postCoitalBleeding" 
+                  checked={formData.postCoitalBleeding}
+                  onChange={handleInputChange}
+                  className="w-5 h-5 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
               </div>
               <div>
                 <span className="block text-base font-medium text-gray-900">
@@ -213,7 +347,12 @@ export function PatientHistoryForm({
 
             <label className="flex items-start gap-3 p-4 rounded-lg border border-gray-100 hover:border-[#4ECDC4]/50 hover:bg-teal-50/10 cursor-pointer transition-all">
               <div className="flex items-center h-5">
-                <input type="checkbox" name="interMenstrualBleeding" className="w-5 h-5 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
+                <input 
+                  type="checkbox" 
+                  name="interMenstrualBleeding" 
+                  checked={formData.interMenstrualBleeding}
+                  onChange={handleInputChange}
+                  className="w-5 h-5 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
               </div>
               <div>
                 <span className="block text-base font-medium text-gray-900">
@@ -227,7 +366,12 @@ export function PatientHistoryForm({
 
             <label className="flex items-start gap-3 p-3 rounded-lg border border-gray-100 hover:border-[#4ECDC4]/50 hover:bg-teal-50/10 cursor-pointer transition-all">
               <div className="flex items-center h-5">
-                <input type="checkbox" name="persistentDischarge" className="w-5 h-5 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
+                <input 
+                  type="checkbox" 
+                  name="persistentDischarge" 
+                  checked={formData.persistentDischarge}
+                  onChange={handleInputChange}
+                  className="w-5 h-5 rounded text-[#4ECDC4] focus:ring-[#4ECDC4] border-gray-300" />
               </div>
               <div>
                 <span className="block text-sm font-medium text-gray-900">
@@ -259,24 +403,20 @@ export function PatientHistoryForm({
 
           <div className="p-8 space-y-6 flex-1">
             <div>
-              <label className="block text-xs font-semibold text-gray-500 uppercase mb-2">
-                Pap Smear Result
-              </label>
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-2">Pap Smear Result</label>
               <div className="space-y-2">
-                {['ASC-US', 'LSIL', 'HSIL', 'Normal', 'Not Done'].map(result => <label key={result} className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer border border-transparent hover:border-gray-100 transition-all group">
-                      <span className="text-sm text-gray-700 group-hover:text-[#0A2540]">
-                        {result}
-                      </span>
-                      <input type="radio" name="papSmearResult" value={result} className="w-4 h-4 text-[#4ECDC4] focus:ring-[#4ECDC4]" />
-                    </label>)}
+                {['ASC-US', 'LSIL', 'HSIL', 'Normal', 'Not Done'].map(result => (
+                  <label key={result} className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer border border-transparent hover:border-gray-100 transition-all group">
+                    <span className="text-sm text-gray-700 group-hover:text-[#0A2540]">{result}</span>
+                    <input type="radio" name="papSmearResult" value={result} checked={formData.papSmearResult === result} onChange={handleInputChange} className="w-4 h-4 text-[#4ECDC4] focus:ring-[#4ECDC4]" />
+                  </label>
+                ))}
               </div>
             </div>
 
             <div>
-              <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">
-                HPV DNA (High-risk)
-              </label>
-              <input type="text" name="hpvDnaTypes" className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all" placeholder="e.g. Type 16, 18" />
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-1">HPV DNA (High-risk)</label>
+              <input type="text" name="hpvDnaTypes" value={formData.hpvDnaTypes} onChange={handleInputChange} className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#4ECDC4] focus:border-transparent outline-none transition-all" placeholder="e.g. Type 16, 18" />
             </div>
 
             <div>
@@ -311,18 +451,16 @@ export function PatientHistoryForm({
 
           <div className="p-8 space-y-6 flex-1">
             <div>
-              <label className="block text-xs font-semibold text-gray-500 uppercase mb-3">
-                Smoking History
-              </label>
+              <label className="block text-xs font-semibold text-gray-500 uppercase mb-3">Smoking History</label>
               <div className="flex gap-2">
                 <label className="flex-1 cursor-pointer">
-                  <input type="radio" name="smoking" value="Yes" className="peer sr-only" />
+                  <input type="radio" name="smoking" value="Yes" checked={formData.smoking === 'Yes'} onChange={handleInputChange} className="peer sr-only" />
                   <div className="flex items-center justify-center gap-2 px-4 py-3 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 peer-checked:bg-rose-50 peer-checked:border-rose-200 peer-checked:text-rose-700 transition-all">
                     <span className="font-medium">Yes</span>
                   </div>
                 </label>
                 <label className="flex-1 cursor-pointer">
-                  <input type="radio" name="smoking" value="No" className="peer sr-only" />
+                  <input type="radio" name="smoking" value="No" checked={formData.smoking === 'No'} onChange={handleInputChange} className="peer sr-only" />
                   <div className="flex items-center justify-center gap-2 px-4 py-3 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 peer-checked:bg-green-50 peer-checked:border-green-200 peer-checked:text-green-700 transition-all">
                     <span className="font-medium">No</span>
                   </div>

src/config/geminiConfig.ts

@@ -0,0 +1,239 @@
+
+/**
+ * ============================================================
+ *  GEMINI AI CONFIG  —  Edit this file to tune the LLM behaviour
+ * ============================================================
+ *
+ *  SYSTEM_PROMPT   : The instruction sent to Gemini before any patient data.
+ *                    Change it to alter the AI's tone, style, or focus.
+ *
+ *  DEMO_STEP_FINDINGS : Sample clinical data used automatically when no real
+ *                       observations have been filled in during the exam.
+ *                       Edit these to match a typical case at your clinic.
+ * ============================================================
+ */
+
+// ─── 1. SYSTEM PROMPT ────────────────────────────────────────────────────────
+// This is the high-level instruction that tells the LLM what role to play
+// and how to format its output. Edit freely.
+export const SYSTEM_PROMPT = `You are an expert colposcopy AI assistant acting as a specialist gynaecologist.
+Analyse ALL the clinical data and the attached colposcopy images (native / acetic acid / green filter / Lugol) to generate a professional, evidence-based colposcopy report conclusion.
+
+Key instructions:
+- Integrate findings from ALL steps and images to reach a single clinical conclusion.
+- Reference specific colposcopic features (e.g., acetowhite changes, iodine uptake, SCJ type, lesion grade) where relevant.
+- Adhere to IFCPC (International Federation for Cervical Pathology and Colposcopy) terminology.
+- Be concise but clinically precise; avoid vague language.
+- Include Swede score interpretation in the colposcopic findings (if available).
+- Return ONLY a valid JSON object with exactly these ten keys — no markdown, no extra text:
+{
+  "examQuality": "<Adequate or Inadequate>",
+  "transformationZone": "<I, II, or III — based on SCJ type and visibility>",
+  "acetowL": "<Present or Absent — based on acetowhite reaction>",
+  "nativeFindings": "<summarized native examination findings in 2-3 sentences, include cervix visibility, SCJ, TZ type, and any suspicious features>",
+  "aceticFindings": "<summarized acetic acid findings in 2-3 sentences, include acetowhite categories and features observed>",
+  "biopsySites": "<recommend biopsy sites by clock position, e.g. 12 o'clock, 6 o'clock>",
+  "biopsyNotes": "<brief notes on biopsy: lesion grade, punch vs LLETZ, number of samples>",
+  "colposcopicFindings": "<professional colposcopic findings citing key features, grades, and Swede score interpretation if available, 3-4 sentences>",
+  "treatmentPlan": "<evidence-based treatment plan referencing current guidelines, 2-3 sentences>",
+  "followUp": "<follow-up schedule with specific timeframes and recommendations, 1-2 sentences>"
+}`;
+
+// ─── 2. DEMO / SAMPLE FINDINGS ────────────────────────────────────────────────
+// These are used when no real observations have been recorded during the exam.
+// They let you test the AI-generated report without filling in every form field.
+// Edit to match typical cases at your clinic.
+export const DEMO_STEP_FINDINGS: Record<string, any> = {
+    native: {
+        cervixFullyVisible: 'Yes',
+        obscuredBy: { blood: false, inflammation: false, discharge: false, scarring: false },
+        adequacyNotes: '',
+        scjVisibility: 'Completely visible',
+        scjNotes: 'SCJ well-visualised; squamocolumnar junction at ectocervix',
+        tzType: 'TZ 2',
+        suspiciousAtNativeView: false,
+        obviousGrowths: false,
+        contactBleeding: false,
+        irregularSurface: true,
+        other: false,
+        additionalNotes: 'Irregular surface contour noted at anterior lip of cervix',
+    },
+    acetowhite: {
+        cervixFullyVisible: 'Yes',
+        scjVisibility: 'Completely visible',
+        tzType: 'TZ 2',
+        obviousGrowths: false,
+        contactBleeding: true,
+        irregularSurface: true,
+        other: false,
+        additionalNotes:
+            'Dense acetowhite lesion at 12 and 3 o\'clock positions with well-defined margin. Fine punctation present. Lesion extends to the endocervical canal.',
+    },
+    greenFilter: {
+        additionalNotes:
+            'Fine punctation and mosaic vascular pattern visible under green filter at the acetowhite area. No atypical vessels observed.',
+    },
+    lugol: {
+        additionalNotes:
+            'Iodine non-staining (mustard-yellow) area corresponding precisely to the acetowhite lesion region — consistent with loss of glycogen in abnormal epithelium (Schiller positive).',
+    },
+};
+
+// ─── 3. CHATBOT SYSTEM PROMPT ─────────────────────────────────────────────────
+// Governs how the AI assistant chat widget responds to clinician questions.
+// Unlike SYSTEM_PROMPT above (which must return JSON), this one responds in
+// plain conversational prose. Edit freely.
+export const CHAT_SYSTEM_PROMPT = `You are Pathora AI — an expert colposcopy assistant embedded in the Pathora AI Colposcopy System.
+
+== YOUR ROLE ==
+You assist gynaecologists and colposcopy clinicians with:
+- Interpreting colposcopic findings (acetowhite changes, vascular patterns, TZ type, IFCPC grading)
+- Explaining examination techniques (acetic acid, Lugol's iodine, green filter, biopsy)
+- Summarising evidence-based management guidelines (BSCCP, ASCCP, IFCPC)
+- Answering questions about the Pathora software workflow and how to use any feature
+
+== RESPONSE RULES ==
+- Respond in clear, professional clinical language appropriate for a specialist gynaecologist.
+- Keep answers concise — prefer bullet points using plain hyphens (-) for lists of findings or criteria.
+- If asked something outside colposcopy / gynaecology / the Pathora software, politely redirect.
+- Never fabricate patient data or give diagnoses without the clinician providing findings.
+- Do not return JSON; respond in plain conversational text.
+- NEVER use any markdown formatting. This means: no **bold**, no *italic*, no __underline__, no # headings, no backticks, no triple backticks. Write everything as plain text only. Emphasis should be expressed through word choice, not formatting symbols.
+
+== PATHORA APPLICATION — COMPLETE WORKING CONTEXT ==
+
+--- OVERVIEW ---
+Pathora AI is a clinical-grade single-page web application (React + TypeScript + Vite + TailwindCSS) that guides gynaecologists through a structured cervical examination workflow. It captures, annotates, and compares colposcopy images, records step-by-step clinical observations, and uses Google Gemini AI to auto-generate a professional colposcopy report. All data is stored in localStorage (key: pathora_colpo_session). There is no backend server. Created by Team ManaLife AI Pvt Limited (www.manalifeai.com).
+
+--- FULL USER WORKFLOW ---
+Home → Patient Registry → Patient History → Guided Capture (5 exam steps) → Compare → Report → Complete
+
+The 5 exam steps inside Guided Capture are:
+  Step 1 — Native (untreated cervix baseline)
+  Step 2 — Acetowhite / Acetic Acid (3-5% acetic acid applied)
+  Step 3 — Green Filter (vascular pattern assessment)
+  Step 4 — Lugol Iodine (Schiller test for iodine uptake)
+  Step 5 — Biopsy Marking (cervical clock + Swede Score)
+
+Within Guided Capture there are also 4 horizontal stages shown at the top:
+  Capture → Annotate → Compare → Report
+
+--- PAGES & WHAT EACH ONE DOES ---
+
+HomePage: Landing page with a "Get Started" button navigating to Patient Registry.
+
+PatientRegistry: Search for an existing patient by ID or add a new patient. Currently uses 3 in-memory demo patients (PT-2025-8492 Aisha Khan, P-10234 Sarah Johnson, P-10235 Emily Chen). Real patient selection writes patientInfo to sessionStore.
+
+PatientHistoryPage / PatientHistoryForm: 4-section intake form:
+  1. Patient Profile — name, age, blood group, parity, menstrual status (Pre/Post-menopausal/Pregnant), HPV status (Positive/Negative/Unknown), HPV vaccination (Yes/No/Unknown), notes
+  2. Presenting Symptoms — checkboxes: post-coital bleeding, inter-menstrual/post-menopausal bleeding, persistent discharge; free-text notes
+  3. Screening History — PAP smear result (ASC-US/LSIL/HSIL/Normal/Not Done), HPV DNA types (high-risk), past procedures (Biopsy/LEEP/Cryotherapy/None), notes
+  4. Risk Factors — smoking (Yes/No), immunosuppression (HIV/Steroids/None), notes
+  Auto-saves to sessionStore.patientHistory on every keystroke.
+
+GuidedCapturePage: The main examination hub. Switches between exam steps (native/acetowhite/greenFilter/lugol/biopsyMarking). Shows a live video feed (/live.mp4 demo). In each step, clinicians can:
+  - Capture images (screenshot of current frame or selected image)
+  - Record video clips
+  - Upload images/videos from disk
+  - Enter clinical observations in the ImagingObservations panel on the right
+  - For acetowhite step: also fill in the AceticFindingsForm (category+feature checkboxes)
+  - Switch to Annotate mode to draw on captured images
+  - Switch to Compare mode to compare images side-by-side
+
+Acetowhite Timer: When the clinician clicks "I have applied acetic acid", a countdown timer starts (counts up in seconds). The UI flashes an overlay alert at 1 minute and 3 minutes. Timer resets when leaving the acetowhite step.
+
+Lugol Timer: Same behaviour — starts when "I have applied Lugol's iodine" is clicked. Alerts at 1 minute and 3 minutes.
+
+Green Filter: When the green filter toggle is ON, the live video gets CSS filter: saturate(0.3) hue-rotate(120deg) brightness(1.1). Captured images also have this same pixel-level transform applied via Canvas API to match exactly.
+
+AI Assist (annotation mode): Clicking "AI Assist" loads a demo image (/AI_Demo_img.png) with 3 pre-placed AI annotations — green rectangle (Cervix), purple circle (SCJ), yellow polygon (OS). Clinicians can then confirm or edit these.
+
+BiopsyMarking: Renders a cervical clock SVG overlay on top of the selected image. Steps:
+  1. Select a lesion type from a searchable dropdown (EC=Ectopy, TTZ=T.Trans Zone, ATZ=At.Trans Zone, L=Leukoplakia, AB=Abn.Vessel, NF=Nabo.Fol, XB=Biopsy Site, C=Condylomata, AW=Acetowhite, MO=Mosaic, GO=Gland Opening, PN=Punctation)
+  2. Click clock hour positions (1–12) to place or remove marks
+  3. Marks appear as colored arc segments on the SVG
+  4. Overlay is draggable and scalable via sliders
+  Also contains Swede Score Assessment (5 features × 0-2 score each = 0–10 total):
+    - Aceto Uptake (0=transparent, 1=shady/milky, 2=distinct opaque white)
+    - Margins & Surface (0=diffuse, 1=sharp irregular, 2=sharp even with surface level difference)
+    - Vessels (0=fine regular, 1=absent, 2=coarse or atypical)
+    - Lesion Size (0=<5mm, 1=5-15mm/2quadrants, 2=>15mm/3-4quadrants)
+    - Iodine Staining (0=brown, 1=faintly yellow, 2=distinct yellow)
+  Risk interpretation: ≤4 Low Risk (routine follow-up), 5–7 Intermediate (consider colposcopy), ≥8 High Risk (recommend biopsy).
+  All data saved to sessionStore.biopsyMarkings.
+
+Compare: Side-by-side image viewer. Images grouped by exam step in a sidebar. Clinicians drag images from sidebar into left/right drop zones. Supports zoom (50%–300%), pan, and downloading the comparison as a PNG file.
+
+ReportPage: Final report as a printable A4 form. Sections:
+  - Patient Information (regNo, name, opdNo, age, parity, w/o)
+  - Clinical History (indication, complaint)
+  - Examination Findings (examQuality, transformationZone, acetowhite lesion)
+  - Examination Images (4 drag-and-drop buckets: native, acetic, lugol, biopsy)
+  - Diagnosis, Treatment Plan, Biopsy Sites/Notes, Follow-Up
+  - Doctor signature + date
+  On mount, automatically pre-fills from sessionStore (patient history, registry info, previous report data).
+  "Generate with AI" button sends all session data + up to 4 captured images to Gemini and fills the form with AI-generated clinical conclusions.
+  "Export PDF" button uses html2pdf.js to export the report as a PDF file.
+
+--- SESSION DATA SCHEMA ---
+Everything is stored in localStorage under key 'pathora_colpo_session':
+  patientInfo      — { id, name, examDate }
+  patientHistory   — name, age, bloodGroup, parity, menstrualStatus, sexualHistory, hpvStatus, hpvVaccination, patientProfileNotes, postCoitalBleeding, interMenstrualBleeding, persistentDischarge, symptomsNotes, papSmearResult, hpvDnaTypes, pastProcedures{biopsy/leep/cryotherapy/none}, screeningNotes, smoking, immunosuppression{hiv/steroids/none}, riskFactorsNotes
+  nativeFindings   — cervixFullyVisible, obscuredBy{blood/inflammation/discharge/scarring}, adequacyNotes, scjVisibility, scjNotes, tzType, suspiciousAtNativeView, obviousGrowths, contactBleeding, irregularSurface, other, additionalNotes
+  aceticFindings   — selectedCategories, selectedFindings, additionalNotes
+  stepFindings     — { native: {...}, acetowhite: {...}, greenFilter: {...}, lugol: {...} }
+  biopsyMarkings   — lesionMarks[{type,typeCode,clockHour,color}], swedeScores{acetoUptake,marginsAndSurface,vessels,lesionSize,iodineStaining}, totalSwedeScore, marksByType
+  reportFormData   — all text/select fields from ReportPage form
+  sessionStarted   — ISO timestamp
+
+--- ImagingObservations FIELDS PER STEP ---
+Shared fields (all steps): cervixFullyVisible (Yes/No), obscuredBy (blood/inflammation/discharge/scarring checkboxes), adequacyNotes, scjVisibility (Completely/Partially/Not visible), scjNotes, tzType (TZ1/TZ2/TZ3), additionalNotes
+
+Native-specific: obviousGrowths, contactBleeding, irregularSurface, suspiciousAtNativeView, other
+
+Acetowhite-specific: acetowhiteDensity (Dense/Faint/Absent), acetowhiteType (Geographic/Satellite/Cuffed glands/Other), acetowhiteMargins (Well-defined/Irregular/Indistinct), lesionExtent (<5mm/5-15mm/>15mm), vascularPattern (Mosaic/Punctation/Atypical vessels/None visible), contactBleeding, obviousGrowths
+
+GreenFilter-specific: mosaicType (Fine/Coarse/Absent), punctationType (Fine/Coarse/Absent), atypicalVessels (checkbox), vascularNotes
+
+Lugol-specific: iodineSatining (Brown-staining normal / Mustard-yellow abnormal / Partial mixed), schillerTest (Positive abnormal / Negative normal), lesionExtentLugol (<1 quadrant / 1-2 quadrants / >2 quadrants / Entire TZ)
+
+--- AceticFindingsForm CATEGORIES ---
+  Thin Acetowhite Epithelium: Dull white, Appears slowly, Fades quickly
+  Borders: Irregular, Geographic, Feathered edges, Sharp, Raised, Rolled edges, Inner border sign
+  Vascular Pattern: Fine punctation, Fine mosaic, Coarse punctation, Coarse mosaic
+  Dense Acetowhite Epithelium: Chalky white, Oyster white, Greyish white, Rapid onset, Persists
+  Gland Openings: Cuffed, Enlarged crypt openings
+  Non-Specific Abnormal Findings: Leukoplakia (keratosis), Hyperkeratosis, Erosion
+
+--- SIDEBAR NAVIGATION ---
+The collapsible left sidebar has 6 items: Home, Patients, Capture, Annotate, Compare, Report. The sidebar is hidden only on the Home page. Clicking the arrow icon collapses/expands it.
+
+--- CHATBOT (This Widget) ---
+A floating chat widget in the bottom-right corner (teal button with chat icon). Clicking it opens a 480px-tall chat panel. The chatbot uses the Gemini REST API with full multi-turn conversation history. System prompt is this very document. The chatbot answers questions about: colposcopy findings interpretation, examination techniques, IFCPC grading, management guidelines, and the Pathora software workflow.
+
+--- AI REPORT GENERATION ---
+Triggered by "Generate with AI" on the ReportPage. Sends to Gemini:
+  - Full patient demographics
+  - Complete patient history (symptoms, screening, risk factors)
+  - Step-by-step clinical observations (native/acetowhite/greenFilter/lugol) — formatted as structured text
+  - Acetic acid clinical findings (category + feature checkboxes)
+  - Biopsy marking data and Swede Score breakdown
+  - Up to 4 captured images (one per exam step, as base64 inline data)
+  - If no real findings → uses demo sample data automatically
+Returns strict JSON with 8 keys: examQuality, transformationZone, acetowL, biopsySites, biopsyNotes, diagnosis, treatmentPlan, followUp.
+
+--- GREEN FILTER PROCESSING ---
+Live feed: CSS filter saturate(0.3) hue-rotate(120deg) brightness(1.1) applied to the video element.
+Captured images: same transform applied pixel-by-pixel via Canvas API (composed 3×3 color matrix: saturate × hue-rotate, then brightness × 1.1). This ensures the saved image exactly matches what the clinician saw on screen.
+
+--- KEY DESIGN DECISIONS ---
+1. No backend — all data in localStorage. New session = sessionStore.clear().
+2. Gemini model auto-discovered at runtime by calling GET /v1beta/models — prefers any model name containing 'flash'.
+3. Green filter is mathematically identical between live CSS and saved Canvas to ensure what-you-see = what-you-save.
+4. Swede Score thresholds: ≤4 low risk, 5-7 intermediate, ≥8 high risk.
+5. Annotation AI Assist injects 3 demo annotations (Cervix rect, SCJ circle, OS polygon) to demonstrate AI capability.
+6. PDF export replaces all form controls with plain divs before rendering to avoid html2canvas clipping issues, then restores them after.
+
+== END OF APPLICATION CONTEXT ==`;
+
+

src/pages/AcetowhiteExamPage.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { Camera, Video, ArrowLeft, ArrowRight, CheckCircle2, Info, Pause, X, Edit2, RotateCcw, Save, ChevronRight, Sparkles } from 'lucide-react';
 import { AceticAnnotator, AceticAnnotatorHandle } from '../components/AceticAnnotator';
 import { ImagingObservations } from '../components/ImagingObservations';
+import { AceticFindingsForm } from '../components/AceticFindingsForm';
 
 type CapturedItem = {
   id: string;
@@ -27,6 +28,7 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
   const [observations, setObservations] = useState({});
   const [showExitWarning, setShowExitWarning] = useState(false);
   const [isLiveAILoading, setIsLiveAILoading] = useState(false);
+  const [isAIAssistEnabled, setIsAIAssistEnabled] = useState(false);
   const [liveAIResults, setLiveAIResults] = useState<{ cervixDetected: boolean; quality: string; confidence: number } | null>(null);
   const [liveAIError, setLiveAIError] = useState<string | null>(null);
   
@@ -136,10 +138,6 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
     }
   };
 
-  const handleUploadClick = () => {
-    fileInputRef.current?.click();
-  };
-
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (files && files.length > 0) {
@@ -178,7 +176,7 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
 
       const formData = new FormData();
       formData.append('file', blob, 'image.jpg');
-      const backendResponse = await fetch('/infer/image', {
+      const backendResponse = await fetch('http://localhost:8000/infer/image', {
         method: 'POST',
         body: formData,
       });
@@ -206,6 +204,18 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
     }
   };
 
+  const handleAIAssistToggle = async () => {
+    if (isLiveAILoading) return;
+    if (isAIAssistEnabled) {
+      setIsAIAssistEnabled(false);
+      setLiveAIResults(null);
+      setLiveAIError(null);
+      return;
+    }
+    setIsAIAssistEnabled(true);
+    await handleLiveAIAssist();
+  };
+
   const selectedItem = selectedImage
     ? capturedItems.find(item => item.id === selectedImage)
     : null;
@@ -262,8 +272,9 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
           </div>
 
           {!selectedImage ? (
-            // Live Feed View
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <>
+              {/* Live Feed View */}
+              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
               {/* Main Live Feed */}
               <div className="lg:col-span-2 space-y-4">
                 <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
@@ -487,31 +498,30 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
 
                     {/* Centered AI Assist Button */}
                     <button
-                      onClick={handleLiveAIAssist}
+                      onClick={handleAIAssistToggle}
                       disabled={isLiveAILoading}
-                      className="w-full flex items-center justify-center gap-2 px-6 py-4 rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold hover:from-blue-700 hover:to-blue-800 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed text-base"
+                      className={`w-full flex items-center justify-center gap-2 px-6 py-4 rounded-lg text-white font-bold transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed text-base ${
+                        isAIAssistEnabled
+                          ? 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700'
+                          : 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800'
+                      }`}
+                      title={isAIAssistEnabled ? 'AI Assist is ON' : 'Run AI model to check quality'}
                     >
+                      <div className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isAIAssistEnabled ? 'bg-white' : 'bg-gray-300'}`}>
+                        <span className={`inline-block h-4 w-4 transform rounded-full bg-gradient-to-br transition-transform ${isAIAssistEnabled ? 'translate-x-6 from-green-400 to-green-600' : 'translate-x-1 from-blue-400 to-blue-600'}`} />
+                      </div>
                       <Sparkles className="w-6 h-6" />
-                      {isLiveAILoading ? 'Checking...' : 'AI Assist'}
+                      {isLiveAILoading ? 'Checking...' : (isAIAssistEnabled ? 'AI Assist On' : 'AI Assist')}
                     </button>
+                    <input
+                      ref={fileInputRef}
+                      type="file"
+                      accept="image/*,video/*"
+                      multiple
+                      className="hidden"
+                      onChange={handleFileUpload}
+                    />
 
-                    <div className="flex gap-2">
-                      <button
-                        onClick={handleUploadClick}
-                        className="flex-1 flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-green-600 text-white font-semibold hover:bg-green-700 transition-colors"
-                      >
-                        Upload Image
-                      </button>
-                      <input
-                        ref={fileInputRef}
-                        type="file"
-                        accept="image/*,video/*"
-                        multiple
-                        className="hidden"
-                        onChange={handleFileUpload}
-                      />
-                    </div>
-                    
                     {/* Live AI Results Panel */}
                     {liveAIResults && (
                       <div className="p-4 bg-green-50 border border-green-300 rounded-lg">
@@ -529,7 +539,7 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
                         </div>
                       </div>
                     )}
-                    
+
                     {liveAIError && (
                       <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3 text-center">
                         {liveAIError}
@@ -621,51 +631,60 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
                 </div>
               </div>
             </div>
+
+            {/* Clinical Findings Section */}
+            <div className="w-full mt-6">
+              <AceticFindingsForm />
+            </div>
+            </>
           ) : (
             // Selected Image Annotation View
             selectedImage && (
-            <div>
-              <div className="mb-4 flex items-center justify-between">
-                <button
-                  onClick={() => {
-                    setSelectedImage(null);
-                    setAnnotations([]);
-                    setObservations({});
-                  }}
-                  className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
-                >
-                  <ArrowLeft className="w-4 h-4" />
-                  Back to Live Feed
-                </button>
-                <div className="flex items-center gap-3">
+              <div>
+                <div className="mb-4 flex items-center justify-between">
                   <button
-                    onClick={handleSaveAnnotations}
-                    className="px-6 py-2 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-colors"
+                    onClick={() => {
+                      setSelectedImage(null);
+                      setAnnotations([]);
+                      setObservations({});
+                    }}
+                    className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
                   >
-                    Save Annotations
-                  </button>
-                  <button onClick={onNext} className="px-6 py-2 bg-gray-600 text-white rounded-lg font-semibold hover:bg-slate-700 transition-colors flex items-center gap-2">
-                    Next
-                    <ArrowRight className="w-4 h-4" />
+                    <ArrowLeft className="w-4 h-4" />
+                    Back to Live Feed
                   </button>
+                  <div className="flex items-center gap-3">
+                    <button
+                      onClick={handleSaveAnnotations}
+                      className="px-6 py-2 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-colors"
+                    >
+                      Save Annotations
+                    </button>
+                    <button onClick={onNext} className="px-6 py-2 bg-gray-600 text-white rounded-lg font-semibold hover:bg-slate-700 transition-colors flex items-center gap-2">
+                      Next
+                      <ArrowRight className="w-4 h-4" />
+                    </button>
+                  </div>
                 </div>
-              </div>
 
-              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                <div className="lg:col-span-2">
-                  {selectedItem && (
-                    <AceticAnnotator 
-                      ref={annotatorRef}
-                      imageUrl={selectedItem.url}
-                      onAnnotationsChange={setAnnotations}
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                  <div className="lg:col-span-2">
+                    {selectedItem && (
+                      <AceticAnnotator 
+                        ref={annotatorRef}
+                        imageUrl={selectedItem.url}
+                        onAnnotationsChange={setAnnotations}
+                      />
+                    )}
+                  </div>
+                  <div className="lg:col-span-1">
+                    <ImagingObservations 
+                      onObservationsChange={setObservations}
+                      stepId="acetowhite"
                     />
-                  )}
-                </div>
-                <div className="lg:col-span-1">
-                  <ImagingObservations onObservationsChange={setObservations} />
+                  </div>
                 </div>
               </div>
-            </div>
             )
           )}
 

src/pages/BiopsyMarking.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { ArrowLeft, ArrowRight, Undo2, Trash2, Upload, Image, Video, ZoomIn, ZoomOut } from 'lucide-react';
+import { sessionStore } from '../store/sessionStore';
 
 // Simple UI Component replacements
 const Button: React.FC<any> = ({ children, onClick, disabled, variant, size, className, ...props }) => {
@@ -91,6 +92,49 @@ const BiopsyMarking: React.FC<BiopsyMarkingProps> = ({ onBack, onNext, capturedI
   const fileInputRef = useRef<HTMLInputElement>(null);
   const imageContainerRef = useRef<HTMLDivElement>(null);
 
+  // Load previously saved biopsy markings and Swede scores from sessionStore on mount
+  useEffect(() => {
+    const session = sessionStore.get();
+    if (session.biopsyMarkings) {
+      const bm = session.biopsyMarkings;
+      if (bm.lesionMarks && bm.lesionMarks.length > 0) {
+        setLesionMarks(bm.lesionMarks as LesionMark[]);
+      }
+      if (bm.swedeScores) {
+        setSwedeScores(bm.swedeScores);
+      }
+    }
+  }, []);
+
+  // Calculate total Swede score
+  const calculateTotalSwedeScore = (scores: SwedeScoreFeatures): number => {
+    return Object.values(scores).reduce((sum, score) => sum + (score !== null ? score : 0), 0);
+  };
+
+  // Save biopsy markings and Swede scores to sessionStore whenever they change
+  useEffect(() => {
+    const totalSwedeScore = calculateTotalSwedeScore(swedeScores);
+    const marksByTypeLocal = lesionMarks.reduce((acc, mark) => {
+      const key = mark.typeCode;
+      if (!acc[key]) {
+        acc[key] = { type: mark.type, hours: [] };
+      }
+      if (!acc[key].hours.includes(mark.clockHour)) {
+        acc[key].hours.push(mark.clockHour);
+      }
+      return acc;
+    }, {} as Record<string, { type: string; hours: number[] }>);
+
+    sessionStore.merge({
+      biopsyMarkings: {
+        lesionMarks,
+        swedeScores,
+        totalSwedeScore,
+        marksByType: marksByTypeLocal
+      }
+    });
+  }, [lesionMarks, swedeScores]);
+
   const filteredLesionTypes = LESION_TYPES.filter(type =>
     type.code.toLowerCase().includes(searchQuery.toLowerCase()) ||
     type.name.toLowerCase().includes(searchQuery.toLowerCase())
@@ -253,6 +297,8 @@ const BiopsyMarking: React.FC<BiopsyMarkingProps> = ({ onBack, onNext, capturedI
 
   const scoredFeatures = Object.values(swedeScores).filter(score => score !== null).length;
 
+  const patientId = sessionStore.get().patientInfo?.id;
+
   return (
     <div className="h-full flex flex-col bg-gradient-to-br from-slate-50 to-slate-100 overflow-hidden">
       <div className="flex items-center gap-3 px-4 py-2.5 bg-white border-b border-slate-200 shadow-sm shrink-0">
@@ -261,6 +307,12 @@ const BiopsyMarking: React.FC<BiopsyMarkingProps> = ({ onBack, onNext, capturedI
           Back
         </Button>
         <h2 className="text-lg font-semibold text-slate-800">Biopsy Marking</h2>
+        {patientId && (
+          <div className="flex items-center gap-2 px-3 py-1 bg-blue-50 border border-blue-200 rounded-full text-xs font-mono font-semibold text-[#0A2540]">
+            <span>ID:</span>
+            <span>{patientId}</span>
+          </div>
+        )}
         <div className="ml-auto flex items-center gap-2">
           <Button
             variant="outline"
@@ -284,7 +336,7 @@ const BiopsyMarking: React.FC<BiopsyMarkingProps> = ({ onBack, onNext, capturedI
           </Button>
           <button
             onClick={handleUpload}
-            className="h-8 px-3 bg-blue-600 text-white hover:bg-blue-700 rounded transition-colors flex items-center gap-2"
+            className="h-8 px-3 bg-[#05998c] text-white hover:bg-[#047569] rounded transition-colors flex items-center gap-2"
           >
             <Upload className="h-4 w-4" />
             Upload
@@ -488,23 +540,14 @@ const BiopsyMarking: React.FC<BiopsyMarkingProps> = ({ onBack, onNext, capturedI
 
           {/* Images Card */}
           <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="font-bold text-[#0A2540]">Images</h3>
-              <button 
-                onClick={handleUpload}
-                className="h-8 px-3 bg-blue-600 text-white hover:bg-blue-700 rounded transition-colors flex items-center gap-2 text-xs"
-              >
-                <Upload className="h-3.5 w-3.5" />
-                Upload
-              </button>
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept="image/*,video/*"
-                className="hidden"
-                onChange={handleFileChange}
-              />
-            </div>
+            <h3 className="font-bold text-[#0A2540] mb-4">Images</h3>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*,video/*"
+              className="hidden"
+              onChange={handleFileChange}
+            />
 
             <div className="space-y-3">
               {Object.entries(groupedImages).map(([stepId, images]) => (

src/pages/Compare.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useRef } from 'react';
 import { ArrowLeft, X, ZoomIn, ZoomOut, Download, RotateCcw } from 'lucide-react';
+import { sessionStore } from '../store/sessionStore';
 
 type CapturedImage = {
   id: string;
@@ -38,6 +39,7 @@ const stepColors: Record<string, string> = {
 export function Compare({ onBack, onNext, capturedImages }: Props) {
   const [leftImage, setLeftImage] = useState<CompareImage | null>(null);
   const [rightImage, setRightImage] = useState<CompareImage | null>(null);
+  const [additionalNotes, setAdditionalNotes] = useState('');
   const [zoomLevel, setZoomLevel] = useState(1);
   const [draggedImageData, setDraggedImageData] = useState<string | null>(null);
   const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
@@ -45,6 +47,7 @@ export function Compare({ onBack, onNext, capturedImages }: Props) {
   const [panStart, setPanStart] = useState({ x: 0, y: 0 });
   const leftImageRef = useRef<HTMLDivElement>(null);
   const rightImageRef = useRef<HTMLDivElement>(null);
+  const patientId = sessionStore.get().patientInfo?.id;
 
   // Group images by step
   const imagesByStep = capturedImages.reduce((acc, img) => {
@@ -193,6 +196,12 @@ export function Compare({ onBack, onNext, capturedImages }: Props) {
                 <ArrowLeft className="w-5 h-5 text-gray-700" />
               </button>
               <h1 className="text-2xl font-bold text-gray-900">Image Comparison</h1>
+              {patientId && (
+                <div className="flex items-center gap-2 px-4 py-1.5 bg-purple-50 border border-purple-200 rounded-full text-sm font-mono font-semibold text-[#0A2540]">
+                  <span>ID:</span>
+                  <span>{patientId}</span>
+                </div>
+              )}
             </div>
             <div className="flex items-center gap-3">
               <button
@@ -413,6 +422,19 @@ export function Compare({ onBack, onNext, capturedImages }: Props) {
                   </div>
                 )}
 
+                <div className="mt-4 pt-4 border-t border-gray-200">
+                  <label className="block text-sm font-semibold text-gray-700 mb-2">
+                    Additional Notes
+                  </label>
+                  <textarea
+                    value={additionalNotes}
+                    onChange={(e) => setAdditionalNotes(e.target.value)}
+                    rows={4}
+                    placeholder="Add comparison notes..."
+                    className="w-full px-3 py-2 text-sm bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#05998c] focus:border-transparent outline-none transition-all resize-none"
+                  />
+                </div>
+
                 {/* Info Box */}
                 <div className="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-3">
                   <p className="text-xs text-blue-700">

src/pages/GreenFilterPage.tsx

@@ -28,6 +28,7 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
   const [showExitWarning, setShowExitWarning] = useState(false);
   const [greenApplied, setGreenApplied] = useState(false);
   const [isLiveAILoading, setIsLiveAILoading] = useState(false);
+  const [isAIAssistEnabled, setIsAIAssistEnabled] = useState(false);
   const [liveAIResults, setLiveAIResults] = useState<{ cervixDetected: boolean; quality: string; confidence: number } | null>(null);
   const [liveAIError, setLiveAIError] = useState<string | null>(null);
   const [displayedImageUrl, setDisplayedImageUrl] = useState<string>("/C87Aceto_(1).jpg");
@@ -231,7 +232,7 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
 
       const formData = new FormData();
       formData.append('file', blob, 'image.jpg');
-      const backendResponse = await fetch('/infer/image', {
+      const backendResponse = await fetch('http://localhost:8000/infer/image', {
         method: 'POST',
         body: formData,
       });
@@ -259,6 +260,18 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
     }
   };
 
+  const handleAIAssistToggle = async () => {
+    if (isLiveAILoading) return;
+    if (isAIAssistEnabled) {
+      setIsAIAssistEnabled(false);
+      setLiveAIResults(null);
+      setLiveAIError(null);
+      return;
+    }
+    setIsAIAssistEnabled(true);
+    await handleGreenFilterMainAIAssist();
+  };
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-4 md:p-6">
       {/* Header */}
@@ -379,7 +392,7 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
 
                   <button
                     onClick={handleUploadClick}
-                    className="flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors shadow-md font-semibold"
+                    className="flex items-center gap-2 px-6 py-3 bg-[#05998c] text-white rounded-lg hover:bg-[#047569] transition-colors shadow-md font-semibold"
                   >
                     <Upload className="w-5 h-5" />
                     Upload
@@ -396,12 +409,20 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
 
                 {/* Centered AI Assist Button */}
                 <button
-                  onClick={handleGreenFilterMainAIAssist}
+                  onClick={handleAIAssistToggle}
                   disabled={isLiveAILoading}
-                  className="w-full flex items-center justify-center gap-2 px-6 py-4 rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold hover:from-blue-700 hover:to-blue-800 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed text-base"
+                  className={`w-full flex items-center justify-center gap-2 px-6 py-4 rounded-lg text-white font-bold transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed text-base ${
+                    isAIAssistEnabled
+                      ? 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700'
+                      : 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800'
+                  }`}
+                  title={isAIAssistEnabled ? 'AI Assist is ON' : 'Run AI model to check quality'}
                 >
+                  <div className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isAIAssistEnabled ? 'bg-white' : 'bg-gray-300'}`}>
+                    <span className={`inline-block h-4 w-4 transform rounded-full bg-gradient-to-br transition-transform ${isAIAssistEnabled ? 'translate-x-6 from-green-400 to-green-600' : 'translate-x-1 from-blue-400 to-blue-600'}`} />
+                  </div>
                   <Sparkles className="w-6 h-6" />
-                  {isLiveAILoading ? 'Checking...' : 'AI Assist'}
+                  {isLiveAILoading ? 'Checking...' : (isAIAssistEnabled ? 'AI Assist On' : 'AI Assist')}
                 </button>
                 
                 {/* Live AI Results Panel */}
@@ -454,7 +475,7 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
                   imageUrl={displayedImageUrl}
                   onAnnotationsChange={handleAnnotationsChange}
                 />
-                <ImagingObservations />
+                <ImagingObservations stepId="greenFilter" />
               </div>
             )}
           </div>

src/pages/GuidedCapturePage.tsx

@@ -3,10 +3,12 @@ import { Camera, Video, ArrowLeft, ArrowRight, CheckCircle2, Info, Pause, X, Edi
 import { ImageAnnotator, type ImageAnnotatorHandle } from '../components/ImageAnnotator';
 import { AceticAnnotator, type AceticAnnotatorHandle } from '../components/AceticAnnotator';
 import { ImagingObservations } from '../components/ImagingObservations';
+import { AceticFindingsForm } from '../components/AceticFindingsForm';
 import { BiopsyMarking, type BiopsyCapturedImage } from './BiopsyMarking';
 import { Compare } from './Compare';
 import { ReportPage } from './ReportPage';
 import { applyGreenFilter } from '../utils/filterUtils';
+import { sessionStore } from '../store/sessionStore';
 
 // Simple UI Component replacements
 const Button: React.FC<any> = ({ children, onClick, disabled, variant, size, className, ...props }) => {
@@ -57,7 +59,6 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
   const [_observations, setObservations] = useState({});
   const [isAnnotatingMode, setIsAnnotatingMode] = useState(false);
   const [isCompareMode, setIsCompareMode] = useState(false);
-  const [isLiveAILoading] = useState(false);
   const [liveAIResults, setLiveAIResults] = useState<{ cervixDetected: boolean; detectionConfidence: number; quality: string; qualityConfidence: number } | null>(null);
   const [liveAIError, setLiveAIError] = useState<string | null>(null);
   const [isContinuousAIEnabled, setIsContinuousAIEnabled] = useState(false);
@@ -243,7 +244,7 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
             const formData = new FormData();
             formData.append('file', blob, 'frame.jpg');
 
-            const response = await fetch('/infer/image', {
+            const response = await fetch('http://localhost:8000/infer/image', {
               method: 'POST',
               body: formData,
             });
@@ -507,11 +508,85 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
   };
 
   const handleMainAIAssist = () => {
-    // Toggle continuous AI assist for live feed
-    setIsContinuousAIEnabled(prev => !prev);
-    if (!isContinuousAIEnabled) {
+    // Toggle continuous AI assist for live feed (now as a toggle button)
+    if (isContinuousAIEnabled) {
+      setIsContinuousAIEnabled(false);
       setLiveAIError(null);
       setLiveAIResults(null);
+    } else {
+      setIsContinuousAIEnabled(true);
+      setLiveAIError(null);
+      setLiveAIResults(null);
+    }
+  };
+
+  // Native Annotation Page - Cervix Bounding Box Detection
+  const handleNativeAnnotationAIAssist = async () => {
+    if (!imageAnnotatorRef.current) return;
+
+    try {
+      // Get the current image URL from the annotator
+      const imageUrls = imageCaptures.map(item => item.url);
+      if (imageUrls.length === 0) {
+        console.warn('⚠️  No images available for cervix detection');
+        return;
+      }
+
+      console.log('🔄 Starting cervix bounding box detection...');
+      
+      // Get the current image (first one or from annotator state)
+      const currentImageUrl = imageUrls[0];
+
+      // Fetch the image and convert to blob
+      const response = await fetch(currentImageUrl);
+      const blob = await response.blob();
+      console.log(`✅ Image loaded, size: ${blob.size} bytes`);
+
+      // Prepare form data for backend
+      const formData = new FormData();
+      formData.append('file', blob, 'image.jpg');
+
+      console.log('🔄 Sending request to backend...');
+      // Call cervix bbox detection endpoint
+      const backendResponse = await fetch('http://localhost:8000/api/infer-cervix-bbox', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!backendResponse.ok) {
+        throw new Error(`Backend error: ${backendResponse.statusText}`);
+      }
+
+      const result = await backendResponse.json();
+      console.log('✅ Backend response received:', result);
+
+      // Convert bounding boxes to annotation format
+      if (result.bounding_boxes && result.bounding_boxes.length > 0) {
+        console.log(`📦 Found ${result.bounding_boxes.length} cervix bounding box(es)`);
+        
+        const aiAnnotations: any[] = result.bounding_boxes.map((bbox: any, idx: number) => ({
+          id: `ai-cervix-${Date.now()}-${idx}`,
+          type: 'rect',
+          x: bbox.x1,
+          y: bbox.y1,
+          width: bbox.width,
+          height: bbox.height,
+          color: '#FF6B6B',
+          label: `Cervix (${(bbox.confidence * 100).toFixed(1)}%)`,
+          source: 'ai',
+          identified: true,
+          accepted: false
+        }));
+
+        console.log('🎨 Adding annotations to canvas:', aiAnnotations);
+        // Add AI annotations to the image annotator
+        imageAnnotatorRef.current.addAIAnnotations(aiAnnotations);
+        console.log('✅ Cervix bounding boxes detected and displayed:', result.detections);
+      } else {
+        console.warn('⚠️  No cervix detected in image');
+      }
+    } catch (error) {
+      console.error('❌ Native annotation AI assist error:', error);
     }
   };
 
@@ -553,10 +628,22 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
     }
   }, [capturedItems, onCapturedImagesChange]);
 
+  // Initialize session and persist captured images to sessionStore
+  useEffect(() => {
+    const session = sessionStore.get();
+    if (!session.sessionStarted) {
+      sessionStore.merge({ sessionStarted: new Date().toISOString() });
+    }
+  }, []);
+
+
+
   // Notify parent component when mode changes
   useEffect(() => {
     if (onModeChange) {
-      if (isCompareMode) {
+      if (currentStep === 'report') {
+        onModeChange('report');
+      } else if (isCompareMode) {
         onModeChange('compare');
       } else if (isAnnotatingMode) {
         onModeChange('annotation');
@@ -564,14 +651,26 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
         onModeChange('capture');
       }
     }
-  }, [isCompareMode, isAnnotatingMode, onModeChange]);
+  }, [currentStep, isCompareMode, isAnnotatingMode, onModeChange]);
+
+  const patientId = sessionStore.get().patientInfo?.id;
 
   return (
     <div className="w-full bg-white/95 relative">
       <div className="relative z-10 py-4 md:py-6 lg:py-8">
         <div className="w-full max-w-7xl mx-auto px-4 md:px-6">
+          {/* Patient ID Badge */}
+          {patientId && (
+            <div className="mb-4 flex justify-end">
+              <div className="flex items-center gap-2 px-3 md:px-4 py-1.5 md:py-2 bg-teal-50 border border-teal-200 rounded-full text-xs md:text-sm font-mono font-semibold text-[#0A2540]">
+                <span>Patient ID:</span>
+                <span>{patientId}</span>
+              </div>
+            </div>
+          )}
           
           {/* Page Header */}
+          {currentStep !== 'report' && (
           <div className="mb-4 md:mb-6">
             {/* Progress Bar - Capture / Annotate / Compare / Report */}
             <div className="mb-4 flex gap-1 md:gap-2">
@@ -579,10 +678,9 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
                 <div key={stage} className="flex items-center flex-1">
                   <div
                     className={`flex-1 py-2 px-2 md:px-3 rounded-3xl font-medium text-sm md:text-base transition-all border-2 border-[#05998c] cursor-default pointer-events-none ${
-                      (stage === 'Capture' && !selectedImage && !isAnnotatingMode && !isCompareMode && currentStep !== 'report') ||
-                      (stage === 'Annotate' && (selectedImage || isAnnotatingMode) && !isCompareMode && currentStep !== 'report') ||
-                      (stage === 'Compare' && isCompareMode && currentStep !== 'report') ||
-                      (stage === 'Report' && currentStep === 'report')
+                      (stage === 'Capture' && !selectedImage && !isAnnotatingMode && !isCompareMode) ||
+                      (stage === 'Annotate' && (selectedImage || isAnnotatingMode) && !isCompareMode) ||
+                      (stage === 'Compare' && isCompareMode)
                         ? 'bg-[#05998c] text-white shadow-md'
                         : 'bg-gray-100 text-gray-600'
                     }`}
@@ -633,9 +731,10 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
             </div>
             )}
           </div>
+          )}
 
           {/* Back and Next Navigation for Guided Capture Steps */}
-          {currentStep !== 'biopsyMarking' && !isAnnotatingMode && !isCompareMode && (
+          {currentStep !== 'biopsyMarking' && currentStep !== 'report' && !isAnnotatingMode && !isCompareMode && (
             <div className="flex items-center gap-3 px-4 py-2.5 bg-white border-b border-slate-200 shadow-sm mb-4">
               <Button 
                 variant="ghost" 
@@ -657,21 +756,24 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
               </h2>
               <button 
                 onClick={handleMainAIAssist}
-                disabled={isLiveAILoading}
+                disabled={false}
                 className={`px-6 py-3 rounded-lg transition-all font-semibold flex items-center justify-center gap-2 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed min-w-max ${
-                  isContinuousAIEnabled 
+                  isContinuousAIEnabled
                     ? 'bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 animate-pulse' 
                     : 'bg-gradient-to-r from-blue-600 to-blue-700 text-white hover:from-blue-700 hover:to-blue-800'
                 }`}
-                title={isContinuousAIEnabled ? 'Continuous AI quality checking is ON' : 'Enable continuous AI quality checking for live feed'}
+                title={isContinuousAIEnabled ? 'Continuous AI quality checking is ON - Click to turn OFF' : 'Enable continuous AI quality checking for live feed'}
               >
+                <div className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isContinuousAIEnabled ? 'bg-white' : 'bg-gray-300'}`}>
+                  <span className={`inline-block h-4 w-4 transform rounded-full bg-gradient-to-br transition-transform ${isContinuousAIEnabled ? 'translate-x-6 from-green-400 to-green-600' : 'translate-x-1 from-blue-400 to-blue-600'}`} />
+                </div>
                 <Sparkles className="h-5 w-5" />
                 {isContinuousAIEnabled ? 'AI Live ✓' : 'AI Assist'}
               </button>
               <div className="flex items-center gap-2">
                 <button 
                   onClick={handleUploadClick}
-                  className="h-8 px-3 bg-green-600 text-white hover:bg-green-700 rounded transition-colors flex items-center gap-2"
+                  className="h-8 px-3 bg-[#05998c] text-white hover:bg-[#047569] rounded transition-colors flex items-center gap-2"
                 >
                   <Upload className="h-4 w-4" />
                   Upload
@@ -701,61 +803,6 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
             </div>
           )}
 
-          {/* Quality Results Display */}
-          {liveAIResults && !isAnnotatingMode && !isCompareMode && currentStep !== 'report' && currentStep !== 'biopsyMarking' && (
-            <div className={`mb-4 p-4 rounded-lg border-2 transition-all ${
-              isContinuousAIEnabled 
-                ? 'bg-gradient-to-r from-green-50 to-emerald-50 border-green-300' 
-                : 'bg-green-50 border-green-200'
-            }`}>
-              <div className="flex items-start gap-3">
-                <div className="flex-1">
-                  <h3 className="font-semibold text-green-900 mb-3 flex items-center gap-2">
-                    {isContinuousAIEnabled ? '🎥 Live Quality Monitoring' : 'Quality Check Results'}
-                    {isContinuousAIEnabled && <span className="inline-block w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>}
-                  </h3>
-                  <div className="space-y-3">
-                    <div>
-                      <div className="flex items-center justify-between mb-1">
-                        <p className="text-sm text-gray-600">Cervix Detected</p>
-                        <p className="text-sm font-medium text-green-700">
-                          {liveAIResults.cervixDetected ? 'Yes' : 'No'} ({(liveAIResults.detectionConfidence * 100).toFixed(1)}%)
-                        </p>
-                      </div>
-                    </div>
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <p className="text-sm text-gray-600">Image Quality</p>
-                        <p className="text-sm font-semibold">
-                          {liveAIResults.quality} ({(liveAIResults.qualityConfidence * 100).toFixed(1)}%)
-                        </p>
-                      </div>
-                      {/* Progress Bar */}
-                      <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden shadow-inner">
-                        <div 
-                          className={`h-full rounded-full transition-all duration-500 ${
-                            liveAIResults.qualityConfidence >= 0.8 
-                              ? 'bg-gradient-to-r from-green-500 to-green-600' 
-                              : liveAIResults.qualityConfidence >= 0.6 
-                              ? 'bg-gradient-to-r from-orange-400 to-orange-500' 
-                              : 'bg-gradient-to-r from-red-500 to-red-600'
-                          }`}
-                          style={{ width: `${Math.min(liveAIResults.qualityConfidence * 100, 100)}%` }}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {liveAIError && !isAnnotatingMode && !isCompareMode && currentStep !== 'report' && currentStep !== 'biopsyMarking' && (
-            <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
-              <p className="text-red-700 font-medium">{liveAIError}</p>
-            </div>
-          )}
-
           {currentStep === 'report' ? (
             <ReportPage
               onBack={() => {
@@ -817,7 +864,8 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
                   <ImageAnnotator 
                     ref={imageAnnotatorRef}
                     imageUrls={imageCaptures.map(item => item.url)}
-                    onAnnotationsChange={setAnnotations} 
+                    onAnnotationsChange={setAnnotations}
+                    onAIAssist={handleNativeAnnotationAIAssist}
                   />
                 )}
               </div>
@@ -827,7 +875,7 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
             <>
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
               {/* Main Live Feed */}
-              <div className="lg:col-span-2 space-y-4">
+              <div className="lg:col-span-2">
                 <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                   {/* Live Video Feed */}
                   <div className="relative bg-gray-900 rounded-xl overflow-hidden shadow-2xl border-2 border-gray-700 mb-4">
@@ -941,6 +989,61 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
                       <span>{(currentStep === 'acetowhite' && !timerStarted) || (currentStep === 'lugol' && !lugolTimerStarted) ? (currentStep === 'acetowhite' ? 'Apply acetic acid to start' : 'Apply Lugol iodine to start') : 'Capture Required'}</span>
                     </div>
                   )}
+
+                  {/* Quality Results Display */}
+                  {liveAIResults && !isAnnotatingMode && !isCompareMode && (
+                    <div className={`mt-4 p-3 rounded-lg border-2 transition-all ${
+                      isContinuousAIEnabled 
+                        ? 'bg-gradient-to-r from-green-50 to-emerald-50 border-green-300' 
+                        : 'bg-green-50 border-green-200'
+                    }`}>
+                      <div className="flex items-start gap-2">
+                        <div className="flex-1">
+                          <h3 className="font-semibold text-green-900 mb-2 text-sm flex items-center gap-2">
+                            {isContinuousAIEnabled ? '🎥 Quality Check' : 'Quality Check'}
+                            {isContinuousAIEnabled && <span className="inline-block w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>}
+                          </h3>
+                          <div className="space-y-2">
+                            <div>
+                              <div className="flex items-center justify-between mb-1">
+                                <p className="text-sm text-gray-600 font-medium">Cervix</p>
+                                <p className="text-sm font-semibold text-green-700">
+                                  {liveAIResults.cervixDetected ? '✓' : '✗'} ({(liveAIResults.detectionConfidence * 100).toFixed(0)}%)
+                                </p>
+                              </div>
+                            </div>
+                            <div>
+                              <div className="flex items-center justify-between mb-1">
+                                <p className="text-sm text-gray-600 font-medium">Quality</p>
+                                <p className="text-sm font-semibold">
+                                  {liveAIResults.quality} ({(liveAIResults.qualityConfidence * 100).toFixed(0)}%)
+                                </p>
+                              </div>
+                              {/* Progress Bar */}
+                              <div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden shadow-inner">
+                                <div 
+                                  className={`h-full rounded-full transition-all duration-500 ${
+                                    liveAIResults.qualityConfidence >= 0.65
+                                      ? 'bg-gradient-to-r from-green-500 to-green-600' 
+                                      : liveAIResults.qualityConfidence >= 0.5
+                                      ? 'bg-gradient-to-r from-orange-400 to-orange-500' 
+                                      : 'bg-gradient-to-r from-red-500 to-red-600'
+                                  }`}
+                                  style={{ width: `${Math.min(liveAIResults.qualityConfidence * 100, 100)}%` }}
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {liveAIError && !isAnnotatingMode && !isCompareMode && (
+                    <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
+                      <p className="text-red-700 font-medium text-sm">{liveAIError}</p>
+                    </div>
+                  )}
                 </div>
               </div>
 
@@ -1306,12 +1409,20 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
               </div>
             </div>
 
+            {/* Acetic Acid Clinical Findings — shown on acetowhite capture page */}
+            {currentStep === 'acetowhite' && (
+              <div className="w-full mt-4">
+                <AceticFindingsForm />
+              </div>
+            )}
+
             {/* Visual Observations - Full Width on Native Step */}
             {currentStep === 'native' && (
               <div className="w-full">
                 <ImagingObservations 
                   onObservationsChange={setObservations}
                   layout="horizontal"
+                  stepId="native"
                 />
               </div>
             )}

src/pages/LugolExamPage.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Camera, Video, ArrowLeft, ArrowRight, CheckCircle2, Info, Pause, X, Edit2, RotateCcw, Save, ChevronRight, Sparkles } from 'lucide-react';
 import { ImageAnnotator } from '../components/ImageAnnotator';
+import { ImagingObservations } from '../components/ImagingObservations';
 
 type CapturedItem = {
   id: string;
@@ -20,6 +21,7 @@ export function LugolExamPage({ goBack, onNext }: Props) {
   const [isRecording, setIsRecording] = useState(false);
   const [selectedImage, setSelectedImage] = useState<string | null>(null);
   const [annotations, setAnnotations] = useState<any[]>([]);
+  const [observations, setObservations] = useState({});
   const [showExitWarning, setShowExitWarning] = useState(false);
   
   // Timer states
@@ -30,6 +32,7 @@ export function LugolExamPage({ goBack, onNext }: Props) {
   const audibleAlert = true;
   const [timerPaused, setTimerPaused] = useState(false);
   const [isLiveAILoading, setIsLiveAILoading] = useState(false);
+  const [isAIAssistEnabled, setIsAIAssistEnabled] = useState(false);
   const [liveAIResults, setLiveAIResults] = useState<{ cervixDetected: boolean; quality: string; confidence: number } | null>(null);
   const [liveAIError, setLiveAIError] = useState<string | null>(null);
 
@@ -135,6 +138,18 @@ export function LugolExamPage({ goBack, onNext }: Props) {
     return 'Bad';
   };
 
+  const handleAIAssistToggle = async () => {
+    if (isLiveAILoading) return;
+    if (isAIAssistEnabled) {
+      setIsAIAssistEnabled(false);
+      setLiveAIResults(null);
+      setLiveAIError(null);
+      return;
+    }
+    setIsAIAssistEnabled(true);
+    await handleLugolMainAIAssist();
+  };
+
   const handleLugolMainAIAssist = async () => {
     setLiveAIError(null);
     setLiveAIResults(null);
@@ -149,7 +164,7 @@ export function LugolExamPage({ goBack, onNext }: Props) {
 
       const formData = new FormData();
       formData.append('file', blob, 'image.jpg');
-      const backendResponse = await fetch('/infer/image', {
+      const backendResponse = await fetch('http://localhost:8000/infer/image', {
         method: 'POST',
         body: formData,
       });
@@ -453,12 +468,20 @@ export function LugolExamPage({ goBack, onNext }: Props) {
 
                     {/* Centered AI Assist Button */}
                     <button
-                      onClick={handleLugolMainAIAssist}
+                      onClick={handleAIAssistToggle}
                       disabled={isLiveAILoading}
-                      className="w-full flex items-center justify-center gap-2 px-6 py-4 rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold hover:from-blue-700 hover:to-blue-800 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed text-base"
+                      className={`w-full flex items-center justify-center gap-2 px-6 py-4 rounded-lg text-white font-bold transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed text-base ${
+                        isAIAssistEnabled
+                          ? 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700'
+                          : 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800'
+                      }`}
+                      title={isAIAssistEnabled ? 'AI Assist is ON' : 'Run AI model to check quality'}
                     >
+                      <div className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isAIAssistEnabled ? 'bg-white' : 'bg-gray-300'}`}>
+                        <span className={`inline-block h-4 w-4 transform rounded-full bg-gradient-to-br transition-transform ${isAIAssistEnabled ? 'translate-x-6 from-green-400 to-green-600' : 'translate-x-1 from-blue-400 to-blue-600'}`} />
+                      </div>
                       <Sparkles className="w-6 h-6" />
-                      {isLiveAILoading ? 'Checking...' : 'AI Assist'}
+                      {isLiveAILoading ? 'Checking...' : (isAIAssistEnabled ? 'AI Assist On' : 'AI Assist')}
                     </button>
                     
                     {/* Live AI Results Panel */}
@@ -603,6 +626,12 @@ export function LugolExamPage({ goBack, onNext }: Props) {
                     onAnnotationsChange={setAnnotations} 
                   />
                 </div>
+                <div className="lg:col-span-1">
+                  <ImagingObservations 
+                    onObservationsChange={setObservations}
+                    stepId="lugol"
+                  />
+                </div>
               </div>
             </div>
           )}

src/pages/PatientHistoryPage.tsx

@@ -14,7 +14,7 @@ export function PatientHistoryPage({
 }: Props) {
   return <div className="w-full bg-white/95 relative p-8 font-sans">
       <div className="relative z-10">
-        <PatientHistoryForm onContinue={goToGuidedCapture || goToImaging} onBack={goBackToRegistry} patientID={patientID} />
+        <PatientHistoryForm onContinue={goToGuidedCapture || goToImaging} onBack={goBackToRegistry} patientID={patientID} autoGeneratedPatientId={patientID} />
       </div>
     </div>;
 }

src/pages/PatientRegistry.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { Eye, Edit2, ArrowLeft } from 'lucide-react';
+import { sessionStore } from '../store/sessionStore';
+import { generatePatientId, getPatientHistory, savePatientRecord } from '../store/patientIdStore';
 
 type Props = {
-  onNewPatient: () => void;
+  onNewPatient: (newPatientId: string) => void;
   onSelectExisting: (id: string) => void;
   onBackToHome: () => void;
   onNext: () => void;
@@ -21,6 +23,9 @@ export function PatientRegistry({ onNewPatient, onSelectExisting, onBackToHome,
     { id: 'P-10235', name: 'Emily Chen', examDate: '2024-01-15' }
   ];
 
+  // Get all available patients (demo + generated)
+  const allPatients = [...mockPatients, ...getPatientHistory()];
+
   const handleSearch = () => {
     const q = patientId.trim();
     setSearched(true);
@@ -30,10 +35,28 @@ export function PatientRegistry({ onNewPatient, onSelectExisting, onBackToHome,
       return;
     }
     setError(null);
-    const found = mockPatients.filter(p => p.id.toLowerCase() === q.toLowerCase());
+    const found = allPatients.filter(p => p.id.toLowerCase() === q.toLowerCase());
     setResults(found);
   };
 
+  const handleAddNewPatient = () => {
+    const newId = generatePatientId();
+    onNewPatient(newId);
+  };
+
+  const handleSelectPatient = (patientRecord: { id: string; name: string; examDate: string }) => {
+    // Save patient info to sessionStore
+    sessionStore.merge({
+      patientInfo: {
+        id: patientRecord.id,
+        name: patientRecord.name,
+        examDate: patientRecord.examDate
+      }
+    });
+    // Call the parent handler
+    onSelectExisting(patientRecord.id);
+  };
+
   return (
     <div className="flex-1 flex flex-col items-stretch justify-start py-4 md:py-6 lg:py-8">
       <div className="w-full px-4 py-2">
@@ -57,7 +80,7 @@ export function PatientRegistry({ onNewPatient, onSelectExisting, onBackToHome,
               <select onChange={e => {
                 const v = e.target.value;
                 if (v === 'all') {
-                  setResults(mockPatients);
+                  setResults(allPatients);
                   setSearched(true);
                 } else if (v === 'clear') {
                   setResults([]);
@@ -72,7 +95,7 @@ export function PatientRegistry({ onNewPatient, onSelectExisting, onBackToHome,
               <div className="flex flex-col md:flex-row gap-3 md:gap-4 w-full lg:w-auto lg:max-w-2xl">
                 <input aria-label="Search by Patient ID" value={patientId} onChange={e => setPatientId(e.target.value)} placeholder="e.g. PT-2025-8492" className="px-3 py-2 md:py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-[#05998c] outline-none text-sm md:text-base flex-1 lg:flex-none lg:w-48" />
                 <button onClick={handleSearch} className="px-4 md:px-6 py-2 md:py-3 bg-[#0A2540] text-white rounded-lg text-sm md:text-base font-medium hover:bg-[#051B30] transition-colors whitespace-nowrap">Search</button>
-                <button onClick={onNewPatient} className="px-4 md:px-6 py-2 md:py-3 bg-[#05998c] text-white font-semibold rounded-lg text-sm md:text-base hover:bg-[#047569] transition-colors whitespace-nowrap">Add New Patient</button>
+                <button onClick={handleAddNewPatient} className="px-4 md:px-6 py-2 md:py-3 bg-[#05998c] text-white font-semibold rounded-lg text-sm md:text-base hover:bg-[#047569] transition-colors whitespace-nowrap">Add New Patient</button>
               </div>
             </div>
             {error && <p className="text-sm md:text-base text-red-500 mt-2">{error}</p>}
@@ -103,10 +126,10 @@ export function PatientRegistry({ onNewPatient, onSelectExisting, onBackToHome,
                       <td className="px-3 md:px-4 py-2 md:py-3 text-gray-600 text-xs md:text-sm">{r.examDate}</td>
                       <td className="px-3 md:px-4 py-2 md:py-3 text-gray-600">
                         <div className="flex items-center gap-2 md:gap-3">
-                          <button aria-label={`View ${r.id}`} title="View" onClick={() => onSelectExisting(r.id)} className="p-1.5 md:p-2 rounded hover:bg-gray-50">
+                          <button aria-label={`View ${r.id}`} title="View" onClick={() => handleSelectPatient(r)} className="p-1.5 md:p-2 rounded hover:bg-gray-50">
                             <Eye className="w-4 h-4 md:w-5 md:h-5 text-gray-600" />
                           </button>
-                          <button aria-label={`Edit ${r.id}`} title="Edit" onClick={() => onSelectExisting(r.id)} className="p-1.5 md:p-2 rounded hover:bg-gray-50">
+                          <button aria-label={`Edit ${r.id}`} title="Edit" onClick={() => handleSelectPatient(r)} className="p-1.5 md:p-2 rounded hover:bg-gray-50">
                             <Edit2 className="w-4 h-4 md:w-5 md:h-5 text-gray-600" />
                           </button>
                         </div>

src/pages/ReportPage.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
-import { ArrowLeft, Download, FileText, CheckCircle, Camera } from 'lucide-react';
+import { ArrowLeft, Download, FileText, CheckCircle, Camera, Sparkles, Loader2 } from 'lucide-react';
 import html2pdf from 'html2pdf.js';
+import { SYSTEM_PROMPT, DEMO_STEP_FINDINGS } from '../config/geminiConfig';
+import { sessionStore } from '../store/sessionStore';
+
 
 type CapturedImage = {
   id: string;
@@ -16,7 +19,7 @@ type Props = {
   patientData?: any;
   capturedImages?: CapturedImage[];
   biopsyData?: any;
-  findings?: any;
+  stepFindings?: Record<string, any>;
 };
 
 export function ReportPage({
@@ -26,7 +29,7 @@ export function ReportPage({
   patientData = {},
   capturedImages = [],
   biopsyData = {},
-  findings = {}
+  stepFindings = {}
 }: Props) {
   type ImageBucket = 'native' | 'acetic' | 'lugol' | 'biopsy';
   type ImageItem = {
@@ -38,26 +41,35 @@ export function ReportPage({
 
   // Form state with dummy data
   const [formData, setFormData] = useState({
-    regNo: patientData.regNo || 'CP-2026-001',
-    name: patientData.name || 'Jane Doe',
-    opdNo: patientData.opdNo || 'OPD-45892',
-    age: patientData.age || '35',
-    parity: patientData.parity || 'P2L2',
-    wo: patientData.wo || 'Married',
-    indication: patientData.indication || 'VIA+ / PAP+ / HPV-DNA+',
-    complaint: patientData.reason || 'Abnormal bleeding, post-menopausal',
-    examQuality: 'Adequate',
-    transformationZone: 'II',
-    acetowL: 'Present',
-    diagnosis: findings.diagnosis || 'Cervical intraepithelial neoplasia (CIN) Grade II with acetowhite lesion',
-    treatmentPlan: findings.plan || 'LEEP procedure recommended, HPV testing, follow-up in 3 months',
-    followUp: findings.followUp || 'Return after 3 months for post-LEEP assessment',
-    biopsySites: biopsyData?.sites || '12 o\'clock position - CIN II',
-    biopsyNotes: biopsyData?.notes || 'Multiple biopsies taken from affected areas',
+    regNo: '',
+    name: '',
+    opdNo: '',
+    age: '',
+    parity: '',
+    bloodGroup: '',
+    lmp: '',
+    pregnancyStatus: '',
+    gestationalAgeWeeks: '',
+    monthsSinceLastDelivery: '',
+    monthsSinceAbortion: '',
+    wo: '',
+    indication: '',
+    complaint: '',
+    examQuality: '',
+    transformationZone: '',
+    acetowL: '',
+    nativeFindings: '',
+    aceticFindings: '',
+    colposcopicFindings: '',
+    treatmentPlan: '',
+    followUp: '',
+    biopsySites: '',
+    biopsyNotes: '',
     doctorSignature: '',
     signatureDate: new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
   });
 
+
   const [imageBuckets, setImageBuckets] = useState<Record<ImageBucket, ImageItem[]>>({
     native: [],
     acetic: [],
@@ -65,8 +77,11 @@ export function ReportPage({
     biopsy: []
   });
   const [showCompletionModal, setShowCompletionModal] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [aiError, setAiError] = useState<string | null>(null);
   const imageBucketsRef = useRef(imageBuckets);
   const reportContentRef = useRef<HTMLDivElement>(null);
+  const patientId = sessionStore.get().patientInfo?.id;
 
   const handleFormChange = (field: keyof typeof formData, value: string) => {
     setFormData(prev => ({
@@ -75,24 +90,442 @@ export function ReportPage({
     }));
   };
 
+  // Persist all report form fields to sessionStore on every change
+  useEffect(() => {
+    sessionStore.merge({ reportFormData: formData as unknown as Record<string, string> });
+    // formData intentionally triggers this; don't add extra deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(formData)]);
+
+  /** Convert a data-URL or object-URL to a Gemini-compatible base64 image part */
+  const toImagePart = async (src: string): Promise<{ inlineData: { data: string; mimeType: string } } | null> => {
+    try {
+      const res = await fetch(src);
+      const blob = await res.blob();
+      return new Promise(resolve => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const dataUrl = reader.result as string;
+          const [header, data] = dataUrl.split(',');
+          const mimeType = header.match(/:(.*?);/)?.[1] ?? 'image/png';
+          resolve({ inlineData: { data, mimeType } });
+        };
+        reader.onerror = () => resolve(null);
+        reader.readAsDataURL(blob);
+      });
+    } catch {
+      return null;
+    }
+  };
+
+  // On mount: restore all previously saved session data into the form
+  useEffect(() => {
+    const session = sessionStore.get();
+    console.log('[ReportPage] Session data loaded:', session);
+
+    setFormData(prev => {
+      let next = { ...prev } as any;
+
+      // 1. Overlay with any previously saved report form state
+      if (session.reportFormData) {
+        next = { ...next, ...session.reportFormData };
+        console.log('[ReportPage] Loaded reportFormData:', session.reportFormData);
+      }
+
+      // 2. Overlay with patient history data (name, age, parity, etc.)
+      const ph = session.patientHistory;
+      if (ph) {
+        if (ph.name) next.name = ph.name;
+        if (ph.age) next.age = ph.age;
+        if (ph.parity) next.parity = ph.parity;
+        if (ph.bloodGroup) next.bloodGroup = ph.bloodGroup;
+        if (ph.pregnancyStatus) next.pregnancyStatus = ph.pregnancyStatus;
+        if (ph.gestationalAgeWeeks) next.gestationalAgeWeeks = ph.gestationalAgeWeeks;
+        if (ph.monthsSinceLastDelivery) next.monthsSinceLastDelivery = ph.monthsSinceLastDelivery;
+        if (ph.monthsSinceAbortion) next.monthsSinceAbortion = ph.monthsSinceAbortion;
+        // Build indication from screening results if present
+        const indicationParts: string[] = [];
+        if (ph.papSmearResult) indicationParts.push(`PAP: ${ph.papSmearResult}`);
+        if (ph.hpvStatus) indicationParts.push(`HPV: ${ph.hpvStatus}`);
+        if (ph.hpvDnaTypes) indicationParts.push(`HPV types: ${ph.hpvDnaTypes}`);
+        if (indicationParts.length > 0) next.indication = indicationParts.join(' / ');
+        // Chief complaint from symptoms
+        const sx: string[] = [];
+        if (ph.postCoitalBleeding) sx.push('post-coital bleeding');
+        if (ph.interMenstrualBleeding) sx.push('inter-menstrual bleeding');
+        if (ph.persistentDischarge) sx.push('persistent discharge');
+        if (ph.symptomsNotes) sx.push(ph.symptomsNotes);
+        if (sx.length > 0) next.complaint = sx.join(', ');
+        console.log('[ReportPage] Loaded patientHistory:', ph);
+      }
+
+      // 3. Overlay with basic registry info
+      if (session.patientInfo) {
+        if (session.patientInfo.id) next.regNo = session.patientInfo.id;
+        if (session.patientInfo.name) next.name = session.patientInfo.name;
+        console.log('[ReportPage] Loaded patientInfo:', session.patientInfo);
+      }
+
+      console.log('[ReportPage] Final formData:', next);
+      return next;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const generateWithAI = async () => {
+    const apiKey = import.meta.env.VITE_GEMINI_API_KEY as string | undefined;
+    if (!apiKey) {
+      setAiError('API key missing — add VITE_GEMINI_API_KEY to your .env file and restart the dev server.');
+      return;
+    }
+
+    setIsGenerating(true);
+    setAiError(null);
+
+    try {
+      // Helper: format one step's ImagingObservations into readable text
+      const fmtStep = (label: string, obs: any): string => {
+        if (!obs || !Object.keys(obs).length) return `${label}: No observations recorded.`;
+        const lines: string[] = [];
+        // Common fields
+        if (obs.cervixFullyVisible) lines.push(`Cervix fully visible: ${obs.cervixFullyVisible}`);
+        const obscured = obs.obscuredBy
+          ? Object.entries(obs.obscuredBy as Record<string, boolean>).filter(([, v]) => v).map(([k]) => k)
+          : [];
+        if (obscured.length) lines.push(`Obscured by: ${obscured.join(', ')}`);
+        if (obs.adequacyNotes) lines.push(`Adequacy notes: ${obs.adequacyNotes}`);
+        if (obs.scjVisibility) lines.push(`SCJ visibility: ${obs.scjVisibility}`);
+        if (obs.scjNotes) lines.push(`SCJ notes: ${obs.scjNotes}`);
+        if (obs.tzType) lines.push(`Transformation zone type: ${obs.tzType}`);
+        // Native-specific
+        if (obs.suspiciousAtNativeView) lines.push(`Suspicious at native view: Yes`);
+        const cfindings: string[] = [];
+        if (obs.obviousGrowths) cfindings.push('obvious growths/ulcers');
+        if (obs.contactBleeding) cfindings.push('contact bleeding');
+        if (obs.irregularSurface) cfindings.push('irregular surface');
+        if (obs.other) cfindings.push('other findings');
+        if (cfindings.length) lines.push(`Clinical findings: ${cfindings.join(', ')}`);
+        // Acetowhite-specific
+        if (obs.acetowhiteDensity) lines.push(`Acetowhite density: ${obs.acetowhiteDensity}`);
+        if (obs.acetowhiteType) lines.push(`Acetowhite type: ${obs.acetowhiteType}`);
+        if (obs.acetowhiteMargins) lines.push(`Lesion margins: ${obs.acetowhiteMargins}`);
+        if (obs.lesionExtent) lines.push(`Lesion extent: ${obs.lesionExtent}`);
+        if (obs.vascularPattern) lines.push(`Vascular pattern: ${obs.vascularPattern}`);
+        // Green-filter-specific
+        if (obs.mosaicType) lines.push(`Mosaic pattern: ${obs.mosaicType}`);
+        if (obs.punctationType) lines.push(`Punctation pattern: ${obs.punctationType}`);
+        if (obs.atypicalVessels) lines.push(`Atypical vessels: Yes`);
+        if (obs.vascularNotes) lines.push(`Vascular notes: ${obs.vascularNotes}`);
+        // Lugol-specific
+        if (obs.iodineSatining) lines.push(`Iodine staining: ${obs.iodineSatining}`);
+        if (obs.schillerTest) lines.push(`Schiller test: ${obs.schillerTest}`);
+        if (obs.lesionExtentLugol) lines.push(`Iodine-negative area extent: ${obs.lesionExtentLugol}`);
+        // Free-text notes (always last)
+        if (obs.additionalNotes) lines.push(`Additional notes: ${obs.additionalNotes}`);
+        return `${label}:\n${lines.map(l => '  ' + l).join('\n')}`;
+      };
+
+      // Merge session step findings with prop findings (prop takes precedence for real-time data)
+      const session = sessionStore.get();
+      const mergedFindings = { ...(session.stepFindings ?? {}), ...(stepFindings as Record<string, any>) };
+
+      // Use real findings if available (from props or session), otherwise fall back to demo data
+      const hasRealFindings = Object.values(mergedFindings).some(obs => obs && Object.keys(obs).length > 0);
+      const sf = hasRealFindings ? mergedFindings : DEMO_STEP_FINDINGS;
+
+      const stepFindingsText = [
+        fmtStep('NATIVE EXAMINATION', sf.native),
+        fmtStep('ACETOWHITE EXAMINATION (3-5% acetic acid applied)', sf.acetowhite),
+        fmtStep('GREEN FILTER EXAMINATION', sf.greenFilter),
+        fmtStep('LUGOL EXAMINATION (Schiller iodine test)', sf.lugol),
+      ].join('\n\n');
+
+      const usingDemoData = !hasRealFindings;
+
+      // Full prompt = system instruction (from geminiConfig.ts) + patient data + observations
+      let context = `${SYSTEM_PROMPT}
+
+== PATIENT DEMOGRAPHICS ==
+Name: ${formData.name}  |  Age: ${formData.age}  |  Parity: ${formData.parity}  |  Marital status: ${formData.wo}
+OPD No: ${formData.opdNo}  |  Reg No: ${formData.regNo}
+
+== CLINICAL HISTORY (from intake form) ==
+Indication for colposcopy: ${formData.indication}
+Chief complaint: ${formData.complaint}`;
+
+      // Enrich with the full patientHistory data from the intake form
+      const ph = session.patientHistory;
+      if (ph) {
+        const pastProc = ph.pastProcedures
+          ? Object.entries(ph.pastProcedures).filter(([, v]) => v).map(([k]) => k.toUpperCase()).join(', ') || 'None'
+          : 'Not recorded';
+        const immunoList = ph.immunosuppression
+          ? Object.entries(ph.immunosuppression).filter(([, v]) => v).map(([k]) => k.toUpperCase()).join(', ') || 'None'
+          : 'Not recorded';
+        const symptoms = [
+          ph.postCoitalBleeding && 'Post-coital bleeding',
+          ph.interMenstrualBleeding && 'Inter-menstrual / post-menopausal bleeding',
+          ph.persistentDischarge && 'Persistent discharge',
+        ].filter(Boolean).join(', ') || 'None reported';
+        context += `
+Blood group: ${ph.bloodGroup || 'Not recorded'}  |  Menstrual status: ${ph.menstrualStatus || 'Not recorded'}
+HPV status: ${ph.hpvStatus || 'Not recorded'}  |  HPV vaccination: ${ph.hpvVaccination || 'Not recorded'}
+Smoking: ${ph.smoking || 'Not recorded'}  |  Immunosuppression: ${immunoList}
+PAP smear result: ${ph.papSmearResult || 'Not done'}  |  HPV DNA types: ${ph.hpvDnaTypes || 'Not recorded'}
+Presenting symptoms: ${symptoms}
+Past cervical procedures: ${pastProc}
+Screening notes: ${ph.screeningNotes || 'None'}
+Risk factor notes: ${ph.riskFactorsNotes || 'None'}`;
+      }
+
+      context += `
+
+== EXAMINATION PARAMETERS ==
+Examination quality: ${formData.examQuality}
+Transformation zone type: ${formData.transformationZone}
+Acetowhite lesion present: ${formData.acetowL}
+
+== BIOPSY INFORMATION ==
+Sites biopsied: ${formData.biopsySites}
+Biopsy notes: ${formData.biopsyNotes}
+
+== STEP-BY-STEP CLINICAL OBSERVATIONS${usingDemoData ? ' [DEMO DATA — real observations not yet recorded]' : ''} ==
+${stepFindingsText}`;
+      // Append acetic acid clinical findings (category + feature checkboxes)
+      const af = session.aceticFindings;
+      if (af && (Object.values(af.selectedCategories ?? {}).some(Boolean) ||
+        Object.values(af.selectedFindings ?? {}).some(Boolean))) {
+        const checkedCategories = Object.entries(af.selectedCategories ?? {})
+          .filter(([, v]) => v).map(([k]) => k);
+        const checkedFeatures = Object.entries(af.selectedFindings ?? {})
+          .filter(([, v]) => v).map(([k]) => k);
+        context += `
+
+== ACETOWHITE CLINICAL FINDINGS (from acetic acid examination form) ==
+Checked categories: ${checkedCategories.join(', ') || 'None'}
+Checked features:\n${checkedFeatures.map(f => '  - ' + f).join('\n') || '  (none selected)'}`;
+        if (af.additionalNotes) {
+          context += `\nClinician notes: ${af.additionalNotes}`;
+        }
+      }
+
+      // Append biopsy marking data from session if available
+      const bm = session.biopsyMarkings;
+      if (bm && (bm.lesionMarks.length > 0 || bm.totalSwedeScore > 0)) {
+        // Prefer stored marksByType; fall back to deriving it from lesionMarks
+        // (guards against old sessions where marksByType was wiped on mount)
+        const effectiveByType =
+          bm.marksByType && Object.keys(bm.marksByType).length > 0
+            ? bm.marksByType
+            : bm.lesionMarks.reduce((acc, m) => {
+              if (!acc[m.typeCode]) acc[m.typeCode] = { type: m.type, hours: [] };
+              if (!acc[m.typeCode].hours.includes(m.clockHour)) acc[m.typeCode].hours.push(m.clockHour);
+              return acc;
+            }, {} as Record<string, { type: string; hours: number[] }>);
+
+        const marksText = Object.entries(effectiveByType)
+          .map(([code, d]) => `  ${d.type} (${code}): clock positions ${d.hours.sort((a, b) => a - b).map(h => h + 'h').join(', ')}`)
+          .join('\n');
+
+        context += `
+
+== BIOPSY LESION MAPPING (from BiopsyMarking tool) ==
+Swede Score Total: ${bm.totalSwedeScore}/10
+Lesion marks on cervical clock:
+${marksText || '  (no lesions marked)'}
+Swede Score breakdown:
+  Aceto Uptake: ${bm.swedeScores.acetoUptake ?? 'not scored'}/2
+  Margins & Surface: ${bm.swedeScores.marginsAndSurface ?? 'not scored'}/2
+  Vessels: ${bm.swedeScores.vessels ?? 'not scored'}/2
+  Lesion Size: ${bm.swedeScores.lesionSize ?? 'not scored'}/2
+  Iodine Staining: ${bm.swedeScores.iodineStaining ?? 'not scored'}/2`;
+      }
+
+
+      // Collect up to 4 representative captured images (one per step)
+      const imageParts: any[] = [];
+      const stepOrder: Record<string, number> = { native: 0, acetowhite: 1, greenFilter: 2, lugol: 3, biopsyMarking: 4 };
+      const sorted = [...capturedImages].filter(i => i.type === 'image').sort((a, b) => (stepOrder[a.stepId] ?? 99) - (stepOrder[b.stepId] ?? 99));
+      const seen = new Set<string>();
+      for (const img of sorted) {
+        if (seen.has(img.stepId)) continue;
+        seen.add(img.stepId);
+        const part = await toImagePart(img.src);
+        if (part) imageParts.push(part);
+        if (imageParts.length >= 4) break;
+      }
+
+      // Step 1: discover which models this key has access to
+      const baseUrl = 'https://generativelanguage.googleapis.com/v1beta';
+      const listRes = await fetch(`${baseUrl}/models?key=${apiKey}`);
+      if (!listRes.ok) {
+        const e = await listRes.json();
+        throw new Error(e?.error?.message || `ListModels failed: HTTP ${listRes.status}`);
+      }
+      const listData = await listRes.json();
+      const allModels: any[] = listData.models || [];
+
+      // Prefer flash models that support generateContent; fall back to any that do
+      const pick =
+        allModels.find(m => m.name?.includes('flash') && m.supportedGenerationMethods?.includes('generateContent')) ||
+        allModels.find(m => m.supportedGenerationMethods?.includes('generateContent'));
+
+      if (!pick) throw new Error('No generateContent-capable model found for this API key. Check aistudio.google.com');
+
+      // pick.name is like "models/gemini-1.5-flash-001" — strip the "models/" prefix for the URL
+      const modelId = (pick.name as string).replace(/^models\//, '');
+      console.log('[Gemini] using model:', modelId);
+
+      // Step 2: call generateContent on the discovered model
+      const endpoint = `${baseUrl}/models/${modelId}:generateContent?key=${apiKey}`;
+      const reqBody = {
+        contents: [{
+          parts: [
+            { text: context },
+            ...imageParts.map((p: any) => ({
+              inlineData: { data: p.inlineData.data, mimeType: p.inlineData.mimeType }
+            }))
+          ]
+        }],
+        generationConfig: { temperature: 0.2, maxOutputTokens: 8192 }
+      };
+
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(reqBody)
+      });
+
+      if (!res.ok) {
+        const errData = await res.json();
+        throw new Error(errData?.error?.message || `HTTP ${res.status}`);
+      }
+
+      const data = await res.json();
+      const text = (data.candidates?.[0]?.content?.parts?.[0]?.text ?? '').trim();
+
+      // Parse JSON — strip any markdown fences if present
+      let jsonStr = text.replace(/^```[\w]*\n?/, '').replace(/\n?```$/, '').trim();
+
+      // Attempt to recover truncated JSON: find the last complete "key": "value", pair and close the object
+      let parsed: {
+        examQuality?: string; transformationZone?: string; acetowL?: string;
+        biopsySites?: string; biopsyNotes?: string;
+        nativeFindings?: string; aceticFindings?: string;
+        colposcopicFindings?: string; treatmentPlan?: string; followUp?: string;
+      };
+      try {
+        parsed = JSON.parse(jsonStr);
+      } catch {
+        // Try to salvage partial JSON by chopping at the last complete value
+        const lastGoodPos = Math.max(
+          jsonStr.lastIndexOf('",\n'),
+          jsonStr.lastIndexOf('", \n'),
+          jsonStr.lastIndexOf('"\n}'),
+        );
+        if (lastGoodPos > 0) {
+          const candidate = jsonStr.substring(0, lastGoodPos + 1) + '\n}';
+          try { parsed = JSON.parse(candidate); }
+          catch { throw new Error('AI returned malformed JSON even after recovery attempt'); }
+        } else {
+          throw new Error('AI returned malformed JSON and recovery was not possible');
+        }
+      }
+
+      setFormData(prev => ({
+        ...prev,
+        // Select fields — only apply if value matches allowed options
+        ...(parsed.examQuality && ['Adequate', 'Inadequate'].includes(parsed.examQuality)
+          ? { examQuality: parsed.examQuality } : {}),
+        ...(parsed.transformationZone && ['I', 'II', 'III'].includes(parsed.transformationZone)
+          ? { transformationZone: parsed.transformationZone } : {}),
+        ...(parsed.acetowL && ['Present', 'Absent'].includes(parsed.acetowL)
+          ? { acetowL: parsed.acetowL } : {}),
+        // Free-text fields
+        ...(parsed.biopsySites ? { biopsySites: parsed.biopsySites } : {}),
+        ...(parsed.biopsyNotes ? { biopsyNotes: parsed.biopsyNotes } : {}),
+        ...(parsed.nativeFindings ? { nativeFindings: parsed.nativeFindings } : {}),
+        ...(parsed.aceticFindings ? { aceticFindings: parsed.aceticFindings } : {}),
+        ...(parsed.colposcopicFindings ? { colposcopicFindings: parsed.colposcopicFindings } : {}),
+        ...(parsed.treatmentPlan ? { treatmentPlan: parsed.treatmentPlan } : {}),
+        ...(parsed.followUp ? { followUp: parsed.followUp } : {}),
+      }));
+    } catch (err: any) {
+      console.error('Gemini error:', err);
+      const msg = err?.message || err?.toString() || 'Unknown error';
+      setAiError(`AI generation failed: ${msg}`);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
   const handleExportPDF = () => {
     if (!reportContentRef.current) return;
-    
+
     const element = reportContentRef.current;
-    const patientName = patientData?.name || 'Patient';
+    const patientName = formData.name || patientData?.name || 'Patient';
     const reportDate = new Date().toISOString().split('T')[0];
-    
+
+    // ── Temporarily replace form controls with plain-text divs ────────────
+    // html2canvas clips text inside inputs/textareas when parent has overflow-hidden.
+    // We hide each control and insert a matching div overlay so the snapshot only
+    // sees normal DOM text — fully compatible with overflow-hidden parents.
+    type Replaced = { ctrl: HTMLElement; overlay: HTMLDivElement };
+    const replaced: Replaced[] = [];
+
+    element
+      .querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(
+        'input, textarea, select'
+      )
+      .forEach((ctrl) => {
+        const overlay = document.createElement('div');
+        overlay.textContent = (ctrl as HTMLInputElement).value;
+        if (ctrl.tagName === 'TEXTAREA') {
+          overlay.style.cssText =
+            'border:1px solid #e5e7eb;border-radius:6px;padding:8px;' +
+            'font-size:13px;color:#111827;white-space:pre-wrap;word-break:break-word;min-height:36px;';
+        } else {
+          overlay.style.cssText =
+            'border-bottom:2px solid #9ca3af;padding:3px 0 5px;' +
+            'font-size:13px;color:#111827;font-weight:500;min-height:22px;word-break:break-word;';
+        }
+        ctrl.parentNode!.insertBefore(overlay, ctrl);
+        ctrl.style.display = 'none';
+        replaced.push({ ctrl: ctrl as HTMLElement, overlay });
+      });
+
+    const restore = () => {
+      replaced.forEach(({ ctrl, overlay }) => {
+        overlay.remove();
+        ctrl.style.display = '';
+      });
+    };
+
     const options = {
-      margin: [10, 10, 10, 10] as [number, number, number, number],
+      margin: [12, 12, 12, 12] as [number, number, number, number],
       filename: `Colposcopy_Report_${patientName}_${reportDate}.pdf`,
       image: { type: 'jpeg' as const, quality: 0.98 },
-      html2canvas: { scale: 2 },
-      jsPDF: { orientation: 'portrait' as const, unit: 'mm', format: 'a4' }
+      html2canvas: {
+        scale: 2,
+        useCORS: true,
+        letterRendering: true,
+        scrollX: 0,
+        scrollY: -window.scrollY,
+        windowWidth: 794,
+      },
+      jsPDF: { orientation: 'portrait' as const, unit: 'mm', format: 'a4', compress: true },
+      pagebreak: { mode: ['css', 'legacy'] as string[] },
     };
-    
-    html2pdf().set(options).from(element).save();
+
+    html2pdf()
+      .set(options)
+      .from(element)
+      .save()
+      .then(restore)
+      .catch(restore);
   };
 
+
   const addFilesToBucket = (bucket: ImageBucket, files: File[]) => {
     const imageFiles = files.filter(file => file.type.startsWith('image/'));
     if (!imageFiles.length) return;
@@ -213,8 +646,8 @@ export function ReportPage({
           <div className="mb-8 bg-white rounded-2xl shadow-lg border border-gray-200 p-6 no-print print:hidden">
             <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
               <div className="flex items-center gap-4">
-                <button 
-                  onClick={onBack} 
+                <button
+                  onClick={onBack}
                   className="p-3 hover:bg-gradient-to-br from-gray-100 to-gray-50 rounded-xl transition-all duration-200 text-gray-700 shadow-sm hover:shadow-md"
                 >
                   <ArrowLeft className="w-5 h-5" />
@@ -226,24 +659,47 @@ export function ReportPage({
                     </div>
                     Colposcopy Examination Report
                   </h2>
-                  <p className="text-sm text-gray-500 mt-1 ml-1">Professional Medical Documentation</p>
+                  <div className="flex items-center gap-3 mt-2 ml-1">
+                    <p className="text-sm text-gray-500">Professional Medical Documentation</p>
+                    {patientId && (
+                      <div className="flex items-center gap-2 px-3 py-1 bg-indigo-50 border border-indigo-200 rounded-full text-xs font-mono font-semibold text-[#0A2540]">
+                        <span>ID:</span>
+                        <span>{patientId}</span>
+                      </div>
+                    )}
+                  </div>
                 </div>
               </div>
-              <div className="flex gap-3">
-                <button 
-                  onClick={handleExportPDF}
-                  className="px-5 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-200 flex items-center gap-2 shadow-md hover:shadow-lg font-medium"
-                >
-                  <Download className="w-4 h-4" />
-                  Export PDF
-                </button>
-                <button 
-                  onClick={() => setShowCompletionModal(true)} 
-                  className="px-5 py-3 bg-gradient-to-r from-[#05998c] to-[#047569] text-white rounded-xl hover:from-[#047569] hover:to-[#036356] transition-all duration-200 flex items-center gap-2 shadow-md hover:shadow-lg font-medium"
-                >
-                  Complete
-                  <CheckCircle className="w-4 h-4" />
-                </button>
+              <div className="flex flex-col gap-3">
+                <div className="flex gap-3">
+                  <button
+                    onClick={generateWithAI}
+                    disabled={isGenerating}
+                    className="px-5 py-3 bg-gradient-to-r from-violet-600 to-purple-700 text-white rounded-xl hover:from-violet-700 hover:to-purple-800 transition-all duration-200 flex items-center gap-2 shadow-md hover:shadow-lg font-medium disabled:opacity-60 disabled:cursor-not-allowed"
+                  >
+                    {isGenerating
+                      ? <><Loader2 className="w-4 h-4 animate-spin" />Generating...</>
+                      : <><Sparkles className="w-4 h-4" />Generate with AI</>}
+                  </button>
+                  <button
+                    onClick={handleExportPDF}
+                    className="px-5 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all duration-200 flex items-center gap-2 shadow-md hover:shadow-lg font-medium"
+                  >
+                    <Download className="w-4 h-4" />
+                    Export PDF
+                  </button>
+                  <button
+                    onClick={() => setShowCompletionModal(true)}
+                    className="px-5 py-3 bg-gradient-to-r from-[#05998c] to-[#047569] text-white rounded-xl hover:from-[#047569] hover:to-[#036356] transition-all duration-200 flex items-center gap-2 shadow-md hover:shadow-lg font-medium"
+                  >
+                    <CheckCircle className="w-4 h-6" />
+                    Save & Continue
+                    
+                  </button>
+                </div>
+                {aiError && (
+                  <p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2">{aiError}</p>
+                )}
               </div>
             </div>
           </div>
@@ -252,310 +708,368 @@ export function ReportPage({
 
             {/* Report Content */}
             <div className="lg:col-span-2 w-full" ref={reportContentRef}>
-              <div className="bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden print:shadow-none print:border-0 print:rounded-none print:max-h-[297mm]">
-
-                {/* Report Header with Gradient */}
-                <div className="bg-white border-b-4 border-gray-800 p-6 text-center print:p-3 print:border-b-2">
-                  <h1 className="text-2xl font-bold text-gray-900 mb-1 print:text-lg">COLPOSCOPY EXAMINATION REPORT</h1>
-                  <p className="text-sm text-gray-600 print:text-xs">Medical Documentation</p>
-                  <div className="flex items-center justify-center gap-2 text-gray-600 text-sm mt-3 print:mt-1.5 print:text-xs">
-                    <span>Date: {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
-                  </div>
-                </div>
+              {/* A4 page rules — applied only when printing */}
+              <style>{`
+                @media print {
+                  @page { size: A4 portrait; margin: 12mm; }
+                  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+                }
+              `}</style>
 
-                <div className="p-8 space-y-6 print:p-3 print:space-y-2 overflow-y-auto print:overflow-visible">
+              <div className="bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden print:shadow-none print:border-0 print:rounded-none">
 
-                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200">
-                  <h3 className="text-sm font-bold text-gray-900 mb-3 pb-2 border-b border-gray-400 print:mb-1.5 print:pb-1 print:text-xs">PATIENT INFORMATION</h3>
-                  <div className="grid grid-cols-2 md:grid-cols-3 gap-3 print:gap-1.5 text-sm">
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">Reg. No.</span>
-                      <input 
-                        type="text" 
-                        value={formData.regNo}
-                        onChange={(e) => handleFormChange('regNo', e.target.value)}
-                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
-                      />
-                    </div>
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">Name</span>
-                      <input 
-                        type="text" 
-                        value={formData.name}
-                        onChange={(e) => handleFormChange('name', e.target.value)}
-                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
-                      />
-                    </div>
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">OPD No.</span>
-                      <input 
-                        type="text" 
-                        value={formData.opdNo}
-                        onChange={(e) => handleFormChange('opdNo', e.target.value)}
-                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
-                      />
-                    </div>
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">Age</span>
-                      <input 
-                        type="text" 
-                        value={formData.age}
-                        onChange={(e) => handleFormChange('age', e.target.value)}
-                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
-                      />
-                    </div>
+                {/* ── HEADER ──────────────────────────────────────────── */}
+                <div className="bg-gradient-to-r from-[#05998c] via-[#047569] to-[#035e55] p-6 print:p-4 relative overflow-hidden">
+                  {/* decorative circles */}
+                  <div className="absolute -top-8 -right-8 w-40 h-40 rounded-full bg-white/5 pointer-events-none" />
+                  <div className="absolute -bottom-10 -left-6 w-28 h-28 rounded-full bg-white/5 pointer-events-none" />
+
+                  <div className="relative flex items-center justify-between gap-4">
+                    {/* Left – title */}
                     <div>
-                      <span className="text-xs font-semibold text-gray-600">Parity</span>
-                      <input 
-                        type="text" 
-                        value={formData.parity}
-                        onChange={(e) => handleFormChange('parity', e.target.value)}
-                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
-                      />
+                      <p className="text-white/70 text-xs font-semibold uppercase tracking-widest mb-1 print:text-[10px]">Colposcopy Examination</p>
+                      <h1 className="text-2xl print:text-lg font-bold text-white leading-tight">COLPOSCOPY REPORT</h1>
+                      <div className="flex items-center gap-3 mt-2 text-white/80 text-xs print:text-[10px]">
+                        <span>Date: {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
+                        <span className="w-1 h-1 rounded-full bg-white/50 inline-block" />
+                        <span>Pathora AI Colposcopy System</span>
+                      </div>
                     </div>
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">W/O</span>
-                      <input 
-                        type="text" 
-                        value={formData.wo}
-                        onChange={(e) => handleFormChange('wo', e.target.value)}
-                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
+
+                    {/* Right – logo */}
+                    <div className="flex-shrink-0 bg-white/10 rounded-xl p-3 print:p-1.5">
+                      <img
+                        src="/white_logo.png"
+                        alt="Pathora Logo"
+                        className="h-16 w-16 print:h-10 print:w-10 object-contain"
                       />
                     </div>
                   </div>
                 </div>
 
-                {/* Medical History */}
-                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200">
-                  <h3 className="text-sm font-bold text-gray-900 mb-3 pb-2 border-b border-gray-400 print:mb-1.5 print:pb-1 print:text-xs">CLINICAL HISTORY</h3>
-                  <div className="space-y-3 print:space-y-1 text-sm">
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">Indication for Colposcopy:</span>
-                      <input 
-                        type="text" 
-                        value={formData.indication}
-                        onChange={(e) => handleFormChange('indication', e.target.value)}
-                        className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
-                      />
+                {/* thin accent bar */}
+                <div className="h-1 bg-gradient-to-r from-[#05998c] via-teal-300 to-transparent" />
+
+                <div className="p-8 space-y-5 print:p-3 print:space-y-2 overflow-y-auto print:overflow-visible print:text-[11px]">
+
+                  {/* ── PATIENT INFORMATION ─────────────────────────── */}
+                  <div className="border border-gray-200 rounded-xl overflow-hidden print:rounded-none print:border-gray-300">
+                    <div className="bg-[#05998c]/8 border-l-4 border-[#05998c] px-4 py-2.5 print:py-1.5">
+                      <h3 className="text-xs font-bold text-[#05998c] uppercase tracking-wider print:text-[10px]">Patient Information</h3>
                     </div>
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">Chief Complaint:</span>
-                      <textarea 
-                        value={formData.complaint}
-                        onChange={(e) => handleFormChange('complaint', e.target.value)}
-                        className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border border-gray-300 focus:border-blue-500 outline-none bg-transparent p-2 print:p-0 print:border-0 print:border-b-2 print:border-gray-400 resize-none"
-                        rows={2}
-                      />
+                    <div className="p-4 print:p-2 grid grid-cols-2 md:grid-cols-3 gap-4 print:gap-2 text-sm">
+                      <div>
+                        <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px]">Patient ID</span>
+                        <input type="text" value={formData.regNo} onChange={(e) => handleFormChange('regNo', e.target.value)} className="block w-full font-medium text-gray-900 py-1 print:py-0.5 print:text-xs border-b-2 border-gray-200 focus:border-[#05998c] outline-none bg-transparent transition-colors print:border-gray-400" />
+                      </div>
+                      <div>
+                        <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px]">Patient Name</span>
+                        <input type="text" value={formData.name} onChange={(e) => handleFormChange('name', e.target.value)} className="block w-full font-medium text-gray-900 py-1 print:py-0.5 print:text-xs border-b-2 border-gray-200 focus:border-[#05998c] outline-none bg-transparent transition-colors print:border-gray-400" />
+                      </div>
+                      <div>
+                        <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px]">Age</span>
+                        <input type="text" value={formData.age} onChange={(e) => handleFormChange('age', e.target.value)} className="block w-full font-medium text-gray-900 py-1 print:py-0.5 print:text-xs border-b-2 border-gray-200 focus:border-[#05998c] outline-none bg-transparent transition-colors print:border-gray-400" />
+                      </div>
+                      <div>
+                        <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px]">Parity</span>
+                        <input type="text" value={formData.parity} onChange={(e) => handleFormChange('parity', e.target.value)} className="block w-full font-medium text-gray-900 py-1 print:py-0.5 print:text-xs border-b-2 border-gray-200 focus:border-[#05998c] outline-none bg-transparent transition-colors print:border-gray-400" />
+                      </div>
+                      <div>
+                        <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px]">Blood Group</span>
+                        <input type="text" value={formData.bloodGroup} onChange={(e) => handleFormChange('bloodGroup', e.target.value)} className="block w-full font-medium text-gray-900 py-1 print:py-0.5 print:text-xs border-b-2 border-gray-200 focus:border-[#05998c] outline-none bg-transparent transition-colors print:border-gray-400" />
+                      </div>
+                      <div>
+                        <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px]">LMP</span>
+                        <input
+                          type="text"
+                          value={formData.lmp}
+                          onChange={(e) => handleFormChange('lmp', e.target.value)}
+                          placeholder="Date or month"
+                          className="block w-full font-medium text-gray-900 py-1 print:py-0.5 print:text-xs border-b-2 border-gray-200 focus:border-[#05998c] outline-none bg-transparent transition-colors print:border-gray-400"
+                        />
+                      </div>
                     </div>
                   </div>
-                </div>
 
-                {/* Examination Details */}
-                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200">
-                  <h3 className="text-sm font-bold text-gray-900 mb-3 pb-2 border-b border-gray-400 print:mb-1.5 print:pb-1 print:text-xs">EXAMINATION FINDINGS</h3>
-                  <div className="grid grid-cols-2 md:grid-cols-3 gap-3 print:gap-1.5 text-sm">
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">Exam Quality</span>
-                      <select 
-                        value={formData.examQuality}
-                        onChange={(e) => handleFormChange('examQuality', e.target.value)}
-                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
-                      >
-                        <option>Adequate</option>
-                        <option>Inadequate</option>
-                      </select>
+                  {/* ── CLINICAL HISTORY ────────────────────────────── */}
+                  <div className="border border-gray-200 rounded-xl overflow-hidden print:rounded-none print:border-gray-300">
+                    <div className="bg-[#05998c]/8 border-l-4 border-[#05998c] px-4 py-2.5 print:py-1.5">
+                      <h3 className="text-xs font-bold text-[#05998c] uppercase tracking-wider print:text-[10px]">Clinical History</h3>
                     </div>
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">Transformation Zone</span>
-                      <select 
-                        value={formData.transformationZone}
-                        onChange={(e) => handleFormChange('transformationZone', e.target.value)}
-                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
-                      >
-                        <option>I</option>
-                        <option>II</option>
-                        <option>III</option>
-                      </select>
-                    </div>
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">Acetowhite Lesion</span>
-                      <select 
-                        value={formData.acetowL}
-                        onChange={(e) => handleFormChange('acetowL', e.target.value)}
-                        className="w-full font-medium text-gray-900 mt-0.5 print:text-xs print:mt-0 border-b border-gray-300 focus:border-blue-500 outline-none bg-transparent print:border-b-2 print:border-gray-400"
-                      >
-                        <option>Present</option>
-                        <option>Absent</option>
-                      </select>
+                    <div className="p-4 print:p-2 space-y-2 text-sm">
+                      {(() => {
+                        const session = sessionStore.get();
+                        const ph = session.patientHistory;
+                        if (!ph) return <p className="text-gray-500 italic text-xs">No patient history recorded</p>;
+                        
+                        const symptoms = [
+                          ph.postCoitalBleeding && 'Post-coital bleeding',
+                          ph.interMenstrualBleeding && 'Inter-menstrual bleeding',
+                          ph.persistentDischarge && 'Persistent discharge',
+                        ].filter(Boolean).join(', ');
+                        
+                        const pastProc = ph.pastProcedures
+                          ? Object.entries(ph.pastProcedures).filter(([, v]) => v).map(([k]) => k.toUpperCase()).join(', ')
+                          : '';
+                        
+                        const immunoList = ph.immunosuppression
+                          ? Object.entries(ph.immunosuppression).filter(([, v]) => v).map(([k]) => k.toUpperCase()).join(', ')
+                          : '';
+                        
+                        return (
+                          <div className="space-y-1.5 text-xs">
+                            {/* Pregnancy Status */}
+                            {ph.pregnancyStatus && <p><strong>Pregnancy Status:</strong> {ph.pregnancyStatus}</p>}
+                            {ph.pregnancyStatus === 'Pregnant' && ph.gestationalAgeWeeks && <p><strong>Gestational Age:</strong> {ph.gestationalAgeWeeks} weeks</p>}
+                            {ph.pregnancyStatus === 'Postpartum' && ph.monthsSinceLastDelivery && <p><strong>Months Since Last Delivery:</strong> {ph.monthsSinceLastDelivery}</p>}
+                            {ph.pregnancyStatus === 'Post-abortion' && ph.monthsSinceAbortion && <p><strong>Months Since Abortion:</strong> {ph.monthsSinceAbortion}</p>}
+                            
+                            {/* Demographics & Lifestyle */}
+                            {ph.menstrualStatus && <p><strong>Menstrual Status:</strong> {ph.menstrualStatus}</p>}
+                            {ph.sexualHistory && <p><strong>Sexual History:</strong> {ph.sexualHistory}</p>}
+                            
+                            {/* HPV Information */}
+                            {ph.hpvStatus && <p><strong>HPV Status:</strong> {ph.hpvStatus}</p>}
+                            {ph.hpvVaccination && <p><strong>HPV Vaccination:</strong> {ph.hpvVaccination}</p>}
+                            {ph.hpvDnaTypes && <p><strong>HPV DNA Types:</strong> {ph.hpvDnaTypes}</p>}
+                            
+                            {/* Presenting Symptoms */}
+                            {symptoms && <p><strong>Presenting Symptoms:</strong> {symptoms}</p>}
+                            {ph.symptomsNotes && <p><strong>Additional Symptoms:</strong> {ph.symptomsNotes}</p>}
+                            
+                            {/* Screening History */}
+                            {ph.papSmearResult && <p><strong>PAP Smear Result:</strong> {ph.papSmearResult}</p>}
+                            {ph.screeningNotes && <p><strong>Screening Notes:</strong> {ph.screeningNotes}</p>}
+                            
+                            {/* Past Procedures */}
+                            {pastProc && <p><strong>Past Cervical Procedures:</strong> {pastProc}</p>}
+                            
+                            {/* Risk Factors */}
+                            {ph.smoking && <p><strong>Smoking History:</strong> {ph.smoking}</p>}
+                            {immunoList && <p><strong>Immunosuppression:</strong> {immunoList}</p>}
+                            {ph.riskFactorsNotes && <p><strong>Risk Factors Notes:</strong> {ph.riskFactorsNotes}</p>}
+                            
+                            {/* Additional Patient Notes */}
+                            {ph.patientProfileNotes && <p><strong>Patient Profile Notes:</strong> {ph.patientProfileNotes}</p>}
+                          </div>
+                        );
+                      })()}
                     </div>
                   </div>
-                </div>
 
-                {/* Image Sections */}
-                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200">
-                  <h3 className="text-sm font-bold text-gray-900 mb-3 pb-2 border-b border-gray-400 print:mb-1.5 print:pb-1 print:text-xs">EXAMINATION IMAGES</h3>
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 print:gap-2">
-                    {(
-                      [
-                        { key: 'native', label: 'Native Image', color: 'from-blue-500 to-blue-600' },
-                        { key: 'acetic', label: 'Acetic Acid', color: 'from-purple-500 to-purple-600' },
-                        { key: 'lugol', label: 'Lugol\'s Iodine', color: 'from-amber-500 to-amber-600' },
-                        { key: 'biopsy', label: 'Biopsy Site', color: 'from-red-500 to-red-600' }
-                      ] as { key: ImageBucket; label: string; color: string }[]
-                    ).map(section => (
-                      <div
-                        key={section.key}
-                        onDrop={(e) => handleSectionDrop(e, section.key)}
-                        onDragOver={handleDragOver}
-                        className="bg-white border-2 border-dashed border-gray-300 hover:border-blue-500 p-3 print:border-solid print:border-gray-400 min-h-[140px] print:min-h-[80px]"
-                      >
-                        <div className="text-xs font-semibold text-gray-700 mb-2 print:mb-1 print:text-xs">{section.label}</div>
-                        {imageBuckets[section.key].length === 0 ? (
-                          <div className="text-center text-gray-400 text-xs py-6 print:py-2 border border-dashed border-gray-300 rounded print:text-xs">
-                            <p>Drag & drop</p>
-                          </div>
+                  {/* ── EXAMINATION FINDINGS ────────────────────────── */}
+                  <div className="border border-gray-200 rounded-xl overflow-hidden print:rounded-none print:border-gray-300">
+                    <div className="bg-[#05998c]/8 border-l-4 border-[#05998c] px-4 py-2.5 print:py-1.5">
+                      <h3 className="text-xs font-bold text-[#05998c] uppercase tracking-wider print:text-[10px]">Examination Findings</h3>
+                    </div>
+                    <div className="p-4 print:p-2 grid grid-cols-1 md:grid-cols-2 gap-4 print:gap-3">
+                      {/* Native Examination Findings */}
+                      <div className="border border-gray-200 rounded-lg p-3 print:border-gray-300">
+                        <h4 className="text-xs font-bold text-[#047569] mb-2 print:mb-1">📷 Native Examination</h4>
+                        {formData.nativeFindings ? (
+                          <div className="text-xs whitespace-pre-wrap">{formData.nativeFindings}</div>
                         ) : (
-                          <div className="grid grid-cols-2 gap-2 print:gap-1">
-                            {imageBuckets[section.key].map(item => (
-                              <div key={item.id} className="relative group">
-                                <img
-                                  src={item.url}
-                                  alt={item.name}
-                                  className="w-full h-16 print:h-12 object-cover border border-gray-300"
-                                />
-                                <button
-                                  onClick={() => removeImage(section.key, item.id)}
-                                  className="absolute top-0.5 right-0.5 text-xs px-1 py-0 bg-red-600 text-white opacity-0 group-hover:opacity-100 transition-all no-print"
-                                >
-                                  ×
-                                </button>
-                              </div>
-                            ))}
-                          </div>
+                          <p className="text-gray-500 italic text-xs">Click &quot;Generate with AI&quot; to populate findings</p>
                         )}
                       </div>
-                    ))}
+                      
+                      {/* Acetic Acid Findings */}
+                      <div className="border border-gray-200 rounded-lg p-3 print:border-gray-300">
+                        <h4 className="text-xs font-bold text-[#047569] mb-2 print:mb-1">🔬 Acetic Acid Findings</h4>
+                        {formData.aceticFindings ? (
+                          <div className="text-xs whitespace-pre-wrap">{formData.aceticFindings}</div>
+                        ) : (
+                          <p className="text-gray-500 italic text-xs">Click &quot;Generate with AI&quot; to populate findings</p>
+                        )}
+                      </div>
+                    </div>
                   </div>
-                </div>
 
-                {/* Biopsy Marking Section */}
-                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200">
-                  <h3 className="text-sm font-bold text-gray-900 mb-3 pb-2 border-b border-gray-400 print:mb-1.5 print:pb-1 print:text-xs">BIOPSY MARKING</h3>
-                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 print:gap-2">
-                    {/* Biopsy Image */}
-                    <div className="border-2 border-dashed border-gray-300 hover:border-red-500 p-3 print:border-solid print:border-gray-400 min-h-[180px] print:min-h-[120px] bg-gray-50">
-                      <div className="text-xs font-semibold text-gray-700 mb-2 print:mb-1 print:text-xs">Biopsy Marking Image</div>
-                      {biopsyData?.markedImage ? (
-                        <div className="relative w-full h-full flex items-center justify-center bg-black rounded">
-                          <img
-                            src={biopsyData.markedImage}
-                            alt="Biopsy Marking"
-                            className="w-full h-40 print:h-24 object-contain"
-                          />
+                  {/* ── EXAMINATION IMAGES ──────────────────────────── */}
+                  <div 
+                    className="border border-gray-200 rounded-xl overflow-hidden print:rounded-none print:border-gray-300"
+                    style={{  marginTop: '150px' }}
+                  >
+                    <div className="bg-[#05998c]/8 border-l-4 border-[#05998c] px-4 py-2.5 print:py-1.5">
+                      <h3 className="text-xs font-bold text-[#05998c] uppercase tracking-wider print:text-[10px]">Examination Images</h3>
+                    </div>
+                    <div className="p-4 print:p-2 grid grid-cols-1 md:grid-cols-2 gap-4 print:gap-2">
+                      {(
+                        [
+                          { key: 'native', label: 'Native Image', dot: 'bg-blue-500' },
+                          { key: 'acetic', label: 'Acetic Acid', dot: 'bg-purple-500' },
+                          { key: 'lugol', label: "Lugol's Iodine", dot: 'bg-amber-500' },
+                          { key: 'biopsy', label: 'Biopsy Site', dot: 'bg-red-500' }
+                        ] as { key: ImageBucket; label: string; dot: string }[]
+                      ).map(section => (
+                        <div
+                          key={section.key}
+                          onDrop={(e) => handleSectionDrop(e, section.key)}
+                          onDragOver={handleDragOver}
+                          className="bg-gray-50 border-2 border-dashed border-gray-200 hover:border-[#05998c] rounded-lg p-3 print:border-solid print:border-gray-300 min-h-[100px] print:min-h-0 transition-colors"
+                        >
+                          <div className="flex items-center gap-1.5 text-xs font-semibold text-gray-700 mb-2 print:mb-1">
+                            <span className={`w-2 h-2 rounded-full ${section.dot}`} />
+                            {section.label}
+                          </div>
+                          {imageBuckets[section.key].length === 0 ? (
+                            <div className="text-center text-gray-400 text-xs py-3 print:hidden">
+                              <p>Drag &amp; drop image here</p>
+                            </div>
+                          ) : (
+                            <div className="grid grid-cols-2 gap-2 print:gap-1">
+                              {imageBuckets[section.key].map(item => (
+                                <div key={item.id} className="relative group">
+                                  <img src={item.url} alt={item.name} className="w-full h-16 print:h-auto print:max-h-[80px] object-cover rounded border border-gray-200" />
+                                  <button onClick={() => removeImage(section.key, item.id)} className="absolute top-0.5 right-0.5 text-xs px-1 py-0 bg-red-600 text-white rounded opacity-0 group-hover:opacity-100 transition-all no-print">×</button>
+                                </div>
+                              ))}
+                            </div>
+                          )}
                         </div>
-                      ) : (
-                        <div className="text-center text-gray-400 text-xs py-10 print:py-4">
-                          <p>No biopsy marking</p>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* ── BIOPSY MARKING ──────────────────────────────── */}
+                  <div
+                    className="border border-gray-200 rounded-xl overflow-hidden print:rounded-none print:border-gray-300"
+                  >
+                    <div className="bg-[#05998c]/8 border-l-4 border-[#05998c] px-4 py-2.5 print:py-1.5">
+                      <h3 className="text-xs font-bold text-[#05998c] uppercase tracking-wider print:text-[10px]">Biopsy Marking</h3>
+                    </div>
+                    <div className="p-4 print:p-2 flex flex-col lg:flex-row gap-4 print:gap-3">
+                      {/* Biopsy image */}
+                      <div className="lg:w-1/2">
+                        <div className="bg-gray-50 border-2 border-dashed border-gray-200 hover:border-red-400 rounded-lg p-3 print:border-solid print:border-gray-300 min-h-[200px] print:min-h-0 transition-colors flex items-center justify-center">
+                          {biopsyData?.markedImage ? (
+                            <img src={biopsyData.markedImage} alt="Biopsy Marking" className="w-full h-auto max-h-[300px] print:max-h-[200px] object-contain" />
+                          ) : (
+                            <p className="text-gray-400 text-xs print:hidden">No biopsy marking image</p>
+                          )}
                         </div>
-                      )}
+                      </div>
+                      {/* Biopsy findings */}
+                      <div className="lg:w-1/2 space-y-3 print:space-y-2">
+                        <div>
+                          <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px] block mb-1">Biopsy Sites</span>
+                          <textarea value={formData.biopsySites} onChange={(e) => handleFormChange('biopsySites', e.target.value)} className="w-full text-gray-900 text-sm print:text-xs border border-gray-200 focus:border-[#05998c] outline-none bg-transparent p-2 print:p-1 resize-none rounded transition-colors" rows={4} />
+                        </div>
+                        <div>
+                          <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px] block mb-1">Biopsy Notes</span>
+                          <textarea value={formData.biopsyNotes} onChange={(e) => handleFormChange('biopsyNotes', e.target.value)} className="w-full text-gray-900 text-sm print:text-xs border border-gray-200 focus:border-[#05998c] outline-none bg-transparent p-2 print:p-1 resize-none rounded transition-colors" rows={4} />
+                        </div>
+                      </div>
                     </div>
+                  </div>
 
-                    {/* Biopsy Information */}
-                    <div className="space-y-3 print:space-y-1.5">
+                  {/* ── SWEDE SCORE ──────────────────────────────── */}
+                  {(() => {
+                    const session = sessionStore.get();
+                    const bm = session.biopsyMarkings;
+                    if (bm && bm.totalSwedeScore > 0) {
+                      return (
+                        <div className="border border-gray-200 rounded-xl overflow-hidden print:rounded-none print:border-gray-300">
+                          <div className="bg-[#05998c]/8 border-l-4 border-[#05998c] px-4 py-2.5 print:py-1.5">
+                            <h3 className="text-xs font-bold text-[#05998c] uppercase tracking-wider print:text-[10px]">SWEDE Score</h3>
+                          </div>
+                          <div className="p-4 print:p-2">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 print:gap-3">
+                              {/* Score Breakdown */}
+                              <div className="bg-teal-50 border border-teal-100 rounded-lg p-3 print:p-2">
+                                <p className="text-xs font-bold text-[#05998c] uppercase mb-2 print:mb-1">Score Breakdown</p>
+                                <div className="text-xs space-y-1 print:space-y-0.5">
+                                  <p><strong>Aceto Uptake:</strong> {bm.swedeScores.acetoUptake ?? 0}/2</p>
+                                  <p><strong>Margins & Surface:</strong> {bm.swedeScores.marginsAndSurface ?? 0}/2</p>
+                                  <p><strong>Vessels:</strong> {bm.swedeScores.vessels ?? 0}/2</p>
+                                  <p><strong>Lesion Size:</strong> {bm.swedeScores.lesionSize ?? 0}/2</p>
+                                  <p><strong>Iodine Staining:</strong> {bm.swedeScores.iodineStaining ?? 0}/2</p>
+                                </div>
+                              </div>
+                              
+                              {/* Total Score & Risk */}
+                              <div className="bg-gradient-to-br from-[#05998c] to-[#047569] rounded-lg p-3 print:bg-white print:border print:border-teal-200 text-white print:text-gray-900">
+                                <p className="text-[10px] font-bold uppercase tracking-wide mb-2 print:mb-1 opacity-90 print:opacity-100">Total Score</p>
+                                <div className="text-2xl print:text-lg font-bold mb-2 print:mb-1">{bm.totalSwedeScore}/10</div>
+                                <p className="text-xs font-semibold print:text-gray-700">
+                                  {bm.totalSwedeScore <= 4 && '✓ Low Risk'}
+                                  {bm.totalSwedeScore >= 5 && bm.totalSwedeScore <= 7 && '⚠ Intermediate Risk'}
+                                  {bm.totalSwedeScore >= 8 && '⚠ High Risk'}
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    }
+                    return null;
+                  })()}
+
+                  {/* ── DIAGNOSIS & MANAGEMENT PLAN ────────────────────────────── */}
+                  <div className="border border-gray-200 rounded-xl overflow-hidden print:rounded-none print:border-gray-300">
+                    <div className="bg-[#05998c]/8 border-l-4 border-[#05998c] px-4 py-2.5 print:py-1.5">
+                      <h3 className="text-xs font-bold text-[#05998c] uppercase tracking-wider print:text-[10px]">Diagnosis &amp; Management Plan</h3>
+                    </div>
+                    <div className="p-4 print:p-2 space-y-3 print:space-y-2 text-sm">
+                      {/* Colposcopic Findings including Swede Score */}
+                      <div className="bg-teal-50 border border-teal-100 rounded-lg p-3 print:bg-transparent print:border print:border-gray-300 print:p-2">
+                        <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px] block mb-1">Colposcopic Findings (Including Swede Score)</span>
+                        <textarea value={formData.colposcopicFindings} onChange={(e) => handleFormChange('colposcopicFindings', e.target.value)} placeholder="Describe colposcopic findings and include Swede score interpretation..." className="w-full text-gray-900 print:text-xs border border-gray-200 focus:border-[#05998c] outline-none bg-white p-2 print:p-1 resize-none rounded transition-colors" rows={3} />
+                      </div>
+                      
+                      {/* Treatment Plan */}
                       <div>
-                        <span className="text-xs font-semibold text-gray-600">Biopsy Sites:</span>
-                        <textarea
-                          value={formData.biopsySites}
-                          onChange={(e) => handleFormChange('biopsySites', e.target.value)}
-                          className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border border-gray-300 focus:border-red-500 outline-none bg-transparent p-2 print:p-0 print:border-0 print:border-b-2 print:border-gray-400 resize-none text-sm"
-                          rows={3}
-                        />
+                        <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px] block mb-1">Treatment Plan</span>
+                        <textarea value={formData.treatmentPlan} onChange={(e) => handleFormChange('treatmentPlan', e.target.value)} placeholder="Recommended treatment plan..." className="w-full text-gray-900 print:text-xs border border-gray-200 focus:border-[#05998c] outline-none bg-transparent p-2 print:p-1 resize-none rounded transition-colors" rows={3} />
                       </div>
+                      
+                      {/* Follow-up Plan */}
                       <div>
-                        <span className="text-xs font-semibold text-gray-600">Biopsy Notes:</span>
-                        <textarea
-                          value={formData.biopsyNotes}
-                          onChange={(e) => handleFormChange('biopsyNotes', e.target.value)}
-                          className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border border-gray-300 focus:border-red-500 outline-none bg-transparent p-2 print:p-0 print:border-0 print:border-b-2 print:border-gray-400 resize-none text-sm"
-                          rows={3}
-                        />
+                        <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px] block mb-1">Follow-up Plan</span>
+                        <textarea value={formData.followUp} onChange={(e) => handleFormChange('followUp', e.target.value)} placeholder="Follow-up recommendations..." className="w-full text-gray-900 print:text-xs border border-gray-200 focus:border-[#05998c] outline-none bg-transparent p-2 print:p-1 resize-none rounded transition-colors" rows={2} />
                       </div>
                     </div>
                   </div>
-                </div>
-    
-                {/* Diagnosis and Plan */}
-                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200">
-                  <h3 className="text-sm font-bold text-gray-900 mb-3 pb-2 border-b border-gray-400 print:mb-1.5 print:pb-1 print:text-xs">DIAGNOSIS & PLAN</h3>
-                  <div className="space-y-2 text-sm print:space-y-0.5 print:text-xs">
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">Colposcopic Diagnosis:</span>
-                      <textarea 
-                        value={formData.diagnosis}
-                        onChange={(e) => handleFormChange('diagnosis', e.target.value)}
-                        className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border border-gray-300 focus:border-blue-500 outline-none bg-transparent p-2 print:p-0 print:border-0 print:border-b-2 print:border-gray-400 resize-none"
-                        rows={2}
-                      />
-                    </div>
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">Treatment Plan:</span>
-                      <textarea 
-                        value={formData.treatmentPlan}
-                        onChange={(e) => handleFormChange('treatmentPlan', e.target.value)}
-                        className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border border-gray-300 focus:border-blue-500 outline-none bg-transparent p-2 print:p-0 print:border-0 print:border-b-2 print:border-gray-400 resize-none"
-                        rows={2}
-                      />
+
+                  {/* ── SIGNATURES ──────────────────────────────────── */}
+                  <div className="border border-gray-200 rounded-xl print:rounded-none print:border-gray-300 mt-2">
+                    <div className="bg-[#05998c]/8 border-l-4 border-[#05998c] px-4 py-2.5 print:py-1.5">
+                      <h3 className="text-xs font-bold text-[#05998c] uppercase tracking-wider print:text-[10px]">Signatures</h3>
                     </div>
-                    <div>
-                      <span className="text-xs font-semibold text-gray-600">Follow-up Plan:</span>
-                      <textarea 
-                        value={formData.followUp}
-                        onChange={(e) => handleFormChange('followUp', e.target.value)}
-                        className="w-full text-gray-900 mt-1 print:mt-0.5 print:text-xs border border-gray-300 focus:border-blue-500 outline-none bg-transparent p-2 print:p-0 print:border-0 print:border-b-2 print:border-gray-400 resize-none"
-                        rows={2}
-                      />
+                    <div className="p-4 print:p-2 grid grid-cols-1 md:grid-cols-3 gap-6 print:gap-3 text-sm print:text-xs">
+                      <div>
+                        <p className="text-[10px] font-bold text-gray-500 uppercase tracking-wide mb-10 print:mb-5">Patient Signature</p>
+                        <div className="border-b-2 border-gray-400 w-full" />
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-bold text-gray-500 uppercase tracking-wide mb-2 print:mb-1">Doctor / Clinician</p>
+                        <input type="text" value={formData.doctorSignature} onChange={(e) => handleFormChange('doctorSignature', e.target.value)} placeholder="Dr. Name &amp; Designation" className="w-full border-b-2 border-gray-400 outline-none bg-transparent text-sm print:text-xs focus:border-[#05998c] transition-colors" />
+                      </div>
+                      <div>
+                        <p className="text-[10px] font-bold text-gray-500 uppercase tracking-wide mb-2 print:mb-1">Date</p>
+                        <input type="text" value={formData.signatureDate} onChange={(e) => handleFormChange('signatureDate', e.target.value)} className="w-full border-b-2 border-gray-400 outline-none bg-transparent text-sm print:text-xs focus:border-[#05998c] transition-colors" />
+                      </div>
                     </div>
                   </div>
-                </div>
 
-                {/* Signature Section */}
-                <div className="border border-gray-300 p-4 print:p-2 print:border-gray-200 mt-6 print:mt-2">
-                  <h3 className="text-sm font-bold text-gray-900 mb-4 pb-2 border-b border-gray-400 print:mb-2 print:pb-1 print:text-xs">SIGNATURES</h3>
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 print:gap-2 text-sm print:text-xs">
-                    <div>
-                      <p className="text-xs font-semibold text-gray-600 mb-8 print:mb-3">Patient Signature</p>
-                      <div className="border-b-2 border-gray-700 w-full h-12 print:h-6"></div>
-                    </div>
-                    <div>
-                      <p className="text-xs font-semibold text-gray-600 mb-8 print:mb-3">Doctor Signature</p>
-                      <input 
-                        type="text" 
-                        value={formData.doctorSignature}
-                        onChange={(e) => handleFormChange('doctorSignature', e.target.value)}
-                        placeholder="Dr. Name"
-                        className="w-full border-b-2 border-gray-700 outline-none bg-transparent text-xs print:text-xs print:border-b-2 print:border-gray-700"
-                      />
-                    </div>
-                    <div>
-                      <p className="text-xs font-semibold text-gray-600 mb-2 print:mb-1">Date</p>
-                      <input 
-                        type="text" 
-                        value={formData.signatureDate}
-                        onChange={(e) => handleFormChange('signatureDate', e.target.value)}
-                        className="w-full border-b-2 border-gray-700 outline-none bg-transparent text-xs print:text-xs print:border-b-2 print:border-gray-700"
-                      />
+                  {/* ── FOOTER ──────────────────────────────────────── */}
+                  <div className="mt-4 pt-3 border-t border-gray-200 flex items-center justify-between text-[10px] text-gray-400 print:mt-2 print:pt-1">
+                    <div className="flex items-center gap-2">
+                      <img src="/white_logo.png" alt="Pathora" className="h-5 w-5 object-contain opacity-50 invert print:invert" />
+                      <span>Powered by <span className="font-semibold text-[#05998c]">Pathora AI</span> Colposcopy System</span>
                     </div>
+                    <span>Generated: {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</span>
                   </div>
-                </div>
 
                 </div>
               </div>
+
             </div>
 
             {/* Image Library Sidebar */}
-            <div className="lg:col-span-1 print:hidden">
-              <div className="bg-white border border-gray-300 rounded-2xl shadow-lg p-4 sticky top-[829px]">
-                <h3 className="text-sm font-bold text-gray-900 mb-4 pb-2 border-b border-gray-400">IMAGE LIBRARY</h3>
+            <div className="lg:col-span-1 print:hidden mt-[949px]">
+              <div className="bg-white border border-gray-200 rounded-2xl shadow-lg p-4 sticky top-24">
+                <h3 className="text-sm font-bold text-[#05998c] mb-4 pb-2 border-b border-gray-200 uppercase tracking-wider text-xs">Image Library</h3>
                 {capturedImages.length > 0 ? (
                   <div className="space-y-3 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar">
                     {Object.entries(
@@ -568,17 +1082,16 @@ export function ReportPage({
                     ).map(([stepId, images]) => (
                       <div key={stepId} className="bg-gradient-to-br from-gray-50 to-gray-100 border border-gray-200 rounded-lg p-3 shadow-sm">
                         <div className="flex items-center gap-2 mb-2">
-                          <div className={`w-2 h-2 rounded-full ${
-                            stepId === 'native' ? 'bg-blue-500' :
+                          <div className={`w-2 h-2 rounded-full ${stepId === 'native' ? 'bg-blue-500' :
                             stepId === 'acetowhite' ? 'bg-purple-500' :
-                            stepId === 'greenFilter' ? 'bg-green-500' :
-                            stepId === 'lugol' ? 'bg-amber-500' : 'bg-gray-500'
-                          }`}></div>
+                              stepId === 'greenFilter' ? 'bg-green-500' :
+                                stepId === 'lugol' ? 'bg-amber-500' : 'bg-gray-500'
+                            }`}></div>
                           <span className="text-xs font-bold text-gray-700 uppercase">
-                            {stepId === 'native' ? 'Native' : 
-                             stepId === 'acetowhite' ? 'Acetic Acid' : 
-                             stepId === 'greenFilter' ? 'Green Filter' : 
-                             stepId === 'lugol' ? 'Lugol' : stepId}
+                            {stepId === 'native' ? 'Native' :
+                              stepId === 'acetowhite' ? 'Acetic Acid' :
+                                stepId === 'greenFilter' ? 'Green Filter' :
+                                  stepId === 'lugol' ? 'Lugol' : stepId}
                           </span>
                         </div>
                         <div className="grid grid-cols-2 gap-2">
@@ -594,7 +1107,7 @@ export function ReportPage({
                                   alt={`Captured ${stepId}`}
                                   draggable
                                   onDragStart={(e) => handleCapturedImageDragStart(e, img)}
-                                  className="w-full h-20 object-cover border border-gray-200 cursor-grab hover:border-blue-500 hover:shadow-md transition-all"
+                                  className="w-full h-20 object-cover border border-gray-200 cursor-grab hover:border-[#05998c] hover:shadow-md transition-all rounded"
                                 />
                               )}
                             </div>
@@ -626,13 +1139,15 @@ export function ReportPage({
             </div>
             <h3 className="text-2xl font-bold text-gray-900 mb-2 text-center">Save Report</h3>
             <p className="text-gray-600 text-center mb-6">
-              Your colposcopy examination report is ready. Click "Save & Continue" to export the PDF and proceed to the patient registry.
+              Your colposcopy examination report is ready. Click "Save &amp; Continue" to export the PDF and proceed to the patient registry.
             </p>
             <div className="space-y-3">
               <button
                 onClick={() => {
                   handleExportPDF();
                   setTimeout(() => {
+                    // Clear the full session so the next patient starts with blank forms
+                    sessionStore.clear();
                     setShowCompletionModal(false);
                     (onGoToPatientRecords || onNext)();
                   }, 1000);
@@ -640,7 +1155,7 @@ export function ReportPage({
                 className="w-full px-6 py-3 bg-gradient-to-r from-[#05998c] to-[#047569] text-white rounded-xl hover:from-[#047569] hover:to-[#036356] transition-all duration-200 font-semibold shadow-md hover:shadow-lg flex items-center justify-center gap-2"
               >
                 <Download className="w-4 h-4" />
-                Save & Continue
+                Save &amp; Continue
               </button>
               <button
                 onClick={() => setShowCompletionModal(false)}

src/store/patientIdStore.ts

@@ -0,0 +1,77 @@
+/**
+ * Patient ID Store - Manages auto-generation and persistence of patient IDs
+ * Format: PT-YYYY-XXXX (e.g., PT-2026-0001)
+ */
+
+export interface PatientRecord {
+  id: string;
+  name: string;
+  examDate: string;
+}
+
+const PATIENT_HISTORY_KEY = 'pathora_patient_history';
+
+/**
+ * Generate the next patient ID in format PT-YYYY-XXXX
+ * Increments counter for current year, resets on new year
+ */
+export function generatePatientId(): string {
+  const currentYear = new Date().getFullYear();
+  const history = getPatientHistory();
+  
+  // Find the highest sequence number for the current year
+  let maxSequence = 0;
+  history.forEach(record => {
+    const match = record.id.match(/PT-(\d{4})-(\d{4})/);
+    if (match) {
+      const year = parseInt(match[1], 10);
+      const sequence = parseInt(match[2], 10);
+      if (year === currentYear && sequence > maxSequence) {
+        maxSequence = sequence;
+      }
+    }
+  });
+  
+  const nextSequence = maxSequence + 1;
+  return `PT-${currentYear}-${String(nextSequence).padStart(4, '0')}`;
+}
+
+/**
+ * Get all stored patient records
+ */
+export function getPatientHistory(): PatientRecord[] {
+  try {
+    return JSON.parse(localStorage.getItem(PATIENT_HISTORY_KEY) ?? '[]') as PatientRecord[];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Save a new patient record to history
+ */
+export function savePatientRecord(record: PatientRecord): void {
+  const history = getPatientHistory();
+  // Avoid duplicates
+  const exists = history.some(p => p.id === record.id);
+  if (!exists) {
+    history.push(record);
+    localStorage.setItem(PATIENT_HISTORY_KEY, JSON.stringify(history));
+  }
+}
+
+/**
+ * Find a patient record by ID
+ */
+export function findPatientById(id: string): PatientRecord | undefined {
+  return getPatientHistory().find(p => p.id.toLowerCase() === id.toLowerCase());
+}
+
+/**
+ * Search patients by ID (partial or exact match)
+ */
+export function searchPatients(query: string): PatientRecord[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return [];
+  return getPatientHistory().filter(p => p.id.toLowerCase().includes(q));
+}

src/store/sessionStore.ts

@@ -0,0 +1,130 @@
+/**
+ * sessionStore — localStorage-based session DB for the Pathora colposcopy assistant.
+ * Every examination page writes here; ReportPage reads the full record for AI generation.
+ *
+ * Data schema:
+ *   patientInfo      — registry id, name, exam date
+ *   patientHistory   — PatientHistoryForm (demographics, symptoms, screening, risks)
+ *   nativeFindings   — ImagingObservations for the native (untreated) step
+ *   aceticFindings   — AceticFindingsForm category+feature checkboxes for the acetic acid step
+ *   stepFindings     — generic per-step observations bucket (kept for backwards compat)
+ *   biopsyMarkings   — lesion marks with clock hours + Swede score from BiopsyMarking
+ *   reportFormData   — all free-text / select fields on ReportPage
+ *   sessionStarted   — ISO timestamp
+ */
+
+// ── Patient history form (PatientHistoryForm.tsx) ─────────────────────────────
+export interface PatientHistory {
+    name: string;
+    age: string;
+    bloodGroup: string;
+    parity: string;
+    pregnancyStatus: string;
+    gestationalAgeWeeks: string;
+    monthsSinceLastDelivery: string;
+    monthsSinceAbortion: string;
+    menstrualStatus: string;
+    sexualHistory: string;
+    hpvStatus: string;
+    hpvVaccination: string;
+    patientProfileNotes: string;
+    postCoitalBleeding: boolean;
+    interMenstrualBleeding: boolean;
+    persistentDischarge: boolean;
+    symptomsNotes: string;
+    papSmearResult: string;
+    hpvDnaTypes: string;
+    pastProcedures: { biopsy: boolean; leep: boolean; cryotherapy: boolean; none: boolean };
+    screeningNotes: string;
+    smoking: string;
+    immunosuppression: { hiv: boolean; steroids: boolean; none: boolean };
+    riskFactorsNotes: string;
+}
+
+// ── Native step visual observations (ImagingObservations.tsx, native layout) ──
+export interface NativeFindings {
+    cervixFullyVisible: 'Yes' | 'No' | null;
+    obscuredBy: { blood: boolean; inflammation: boolean; discharge: boolean; scarring: boolean };
+    adequacyNotes: string;
+    scjVisibility: string;
+    scjNotes: string;
+    tzType: string;
+    suspiciousAtNativeView: boolean;
+    obviousGrowths: boolean;
+    contactBleeding: boolean;
+    irregularSurface: boolean;
+    other: boolean;
+    additionalNotes: string;
+}
+
+// ── Acetic acid clinical findings (AceticFindingsForm.tsx) ────────────────────
+export interface AceticFindings {
+    /** Top-level categories that were checked */
+    selectedCategories: Record<string, boolean>;
+    /** Individual features within each category that were checked */
+    selectedFindings: Record<string, boolean>;
+    additionalNotes: string;
+}
+
+// ── Biopsy marking (BiopsyMarking.tsx) ────────────────────────────────────────
+export interface BiopsyMarkings {
+    lesionMarks: Array<{ type: string; typeCode: string; clockHour: number; color: string }>;
+    swedeScores: {
+        acetoUptake: number | null;
+        marginsAndSurface: number | null;
+        vessels: number | null;
+        lesionSize: number | null;
+        iodineStaining: number | null;
+    };
+    totalSwedeScore: number;
+    marksByType: Record<string, { type: string; hours: number[] }>;
+}
+
+// ── Full session record ────────────────────────────────────────────────────────
+export interface PatientSession {
+    /** Basic registry info set when a patient is selected */
+    patientInfo?: { id: string; name: string; examDate?: string };
+    /** Full patient history / intake form */
+    patientHistory?: Partial<PatientHistory>;
+    /** Native (untreated) examination visual observations */
+    nativeFindings?: Partial<NativeFindings>;
+    /** Acetic acid clinical findings checkboxes */
+    aceticFindings?: Partial<AceticFindings>;
+    /** Generic per-step observation bucket (backwards compat / future steps) */
+    stepFindings?: Record<string, any>;
+    /** Lesion marks and Swede score from BiopsyMarking */
+    biopsyMarkings?: BiopsyMarkings;
+    /** All text/select fields from the ReportPage form */
+    reportFormData?: Record<string, string>;
+    /** ISO timestamp when this session was started */
+    sessionStarted?: string;
+}
+
+const KEY = 'pathora_colpo_session';
+
+export const sessionStore = {
+    /** Read the full session from localStorage. Returns {} on error. */
+    get(): PatientSession {
+        try {
+            return JSON.parse(localStorage.getItem(KEY) ?? '{}') as PatientSession;
+        } catch {
+            return {};
+        }
+    },
+
+    /** Shallow-merge a partial update into the stored session. */
+    merge(partial: Partial<PatientSession>): void {
+        const current = sessionStore.get();
+        localStorage.setItem(KEY, JSON.stringify({ ...current, ...partial }));
+    },
+
+    /** Wipe the session (call when starting a new patient). */
+    clear(): void {
+        localStorage.removeItem(KEY);
+    },
+
+    /** Return the full session as pretty-printed JSON (for download / debugging). */
+    export(): string {
+        return JSON.stringify(sessionStore.get(), null, 2);
+    },
+};

src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_GEMINI_API_KEY?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}