Add code for Integrate memory and knowledge graph services with profile data synchronization and new dashboard components.

backend/alembic/versions/8f1b6c345678_add_profile_completion_columns.py

@@ -0,0 +1,32 @@
+"""add profile completion columns
+
+Revision ID: 8f1b6c345678
+Revises: 7e0a5b234567
+Create Date: 2025-02-06
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision: str = '8f1b6c345678'
+down_revision: Union[str, None] = '7e0a5b234567'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # Add is_completed and completed_at columns to user_profiles
+    op.add_column('user_profiles', sa.Column('is_completed', sa.Boolean(), nullable=True, default=False))
+    op.add_column('user_profiles', sa.Column('completed_at', sa.DateTime(), nullable=True))
+    
+    # Set default value for existing rows
+    op.execute("UPDATE user_profiles SET is_completed = false WHERE is_completed IS NULL")
+
+
+def downgrade() -> None:
+    op.drop_column('user_profiles', 'completed_at')
+    op.drop_column('user_profiles', 'is_completed')

backend/app/main.py

@@ -7,7 +7,7 @@ from app.settings import settings
 from app.db import init_db, engine
 from app.services.graph_service import get_graph_service
 from app.services.reminder_scheduler import start_reminder_scheduler, stop_reminder_scheduler
-from app.routes import auth, health, dashboard, reports, assistant, recommendations
+from app.routes import auth, health, dashboard, reports, assistant, recommendations, memory, graph
 from app.routes.profile import router as profile_router
 from app.routes.profile_me import router as profile_me_router
 from app.routes.websocket import router as websocket_router
@@ -107,6 +107,8 @@ app.include_router(documents_router)
 app.include_router(ai_summary_router)
 app.include_router(medicines_router)
 app.include_router(voice_router)
+app.include_router(memory.router)
+app.include_router(graph.router)
 
 @app.get("/")
 async def root():
@@ -126,6 +128,8 @@ async def root():
             "reminders": "/api/reminders",
             "sms": "/api/sms",
             "ai_summary": "/api/ai",
+            "memory": "/api/memory",
+            "graph": "/api/graph",
             "websocket": "ws://localhost:8000/ws?token=<jwt>"
         }
     }

backend/app/routes/__init__.py

@@ -1,6 +1,6 @@
 """
 Routes module for the Lumea Health Platform API.
 """
-from . import auth, health, dashboard, reports, assistant, recommendations, websocket, ai_summary, medicines
+from . import auth, health, dashboard, reports, assistant, recommendations, websocket, ai_summary, medicines, memory, graph
 
-__all__ = ['auth', 'health', 'dashboard', 'reports', 'assistant', 'recommendations', 'websocket', 'ai_summary', 'medicines']
+__all__ = ['auth', 'health', 'dashboard', 'reports', 'assistant', 'recommendations', 'websocket', 'ai_summary', 'medicines', 'memory', 'graph']

backend/app/routes/graph.py

@@ -0,0 +1,253 @@
+"""
+Graph API Routes
+
+Exposes Neo4j/Graphiti knowledge graph to frontend for viewing health relationships
+and facts.
+"""
+import logging
+from fastapi import APIRouter, Depends, Query
+from sqlalchemy.ext.asyncio import AsyncSession
+from typing import List
+
+from app.db import get_db
+from app.models import User
+from app.security import get_current_user
+from app.services.graph_service import get_graph_service
+from app.schemas_memory import (
+    GraphDataResponse,
+    GraphNode,
+    GraphRelationship,
+    GraphFactsResponse,
+    GraphSearchRequest,
+    GraphSearchResponse,
+)
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/api/graph", tags=["graph"])
+
+
+def _parse_graph_result_to_relationship(result: str) -> GraphRelationship:
+    """
+    Parse a Graphiti search result string into a GraphRelationship.
+    
+    Format: "Source -> relation -> Target"
+    """
+    try:
+        if " -> " in result:
+            parts = result.split(" -> ")
+            if len(parts) >= 3:
+                return GraphRelationship(
+                    source=parts[0].strip(),
+                    relation=parts[1].strip(),
+                    target=parts[2].strip(),
+                    properties={}
+                )
+        
+        # Fallback: treat entire string as a single fact
+        return GraphRelationship(
+            source="System",
+            relation="states",
+            target=result.strip(),
+            properties={}
+        )
+    except Exception:
+        return GraphRelationship(
+            source="Unknown",
+            relation="related_to",
+            target=result if isinstance(result, str) else str(result),
+            properties={}
+        )
+
+
+@router.get("/facts", response_model=GraphFactsResponse)
+async def get_user_graph_facts(
+    query: str = Query("health conditions medications recommendations", description="Search query for facts"),
+    limit: int = Query(20, ge=1, le=50, description="Max results"),
+    current_user: User = Depends(get_current_user),
+) -> GraphFactsResponse:
+    """
+    Get health facts/relationships from the knowledge graph for the current user.
+    
+    Returns structured relationships like:
+    - "High LDL -> leads_to -> Cardiovascular Risk"
+    - "User -> has_condition -> Diabetes"
+    """
+    graph_service = get_graph_service()
+    
+    # Check if Graphiti is available
+    if graph_service.client is None:
+        return GraphFactsResponse(
+            facts=[],
+            count=0,
+            available=False,
+            message="Knowledge graph service is not available"
+        )
+    
+    try:
+        # Search for user-relevant facts
+        results = await graph_service.search(query=query, limit=limit)
+        
+        facts = []
+        for result in results:
+            try:
+                facts.append(_parse_graph_result_to_relationship(result))
+            except Exception as e:
+                logger.warning(f"Failed to parse graph result: {e}")
+                continue
+        
+        return GraphFactsResponse(
+            facts=facts,
+            count=len(facts),
+            available=True,
+            message=None
+        )
+        
+    except Exception as e:
+        logger.error(f"Error fetching graph facts for user {current_user.id}: {e}")
+        return GraphFactsResponse(
+            facts=[],
+            count=0,
+            available=True,
+            message=f"Error fetching graph facts: {str(e)}"
+        )
+
+
+@router.post("/search", response_model=GraphSearchResponse)
+async def search_graph(
+    request: GraphSearchRequest,
+    current_user: User = Depends(get_current_user),
+) -> GraphSearchResponse:
+    """
+    Search the knowledge graph for relevant health information.
+    
+    Uses semantic search to find relationships and facts.
+    """
+    graph_service = get_graph_service()
+    
+    if graph_service.client is None:
+        return GraphSearchResponse(
+            results=[],
+            count=0,
+            available=False,
+            message="Knowledge graph service is not available"
+        )
+    
+    try:
+        results = await graph_service.search(
+            query=request.query,
+            limit=request.limit
+        )
+        
+        return GraphSearchResponse(
+            results=results if isinstance(results, list) else [],
+            count=len(results) if isinstance(results, list) else 0,
+            available=True,
+            message=None
+        )
+        
+    except Exception as e:
+        logger.error(f"Error searching graph for user {current_user.id}: {e}")
+        return GraphSearchResponse(
+            results=[],
+            count=0,
+            available=True,
+            message=f"Error searching graph: {str(e)}"
+        )
+
+
+@router.get("/relationships", response_model=GraphDataResponse)
+async def get_graph_visualization_data(
+    query: str = Query("health metrics conditions recommendations", description="Search query"),
+    limit: int = Query(30, ge=1, le=100, description="Max relationships to return"),
+    current_user: User = Depends(get_current_user),
+) -> GraphDataResponse:
+    """
+    Get graph data formatted for visualization.
+    
+    Returns nodes and relationships that can be rendered as an interactive graph.
+    """
+    graph_service = get_graph_service()
+    
+    if graph_service.client is None:
+        return GraphDataResponse(
+            nodes=[],
+            relationships=[],
+            total_nodes=0,
+            total_relationships=0,
+            available=False,
+            message="Knowledge graph service is not available"
+        )
+    
+    try:
+        results = await graph_service.search(query=query, limit=limit)
+        
+        # Build nodes and relationships from search results
+        nodes_dict = {}  # Use dict to avoid duplicates
+        relationships = []
+        
+        for result in results:
+            rel = _parse_graph_result_to_relationship(result)
+            relationships.append(rel)
+            
+            # Add source node
+            if rel.source not in nodes_dict:
+                nodes_dict[rel.source] = GraphNode(
+                    id=rel.source.lower().replace(" ", "_"),
+                    name=rel.source,
+                    type=_infer_node_type(rel.source),
+                    properties={}
+                )
+            
+            # Add target node
+            if rel.target not in nodes_dict:
+                nodes_dict[rel.target] = GraphNode(
+                    id=rel.target.lower().replace(" ", "_"),
+                    name=rel.target,
+                    type=_infer_node_type(rel.target),
+                    properties={}
+                )
+        
+        nodes = list(nodes_dict.values())
+        
+        return GraphDataResponse(
+            nodes=nodes,
+            relationships=relationships,
+            total_nodes=len(nodes),
+            total_relationships=len(relationships),
+            available=True,
+            message=None
+        )
+        
+    except Exception as e:
+        logger.error(f"Error fetching graph visualization data: {e}")
+        return GraphDataResponse(
+            nodes=[],
+            relationships=[],
+            total_nodes=0,
+            total_relationships=0,
+            available=True,
+            message=f"Error fetching graph data: {str(e)}"
+        )
+
+
+def _infer_node_type(node_name: str) -> str:
+    """
+    Infer the type of a node based on its name.
+    
+    Used for styling in the frontend visualization.
+    """
+    name_lower = node_name.lower()
+    
+    if any(kw in name_lower for kw in ["diabetes", "hypertension", "disease", "condition", "syndrome"]):
+        return "condition"
+    elif any(kw in name_lower for kw in ["cholesterol", "glucose", "ldl", "hdl", "triglyceride", "hba1c", "vitamin"]):
+        return "metric"
+    elif any(kw in name_lower for kw in ["medication", "drug", "metformin", "statin"]):
+        return "medication"
+    elif any(kw in name_lower for kw in ["recommend", "risk", "alert", "warning"]):
+        return "recommendation"
+    elif any(kw in name_lower for kw in ["user", "patient"]):
+        return "user"
+    else:
+        return "entity"

backend/app/routes/memory.py

@@ -0,0 +1,287 @@
+"""
+Memory API Routes
+
+Exposes Mem0 memory layer to frontend for viewing, managing, and searching user memories.
+"""
+import logging
+from fastapi import APIRouter, Depends, HTTPException, Query
+from sqlalchemy.ext.asyncio import AsyncSession
+from typing import Dict, Any
+
+from app.db import get_db
+from app.models import User
+from app.security import get_current_user
+from app.services.memory_service import get_memory_service
+from app.schemas_memory import (
+    MemoryListResponse,
+    MemoryFact,
+    MemoryCreateRequest,
+    MemoryCreateResponse,
+    MemoryDeleteResponse,
+    MemorySearchRequest,
+)
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/api/memory", tags=["memory"])
+
+
+def _normalize_memory_item(item: Any) -> MemoryFact:
+    """
+    Normalize a Mem0 memory item to our MemoryFact schema.
+    
+    Mem0 can return different formats depending on version/operation.
+    """
+    if isinstance(item, dict):
+        return MemoryFact(
+            id=item.get("id", item.get("memory_id", "")),
+            memory=item.get("memory", item.get("text", item.get("content", str(item)))),
+            created_at=item.get("created_at"),
+            metadata=item.get("metadata", {})
+        )
+    else:
+        # Handle string or other formats
+        return MemoryFact(
+            id=str(hash(str(item))),
+            memory=str(item),
+            created_at=None,
+            metadata={}
+        )
+
+
+@router.get("/facts", response_model=MemoryListResponse)
+async def get_user_memories(
+    current_user: User = Depends(get_current_user),
+) -> MemoryListResponse:
+    """
+    Get all stored memories/facts for the current user.
+    
+    Returns memories from Mem0 that capture user preferences, facts,
+    and relevant information extracted from conversations.
+    """
+    memory_service = get_memory_service()
+    
+    if not memory_service.is_available:
+        return MemoryListResponse(
+            facts=[],
+            total_count=0,
+            available=False,
+            message="Memory service (Mem0) is not available"
+        )
+    
+    try:
+        memories = await memory_service.get_all(user_id=str(current_user.id))
+        
+        # Handle different response formats from Mem0
+        facts = []
+        if isinstance(memories, dict):
+            # Mem0 might return {"results": [...]} or {"memories": [...]}
+            memory_list = memories.get("results", memories.get("memories", []))
+        elif isinstance(memories, list):
+            memory_list = memories
+        else:
+            memory_list = []
+        
+        for item in memory_list:
+            try:
+                facts.append(_normalize_memory_item(item))
+            except Exception as e:
+                logger.warning(f"Failed to normalize memory item: {e}")
+                continue
+        
+        return MemoryListResponse(
+            facts=facts,
+            total_count=len(facts),
+            available=True,
+            message=None
+        )
+        
+    except Exception as e:
+        logger.error(f"Error fetching memories for user {current_user.id}: {e}")
+        return MemoryListResponse(
+            facts=[],
+            total_count=0,
+            available=True,
+            message=f"Error fetching memories: {str(e)}"
+        )
+
+
+@router.post("/facts", response_model=MemoryCreateResponse)
+async def create_memory(
+    request: MemoryCreateRequest,
+    current_user: User = Depends(get_current_user),
+) -> MemoryCreateResponse:
+    """
+    Manually add a memory/fact for the current user.
+    
+    This allows users to explicitly store preferences or facts
+    that the system should remember.
+    """
+    memory_service = get_memory_service()
+    
+    if not memory_service.is_available:
+        return MemoryCreateResponse(
+            success=False,
+            id=None,
+            message="Memory service (Mem0) is not available"
+        )
+    
+    try:
+        result = await memory_service.add(
+            content=request.content,
+            user_id=str(current_user.id),
+            metadata=request.metadata
+        )
+        
+        if isinstance(result, dict) and "error" in result:
+            return MemoryCreateResponse(
+                success=False,
+                id=None,
+                message=result["error"]
+            )
+        
+        # Extract ID from result
+        memory_id = None
+        if isinstance(result, dict):
+            memory_id = result.get("id", result.get("memory_id"))
+        
+        return MemoryCreateResponse(
+            success=True,
+            id=memory_id,
+            message="Memory created successfully"
+        )
+        
+    except Exception as e:
+        logger.error(f"Error creating memory for user {current_user.id}: {e}")
+        return MemoryCreateResponse(
+            success=False,
+            id=None,
+            message=str(e)
+        )
+
+
+@router.delete("/facts/{memory_id}", response_model=MemoryDeleteResponse)
+async def delete_memory(
+    memory_id: str,
+    current_user: User = Depends(get_current_user),
+) -> MemoryDeleteResponse:
+    """
+    Delete a specific memory by ID.
+    
+    Allows users to remove memories they don't want the system to use.
+    """
+    memory_service = get_memory_service()
+    
+    if not memory_service.is_available:
+        return MemoryDeleteResponse(
+            success=False,
+            deleted_count=0,
+            message="Memory service (Mem0) is not available"
+        )
+    
+    try:
+        success = await memory_service.delete(memory_id)
+        
+        return MemoryDeleteResponse(
+            success=success,
+            deleted_count=1 if success else 0,
+            message="Memory deleted successfully" if success else "Failed to delete memory"
+        )
+        
+    except Exception as e:
+        logger.error(f"Error deleting memory {memory_id}: {e}")
+        return MemoryDeleteResponse(
+            success=False,
+            deleted_count=0,
+            message=str(e)
+        )
+
+
+@router.delete("/facts", response_model=MemoryDeleteResponse)
+async def delete_all_memories(
+    current_user: User = Depends(get_current_user),
+) -> MemoryDeleteResponse:
+    """
+    Delete all memories for the current user.
+    
+    This is a destructive operation - use with caution.
+    """
+    memory_service = get_memory_service()
+    
+    if not memory_service.is_available:
+        return MemoryDeleteResponse(
+            success=False,
+            deleted_count=0,
+            message="Memory service (Mem0) is not available"
+        )
+    
+    try:
+        success = await memory_service.delete_all(user_id=str(current_user.id))
+        
+        return MemoryDeleteResponse(
+            success=success,
+            deleted_count=-1,  # Unknown count for delete_all
+            message="All memories deleted successfully" if success else "Failed to delete memories"
+        )
+        
+    except Exception as e:
+        logger.error(f"Error deleting all memories for user {current_user.id}: {e}")
+        return MemoryDeleteResponse(
+            success=False,
+            deleted_count=0,
+            message=str(e)
+        )
+
+
+@router.post("/search")
+async def search_memories(
+    request: MemorySearchRequest,
+    current_user: User = Depends(get_current_user),
+) -> MemoryListResponse:
+    """
+    Search user memories by query.
+    
+    Uses semantic search to find relevant memories.
+    """
+    memory_service = get_memory_service()
+    
+    if not memory_service.is_available:
+        return MemoryListResponse(
+            facts=[],
+            total_count=0,
+            available=False,
+            message="Memory service (Mem0) is not available"
+        )
+    
+    try:
+        results = await memory_service.search(
+            query=request.query,
+            user_id=str(current_user.id),
+            limit=request.limit
+        )
+        
+        # Handle different response formats
+        facts = []
+        if isinstance(results, list):
+            for item in results:
+                try:
+                    facts.append(_normalize_memory_item(item))
+                except Exception as e:
+                    logger.warning(f"Failed to normalize search result: {e}")
+                    continue
+        
+        return MemoryListResponse(
+            facts=facts,
+            total_count=len(facts),
+            available=True,
+            message=None
+        )
+        
+    except Exception as e:
+        logger.error(f"Error searching memories for user {current_user.id}: {e}")
+        return MemoryListResponse(
+            facts=[],
+            total_count=0,
+            available=True,
+            message=f"Error searching memories: {str(e)}"
+        )

backend/app/routes/profile.py

@@ -588,3 +588,107 @@ async def update_wizard_state(
         "wizard_completed": profile.wizard_completed,
         "wizard_last_saved_at": profile.wizard_last_saved_at.isoformat() if profile.wizard_last_saved_at else None
     }
+
+
+# ============================================================================
+# MEMORY & GRAPH SYNC
+# ============================================================================
+
+@router.post("/sync-to-memory")
+async def sync_profile_to_memory(
+    current_user: User = Depends(get_current_user),
+    db: AsyncSession = Depends(get_db)
+):
+    """
+    Sync user profile data to Memory (Mem0) and Knowledge Graph (Neo4j).
+    
+    Called after questionnaire completion to ensure all health data
+    is available for the recommendation engine's provenance tracking.
+    """
+    from app.services.memory_service import get_memory_service
+    from app.services.graph_service import get_graph_service
+    
+    service = ProfileService(db, current_user)
+    profile_data = await service.get_full_profile()
+    
+    user_id = str(current_user.id)
+    synced = {"memory": False, "graph": False, "facts_synced": 0}
+    
+    # Build facts from profile data
+    facts_to_sync = []
+    
+    # Basic profile info
+    profile = profile_data.get("profile")
+    if profile:
+        if profile.height_cm:
+            facts_to_sync.append(f"User height is {profile.height_cm}cm")
+        if profile.weight_kg:
+            facts_to_sync.append(f"User weight is {profile.weight_kg}kg")
+        if profile.biological_sex:
+            facts_to_sync.append(f"User's biological sex is {profile.biological_sex}")
+        if profile.activity_level:
+            facts_to_sync.append(f"User's activity level is {profile.activity_level}")
+        if profile.sleep_hours:
+            facts_to_sync.append(f"User sleeps about {profile.sleep_hours} hours per night")
+    
+    # Conditions
+    for condition in profile_data.get("conditions", []):
+        if condition.condition_name:
+            facts_to_sync.append(f"User has condition: {condition.condition_name}")
+    
+    # Medications
+    for med in profile_data.get("medications", []):
+        if med.medication_name:
+            fact = f"User takes medication: {med.medication_name}"
+            if med.dosage:
+                fact += f" ({med.dosage})"
+            facts_to_sync.append(fact)
+    
+    # Allergies
+    for allergy in profile_data.get("allergies", []):
+        if allergy.allergen:
+            facts_to_sync.append(f"User is allergic to: {allergy.allergen}")
+    
+    # Family history
+    for history in profile_data.get("family_history", []):
+        if history.condition_name and history.relation:
+            facts_to_sync.append(f"Family history: {history.relation} has {history.condition_name}")
+    
+    # Sync to Memory (Mem0)
+    memory_service = get_memory_service()
+    if memory_service.is_available and facts_to_sync:
+        try:
+            for fact in facts_to_sync:
+                await memory_service.add(
+                    messages=fact,
+                    user_id=user_id,
+                    metadata={"source": "questionnaire_sync"}
+                )
+            synced["memory"] = True
+            synced["facts_synced"] = len(facts_to_sync)
+            logger.info(f"Synced {len(facts_to_sync)} facts to Mem0 for user {user_id}")
+        except Exception as e:
+            logger.warning(f"Failed to sync to Mem0: {e}")
+    
+    # Sync to Graph (Neo4j/Graphiti)
+    graph_service = get_graph_service()
+    if graph_service.client is not None and facts_to_sync:
+        try:
+            # Graphiti/Neo4j usually expects episodes or structured data
+            # For now, add as text-based facts
+            for fact in facts_to_sync:
+                await graph_service.add_fact(
+                    fact=fact,
+                    source="questionnaire"
+                )
+            synced["graph"] = True
+            logger.info(f"Synced {len(facts_to_sync)} facts to Neo4j for user {user_id}")
+        except Exception as e:
+            logger.warning(f"Failed to sync to Neo4j (may not support add_fact): {e}")
+    
+    return {
+        "success": True,
+        "synced": synced,
+        "message": f"Synced {synced['facts_synced']} profile facts to memory/graph layers"
+    }
+

backend/app/routes/recommendations.py

@@ -167,6 +167,11 @@ async def get_stored_recommendations(
         
         items = []
         for rec in recommendations:
+            # Extract provenance from evidence_jsonb
+            provenance = {}
+            if rec.evidence_jsonb:
+                provenance = rec.evidence_jsonb.get("provenance", {})
+            
             items.append({
                 "id": str(rec.id),
                 "title": rec.title,
@@ -175,6 +180,7 @@ async def get_stored_recommendations(
                 "priority": _priority_to_label(rec.priority),
                 "actions": rec.evidence_jsonb.get("actions", []) if rec.evidence_jsonb else [],
                 "evidence": rec.evidence_jsonb.get("evidence", []) if rec.evidence_jsonb else [],
+                "provenance": provenance,  # NEW: Include provenance for tooltip
                 "created_at": rec.created_at.isoformat() if rec.created_at else None,
                 "is_completed": rec.completed_at is not None
             })

backend/app/schemas_memory.py

@@ -0,0 +1,109 @@
+"""
+Memory and Graph API Schemas
+
+Pydantic models for memory (Mem0) and knowledge graph (Neo4j/Graphiti) endpoints.
+"""
+from pydantic import BaseModel, Field, ConfigDict
+from datetime import datetime
+from typing import Optional, List, Dict, Any
+from uuid import UUID
+
+
+# ============================================================================
+# MEMORY (Mem0) SCHEMAS
+# ============================================================================
+
+class MemoryFact(BaseModel):
+    """Single memory item from Mem0."""
+    id: str = Field(..., description="Unique memory ID")
+    memory: str = Field(..., description="The stored memory/fact text")
+    created_at: Optional[datetime] = Field(None, description="When the memory was created")
+    metadata: Optional[Dict[str, Any]] = Field(default_factory=dict, description="Additional metadata")
+    
+    model_config = ConfigDict(from_attributes=True)
+
+
+class MemoryListResponse(BaseModel):
+    """Response containing list of user memories."""
+    facts: List[MemoryFact] = Field(default_factory=list, description="List of memory facts")
+    total_count: int = Field(0, description="Total number of memories")
+    available: bool = Field(True, description="Whether Mem0 service is available")
+    message: Optional[str] = Field(None, description="Optional status message")
+
+
+class MemoryCreateRequest(BaseModel):
+    """Request to create a new memory."""
+    content: str = Field(..., min_length=1, max_length=5000, description="Memory content to store")
+    metadata: Optional[Dict[str, Any]] = Field(default_factory=dict, description="Optional metadata")
+
+
+class MemoryCreateResponse(BaseModel):
+    """Response after creating a memory."""
+    success: bool = Field(..., description="Whether creation succeeded")
+    id: Optional[str] = Field(None, description="ID of created memory")
+    message: Optional[str] = Field(None, description="Status message")
+
+
+class MemoryDeleteResponse(BaseModel):
+    """Response after deleting memory/memories."""
+    success: bool = Field(..., description="Whether deletion succeeded")
+    deleted_count: int = Field(0, description="Number of memories deleted")
+    message: Optional[str] = Field(None, description="Status message")
+
+
+class MemorySearchRequest(BaseModel):
+    """Request to search memories."""
+    query: str = Field(..., min_length=1, max_length=500, description="Search query")
+    limit: int = Field(5, ge=1, le=20, description="Max results to return")
+
+
+# ============================================================================
+# KNOWLEDGE GRAPH (Neo4j/Graphiti) SCHEMAS
+# ============================================================================
+
+class GraphNode(BaseModel):
+    """A node in the knowledge graph."""
+    id: str = Field(..., description="Node identifier")
+    name: str = Field(..., description="Node name/label")
+    type: str = Field("entity", description="Node type (condition, metric, recommendation, etc.)")
+    properties: Optional[Dict[str, Any]] = Field(default_factory=dict, description="Node properties")
+
+
+class GraphRelationship(BaseModel):
+    """A relationship/edge in the knowledge graph."""
+    source: str = Field(..., description="Source node name")
+    relation: str = Field(..., description="Relationship type")
+    target: str = Field(..., description="Target node name")
+    properties: Optional[Dict[str, Any]] = Field(default_factory=dict, description="Relationship properties")
+
+
+class GraphDataResponse(BaseModel):
+    """Full graph data for visualization."""
+    nodes: List[GraphNode] = Field(default_factory=list, description="Graph nodes")
+    relationships: List[GraphRelationship] = Field(default_factory=list, description="Graph edges")
+    total_nodes: int = Field(0, description="Total node count")
+    total_relationships: int = Field(0, description="Total relationship count")
+    available: bool = Field(True, description="Whether graph service is available")
+    message: Optional[str] = Field(None, description="Optional status message")
+
+
+class GraphSearchRequest(BaseModel):
+    """Request to search the knowledge graph."""
+    query: str = Field(..., min_length=1, max_length=500, description="Search query")
+    limit: int = Field(10, ge=1, le=50, description="Max results to return")
+
+
+class GraphSearchResponse(BaseModel):
+    """Response from graph search."""
+    results: List[str] = Field(default_factory=list, description="Search results as formatted strings")
+    count: int = Field(0, description="Number of results")
+    available: bool = Field(True, description="Whether graph service is available")
+    message: Optional[str] = Field(None, description="Optional status message")
+
+
+class GraphFactsResponse(BaseModel):
+    """User's health facts from the knowledge graph."""
+    facts: List[GraphRelationship] = Field(default_factory=list, description="Health relationships/facts")
+    count: int = Field(0, description="Number of facts")
+    available: bool = Field(True, description="Whether graph service is available")
+    message: Optional[str] = Field(None, description="Optional status message")

backend/app/services/grok_recommendation_service.py

@@ -19,6 +19,9 @@ from app.models import (
 )
 from app.settings import settings
 from app.services.recommendation_service import get_user_recommendations
+from app.services.memory_service import get_memory_service
+from app.services.rag_service import get_rag_service
+from app.services.graph_service import get_graph_service
 
 logger = logging.getLogger(__name__)
 
@@ -111,7 +114,14 @@ async def generate_grok_recommendations(
 
 
 def _build_grok_prompt(context: Dict[str, Any]) -> str:
-    """Build prompt for Grok API based on user health data."""
+    """Build prompt for Grok API based on user health data.
+    
+    Includes:
+    - User profile and conditions (from PostgreSQL)
+    - User preferences and facts (from Mem0)
+    - Historical context (from RAG)
+    - Medical relationships (from Neo4j/Graphiti)
+    """
     
     prompt_parts = [
         "Analyze the following health profile and generate personalized recommendations.",
@@ -162,6 +172,46 @@ def _build_grok_prompt(context: Dict[str, Any]) -> str:
             for factor, score in sorted(contributions.items(), key=lambda x: x[1], reverse=True)[:5]:
                 prompt_parts.append(f"- {factor}: {score}")
     
+    # =========================================================================
+    # NEW: User Preferences from Mem0
+    # =========================================================================
+    user_preferences = context.get("user_preferences", [])
+    if user_preferences:
+        prompt_parts.append("")
+        prompt_parts.append("**User Preferences & Personal Context:** (IMPORTANT: Tailor recommendations to these)")
+        for pref in user_preferences[:7]:  # Limit to avoid prompt bloat
+            prompt_parts.append(f"- {pref}")
+    
+    # =========================================================================
+    # NEW: Historical Context from RAG
+    # =========================================================================
+    historical_context = context.get("historical_context", [])
+    if historical_context:
+        prompt_parts.append("")
+        prompt_parts.append("**Historical Health Data:**")
+        for snippet in historical_context[:5]:  # Limit to avoid prompt bloat
+            # Truncate long snippets
+            display_snippet = snippet[:300] + "..." if len(snippet) > 300 else snippet
+            prompt_parts.append(f"- {display_snippet}")
+    
+    # =========================================================================
+    # NEW: Medical Relationships from Neo4j/Graphiti
+    # =========================================================================
+    medical_relationships = context.get("medical_relationships", [])
+    if medical_relationships:
+        prompt_parts.append("")
+        prompt_parts.append("**Known Medical Relationships:**")
+        for rel in medical_relationships[:8]:  # Limit to avoid prompt bloat
+            prompt_parts.append(f"- {rel}")
+    
+    prompt_parts.append("")
+    prompt_parts.append("**IMPORTANT INSTRUCTIONS:**")
+    if user_preferences:
+        prompt_parts.append("- PERSONALIZE recommendations based on the user's preferences above")
+        prompt_parts.append("- Consider their lifestyle, dietary preferences, and stated concerns")
+    prompt_parts.append("- Be specific and actionable")
+    prompt_parts.append("- Prioritize based on health risk and user context")
+    
     prompt_parts.append("")
     prompt_parts.append("**Required Output Format:**")
     prompt_parts.append("Generate 3-7 recommendations in this JSON array format:")
@@ -225,9 +275,10 @@ def _parse_grok_response(content: str) -> List[Dict[str, Any]]:
 async def save_recommendations_to_db(
     user_id: str,
     recommendations: List[Dict[str, Any]],
-    db: AsyncSession
+    db: AsyncSession,
+    context: Optional[Dict[str, Any]] = None
 ) -> None:
-    """Save generated recommendations to database."""
+    """Save generated recommendations to database with provenance tracking."""
     
     # Deactivate old recommendations
     result = await db.execute(
@@ -243,6 +294,16 @@ async def save_recommendations_to_db(
     priority_map = {"high": 1, "medium": 5, "low": 8}
     
     for rec_data in recommendations:
+        # Build provenance info based on context
+        provenance = {}
+        if context:
+            provenance = {
+                "memory": bool(context.get("user_preferences")),
+                "graph": bool(context.get("medical_relationships")),
+                "metrics": bool(context.get("observations")),
+                "profile": bool(context.get("profile")),
+            }
+        
         new_rec = ProfileRecommendation(
             user_id=user_id,
             recommendation_type=rec_data.get("category", "lifestyle"),
@@ -253,7 +314,8 @@ async def save_recommendations_to_db(
             evidence_jsonb={
                 "actions": rec_data.get("actions", []),
                 "evidence": rec_data.get("evidence", []),
-                "source": "grok_api"
+                "source": "grok_api",
+                "provenance": provenance,
             },
             is_active=True
         )
@@ -287,9 +349,9 @@ async def generate_and_save_recommendations(
         # Convert to our format for storage
         grok_recommendations = _convert_rule_recommendations(rule_recommendations)
     
-    # Save to database
+    # Save to database with context for provenance
     if grok_recommendations:
-        await save_recommendations_to_db(user_id, grok_recommendations, db)
+        await save_recommendations_to_db(user_id, grok_recommendations, db, context)
     
     return {
         "count": len(grok_recommendations),
@@ -299,10 +361,22 @@ async def generate_and_save_recommendations(
 
 
 async def _gather_user_context(user_id: str, db: AsyncSession) -> Dict[str, Any]:
-    """Gather all relevant user health data for recommendation generation."""
+    """Gather all relevant user health data for recommendation generation.
+    
+    Integrates data from:
+    1. PostgreSQL (profile, conditions, observations, health index)
+    2. Mem0 (user preferences and facts from conversations)
+    3. RAG (historical report context)
+    4. Neo4j/Graphiti (medical knowledge relationships)
+    """
+    import asyncio
     
     context = {}
     
+    # =========================================================================
+    # 1. POSTGRESQL DATA (existing functionality)
+    # =========================================================================
+    
     # Get profile
     result = await db.execute(
         select(UserProfile).where(UserProfile.user_id == user_id)
@@ -373,6 +447,122 @@ async def _gather_user_context(user_id: str, db: AsyncSession) -> Dict[str, Any]
             "contributions": health_index.contributions or {}
         }
     
+    # =========================================================================
+    # 2. MEMORY/KNOWLEDGE LAYER (NEW - parallel async queries)
+    # =========================================================================
+    
+    # Define async tasks for each service
+    async def get_memory_context():
+        """Fetch user preferences from Mem0."""
+        try:
+            memory_service = get_memory_service()
+            if not memory_service.is_available:
+                return []
+            
+            # Search for preferences relevant to recommendations
+            results = await memory_service.search(
+                query="preferences diet exercise lifestyle medication health goals concerns",
+                user_id=user_id,
+                limit=10
+            )
+            
+            # Extract memory text from results
+            memories = []
+            if isinstance(results, list):
+                for item in results:
+                    if isinstance(item, dict):
+                        text = item.get("memory", item.get("text", item.get("content", "")))
+                    else:
+                        text = str(item)
+                    if text:
+                        memories.append(text)
+            
+            return memories
+        except Exception as e:
+            logger.warning(f"Failed to get memory context: {e}")
+            return []
+    
+    async def get_rag_context():
+        """Fetch relevant historical data from RAG."""
+        try:
+            rag_service = get_rag_service()
+            
+            # Query for historical health patterns
+            results = await rag_service.query(
+                user_id=user_id,
+                query="health trends patterns previous recommendations lab results",
+                k=5
+            )
+            
+            # Extract relevant snippets
+            snippets = []
+            if results:
+                for doc in results:
+                    if isinstance(doc, dict):
+                        content = doc.get("content", doc.get("text", ""))
+                        if content:
+                            # Truncate long snippets
+                            snippets.append(content[:500] if len(content) > 500 else content)
+            
+            return snippets
+        except Exception as e:
+            logger.warning(f"Failed to get RAG context: {e}")
+            return []
+    
+    async def get_graph_context():
+        """Fetch medical relationships from Neo4j/Graphiti."""
+        try:
+            graph_service = get_graph_service()
+            if graph_service.client is None:
+                return []
+            
+            # Search for relevant medical knowledge
+            results = await graph_service.search(
+                query="health conditions medications recommendations risk factors",
+                limit=10
+            )
+            
+            return results if isinstance(results, list) else []
+        except Exception as e:
+            logger.warning(f"Failed to get graph context: {e}")
+            return []
+    
+    # Execute all queries in parallel for performance
+    try:
+        memory_results, rag_results, graph_results = await asyncio.gather(
+            get_memory_context(),
+            get_rag_context(),
+            get_graph_context(),
+            return_exceptions=True
+        )
+        
+        # Handle any exceptions from gather
+        if isinstance(memory_results, Exception):
+            logger.warning(f"Memory query failed: {memory_results}")
+            memory_results = []
+        if isinstance(rag_results, Exception):
+            logger.warning(f"RAG query failed: {rag_results}")
+            rag_results = []
+        if isinstance(graph_results, Exception):
+            logger.warning(f"Graph query failed: {graph_results}")
+            graph_results = []
+        
+        # Add to context
+        context["user_preferences"] = memory_results
+        context["historical_context"] = rag_results
+        context["medical_relationships"] = graph_results
+        
+        logger.info(
+            f"Context enriched with {len(memory_results)} memories, "
+            f"{len(rag_results)} RAG docs, {len(graph_results)} graph facts"
+        )
+        
+    except Exception as e:
+        logger.error(f"Failed to gather memory/knowledge context: {e}")
+        context["user_preferences"] = []
+        context["historical_context"] = []
+        context["medical_relationships"] = []
+    
     return context
 
 

backend/tests/test_routes_graph.py

@@ -0,0 +1,161 @@
+"""
+Tests for Graph API Routes
+
+Tests the /api/graph endpoints for knowledge graph queries.
+"""
+import pytest
+from unittest.mock import MagicMock, patch, AsyncMock
+
+
+class TestGraphRoutes:
+    """Test suite for graph API routes."""
+    
+    @pytest.fixture
+    def mock_graph_service(self):
+        """Create a mock graph service."""
+        mock_service = MagicMock()
+        mock_service.client = MagicMock()  # Service is available
+        mock_service.search = AsyncMock(return_value=[
+            "High LDL -> leads_to -> Cardiovascular Risk",
+            "Diabetes -> requires -> Blood Sugar Monitoring",
+            "Exercise -> improves -> Cardiovascular Health",
+        ])
+        return mock_service
+
+    @pytest.fixture
+    def mock_graph_service_unavailable(self):
+        """Create a mock graph service that's unavailable."""
+        mock_service = MagicMock()
+        mock_service.client = None  # Service unavailable
+        return mock_service
+
+    @pytest.fixture
+    def mock_user(self):
+        """Create a mock user."""
+        user = MagicMock()
+        user.id = "test-user-123"
+        return user
+
+    @pytest.mark.asyncio
+    async def test_get_user_graph_facts_success(self, mock_graph_service, mock_user):
+        """Test successful retrieval of graph facts."""
+        with patch('app.routes.graph.get_graph_service', return_value=mock_graph_service):
+            from app.routes.graph import get_user_graph_facts
+            
+            result = await get_user_graph_facts(
+                query="health conditions",
+                limit=20,
+                current_user=mock_user
+            )
+            
+            assert result.available is True
+            assert result.count == 3
+            assert len(result.facts) == 3
+            mock_graph_service.search.assert_called_once()
+
+    @pytest.mark.asyncio
+    async def test_get_user_graph_facts_unavailable(self, mock_graph_service_unavailable, mock_user):
+        """Test handling when graph service is unavailable."""
+        with patch('app.routes.graph.get_graph_service', return_value=mock_graph_service_unavailable):
+            from app.routes.graph import get_user_graph_facts
+            
+            result = await get_user_graph_facts(
+                query="health",
+                limit=20,
+                current_user=mock_user
+            )
+            
+            assert result.available is False
+            assert result.count == 0
+            assert len(result.facts) == 0
+            assert "not available" in result.message.lower()
+
+    @pytest.mark.asyncio
+    async def test_search_graph_success(self, mock_graph_service, mock_user):
+        """Test successful graph search."""
+        with patch('app.routes.graph.get_graph_service', return_value=mock_graph_service):
+            from app.routes.graph import search_graph
+            from app.schemas_memory import GraphSearchRequest
+            
+            request = GraphSearchRequest(query="cardiovascular", limit=10)
+            result = await search_graph(request=request, current_user=mock_user)
+            
+            assert result.available is True
+            assert result.count == 3
+            mock_graph_service.search.assert_called_once_with(
+                query="cardiovascular",
+                limit=10
+            )
+
+    @pytest.mark.asyncio
+    async def test_get_graph_visualization_data_success(self, mock_graph_service, mock_user):
+        """Test successful retrieval of graph visualization data."""
+        with patch('app.routes.graph.get_graph_service', return_value=mock_graph_service):
+            from app.routes.graph import get_graph_visualization_data
+            
+            result = await get_graph_visualization_data(
+                query="health",
+                limit=30,
+                current_user=mock_user
+            )
+            
+            assert result.available is True
+            assert result.total_relationships == 3
+            assert result.total_nodes > 0  # Should have created nodes from relationships
+            assert len(result.nodes) > 0
+            assert len(result.relationships) == 3
+
+    @pytest.mark.asyncio
+    async def test_relationship_parsing(self, mock_graph_service, mock_user):
+        """Test that relationships are correctly parsed from search results."""
+        with patch('app.routes.graph.get_graph_service', return_value=mock_graph_service):
+            from app.routes.graph import get_user_graph_facts
+            
+            result = await get_user_graph_facts(
+                query="test",
+                limit=10,
+                current_user=mock_user
+            )
+            
+            # Check first relationship is parsed correctly
+            rel = result.facts[0]
+            assert rel.source == "High LDL"
+            assert rel.relation == "leads_to"
+            assert rel.target == "Cardiovascular Risk"
+
+    @pytest.mark.asyncio
+    async def test_graph_error_handling(self, mock_user):
+        """Test error handling in graph routes."""
+        mock_service = MagicMock()
+        mock_service.client = MagicMock()  # Service available
+        mock_service.search = AsyncMock(side_effect=Exception("Neo4j connection error"))
+        
+        with patch('app.routes.graph.get_graph_service', return_value=mock_service):
+            from app.routes.graph import get_user_graph_facts
+            
+            result = await get_user_graph_facts(
+                query="test",
+                limit=10,
+                current_user=mock_user
+            )
+            
+            # Should return empty list with error message, not raise
+            assert result.count == 0
+            assert "error" in result.message.lower()
+
+    @pytest.mark.asyncio
+    async def test_node_type_inference(self, mock_graph_service, mock_user):
+        """Test that node types are correctly inferred."""
+        with patch('app.routes.graph.get_graph_service', return_value=mock_graph_service):
+            from app.routes.graph import get_graph_visualization_data
+            
+            result = await get_graph_visualization_data(
+                query="test",
+                limit=10,
+                current_user=mock_user
+            )
+            
+            # Check that nodes have types
+            node_types = {node.type for node in result.nodes}
+            # Should have at least some type variety
+            assert len(node_types) >= 1

backend/tests/test_routes_memory.py

@@ -0,0 +1,134 @@
+"""
+Tests for Memory API Routes
+
+Tests the /api/memory endpoints for CRUD operations on user memories.
+"""
+import pytest
+from unittest.mock import MagicMock, patch, AsyncMock
+
+
+class TestMemoryRoutes:
+    """Test suite for memory API routes."""
+    
+    @pytest.fixture
+    def mock_memory_service(self):
+        """Create a mock memory service."""
+        mock_service = MagicMock()
+        mock_service.is_available = True
+        mock_service.get_all = AsyncMock(return_value=[
+            {"id": "mem-1", "memory": "User prefers vegetarian diet", "created_at": None, "metadata": {}},
+            {"id": "mem-2", "memory": "User exercises in the morning", "created_at": None, "metadata": {}},
+        ])
+        mock_service.search = AsyncMock(return_value=[
+            {"id": "mem-1", "memory": "User prefers vegetarian diet", "created_at": None, "metadata": {}},
+        ])
+        mock_service.add = AsyncMock(return_value={"id": "mem-new", "memory": "New preference"})
+        mock_service.delete = AsyncMock(return_value=True)
+        mock_service.delete_all = AsyncMock(return_value=True)
+        return mock_service
+
+    @pytest.fixture
+    def mock_user(self):
+        """Create a mock user."""
+        user = MagicMock()
+        user.id = "test-user-123"
+        return user
+
+    @pytest.mark.asyncio
+    async def test_get_user_memories_success(self, mock_memory_service, mock_user):
+        """Test successful retrieval of user memories."""
+        with patch('app.routes.memory.get_memory_service', return_value=mock_memory_service):
+            from app.routes.memory import get_user_memories
+            
+            result = await get_user_memories(current_user=mock_user)
+            
+            assert result.available is True
+            assert result.total_count == 2
+            assert len(result.facts) == 2
+            mock_memory_service.get_all.assert_called_once_with(user_id="test-user-123")
+
+    @pytest.mark.asyncio
+    async def test_get_user_memories_service_unavailable(self, mock_user):
+        """Test handling when memory service is unavailable."""
+        mock_service = MagicMock()
+        mock_service.is_available = False
+        
+        with patch('app.routes.memory.get_memory_service', return_value=mock_service):
+            from app.routes.memory import get_user_memories
+            
+            result = await get_user_memories(current_user=mock_user)
+            
+            assert result.available is False
+            assert result.total_count == 0
+            assert len(result.facts) == 0
+            assert "not available" in result.message.lower()
+
+    @pytest.mark.asyncio
+    async def test_search_memories_success(self, mock_memory_service, mock_user):
+        """Test successful memory search."""
+        with patch('app.routes.memory.get_memory_service', return_value=mock_memory_service):
+            from app.routes.memory import search_memories
+            from app.schemas_memory import MemorySearchRequest
+            
+            request = MemorySearchRequest(query="diet", limit=5)
+            result = await search_memories(request=request, current_user=mock_user)
+            
+            assert result.available is True
+            assert result.total_count == 1
+            mock_memory_service.search.assert_called_once_with(
+                query="diet",
+                user_id="test-user-123",
+                limit=5
+            )
+
+    @pytest.mark.asyncio
+    async def test_create_memory_success(self, mock_memory_service, mock_user):
+        """Test successful memory creation."""
+        with patch('app.routes.memory.get_memory_service', return_value=mock_memory_service):
+            from app.routes.memory import create_memory
+            from app.schemas_memory import MemoryCreateRequest
+            
+            request = MemoryCreateRequest(content="I prefer low sodium diet")
+            result = await create_memory(request=request, current_user=mock_user)
+            
+            assert result.success is True
+            mock_memory_service.add.assert_called_once()
+
+    @pytest.mark.asyncio
+    async def test_delete_memory_success(self, mock_memory_service, mock_user):
+        """Test successful memory deletion."""
+        with patch('app.routes.memory.get_memory_service', return_value=mock_memory_service):
+            from app.routes.memory import delete_memory
+            
+            result = await delete_memory(memory_id="mem-1", current_user=mock_user)
+            
+            assert result.success is True
+            assert result.deleted_count == 1
+            mock_memory_service.delete.assert_called_once_with("mem-1")
+
+    @pytest.mark.asyncio
+    async def test_delete_all_memories_success(self, mock_memory_service, mock_user):
+        """Test successful deletion of all memories."""
+        with patch('app.routes.memory.get_memory_service', return_value=mock_memory_service):
+            from app.routes.memory import delete_all_memories
+            
+            result = await delete_all_memories(current_user=mock_user)
+            
+            assert result.success is True
+            mock_memory_service.delete_all.assert_called_once_with(user_id="test-user-123")
+
+    @pytest.mark.asyncio
+    async def test_memory_error_handling(self, mock_user):
+        """Test error handling in memory routes."""
+        mock_service = MagicMock()
+        mock_service.is_available = True
+        mock_service.get_all = AsyncMock(side_effect=Exception("Database error"))
+        
+        with patch('app.routes.memory.get_memory_service', return_value=mock_service):
+            from app.routes.memory import get_user_memories
+            
+            result = await get_user_memories(current_user=mock_user)
+            
+            # Should return empty list with error message, not raise
+            assert result.total_count == 0
+            assert "error" in result.message.lower()

frontend/src/App.tsx

@@ -10,6 +10,7 @@ import Settings from './pages/Settings'
 import Recommendations from './pages/Recommendations'
 import Medicines from './pages/Medicines'
 import VoiceAgent from './pages/VoiceAgent'
+import Features from './pages/Features'
 import ProtectedRoute from './components/ProtectedRoute'
 import './App.css'
 
@@ -20,69 +21,77 @@ function App() {
         <Route path="/" element={<HomePage />} />
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<Signup />} />
-        <Route 
-          path="/dashboard" 
+        <Route
+          path="/dashboard"
           element={
             <ProtectedRoute>
               <Dashboard />
             </ProtectedRoute>
-          } 
+          }
         />
-        <Route 
-          path="/reports" 
+        <Route
+          path="/reports"
           element={
             <ProtectedRoute>
               <Reports />
             </ProtectedRoute>
-          } 
+          }
         />
-        <Route 
-          path="/report-summary" 
+        <Route
+          path="/report-summary"
           element={
             <ProtectedRoute>
               <ReportSummary />
             </ProtectedRoute>
-          } 
+          }
         />
-        <Route 
-          path="/recommendations" 
+        <Route
+          path="/recommendations"
           element={
             <ProtectedRoute>
               <Recommendations />
             </ProtectedRoute>
-          } 
+          }
         />
-        <Route 
-          path="/medicines" 
+        <Route
+          path="/medicines"
           element={
             <ProtectedRoute>
               <Medicines />
             </ProtectedRoute>
-          } 
+          }
         />
-        <Route 
-          path="/voice-agent" 
+        <Route
+          path="/voice-agent"
           element={
             <ProtectedRoute>
               <VoiceAgent />
             </ProtectedRoute>
-          } 
+          }
         />
-        <Route 
-          path="/health-profile" 
+        <Route
+          path="/health-profile"
           element={
             <ProtectedRoute>
               <HealthProfile />
             </ProtectedRoute>
-          } 
+          }
         />
-        <Route 
-          path="/settings" 
+        <Route
+          path="/features"
+          element={
+            <ProtectedRoute>
+              <Features />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/settings"
           element={
             <ProtectedRoute>
               <Settings />
             </ProtectedRoute>
-          } 
+          }
         />
         {/* Catch-all: redirect unknown routes to home */}
         <Route path="*" element={<Navigate to="/" replace />} />

frontend/src/components/HealthGraph.css

@@ -0,0 +1,345 @@
+/* ============================================================================
+   Health Graph Visualization Styles
+   Uses dashboard design tokens for consistent theming
+   ============================================================================ */
+
+.health-graph {
+    background: var(--dash-surface, #faf8f4);
+    border-radius: var(--dash-radius-xl, 1.5rem);
+    margin-top: var(--dash-spacing-lg, 1.5rem);
+    box-shadow: var(--dash-shadow-sm, 0 2px 8px rgba(107, 145, 117, 0.08));
+    overflow: hidden;
+}
+
+/* Header */
+.health-graph-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--dash-spacing-lg, 1.5rem) var(--dash-spacing-xl, 2rem);
+    cursor: pointer;
+    transition: background var(--dash-transition-base, 250ms);
+    user-select: none;
+}
+
+.health-graph-header:hover {
+    background: var(--dash-surface-hover, #ffffff);
+}
+
+.health-graph-header-left {
+    display: flex;
+    align-items: center;
+    gap: var(--dash-spacing-md, 1rem);
+}
+
+.health-graph-icon {
+    color: var(--dash-accent, #6b9175);
+}
+
+.health-graph-header h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--dash-text, #2d2d2d);
+    margin: 0;
+    font-family: var(--dash-font-serif, 'Playfair Display', Georgia, serif);
+}
+
+.health-graph-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.25rem 0.75rem;
+    background: var(--dash-accent-pale, #e8f3eb);
+    color: var(--dash-accent-dark, #4a7c59);
+    border-radius: var(--dash-radius-full, 9999px);
+    font-size: 0.8125rem;
+    font-weight: 600;
+}
+
+.health-graph-header-right {
+    color: var(--dash-text-muted, #999999);
+}
+
+/* Content */
+.health-graph-content {
+    overflow: hidden;
+    border-top: 1px solid var(--dash-border-light, #f0ebe3);
+}
+
+/* Toolbar */
+.health-graph-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--dash-spacing-md, 1rem) var(--dash-spacing-xl, 2rem);
+    background: var(--dash-surface-hover, #ffffff);
+}
+
+.health-graph-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--dash-spacing-xs, 0.5rem);
+    background: var(--dash-surface, #faf8f4);
+    border: 1px solid var(--dash-border, #e5dfd5);
+    border-radius: var(--dash-radius-md, 0.75rem);
+    padding: 0.25rem;
+}
+
+.health-graph-controls button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    color: var(--dash-text-secondary, #6b6b6b);
+    border-radius: var(--dash-radius-sm, 0.5rem);
+    cursor: pointer;
+    transition: all var(--dash-transition-fast, 150ms);
+}
+
+.health-graph-controls button:hover {
+    background: var(--dash-accent-pale, #e8f3eb);
+    color: var(--dash-accent-dark, #4a7c59);
+}
+
+.zoom-level {
+    font-size: 0.8125rem;
+    color: var(--dash-text-secondary, #6b6b6b);
+    min-width: 44px;
+    text-align: center;
+    font-weight: 500;
+}
+
+.health-graph-refresh {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: none;
+    background: var(--dash-accent-pale, #e8f3eb);
+    color: var(--dash-accent-dark, #4a7c59);
+    border-radius: var(--dash-radius-md, 0.75rem);
+    cursor: pointer;
+    transition: all var(--dash-transition-base, 250ms);
+    border: 1px solid var(--dash-accent-light, #8fb199);
+}
+
+.health-graph-refresh:hover {
+    background: var(--dash-accent-light, #8fb199);
+    color: white;
+}
+
+/* States */
+.health-graph-loading,
+.health-graph-empty,
+.health-graph-unavailable {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--dash-spacing-2xl, 3rem);
+    text-align: center;
+    color: var(--dash-text-secondary, #6b6b6b);
+}
+
+.health-graph-loading svg,
+.health-graph-empty svg,
+.health-graph-unavailable svg {
+    color: var(--dash-accent, #6b9175);
+    opacity: 0.5;
+}
+
+.health-graph-loading p,
+.health-graph-empty p,
+.health-graph-unavailable p {
+    margin: var(--dash-spacing-md, 1rem) 0 var(--dash-spacing-xs, 0.5rem);
+    font-weight: 600;
+    color: var(--dash-text, #2d2d2d);
+    font-size: 1.1rem;
+}
+
+.health-graph-empty span,
+.health-graph-unavailable span {
+    font-size: 0.9rem;
+    max-width: 320px;
+    line-height: 1.5;
+}
+
+.health-graph-error {
+    display: flex;
+    align-items: center;
+    gap: var(--dash-spacing-sm, 0.75rem);
+    padding: var(--dash-spacing-md, 1rem) var(--dash-spacing-xl, 2rem);
+    background: rgba(200, 90, 84, 0.1);
+    color: var(--dash-danger, #c85a54);
+    font-size: 0.875rem;
+}
+
+/* Canvas */
+.health-graph-canvas-wrapper {
+    position: relative;
+    padding: var(--dash-spacing-lg, 1.5rem);
+    background: white;
+    margin: 0 var(--dash-spacing-xl, 2rem) var(--dash-spacing-lg, 1.5rem);
+    border-radius: var(--dash-radius-lg, 1rem);
+    border: 1px solid var(--dash-border, #e5dfd5);
+    overflow: hidden;
+}
+
+.health-graph-canvas {
+    width: 100%;
+    height: 400px;
+    transition: transform var(--dash-transition-fast, 150ms);
+    transform-origin: center center;
+}
+
+/* SVG Styles */
+.relationship-line {
+    stroke: var(--dash-border, #e5dfd5);
+    stroke-width: 2;
+    fill: none;
+}
+
+.relationship-label {
+    font-size: 10px;
+    fill: var(--dash-text-muted, #999999);
+    text-anchor: middle;
+    pointer-events: none;
+    font-family: var(--dash-font-sans, 'DM Sans', sans-serif);
+}
+
+.node {
+    cursor: pointer;
+    transition: transform var(--dash-transition-fast, 150ms);
+}
+
+.node:hover {
+    transform: scale(1.1);
+}
+
+.node-circle {
+    stroke: white;
+    stroke-width: 3;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+    transition: all var(--dash-transition-fast, 150ms);
+}
+
+.node:hover .node-circle {
+    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
+}
+
+.node-label {
+    font-size: 10px;
+    fill: white;
+    font-weight: 600;
+    pointer-events: none;
+    font-family: var(--dash-font-sans, 'DM Sans', sans-serif);
+}
+
+/* Tooltip */
+.health-graph-tooltip {
+    position: absolute;
+    top: var(--dash-spacing-md, 1rem);
+    right: var(--dash-spacing-md, 1rem);
+    background: var(--dash-text, #2d2d2d);
+    color: white;
+    padding: var(--dash-spacing-md, 1rem) var(--dash-spacing-lg, 1.5rem);
+    border-radius: var(--dash-radius-md, 0.75rem);
+    font-size: 0.875rem;
+    box-shadow: var(--dash-shadow-md, 0 4px 16px rgba(107, 145, 117, 0.12));
+    z-index: 10;
+}
+
+.health-graph-tooltip strong {
+    display: block;
+    margin-bottom: 0.25rem;
+}
+
+.tooltip-type {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--dash-text-muted, #999999);
+    text-transform: capitalize;
+}
+
+/* Legend */
+.health-graph-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--dash-spacing-md, 1rem);
+    padding: var(--dash-spacing-md, 1rem) var(--dash-spacing-xl, 2rem);
+    background: var(--dash-surface-hover, #ffffff);
+    justify-content: center;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: var(--dash-spacing-xs, 0.5rem);
+}
+
+.legend-color {
+    width: 12px;
+    height: 12px;
+    border-radius: var(--dash-radius-full, 9999px);
+    flex-shrink: 0;
+    border: 2px solid white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.legend-label {
+    font-size: 0.8125rem;
+    color: var(--dash-text-secondary, #6b6b6b);
+    text-transform: capitalize;
+}
+
+/* Footer */
+.health-graph-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--dash-spacing-sm, 0.75rem);
+    padding: var(--dash-spacing-md, 1rem) var(--dash-spacing-xl, 2rem);
+    background: var(--dash-accent-pale, #e8f3eb);
+    font-size: 0.85rem;
+    color: var(--dash-accent-dark, #4a7c59);
+}
+
+/* Spinner animation */
+.spinning {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .health-graph-header {
+        padding: var(--dash-spacing-md, 1rem);
+    }
+
+    .health-graph-toolbar {
+        padding: var(--dash-spacing-md, 1rem);
+        flex-wrap: wrap;
+        gap: var(--dash-spacing-sm, 0.75rem);
+    }
+
+    .health-graph-canvas-wrapper {
+        margin: 0 var(--dash-spacing-md, 1rem) var(--dash-spacing-md, 1rem);
+    }
+
+    .health-graph-canvas {
+        height: 300px;
+    }
+
+    .health-graph-legend {
+        padding: var(--dash-spacing-sm, 0.75rem) var(--dash-spacing-md, 1rem);
+        gap: var(--dash-spacing-sm, 0.75rem);
+    }
+}

frontend/src/components/HealthGraph.tsx

@@ -0,0 +1,356 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+    Network,
+    RefreshCw,
+    ChevronDown,
+    ChevronUp,
+    AlertCircle,
+    Sparkles,
+    ZoomIn,
+    ZoomOut,
+    Maximize2,
+    Info,
+} from 'lucide-react';
+import { API_BASE_URL } from '../config/api';
+import './HealthGraph.css';
+
+// Types matching backend schemas
+interface GraphNode {
+    id: string;
+    name: string;
+    type: string;
+    properties: Record<string, unknown>;
+}
+
+interface GraphRelationship {
+    source: string;
+    relation: string;
+    target: string;
+    properties: Record<string, unknown>;
+}
+
+interface GraphDataResponse {
+    nodes: GraphNode[];
+    relationships: GraphRelationship[];
+    total_nodes: number;
+    total_relationships: number;
+    available: boolean;
+    message: string | null;
+}
+
+interface HealthGraphProps {
+    authToken?: string;
+    apiBaseUrl?: string;
+    defaultCollapsed?: boolean;
+}
+
+// Node type colors - using dashboard theme palette
+const nodeColors: Record<string, string> = {
+    condition: '#c85a54',     // dash-danger (red)
+    metric: '#7a9cc6',        // dash-info (blue)
+    medication: '#6b9175',    // dash-accent (green)
+    recommendation: '#d9a962', // dash-warning (amber)
+    user: '#4a7c59',          // dash-accent-dark (dark green)
+    entity: '#999999',        // dash-text-muted (gray)
+};
+
+const HealthGraph: React.FC<HealthGraphProps> = ({
+    authToken,
+    apiBaseUrl = API_BASE_URL,
+    defaultCollapsed = true,
+}) => {
+    const [graphData, setGraphData] = useState<GraphDataResponse | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const [available, setAvailable] = useState(true);
+    const [zoom, setZoom] = useState(1);
+    const [hoveredNode, setHoveredNode] = useState<GraphNode | null>(null);
+    const svgRef = useRef<SVGSVGElement>(null);
+
+    const fetchGraphData = useCallback(async () => {
+        if (!authToken) {
+            setError('Authentication required');
+            return;
+        }
+
+        setLoading(true);
+        setError(null);
+
+        try {
+            const response = await fetch(`${apiBaseUrl}/api/graph/relationships?limit=30`, {
+                headers: {
+                    Authorization: `Bearer ${authToken}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error(`Failed to fetch graph data: ${response.status}`);
+            }
+
+            const data: GraphDataResponse = await response.json();
+            setGraphData(data);
+            setAvailable(data.available);
+            if (data.message) {
+                setError(data.message);
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load graph data');
+        } finally {
+            setLoading(false);
+        }
+    }, [authToken, apiBaseUrl]);
+
+    useEffect(() => {
+        if (!collapsed && authToken) {
+            fetchGraphData();
+        }
+    }, [collapsed, authToken, fetchGraphData]);
+
+    // Simple force-directed layout calculation (simplified)
+    const calculateLayout = useCallback((nodes: GraphNode[], relationships: GraphRelationship[]) => {
+        const width = 600;
+        const height = 400;
+        const centerX = width / 2;
+        const centerY = height / 2;
+
+        // Position nodes in a circle or hierarchical layout
+        const nodePositions: Record<string, { x: number; y: number }> = {};
+        const nodeCount = nodes.length;
+
+        if (nodeCount === 0) return nodePositions;
+
+        // Group nodes by type
+        const nodesByType: Record<string, GraphNode[]> = {};
+        nodes.forEach(node => {
+            if (!nodesByType[node.type]) {
+                nodesByType[node.type] = [];
+            }
+            nodesByType[node.type].push(node);
+        });
+
+        // Position nodes by type in concentric circles
+        const types = Object.keys(nodesByType);
+        let currentRadius = 80;
+
+        types.forEach((type, typeIndex) => {
+            const typeNodes = nodesByType[type];
+            const angleStep = (2 * Math.PI) / typeNodes.length;
+            const offsetAngle = (typeIndex * Math.PI) / types.length;
+
+            typeNodes.forEach((node, nodeIndex) => {
+                const angle = offsetAngle + nodeIndex * angleStep;
+                nodePositions[node.id] = {
+                    x: centerX + currentRadius * Math.cos(angle),
+                    y: centerY + currentRadius * Math.sin(angle),
+                };
+            });
+
+            currentRadius += 60;
+        });
+
+        return nodePositions;
+    }, []);
+
+    const nodePositions = graphData
+        ? calculateLayout(graphData.nodes, graphData.relationships)
+        : {};
+
+    const handleZoomIn = () => setZoom(prev => Math.min(prev + 0.2, 2));
+    const handleZoomOut = () => setZoom(prev => Math.max(prev - 0.2, 0.5));
+    const handleResetZoom = () => setZoom(1);
+
+    return (
+        <div className="health-graph">
+            <div
+                className="health-graph-header"
+                onClick={() => setCollapsed(!collapsed)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => e.key === 'Enter' && setCollapsed(!collapsed)}
+            >
+                <div className="health-graph-header-left">
+                    <Network size={20} className="health-graph-icon" />
+                    <h3>Health Knowledge Graph</h3>
+                    <span className="health-graph-badge">
+                        {available ? (
+                            <>{graphData?.total_nodes || 0} nodes</>
+                        ) : (
+                            <><AlertCircle size={12} /> Offline</>
+                        )}
+                    </span>
+                </div>
+                <div className="health-graph-header-right">
+                    {collapsed ? <ChevronDown size={20} /> : <ChevronUp size={20} />}
+                </div>
+            </div>
+
+            <AnimatePresence>
+                {!collapsed && (
+                    <motion.div
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{ height: 'auto', opacity: 1 }}
+                        exit={{ height: 0, opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="health-graph-content"
+                    >
+                        {!available ? (
+                            <div className="health-graph-unavailable">
+                                <AlertCircle size={32} />
+                                <p>Knowledge graph service is not available</p>
+                                <span>Neo4j connection is required for relationship visualization.</span>
+                            </div>
+                        ) : loading ? (
+                            <div className="health-graph-loading">
+                                <RefreshCw size={24} className="spinning" />
+                                <p>Loading health relationships...</p>
+                            </div>
+                        ) : !graphData || graphData.nodes.length === 0 ? (
+                            <div className="health-graph-empty">
+                                <Sparkles size={32} />
+                                <p>No health relationships yet</p>
+                                <span>Relationships will be discovered as you chat with the assistant.</span>
+                            </div>
+                        ) : (
+                            <>
+                                <div className="health-graph-toolbar">
+                                    <div className="health-graph-controls">
+                                        <button onClick={handleZoomOut} title="Zoom out">
+                                            <ZoomOut size={16} />
+                                        </button>
+                                        <span className="zoom-level">{Math.round(zoom * 100)}%</span>
+                                        <button onClick={handleZoomIn} title="Zoom in">
+                                            <ZoomIn size={16} />
+                                        </button>
+                                        <button onClick={handleResetZoom} title="Reset zoom">
+                                            <Maximize2 size={16} />
+                                        </button>
+                                    </div>
+                                    <button
+                                        className="health-graph-refresh"
+                                        onClick={fetchGraphData}
+                                        title="Refresh"
+                                    >
+                                        <RefreshCw size={16} />
+                                    </button>
+                                </div>
+
+                                {error && (
+                                    <div className="health-graph-error">
+                                        <AlertCircle size={16} />
+                                        <span>{error}</span>
+                                    </div>
+                                )}
+
+                                <div className="health-graph-canvas-wrapper">
+                                    <svg
+                                        ref={svgRef}
+                                        className="health-graph-canvas"
+                                        viewBox="0 0 600 400"
+                                        style={{ transform: `scale(${zoom})` }}
+                                    >
+                                        {/* Relationship lines */}
+                                        <g className="relationships">
+                                            {graphData.relationships.map((rel, index) => {
+                                                const sourcePos = nodePositions[rel.source.toLowerCase().replace(/ /g, '_')];
+                                                const targetPos = nodePositions[rel.target.toLowerCase().replace(/ /g, '_')];
+
+                                                if (!sourcePos || !targetPos) return null;
+
+                                                return (
+                                                    <g key={`rel-${index}`} className="relationship">
+                                                        <line
+                                                            x1={sourcePos.x}
+                                                            y1={sourcePos.y}
+                                                            x2={targetPos.x}
+                                                            y2={targetPos.y}
+                                                            className="relationship-line"
+                                                        />
+                                                        <text
+                                                            x={(sourcePos.x + targetPos.x) / 2}
+                                                            y={(sourcePos.y + targetPos.y) / 2 - 5}
+                                                            className="relationship-label"
+                                                        >
+                                                            {rel.relation}
+                                                        </text>
+                                                    </g>
+                                                );
+                                            })}
+                                        </g>
+
+                                        {/* Nodes */}
+                                        <g className="nodes">
+                                            {graphData.nodes.map((node) => {
+                                                const pos = nodePositions[node.id];
+                                                if (!pos) return null;
+
+                                                const isHovered = hoveredNode?.id === node.id;
+
+                                                return (
+                                                    <g
+                                                        key={node.id}
+                                                        className="node"
+                                                        transform={`translate(${pos.x}, ${pos.y})`}
+                                                        onMouseEnter={() => setHoveredNode(node)}
+                                                        onMouseLeave={() => setHoveredNode(null)}
+                                                    >
+                                                        <circle
+                                                            r={isHovered ? 28 : 24}
+                                                            fill={nodeColors[node.type] || nodeColors.entity}
+                                                            className="node-circle"
+                                                        />
+                                                        <text
+                                                            y={5}
+                                                            textAnchor="middle"
+                                                            className="node-label"
+                                                        >
+                                                            {node.name.length > 12
+                                                                ? node.name.slice(0, 10) + '...'
+                                                                : node.name}
+                                                        </text>
+                                                    </g>
+                                                );
+                                            })}
+                                        </g>
+                                    </svg>
+
+                                    {/* Tooltip */}
+                                    {hoveredNode && (
+                                        <div className="health-graph-tooltip">
+                                            <strong>{hoveredNode.name}</strong>
+                                            <span className="tooltip-type">{hoveredNode.type}</span>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* Legend */}
+                                <div className="health-graph-legend">
+                                    {Object.entries(nodeColors).slice(0, 5).map(([type, color]) => (
+                                        <div key={type} className="legend-item">
+                                            <span
+                                                className="legend-color"
+                                                style={{ backgroundColor: color }}
+                                            />
+                                            <span className="legend-label">{type}</span>
+                                        </div>
+                                    ))}
+                                </div>
+
+                                <div className="health-graph-footer">
+                                    <Info size={14} />
+                                    <span>
+                                        Showing {graphData.total_nodes} entities and {graphData.total_relationships} relationships
+                                    </span>
+                                </div>
+                            </>
+                        )}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};
+
+export default HealthGraph;

frontend/src/components/MemoryDashboard.css

@@ -0,0 +1,481 @@
+/* ============================================================================
+   Memory Dashboard Styles
+   Uses dashboard design tokens for consistent theming
+   ============================================================================ */
+
+.memory-dashboard {
+  background: var(--dash-surface, #faf8f4);
+  border-radius: var(--dash-radius-xl, 1.5rem);
+  margin-top: var(--dash-spacing-lg, 1.5rem);
+  box-shadow: var(--dash-shadow-sm, 0 2px 8px rgba(107, 145, 117, 0.08));
+  overflow: hidden;
+}
+
+/* Header - Clickable to expand/collapse */
+.memory-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--dash-spacing-lg, 1.5rem) var(--dash-spacing-xl, 2rem);
+  cursor: pointer;
+  transition: background var(--dash-transition-base, 250ms);
+  user-select: none;
+  border-bottom: 1px solid transparent;
+}
+
+.memory-header:hover {
+  background: var(--dash-surface-hover, #ffffff);
+}
+
+.memory-header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--dash-spacing-md, 1rem);
+}
+
+.memory-icon {
+  color: var(--dash-accent, #6b9175);
+}
+
+.memory-header h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--dash-text, #2d2d2d);
+  margin: 0;
+  font-family: var(--dash-font-serif, 'Playfair Display', Georgia, serif);
+}
+
+.memory-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.75rem;
+  background: var(--dash-accent-pale, #e8f3eb);
+  color: var(--dash-accent-dark, #4a7c59);
+  border-radius: var(--dash-radius-full, 9999px);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.memory-header-right {
+  color: var(--dash-text-muted, #999999);
+}
+
+/* Content Area */
+.memory-content {
+  overflow: hidden;
+  border-top: 1px solid var(--dash-border-light, #f0ebe3);
+}
+
+/* Toolbar */
+.memory-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--dash-spacing-md, 1rem) var(--dash-spacing-xl, 2rem);
+  gap: var(--dash-spacing-md, 1rem);
+  background: var(--dash-surface-hover, #ffffff);
+}
+
+.memory-search {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: var(--dash-spacing-sm, 0.75rem);
+  background: var(--dash-surface, #faf8f4);
+  border: 1px solid var(--dash-border, #e5dfd5);
+  border-radius: var(--dash-radius-md, 0.75rem);
+  padding: 0.5rem 0.875rem;
+  transition: all var(--dash-transition-fast, 150ms);
+}
+
+.memory-search:focus-within {
+  border-color: var(--dash-accent, #6b9175);
+  box-shadow: 0 0 0 3px var(--dash-accent-pale, #e8f3eb);
+}
+
+.memory-search svg {
+  color: var(--dash-text-muted, #999999);
+  flex-shrink: 0;
+}
+
+.memory-search input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 0.9rem;
+  color: var(--dash-text, #2d2d2d);
+  background: transparent;
+  font-family: var(--dash-font-sans, 'DM Sans', sans-serif);
+}
+
+.memory-search input::placeholder {
+  color: var(--dash-text-muted, #999999);
+}
+
+.memory-search-clear {
+  background: none;
+  border: none;
+  padding: 0.2rem;
+  cursor: pointer;
+  color: var(--dash-text-muted, #999999);
+  display: flex;
+  align-items: center;
+  border-radius: var(--dash-radius-sm, 0.5rem);
+  transition: all var(--dash-transition-fast, 150ms);
+}
+
+.memory-search-clear:hover {
+  color: var(--dash-text-secondary, #6b6b6b);
+  background: var(--dash-border-light, #f0ebe3);
+}
+
+.memory-actions {
+  display: flex;
+  gap: var(--dash-spacing-sm, 0.75rem);
+}
+
+.memory-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.625rem 1rem;
+  border-radius: var(--dash-radius-md, 0.75rem);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all var(--dash-transition-base, 250ms);
+  font-family: var(--dash-font-sans, 'DM Sans', sans-serif);
+}
+
+.memory-btn-add {
+  background: var(--dash-accent, #6b9175);
+  color: white;
+  box-shadow: 0 2px 4px rgba(107, 145, 117, 0.2);
+}
+
+.memory-btn-add:hover {
+  background: var(--dash-accent-dark, #4a7c59);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(107, 145, 117, 0.25);
+}
+
+.memory-btn-refresh {
+  background: var(--dash-accent-pale, #e8f3eb);
+  color: var(--dash-accent-dark, #4a7c59);
+  border: 1px solid var(--dash-accent-light, #8fb199);
+}
+
+.memory-btn-refresh:hover:not(:disabled) {
+  background: var(--dash-accent-light, #8fb199);
+  color: white;
+}
+
+.memory-btn-refresh:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* States */
+.memory-loading,
+.memory-empty,
+.memory-unavailable {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--dash-spacing-2xl, 3rem);
+  text-align: center;
+  color: var(--dash-text-secondary, #6b6b6b);
+}
+
+.memory-loading svg,
+.memory-empty svg,
+.memory-unavailable svg {
+  color: var(--dash-accent, #6b9175);
+  opacity: 0.5;
+}
+
+.memory-loading p,
+.memory-empty p,
+.memory-unavailable p {
+  margin: var(--dash-spacing-md, 1rem) 0 var(--dash-spacing-xs, 0.5rem);
+  font-weight: 600;
+  color: var(--dash-text, #2d2d2d);
+  font-size: 1.1rem;
+}
+
+.memory-empty span,
+.memory-unavailable span {
+  font-size: 0.9rem;
+  max-width: 320px;
+  line-height: 1.5;
+}
+
+.memory-error {
+  display: flex;
+  align-items: center;
+  gap: var(--dash-spacing-sm, 0.75rem);
+  padding: var(--dash-spacing-md, 1rem) var(--dash-spacing-xl, 2rem);
+  background: rgba(200, 90, 84, 0.1);
+  color: var(--dash-danger, #c85a54);
+  font-size: 0.875rem;
+}
+
+.memory-error svg {
+  flex-shrink: 0;
+}
+
+/* Memory List */
+.memory-list {
+  padding: var(--dash-spacing-md, 1rem) var(--dash-spacing-xl, 2rem) var(--dash-spacing-xl, 2rem);
+  max-height: 350px;
+  overflow-y: auto;
+}
+
+.memory-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--dash-spacing-md, 1rem);
+  padding: var(--dash-spacing-md, 1rem) var(--dash-spacing-lg, 1.5rem);
+  background: white;
+  border: 1px solid var(--dash-border, #e5dfd5);
+  border-radius: var(--dash-radius-lg, 1rem);
+  margin-bottom: var(--dash-spacing-sm, 0.75rem);
+  transition: all var(--dash-transition-base, 250ms);
+}
+
+.memory-item:hover {
+  border-color: var(--dash-accent-light, #8fb199);
+  box-shadow: var(--dash-shadow-sm, 0 2px 8px rgba(107, 145, 117, 0.08));
+  transform: translateY(-1px);
+}
+
+.memory-item-content {
+  flex: 1;
+}
+
+.memory-item-content p {
+  margin: 0;
+  font-size: 0.9375rem;
+  color: var(--dash-text, #2d2d2d);
+  line-height: 1.5;
+}
+
+.memory-date {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--dash-text-muted, #999999);
+  margin-top: var(--dash-spacing-xs, 0.5rem);
+}
+
+.memory-delete-btn {
+  background: none;
+  border: none;
+  padding: 0.5rem;
+  cursor: pointer;
+  color: var(--dash-text-muted, #999999);
+  border-radius: var(--dash-radius-sm, 0.5rem);
+  transition: all var(--dash-transition-fast, 150ms);
+  flex-shrink: 0;
+}
+
+.memory-delete-btn:hover {
+  background: rgba(200, 90, 84, 0.1);
+  color: var(--dash-danger, #c85a54);
+}
+
+.memory-delete-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Footer */
+.memory-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--dash-spacing-sm, 0.75rem);
+  padding: var(--dash-spacing-md, 1rem) var(--dash-spacing-xl, 2rem);
+  background: var(--dash-accent-pale, #e8f3eb);
+  font-size: 0.85rem;
+  color: var(--dash-accent-dark, #4a7c59);
+}
+
+.memory-footer svg {
+  flex-shrink: 0;
+}
+
+/* Modal */
+.memory-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(45, 45, 45, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--dash-z-modal, 1000);
+  padding: var(--dash-spacing-lg, 1.5rem);
+  backdrop-filter: blur(4px);
+}
+
+.memory-modal {
+  background: var(--dash-surface, #faf8f4);
+  border-radius: var(--dash-radius-xl, 1.5rem);
+  width: 100%;
+  max-width: 480px;
+  overflow: hidden;
+  box-shadow: var(--dash-shadow-lg, 0 8px 32px rgba(107, 145, 117, 0.15));
+}
+
+.memory-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--dash-spacing-lg, 1.5rem) var(--dash-spacing-xl, 2rem);
+  border-bottom: 1px solid var(--dash-border-light, #f0ebe3);
+}
+
+.memory-modal-header h4 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--dash-text, #2d2d2d);
+  font-family: var(--dash-font-serif, 'Playfair Display', Georgia, serif);
+}
+
+.memory-modal-header button {
+  background: none;
+  border: none;
+  padding: 0.375rem;
+  cursor: pointer;
+  color: var(--dash-text-muted, #999999);
+  border-radius: var(--dash-radius-sm, 0.5rem);
+  transition: all var(--dash-transition-fast, 150ms);
+}
+
+.memory-modal-header button:hover {
+  background: var(--dash-border-light, #f0ebe3);
+  color: var(--dash-text-secondary, #6b6b6b);
+}
+
+.memory-modal-body {
+  padding: var(--dash-spacing-xl, 2rem);
+}
+
+.memory-modal-body textarea {
+  width: 100%;
+  padding: var(--dash-spacing-md, 1rem);
+  border: 1px solid var(--dash-border, #e5dfd5);
+  border-radius: var(--dash-radius-md, 0.75rem);
+  font-size: 0.9375rem;
+  resize: none;
+  font-family: var(--dash-font-sans, 'DM Sans', sans-serif);
+  color: var(--dash-text, #2d2d2d);
+  background: white;
+  transition: all var(--dash-transition-fast, 150ms);
+}
+
+.memory-modal-body textarea:focus {
+  outline: none;
+  border-color: var(--dash-accent, #6b9175);
+  box-shadow: 0 0 0 3px var(--dash-accent-pale, #e8f3eb);
+}
+
+.memory-modal-body textarea::placeholder {
+  color: var(--dash-text-muted, #999999);
+}
+
+.memory-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--dash-spacing-md, 1rem);
+  padding: var(--dash-spacing-md, 1rem) var(--dash-spacing-xl, 2rem) var(--dash-spacing-xl, 2rem);
+}
+
+.memory-btn-cancel {
+  background: var(--dash-border-light, #f0ebe3);
+  color: var(--dash-text-secondary, #6b6b6b);
+}
+
+.memory-btn-cancel:hover {
+  background: var(--dash-border, #e5dfd5);
+}
+
+.memory-btn-save {
+  background: var(--dash-accent, #6b9175);
+  color: white;
+  box-shadow: 0 2px 4px rgba(107, 145, 117, 0.2);
+}
+
+.memory-btn-save:hover:not(:disabled) {
+  background: var(--dash-accent-dark, #4a7c59);
+  transform: translateY(-1px);
+}
+
+.memory-btn-save:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Spinner animation */
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Scrollbar */
+.memory-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.memory-list::-webkit-scrollbar-track {
+  background: var(--dash-border-light, #f0ebe3);
+  border-radius: 3px;
+}
+
+.memory-list::-webkit-scrollbar-thumb {
+  background: var(--dash-accent-light, #8fb199);
+  border-radius: 3px;
+}
+
+.memory-list::-webkit-scrollbar-thumb:hover {
+  background: var(--dash-accent, #6b9175);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .memory-header {
+    padding: var(--dash-spacing-md, 1rem);
+  }
+
+  .memory-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    padding: var(--dash-spacing-md, 1rem);
+  }
+
+  .memory-actions {
+    justify-content: flex-end;
+  }
+
+  .memory-list {
+    padding: var(--dash-spacing-md, 1rem);
+  }
+
+  .memory-item {
+    padding: var(--dash-spacing-md, 1rem);
+  }
+
+  .memory-modal {
+    max-width: 100%;
+    margin: var(--dash-spacing-md, 1rem);
+  }
+}

frontend/src/components/MemoryDashboard.tsx

@@ -0,0 +1,390 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+    Brain,
+    Trash2,
+    RefreshCw,
+    ChevronDown,
+    ChevronUp,
+    AlertCircle,
+    Sparkles,
+    Database,
+    Plus,
+    X,
+    Search,
+    Info,
+} from 'lucide-react';
+import { API_BASE_URL } from '../config/api';
+import './MemoryDashboard.css';
+
+// Types matching backend schemas
+interface MemoryFact {
+    id: string;
+    memory: string;
+    created_at: string | null;
+    metadata: Record<string, unknown>;
+}
+
+interface MemoryListResponse {
+    facts: MemoryFact[];
+    total_count: number;
+    available: boolean;
+    message: string | null;
+}
+
+interface MemoryDashboardProps {
+    authToken?: string;
+    apiBaseUrl?: string;
+    defaultCollapsed?: boolean;
+}
+
+const MemoryDashboard: React.FC<MemoryDashboardProps> = ({
+    authToken,
+    apiBaseUrl = API_BASE_URL,
+    defaultCollapsed = true,
+}) => {
+    const [memories, setMemories] = useState<MemoryFact[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [deleting, setDeleting] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const [available, setAvailable] = useState(true);
+    const [showAddModal, setShowAddModal] = useState(false);
+    const [newMemory, setNewMemory] = useState('');
+    const [adding, setAdding] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const fetchMemories = useCallback(async () => {
+        if (!authToken) {
+            setError('Authentication required');
+            return;
+        }
+
+        setLoading(true);
+        setError(null);
+
+        try {
+            const response = await fetch(`${apiBaseUrl}/api/memory/facts`, {
+                headers: {
+                    Authorization: `Bearer ${authToken}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error(`Failed to fetch memories: ${response.status}`);
+            }
+
+            const data: MemoryListResponse = await response.json();
+            setMemories(data.facts);
+            setAvailable(data.available);
+            if (data.message) {
+                setError(data.message);
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load memories');
+        } finally {
+            setLoading(false);
+        }
+    }, [authToken, apiBaseUrl]);
+
+    useEffect(() => {
+        if (!collapsed && authToken) {
+            fetchMemories();
+        }
+    }, [collapsed, authToken, fetchMemories]);
+
+    const handleDelete = async (memoryId: string) => {
+        if (!authToken) return;
+
+        setDeleting(memoryId);
+        try {
+            const response = await fetch(`${apiBaseUrl}/api/memory/facts/${memoryId}`, {
+                method: 'DELETE',
+                headers: {
+                    Authorization: `Bearer ${authToken}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            if (response.ok) {
+                setMemories(prev => prev.filter(m => m.id !== memoryId));
+            } else {
+                throw new Error('Failed to delete memory');
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to delete memory');
+        } finally {
+            setDeleting(null);
+        }
+    };
+
+    const handleAdd = async () => {
+        if (!authToken || !newMemory.trim()) return;
+
+        setAdding(true);
+        try {
+            const response = await fetch(`${apiBaseUrl}/api/memory/facts`, {
+                method: 'POST',
+                headers: {
+                    Authorization: `Bearer ${authToken}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ content: newMemory.trim() }),
+            });
+
+            if (response.ok) {
+                setNewMemory('');
+                setShowAddModal(false);
+                await fetchMemories();
+            } else {
+                const data = await response.json();
+                throw new Error(data.message || 'Failed to add memory');
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to add memory');
+        } finally {
+            setAdding(false);
+        }
+    };
+
+    const handleSearch = async () => {
+        if (!authToken || !searchQuery.trim()) {
+            await fetchMemories();
+            return;
+        }
+
+        setLoading(true);
+        try {
+            const response = await fetch(`${apiBaseUrl}/api/memory/search`, {
+                method: 'POST',
+                headers: {
+                    Authorization: `Bearer ${authToken}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ query: searchQuery, limit: 20 }),
+            });
+
+            if (response.ok) {
+                const data: MemoryListResponse = await response.json();
+                setMemories(data.facts);
+            }
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Search failed');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const formatDate = (dateStr: string | null) => {
+        if (!dateStr) return '';
+        const date = new Date(dateStr);
+        return date.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+        });
+    };
+
+    return (
+        <div className="memory-dashboard">
+            <div
+                className="memory-header"
+                onClick={() => setCollapsed(!collapsed)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => e.key === 'Enter' && setCollapsed(!collapsed)}
+            >
+                <div className="memory-header-left">
+                    <Brain size={20} className="memory-icon" />
+                    <h3>Health Memory</h3>
+                    <span className="memory-badge">
+                        {available ? (
+                            <><Database size={12} /> {memories.length}</>
+                        ) : (
+                            <><AlertCircle size={12} /> Offline</>
+                        )}
+                    </span>
+                </div>
+                <div className="memory-header-right">
+                    {collapsed ? <ChevronDown size={20} /> : <ChevronUp size={20} />}
+                </div>
+            </div>
+
+            <AnimatePresence>
+                {!collapsed && (
+                    <motion.div
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{ height: 'auto', opacity: 1 }}
+                        exit={{ height: 0, opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="memory-content"
+                    >
+                        {!available ? (
+                            <div className="memory-unavailable">
+                                <AlertCircle size={32} />
+                                <p>Memory service is not available</p>
+                                <span>Recommendations will still work, but without personalization from your preferences.</span>
+                            </div>
+                        ) : (
+                            <>
+                                <div className="memory-toolbar">
+                                    <div className="memory-search">
+                                        <Search size={16} />
+                                        <input
+                                            type="text"
+                                            placeholder="Search memories..."
+                                            value={searchQuery}
+                                            onChange={(e) => setSearchQuery(e.target.value)}
+                                            onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+                                        />
+                                        {searchQuery && (
+                                            <button
+                                                className="memory-search-clear"
+                                                onClick={() => { setSearchQuery(''); fetchMemories(); }}
+                                            >
+                                                <X size={14} />
+                                            </button>
+                                        )}
+                                    </div>
+                                    <div className="memory-actions">
+                                        <button
+                                            className="memory-btn memory-btn-add"
+                                            onClick={() => setShowAddModal(true)}
+                                            title="Add memory"
+                                        >
+                                            <Plus size={16} />
+                                        </button>
+                                        <button
+                                            className="memory-btn memory-btn-refresh"
+                                            onClick={fetchMemories}
+                                            disabled={loading}
+                                            title="Refresh"
+                                        >
+                                            <RefreshCw size={16} className={loading ? 'spinning' : ''} />
+                                        </button>
+                                    </div>
+                                </div>
+
+                                {error && (
+                                    <div className="memory-error">
+                                        <AlertCircle size={16} />
+                                        <span>{error}</span>
+                                    </div>
+                                )}
+
+                                {loading ? (
+                                    <div className="memory-loading">
+                                        <RefreshCw size={24} className="spinning" />
+                                        <p>Loading memories...</p>
+                                    </div>
+                                ) : memories.length === 0 ? (
+                                    <div className="memory-empty">
+                                        <Sparkles size={32} />
+                                        <p>No memories yet</p>
+                                        <span>Your health preferences and facts will appear here as you interact with the assistant.</span>
+                                    </div>
+                                ) : (
+                                    <div className="memory-list">
+                                        {memories.map((memory, index) => (
+                                            <motion.div
+                                                key={memory.id}
+                                                initial={{ opacity: 0, x: -10 }}
+                                                animate={{ opacity: 1, x: 0 }}
+                                                transition={{ delay: index * 0.03 }}
+                                                className="memory-item"
+                                            >
+                                                <div className="memory-item-content">
+                                                    <p>{memory.memory}</p>
+                                                    {memory.created_at && (
+                                                        <span className="memory-date">
+                                                            {formatDate(memory.created_at)}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                                <button
+                                                    className="memory-delete-btn"
+                                                    onClick={() => handleDelete(memory.id)}
+                                                    disabled={deleting === memory.id}
+                                                    title="Delete memory"
+                                                >
+                                                    {deleting === memory.id ? (
+                                                        <RefreshCw size={14} className="spinning" />
+                                                    ) : (
+                                                        <Trash2 size={14} />
+                                                    )}
+                                                </button>
+                                            </motion.div>
+                                        ))}
+                                    </div>
+                                )}
+
+                                <div className="memory-footer">
+                                    <Info size={14} />
+                                    <span>Memories help personalize your health recommendations.</span>
+                                </div>
+                            </>
+                        )}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            {/* Add Memory Modal */}
+            <AnimatePresence>
+                {showAddModal && (
+                    <motion.div
+                        className="memory-modal-overlay"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        onClick={() => setShowAddModal(false)}
+                    >
+                        <motion.div
+                            className="memory-modal"
+                            initial={{ scale: 0.9, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            exit={{ scale: 0.9, opacity: 0 }}
+                            onClick={(e) => e.stopPropagation()}
+                        >
+                            <div className="memory-modal-header">
+                                <h4>Add a Preference</h4>
+                                <button onClick={() => setShowAddModal(false)}>
+                                    <X size={18} />
+                                </button>
+                            </div>
+                            <div className="memory-modal-body">
+                                <textarea
+                                    placeholder="e.g., I prefer vegetarian diet, I exercise in the morning, I'm allergic to penicillin..."
+                                    value={newMemory}
+                                    onChange={(e) => setNewMemory(e.target.value)}
+                                    rows={3}
+                                />
+                            </div>
+                            <div className="memory-modal-footer">
+                                <button
+                                    className="memory-btn memory-btn-cancel"
+                                    onClick={() => setShowAddModal(false)}
+                                >
+                                    Cancel
+                                </button>
+                                <button
+                                    className="memory-btn memory-btn-save"
+                                    onClick={handleAdd}
+                                    disabled={adding || !newMemory.trim()}
+                                >
+                                    {adding ? (
+                                        <><RefreshCw size={14} className="spinning" /> Saving...</>
+                                    ) : (
+                                        <><Plus size={14} /> Add Preference</>
+                                    )}
+                                </button>
+                            </div>
+                        </motion.div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};
+
+export default MemoryDashboard;

frontend/src/components/ProfileSuccessScreen.tsx

@@ -8,6 +8,7 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { Check, ArrowRight } from 'lucide-react';
+import { API_BASE_URL } from '../config/api';
 import './ProfileSuccessScreen.css';
 
 interface ProfileSuccessScreenProps {
@@ -15,12 +16,36 @@ interface ProfileSuccessScreenProps {
   redirectDelay?: number;
 }
 
-export default function ProfileSuccessScreen({ 
+export default function ProfileSuccessScreen({
   autoRedirect = true,
-  redirectDelay = 2000 
+  redirectDelay = 2000
 }: ProfileSuccessScreenProps) {
   const navigate = useNavigate();
 
+  useEffect(() => {
+    // Sync profile data to memory/graph layers for provenance
+    const syncToMemory = async () => {
+      const authToken = localStorage.getItem('authToken');
+      if (!authToken) return;
+
+      try {
+        await fetch(`${API_BASE_URL}/api/profile/sync-to-memory`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${authToken}`,
+            'Content-Type': 'application/json',
+          },
+        });
+        console.log('Profile synced to memory/graph layers');
+      } catch (error) {
+        console.warn('Failed to sync profile to memory:', error);
+        // Non-blocking - don't prevent navigation on failure
+      }
+    };
+
+    syncToMemory();
+  }, []);
+
   useEffect(() => {
     if (autoRedirect) {
       const timer = setTimeout(() => {
@@ -40,17 +65,17 @@ export default function ProfileSuccessScreen({
   };
 
   return (
-    <motion.div 
+    <motion.div
       className="profile-success-overlay"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
     >
-      <motion.div 
+      <motion.div
         className="profile-success-container"
         initial={{ scale: 0.8, opacity: 0 }}
         animate={{ scale: 1, opacity: 1 }}
-        transition={{ 
+        transition={{
           type: "spring",
           stiffness: 200,
           damping: 20,
@@ -58,18 +83,18 @@ export default function ProfileSuccessScreen({
         }}
       >
         {/* Animated Checkmark */}
-        <motion.div 
+        <motion.div
           className="success-checkmark-container"
           initial={{ scale: 0 }}
           animate={{ scale: 1 }}
-          transition={{ 
+          transition={{
             type: "spring",
             stiffness: 300,
             damping: 15,
             delay: 0.2
           }}
         >
-          <motion.div 
+          <motion.div
             className="success-checkmark-circle"
             initial={{ scale: 0, rotate: -180 }}
             animate={{ scale: 1, rotate: 0 }}
@@ -83,7 +108,7 @@ export default function ProfileSuccessScreen({
               <Check size={48} strokeWidth={3} />
             </motion.div>
           </motion.div>
-          
+
           {/* Ripple effect */}
           <motion.div
             className="success-ripple"
@@ -113,14 +138,14 @@ export default function ProfileSuccessScreen({
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.8, duration: 0.4 }}
         >
-          <button 
+          <button
             className="success-btn success-btn-primary"
             onClick={handleDashboard}
           >
             Go to Dashboard
             <ArrowRight size={18} />
           </button>
-          <button 
+          <button
             className="success-btn success-btn-secondary"
             onClick={handleSettings}
           >

frontend/src/components/RecommendationsPanel.css

@@ -76,7 +76,9 @@
 }
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .recommendations-badges {
@@ -383,7 +385,9 @@
 }
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .recommendations-loading p {
@@ -488,17 +492,32 @@
     opacity: 0;
     transform: translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
 
-.recommendation-card:nth-child(1) { animation-delay: 0.05s; }
-.recommendation-card:nth-child(2) { animation-delay: 0.1s; }
-.recommendation-card:nth-child(3) { animation-delay: 0.15s; }
-.recommendation-card:nth-child(4) { animation-delay: 0.2s; }
-.recommendation-card:nth-child(5) { animation-delay: 0.25s; }
+.recommendation-card:nth-child(1) {
+  animation-delay: 0.05s;
+}
+
+.recommendation-card:nth-child(2) {
+  animation-delay: 0.1s;
+}
+
+.recommendation-card:nth-child(3) {
+  animation-delay: 0.15s;
+}
+
+.recommendation-card:nth-child(4) {
+  animation-delay: 0.2s;
+}
+
+.recommendation-card:nth-child(5) {
+  animation-delay: 0.25s;
+}
 
 /* Responsive */
 @media (max-width: 768px) {
@@ -524,3 +543,113 @@
     width: fit-content;
   }
 }
+
+/* Recommendation Header Right */
+.recommendation-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+/* Provenance Tooltip Styles */
+.provenance-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.provenance-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.625rem;
+  background: linear-gradient(135deg, rgba(107, 145, 117, 0.15), rgba(139, 177, 153, 0.1));
+  border: 1px solid rgba(107, 145, 117, 0.25);
+  border-radius: var(--dash-radius-full, 9999px);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--dash-accent-dark, #4a7c59);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.provenance-trigger:hover {
+  background: linear-gradient(135deg, rgba(107, 145, 117, 0.25), rgba(139, 177, 153, 0.2));
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(107, 145, 117, 0.2);
+}
+
+.provenance-tooltip {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 220px;
+  padding: 0.75rem;
+  background: white;
+  border-radius: var(--dash-radius-md, 0.75rem);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  transition: all 0.2s ease;
+  z-index: 100;
+}
+
+.provenance-badge:hover .provenance-tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.provenance-title {
+  display: block;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--dash-text-muted, #999);
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.provenance-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0;
+}
+
+.provenance-icon {
+  font-size: 1rem;
+  width: 1.5rem;
+  text-align: center;
+}
+
+.provenance-label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--dash-text, #2d2d2d);
+  min-width: 3.5rem;
+}
+
+.provenance-desc {
+  font-size: 0.75rem;
+  color: var(--dash-text-secondary, #6b6b6b);
+}
+
+/* Add tooltip arrow */
+.provenance-tooltip::before {
+  content: '';
+  position: absolute;
+  top: -6px;
+  right: 12px;
+  width: 12px;
+  height: 12px;
+  background: white;
+  transform: rotate(45deg);
+  border-left: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}

frontend/src/components/RecommendationsPanel.tsx

@@ -35,6 +35,13 @@ interface Source {
   url?: string;
 }
 
+interface Provenance {
+  memory?: boolean;
+  graph?: boolean;
+  metrics?: boolean;
+  profile?: boolean;
+}
+
 interface Recommendation {
   id: string;
   title: string;
@@ -43,6 +50,7 @@ interface Recommendation {
   actions: Action[];
   followup: Action[];
   sources: Source[];
+  provenance?: Provenance;
 }
 
 interface RecommendationsResponse {
@@ -62,6 +70,7 @@ interface StoredItem {
   priority: string;
   actions?: string[] | { type?: string; text: string }[];
   evidence?: string[];
+  provenance?: Provenance;
 }
 
 interface RecommendationsPanelProps {
@@ -111,9 +120,39 @@ function mapStoredToRecommendation(stored: StoredItem): Recommendation {
     actions,
     followup: [],
     sources: [],
+    provenance: stored.provenance,
   };
 }
 
+// Provenance tooltip component - shows data sources
+const ProvenanceTooltip: React.FC<{ provenance?: Provenance }> = ({ provenance }) => {
+  if (!provenance) return null;
+
+  const sources = [];
+  if (provenance.memory) sources.push({ label: 'Memory', icon: '🧠', desc: 'Your preferences & facts' });
+  if (provenance.graph) sources.push({ label: 'Graph', icon: '🕸️', desc: 'Health relationships' });
+  if (provenance.metrics) sources.push({ label: 'Metrics', icon: '📊', desc: 'Lab values & observations' });
+  if (provenance.profile) sources.push({ label: 'Profile', icon: '👤', desc: 'Your health profile' });
+
+  if (sources.length === 0) return null;
+
+  return (
+    <div className="provenance-badge" title="Powered by">
+      <span className="provenance-trigger">✨ Sources</span>
+      <div className="provenance-tooltip">
+        <span className="provenance-title">Recommendation Sources</span>
+        {sources.map((src, i) => (
+          <div key={i} className="provenance-item">
+            <span className="provenance-icon">{src.icon}</span>
+            <span className="provenance-label">{src.label}</span>
+            <span className="provenance-desc">{src.desc}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
 const RecommendationsPanel: React.FC<RecommendationsPanelProps> = ({
   authToken,
   apiBaseUrl = API_BASE_URL,
@@ -288,7 +327,7 @@ const RecommendationsPanel: React.FC<RecommendationsPanelProps> = ({
               {generating ? (
                 <><RefreshCw size={16} className="spinning" /> Generating...</>
               ) : (
-                <><Sparkles size={16} /> Generate</>               )}
+                <><Sparkles size={16} /> Generate</>)}
             </button>
           )}
         </div>
@@ -307,7 +346,7 @@ const RecommendationsPanel: React.FC<RecommendationsPanelProps> = ({
               {generating ? (
                 <><RefreshCw size={18} className="spinning" /> Generating...</>
               ) : (
-                <><Sparkles size={18} /> Generate Recommendations</>               )}
+                <><Sparkles size={18} /> Generate Recommendations</>)}
             </button>
           )}
         </div>
@@ -336,7 +375,7 @@ const RecommendationsPanel: React.FC<RecommendationsPanelProps> = ({
               {generating ? (
                 <><RefreshCw size={16} className="spinning" /> Generating...</>
               ) : (
-                <><RefreshCw size={16} /> Refresh</>               )}
+                <><RefreshCw size={16} /> Refresh</>)}
             </button>
           )}
         </div>
@@ -375,10 +414,13 @@ const RecommendationsPanel: React.FC<RecommendationsPanelProps> = ({
             >
               <div className="recommendation-header">
                 <h3 className="recommendation-title">{item.title ?? ''}</h3>
-                <span className={`severity-tag ${(item.severity ?? 'info').toLowerCase()}`}>
-                  {severityIcons[item.severity ?? 'INFO']}
-                  {item.severity ?? 'INFO'}
-                </span>
+                <div className="recommendation-header-right">
+                  <ProvenanceTooltip provenance={item.provenance} />
+                  <span className={`severity-tag ${(item.severity ?? 'info').toLowerCase()}`}>
+                    {severityIcons[item.severity ?? 'INFO']}
+                    {item.severity ?? 'INFO'}
+                  </span>
+                </div>
               </div>
 
               <p className="recommendation-why">{item.why}</p>

frontend/src/pages/Features.css

@@ -0,0 +1,426 @@
+/* Features Page Styles */
+
+.features-page {
+    min-height: 100vh;
+    background: var(--dash-bg);
+    position: relative;
+    overflow-x: hidden;
+}
+
+/* Animated Background */
+.features-background {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.features-bg-blob {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(120px);
+    opacity: 0.4;
+    animation: blobFloat 20s ease-in-out infinite;
+}
+
+.features-bg-blob-1 {
+    width: 600px;
+    height: 600px;
+    background: var(--dash-accent);
+    top: -200px;
+    right: -200px;
+    animation-delay: 0s;
+}
+
+.features-bg-blob-2 {
+    width: 500px;
+    height: 500px;
+    background: var(--dash-info);
+    bottom: -150px;
+    left: -150px;
+    animation-delay: -7s;
+}
+
+.features-bg-blob-3 {
+    width: 400px;
+    height: 400px;
+    background: var(--dash-warning);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation-delay: -14s;
+}
+
+@keyframes blobFloat {
+
+    0%,
+    100% {
+        transform: translate(0, 0) scale(1);
+    }
+
+    25% {
+        transform: translate(20px, -30px) scale(1.05);
+    }
+
+    50% {
+        transform: translate(-20px, 20px) scale(0.95);
+    }
+
+    75% {
+        transform: translate(30px, 10px) scale(1.02);
+    }
+}
+
+/* Content */
+.features-content {
+    position: relative;
+    z-index: 1;
+    padding: 100px 24px 60px;
+}
+
+.features-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.features-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 60vh;
+    gap: 16px;
+    color: var(--dash-text-muted);
+}
+
+/* Hero Section */
+.features-hero {
+    text-align: center;
+    padding: 60px 0 80px;
+}
+
+.hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: rgba(106, 145, 117, 0.15);
+    border: 1px solid rgba(106, 145, 117, 0.3);
+    border-radius: 100px;
+    color: var(--dash-accent);
+    font-size: 13px;
+    font-weight: 500;
+    margin-bottom: 24px;
+}
+
+.features-hero h1 {
+    font-size: 3.5rem;
+    font-weight: 700;
+    color: var(--dash-text);
+    margin: 0 0 20px;
+    line-height: 1.1;
+}
+
+.gradient-text {
+    background: linear-gradient(135deg, var(--dash-accent), var(--dash-info));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-description {
+    font-size: 1.15rem;
+    color: var(--dash-text-muted);
+    max-width: 640px;
+    margin: 0 auto 48px;
+    line-height: 1.7;
+}
+
+/* Hero Features Grid */
+.hero-features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 24px;
+    max-width: 960px;
+    margin: 0 auto 48px;
+    text-align: left;
+}
+
+.hero-feature {
+    display: flex;
+    gap: 16px;
+    padding: 20px;
+    background: var(--dash-card-bg);
+    border: 1px solid var(--dash-border);
+    border-radius: 16px;
+    transition: all 0.2s ease;
+}
+
+.hero-feature:hover {
+    transform: translateY(-2px);
+    border-color: var(--dash-accent);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+.hero-feature-icon {
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.hero-feature-icon.memory {
+    background: rgba(156, 136, 255, 0.15);
+    color: #9c88ff;
+}
+
+.hero-feature-icon.graph {
+    background: rgba(122, 156, 198, 0.15);
+    color: var(--dash-info);
+}
+
+.hero-feature-icon.ai {
+    background: rgba(106, 145, 117, 0.15);
+    color: var(--dash-accent);
+}
+
+.hero-feature-content h4 {
+    margin: 0 0 6px;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--dash-text);
+}
+
+.hero-feature-content p {
+    margin: 0;
+    font-size: 13px;
+    color: var(--dash-text-muted);
+    line-height: 1.5;
+}
+
+.scroll-indicator {
+    color: var(--dash-text-muted);
+    opacity: 0.5;
+}
+
+/* Flow Diagram */
+.features-flow {
+    padding: 48px 0 64px;
+    text-align: center;
+}
+
+.features-flow h2 {
+    font-size: 1.5rem;
+    color: var(--dash-text);
+    margin: 0 0 32px;
+}
+
+.flow-diagram {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.flow-step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.flow-icon {
+    width: 64px;
+    height: 64px;
+    border-radius: 16px;
+    background: var(--dash-card-bg);
+    border: 2px solid var(--dash-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--dash-text);
+    transition: all 0.2s ease;
+}
+
+.flow-icon.memory {
+    border-color: #9c88ff;
+    color: #9c88ff;
+}
+
+.flow-icon.graph {
+    border-color: var(--dash-info);
+    color: var(--dash-info);
+}
+
+.flow-icon.ai {
+    border-color: var(--dash-accent);
+    color: var(--dash-accent);
+}
+
+.flow-step span {
+    font-size: 13px;
+    color: var(--dash-text-muted);
+    font-weight: 500;
+}
+
+.flow-arrow {
+    color: var(--dash-text-muted);
+    opacity: 0.4;
+}
+
+/* Sections */
+.features-section {
+    margin-bottom: 48px;
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    gap: 16px;
+}
+
+.section-header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.section-icon {
+    width: 44px;
+    height: 44px;
+    padding: 10px;
+    border-radius: 12px;
+    flex-shrink: 0;
+}
+
+.section-icon.memory {
+    background: rgba(156, 136, 255, 0.15);
+    color: #9c88ff;
+}
+
+.section-icon.graph {
+    background: rgba(122, 156, 198, 0.15);
+    color: var(--dash-info);
+}
+
+.section-header h2 {
+    margin: 0;
+    font-size: 1.35rem;
+    color: var(--dash-text);
+}
+
+.section-header p {
+    margin: 4px 0 0;
+    font-size: 14px;
+    color: var(--dash-text-muted);
+}
+
+.section-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: var(--dash-card-bg);
+    border: 1px solid var(--dash-border);
+    border-radius: 100px;
+    font-size: 12px;
+    color: var(--dash-text-muted);
+}
+
+.section-content {
+    background: var(--dash-card-bg);
+    border: 1px solid var(--dash-border);
+    border-radius: 20px;
+    padding: 4px;
+    overflow: hidden;
+}
+
+.section-content-large {
+    min-height: 500px;
+}
+
+/* Override Memory/Graph components when on Features page */
+.section-content .memory-dashboard,
+.section-content .health-graph {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+}
+
+.section-content .memory-header,
+.section-content .health-graph-header {
+    cursor: default;
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 16px 16px 0 0;
+    padding: 16px 20px;
+}
+
+/* CTA Section */
+.features-cta {
+    text-align: center;
+    padding: 60px 0;
+    margin-top: 32px;
+}
+
+.features-cta h3 {
+    font-size: 1.75rem;
+    color: var(--dash-text);
+    margin: 0 0 12px;
+}
+
+.features-cta p {
+    color: var(--dash-text-muted);
+    margin: 0 0 28px;
+}
+
+.cta-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 28px;
+    background: linear-gradient(135deg, var(--dash-accent), var(--dash-accent-dark));
+    color: white;
+    border: none;
+    border-radius: 12px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.cta-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(106, 145, 117, 0.3);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .features-hero h1 {
+        font-size: 2.25rem;
+    }
+
+    .hero-features {
+        grid-template-columns: 1fr;
+    }
+
+    .flow-diagram {
+        flex-direction: column;
+    }
+
+    .flow-arrow {
+        transform: rotate(90deg);
+    }
+
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}

frontend/src/pages/Features.tsx

@@ -0,0 +1,262 @@
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import {
+    Brain,
+    Network,
+    Sparkles,
+    ArrowRight,
+    ChevronDown,
+    Database,
+    Cpu,
+    Zap,
+    Link2
+} from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import DashboardNavbar from '../components/dashboard/DashboardNavbar';
+import MemoryDashboard from '../components/MemoryDashboard';
+import HealthGraph from '../components/HealthGraph';
+import { API_BASE_URL } from '../config/api';
+import '../styles/dashboardTokens.css';
+import '../styles/dashboardBase.css';
+import './Features.css';
+
+function Features() {
+    const navigate = useNavigate();
+    const [authToken, setAuthToken] = useState<string | null>(null);
+    const [userName, setUserName] = useState('User');
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const token = localStorage.getItem('access_token');
+        if (!token) {
+            navigate('/login');
+            return;
+        }
+        setAuthToken(token);
+
+        // Fetch user info
+        fetch(`${API_BASE_URL}/api/me/bootstrap`, {
+            headers: { Authorization: `Bearer ${token}` },
+        })
+            .then(res => res.json())
+            .then(data => {
+                setUserName(data.full_name?.split(' ')[0] || 'User');
+            })
+            .catch(console.error)
+            .finally(() => setLoading(false));
+    }, [navigate]);
+
+    if (loading) {
+        return (
+            <div className="features-page">
+                <DashboardNavbar userName="Loading..." userStatus="" />
+                <div className="features-loading">
+                    <div className="loading-spinner" />
+                    <p>Loading features...</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="features-page">
+            {/* Background */}
+            <div className="features-background">
+                <div className="features-bg-blob features-bg-blob-1" />
+                <div className="features-bg-blob features-bg-blob-2" />
+                <div className="features-bg-blob features-bg-blob-3" />
+            </div>
+
+            <DashboardNavbar userName={userName} userStatus="" />
+
+            <div className="features-content">
+                <div className="features-container">
+
+                    {/* Hero Section */}
+                    <motion.section
+                        className="features-hero"
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.6 }}
+                    >
+                        <div className="hero-badge">
+                            <Sparkles size={14} />
+                            <span>Intelligent Health Engine</span>
+                        </div>
+
+                        <h1>
+                            <span className="gradient-text">Breathable</span> Recommendations
+                        </h1>
+
+                        <p className="hero-description">
+                            Your health insights are powered by advanced memory and knowledge graph systems.
+                            Every recommendation is personalized, contextual, and traceable to its source.
+                        </p>
+
+                        <div className="hero-features">
+                            <div className="hero-feature">
+                                <div className="hero-feature-icon memory">
+                                    <Brain size={20} />
+                                </div>
+                                <div className="hero-feature-content">
+                                    <h4>Mem0 Memory Layer</h4>
+                                    <p>Stores your preferences, facts, and health context for personalized care</p>
+                                </div>
+                            </div>
+
+                            <div className="hero-feature">
+                                <div className="hero-feature-icon graph">
+                                    <Network size={20} />
+                                </div>
+                                <div className="hero-feature-content">
+                                    <h4>Neo4j Knowledge Graph</h4>
+                                    <p>Maps relationships between conditions, medications, and health factors</p>
+                                </div>
+                            </div>
+
+                            <div className="hero-feature">
+                                <div className="hero-feature-icon ai">
+                                    <Cpu size={20} />
+                                </div>
+                                <div className="hero-feature-content">
+                                    <h4>Groq LLM Integration</h4>
+                                    <p>Generates evidence-based recommendations from your complete health profile</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <motion.div
+                            className="scroll-indicator"
+                            animate={{ y: [0, 8, 0] }}
+                            transition={{ repeat: Infinity, duration: 1.5 }}
+                        >
+                            <ChevronDown size={24} />
+                        </motion.div>
+                    </motion.section>
+
+                    {/* How It Works */}
+                    <motion.section
+                        className="features-flow"
+                        initial={{ opacity: 0 }}
+                        whileInView={{ opacity: 1 }}
+                        viewport={{ once: true }}
+                    >
+                        <h2>How Your Data Flows</h2>
+                        <div className="flow-diagram">
+                            <div className="flow-step">
+                                <div className="flow-icon">
+                                    <Database size={24} />
+                                </div>
+                                <span>Profile & Reports</span>
+                            </div>
+                            <ArrowRight className="flow-arrow" />
+                            <div className="flow-step">
+                                <div className="flow-icon memory">
+                                    <Brain size={24} />
+                                </div>
+                                <span>Memory Layer</span>
+                            </div>
+                            <ArrowRight className="flow-arrow" />
+                            <div className="flow-step">
+                                <div className="flow-icon graph">
+                                    <Network size={24} />
+                                </div>
+                                <span>Knowledge Graph</span>
+                            </div>
+                            <ArrowRight className="flow-arrow" />
+                            <div className="flow-step">
+                                <div className="flow-icon ai">
+                                    <Zap size={24} />
+                                </div>
+                                <span>AI Recommendations</span>
+                            </div>
+                        </div>
+                    </motion.section>
+
+                    {/* Memory Dashboard Section */}
+                    <motion.section
+                        className="features-section"
+                        initial={{ opacity: 0, y: 30 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.5 }}
+                    >
+                        <div className="section-header">
+                            <div className="section-header-left">
+                                <Brain size={24} className="section-icon memory" />
+                                <div>
+                                    <h2>Health Memory</h2>
+                                    <p>Your preferences and facts stored for personalized recommendations</p>
+                                </div>
+                            </div>
+                            <div className="section-badge">
+                                <Database size={14} />
+                                <span>Powered by Mem0</span>
+                            </div>
+                        </div>
+
+                        <div className="section-content">
+                            <MemoryDashboard
+                                authToken={authToken || undefined}
+                                apiBaseUrl={API_BASE_URL}
+                                defaultCollapsed={false}
+                            />
+                        </div>
+                    </motion.section>
+
+                    {/* Health Graph Section */}
+                    <motion.section
+                        className="features-section"
+                        initial={{ opacity: 0, y: 30 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.5 }}
+                    >
+                        <div className="section-header">
+                            <div className="section-header-left">
+                                <Network size={24} className="section-icon graph" />
+                                <div>
+                                    <h2>Health Knowledge Graph</h2>
+                                    <p>Visualize relationships between your health data</p>
+                                </div>
+                            </div>
+                            <div className="section-badge">
+                                <Link2 size={14} />
+                                <span>Powered by Neo4j</span>
+                            </div>
+                        </div>
+
+                        <div className="section-content section-content-large">
+                            <HealthGraph
+                                authToken={authToken || undefined}
+                                apiBaseUrl={API_BASE_URL}
+                                defaultCollapsed={false}
+                            />
+                        </div>
+                    </motion.section>
+
+                    {/* CTA Section */}
+                    <motion.section
+                        className="features-cta"
+                        initial={{ opacity: 0 }}
+                        whileInView={{ opacity: 1 }}
+                        viewport={{ once: true }}
+                    >
+                        <h3>See your personalized recommendations</h3>
+                        <p>Your health insights are built from all these connected systems</p>
+                        <button
+                            className="cta-button"
+                            onClick={() => navigate('/dashboard')}
+                        >
+                            <Sparkles size={18} />
+                            Go to Dashboard
+                        </button>
+                    </motion.section>
+
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Features;

frontend/src/pages/Login.tsx

@@ -20,6 +20,19 @@ function Login() {
     setError('')
   }
 
+  // Parse error response - handles both string and Pydantic v2 validation error format
+  const parseErrorMessage = (err: unknown): string => {
+    const axiosError = err as { response?: { data?: { detail?: string | Array<{ msg?: string; loc?: string[] }> } } }
+    const detail = axiosError.response?.data?.detail
+
+    if (!detail) return 'Login failed. Please check your credentials.'
+    if (typeof detail === 'string') return detail
+    if (Array.isArray(detail)) {
+      return detail.map(e => e.msg || 'Validation error').join('. ') || 'Validation failed.'
+    }
+    return 'Login failed. Please check your credentials.'
+  }
+
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     setError('')
@@ -30,8 +43,7 @@ function Login() {
       localStorage.setItem('access_token', data.access_token)
       navigate('/dashboard')
     } catch (err: unknown) {
-      const axiosError = err as { response?: { data?: { detail?: string } } }
-      setError(axiosError.response?.data?.detail || 'Login failed. Please check your credentials.')
+      setError(parseErrorMessage(err))
     } finally {
       setLoading(false)
     }

frontend/src/pages/Signup.tsx

@@ -21,6 +21,25 @@ function Signup() {
     setError('')
   }
 
+  // Parse error response - handles both string and Pydantic v2 validation error format
+  const parseErrorMessage = (err: unknown): string => {
+    const axiosError = err as { response?: { data?: { detail?: string | Array<{ msg?: string; loc?: string[] }> } } }
+    const detail = axiosError.response?.data?.detail
+
+    if (!detail) return 'Signup failed. Please try again.'
+
+    // If detail is a string, return it directly
+    if (typeof detail === 'string') return detail
+
+    // If detail is an array (Pydantic v2 validation errors), extract messages
+    if (Array.isArray(detail)) {
+      const messages = detail.map(err => err.msg || 'Validation error').join('. ')
+      return messages || 'Validation failed. Please check your input.'
+    }
+
+    return 'Signup failed. Please try again.'
+  }
+
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     setError('')
@@ -31,8 +50,7 @@ function Signup() {
       localStorage.setItem('access_token', data.access_token)
       navigate('/dashboard')
     } catch (err: unknown) {
-      const axiosError = err as { response?: { data?: { detail?: string } } }
-      setError(axiosError.response?.data?.detail || 'Signup failed. Please try again.')
+      setError(parseErrorMessage(err))
     } finally {
       setLoading(false)
     }
@@ -90,13 +108,16 @@ function Signup() {
             name="password"
             type="password"
             required
-            minLength={8}
+            minLength={12}
             value={formData.password}
             onChange={handleChange}
             className="form-input"
-            placeholder="At least 8 characters"
+            placeholder="Min 12 chars, upper, lower, digit, special"
             disabled={loading}
           />
+          <small style={{ color: '#888', fontSize: '0.75rem', marginTop: '4px', display: 'block' }}>
+            12+ characters with uppercase, lowercase, digit, and special character
+          </small>
         </div>
 
         {error && <div className="form-error">{error}</div>}