Fix: Include milestone progress in API responses for mobile app

config.py

@@ -9,28 +9,33 @@ if not os.environ.get('RENDER') and not os.environ.get('SPACE_ID'):
 # Set Flask app for CLI commands (needed for flask db upgrade)
 os.environ.setdefault('FLASK_APP', 'run.py')
 
+
 class Config:
     # Check if running in production (Render or HF Spaces)
-    IS_PRODUCTION = bool(os.environ.get('RENDER') or os.environ.get('SPACE_ID'))
-    
+    IS_PRODUCTION = bool(os.environ.get('RENDER')
+                         or os.environ.get('SPACE_ID'))
+
     # SECRET_KEY is CRITICAL for sessions and CSRF
-    SECRET_KEY = os.environ.get('SECRET_KEY') or os.environ.get('FLASK_SECRET_KEY') or 'dev-secret-key-change-in-production-2024'
-    
+    SECRET_KEY = os.environ.get('SECRET_KEY') or os.environ.get(
+        'FLASK_SECRET_KEY') or 'dev-secret-key-change-in-production-2024'
+
     # Database configuration - Use PostgreSQL (Neon) in production, SQLite locally
     # Set DATABASE_URL environment variable for production PostgreSQL connection
     # Example: postgresql://user:password@hostname/database?sslmode=require
-    SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL') or 'sqlite:///learning_path.db'
-    
+    SQLALCHEMY_DATABASE_URI = os.environ.get(
+        'DATABASE_URL') or 'sqlite:///learning_path.db'
+
     # Fix for Heroku/Render style postgres:// URLs (SQLAlchemy requires postgresql://)
     if SQLALCHEMY_DATABASE_URI and SQLALCHEMY_DATABASE_URI.startswith('postgres://'):
-        SQLALCHEMY_DATABASE_URI = SQLALCHEMY_DATABASE_URI.replace('postgres://', 'postgresql://', 1)
-    
+        SQLALCHEMY_DATABASE_URI = SQLALCHEMY_DATABASE_URI.replace(
+            'postgres://', 'postgresql://', 1)
+
     SQLALCHEMY_TRACK_MODIFICATIONS = False
     SQLALCHEMY_ENGINE_OPTIONS = {
         'pool_pre_ping': True,  # Enable connection health checks
         'pool_recycle': 300,    # Recycle connections every 5 minutes
     }
-    
+
     # WTF CSRF Settings - Temporarily disabled due to HF Spaces session issues
     # TODO: Re-enable after figuring out session persistence
     WTF_CSRF_ENABLED = False  # Disable CSRF for now - will re-enable with fix
@@ -42,11 +47,11 @@ class Config:
     SESSION_COOKIE_SAMESITE = 'Lax'
     PERMANENT_SESSION_LIFETIME = 7200  # 2 hours
     SESSION_COOKIE_NAME = 'learning_path_session'
-    
+
     # HF Spaces internal traffic is HTTP even though external is HTTPS
     # Setting SECURE=False allows cookies to be set over internal HTTP
     SESSION_COOKIE_SECURE = False  # Must be False for HF Spaces
     REMEMBER_COOKIE_SECURE = False
     REMEMBER_COOKIE_SAMESITE = 'Lax'
-        
+
     LOG_TO_STDOUT = os.environ.get('LOG_TO_STDOUT')

init_postgres_db.py

@@ -6,6 +6,7 @@ Usage:
     1. Set DATABASE_URL environment variable
     2. Run: python init_postgres_db.py
 """
+from web_app import create_app, db
 import os
 import sys
 from dotenv import load_dotenv
@@ -32,28 +33,28 @@ if database_url.startswith('postgres://'):
     os.environ['DATABASE_URL'] = database_url
 
 print(f"🔗 Connecting to database...")
-print(f"   Host: {database_url.split('@')[1].split('/')[0] if '@' in database_url else 'local'}")
+print(
+    f"   Host: {database_url.split('@')[1].split('/')[0] if '@' in database_url else 'local'}")
 
 # Now import Flask app
-from web_app import create_app, db
 
 app = create_app()
 
 with app.app_context():
     print("📦 Creating all database tables...")
-    
+
     # Import models to ensure they're registered
     from web_app.models import (
-        User, UserLearningPath, LearningProgress, 
+        User, UserLearningPath, LearningProgress,
         ResourceProgress, MilestoneProgress,
         ChatMessage, PathModification, ConversationSession, OAuth
     )
-    
+
     # Create all tables
     db.create_all()
-    
+
     print("✅ Database tables created successfully!")
-    
+
     # Show created tables
     from sqlalchemy import inspect
     inspector = inspect(db.engine)
@@ -61,13 +62,13 @@ with app.app_context():
     print(f"\n📋 Tables in database ({len(tables)}):")
     for table in tables:
         print(f"   - {table}")
-    
+
     # Check if there are any users
     user_count = User.query.count()
     print(f"\n👥 Current users in database: {user_count}")
-    
+
     if user_count == 0:
         print("\n💡 No users yet. Users will be created when they register via the app.")
-    
+
     print("\n🎉 Database initialization complete!")
     print("   Your app is now ready to use persistent PostgreSQL storage.")

web_app/__init__.py

@@ -29,7 +29,7 @@ def create_app(config_class=Config):
 
     # Initialize CSRF protection
     csrf.init_app(app)
-    
+
     # Exempt API endpoints from CSRF (they use token auth)
     @csrf.exempt
     def csrf_exempt_api():

web_app/api_endpoints.py

@@ -19,7 +19,8 @@ def get_current_user_from_token():
     if auth_header and auth_header.startswith('Bearer '):
         token = auth_header.split(' ')[1]
         try:
-            payload = jwt.decode(token, current_app.config['SECRET_KEY'], algorithms=['HS256'])
+            payload = jwt.decode(
+                token, current_app.config['SECRET_KEY'], algorithms=['HS256'])
             user_id = payload.get('user_id')
             if user_id:
                 return User.query.get(user_id)
@@ -36,21 +37,21 @@ def api_auth_required(f):
     @wraps(f)
     def decorated(*args, **kwargs):
         user = None
-        
+
         # First try JWT token auth (for mobile)
         user = get_current_user_from_token()
-        
+
         # If no token, fall back to session auth (for web)
         if not user and current_user.is_authenticated:
             user = current_user
-        
+
         if not user:
             return jsonify({'error': 'Authentication required'}), 401
-        
+
         # Store user in g for access in the route
         g.current_user = user
         return f(*args, **kwargs)
-    
+
     return decorated
 
 
@@ -141,6 +142,18 @@ def get_all_paths():
             path_data['topic'] = up.topic
             path_data['created_at'] = up.created_at.isoformat(
             ) if up.created_at else None
+            
+            # Include milestone completion progress
+            progress_entries = LearningProgress.query.filter_by(
+                user_learning_path_id=up.id
+            ).all()
+            completed_milestones = {}
+            for progress in progress_entries:
+                completed_milestones[progress.milestone_identifier] = (
+                    progress.status == 'completed'
+                )
+            path_data['completedMilestones'] = completed_milestones
+            
             paths.append(path_data)
         return jsonify({'paths': paths}), 200
     except Exception as e:
@@ -171,6 +184,17 @@ def get_path_by_id(path_id):
         path_data['created_at'] = user_path.created_at.isoformat(
         ) if user_path.created_at else None
 
+        # Include milestone completion progress
+        progress_entries = LearningProgress.query.filter_by(
+            user_learning_path_id=path_id
+        ).all()
+        completed_milestones = {}
+        for progress in progress_entries:
+            completed_milestones[progress.milestone_identifier] = (
+                progress.status == 'completed'
+            )
+        path_data['completedMilestones'] = completed_milestones
+
         return jsonify(path_data), 200
     except Exception as e:
         current_app.logger.error(f"Error getting path: {str(e)}")

web_app/auth_routes.py

@@ -36,7 +36,8 @@ def generate_jwt_token(user_id, expires_in_days=30):
 def verify_jwt_token(token):
     """Verify a JWT token and return the user_id"""
     try:
-        payload = jwt.decode(token, current_app.config['SECRET_KEY'], algorithms=['HS256'])
+        payload = jwt.decode(
+            token, current_app.config['SECRET_KEY'], algorithms=['HS256'])
         return payload.get('user_id')
     except jwt.ExpiredSignatureError:
         return None
@@ -49,27 +50,27 @@ def token_required(f):
     @wraps(f)
     def decorated(*args, **kwargs):
         token = None
-        
+
         # Check for token in Authorization header
         auth_header = request.headers.get('Authorization')
         if auth_header and auth_header.startswith('Bearer '):
             token = auth_header.split(' ')[1]
-        
+
         if not token:
             return jsonify({'error': 'Authentication token is missing'}), 401
-        
+
         user_id = verify_jwt_token(token)
         if not user_id:
             return jsonify({'error': 'Invalid or expired token'}), 401
-        
+
         # Get the user
         user = User.query.get(user_id)
         if not user:
             return jsonify({'error': 'User not found'}), 401
-        
+
         # Pass the user to the route
         return f(user, *args, **kwargs)
-    
+
     return decorated
 
 
@@ -82,7 +83,8 @@ def register():
 
     # Handle form submission
     if form.validate_on_submit():
-        logger.info(f"Registration form validated for email: {form.email.data}")
+        logger.info(
+            f"Registration form validated for email: {form.email.data}")
         user = User(username=form.username.data, email=form.email.data)
         user.set_password(form.password.data)
 
@@ -108,12 +110,13 @@ def register():
         logger.info(f"User logged in after registration: {user.email}")
         dashboard_url = url_for('main.dashboard')
         logger.info(f"Redirecting to dashboard: {dashboard_url}")
-        
+
         # Use render template with meta refresh as fallback
         return render_template('redirect.html', redirect_url=dashboard_url)
     else:
         if form.is_submitted():
-            logger.warning(f"Registration form validation failed: {form.errors}")
+            logger.warning(
+                f"Registration form validation failed: {form.errors}")
 
     return render_template('register.html', title='Join the Community', form=form)
 
@@ -132,12 +135,14 @@ def login():
         if user is None or not user.check_password(form.password.data):
             # Helpful error message
             if user is None:
-                logger.warning(f"Login failed: No user found for email {form.email.data}")
+                logger.warning(
+                    f"Login failed: No user found for email {form.email.data}")
                 flash(
                     'No account found with this email. Would you like to register?', 'warning')
                 return redirect(url_for('auth.register', email=form.email.data))
             else:
-                logger.warning(f"Login failed: Wrong password for {form.email.data}")
+                logger.warning(
+                    f"Login failed: Wrong password for {form.email.data}")
                 flash('Incorrect password. Please try again.', 'danger')
                 return redirect(url_for('auth.login'))
 
@@ -161,7 +166,7 @@ def login():
             next_page = url_for('main.dashboard')
 
         logger.info(f"Redirecting to: {next_page}")
-        
+
         # Use render template with meta refresh as fallback
         return render_template('redirect.html', redirect_url=next_page)
     else:

web_app/models.py

@@ -2,80 +2,96 @@ from datetime import datetime
 from flask_sqlalchemy import SQLAlchemy
 from flask_login import UserMixin
 from werkzeug.security import generate_password_hash, check_password_hash
-from web_app import db, login_manager # Assuming db and login_manager are initialized in __init__.py
+# Assuming db and login_manager are initialized in __init__.py
+from web_app import db, login_manager
 from flask_dance.consumer.storage.sqla import OAuthConsumerMixin
 import uuid
 
+
 @login_manager.user_loader
 def load_user(user_id):
     return User.query.get(int(user_id))
 
+
 class User(UserMixin, db.Model):
     __tablename__ = 'users'
-    
+
     id = db.Column(db.Integer, primary_key=True)
-    username = db.Column(db.String(64), index=True, unique=True, nullable=False)
+    username = db.Column(db.String(64), index=True,
+                         unique=True, nullable=False)
     email = db.Column(db.String(120), index=True, unique=True, nullable=False)
     password_hash = db.Column(db.String(256))
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
     last_seen = db.Column(db.DateTime, default=datetime.utcnow)
-    registration_source = db.Column(db.String(20), default='email_password')  # 'email_password', 'google', etc.
+    # 'email_password', 'google', etc.
+    registration_source = db.Column(db.String(20), default='email_password')
     login_count = db.Column(db.Integer, default=0)
-    
+
     # Profile information (optional)
-    display_name = db.Column(db.String(100))  # For a more personalized display name vs username
+    # For a more personalized display name vs username
+    display_name = db.Column(db.String(100))
     bio = db.Column(db.Text)
-    
+
     # Relationships for Feature 1: User Accounts & Progress Tracking
     # A user can have multiple learning paths they've generated or saved
-    learning_paths = db.relationship('UserLearningPath', backref='author', lazy='dynamic')
+    learning_paths = db.relationship(
+        'UserLearningPath', backref='author', lazy='dynamic')
 
     def set_password(self, password):
         self.password_hash = generate_password_hash(password)
-        
+
     def check_password(self, password):
         return check_password_hash(self.password_hash, password)
 
     def __repr__(self):
         return f'<User {self.username}>'
 
+
 class UserLearningPath(db.Model):
     __tablename__ = 'user_learning_paths'
 
-    id = db.Column(db.String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
+    id = db.Column(db.String(36), primary_key=True,
+                   default=lambda: str(uuid.uuid4()))
     user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
     # Storing the original AI-generated path data as JSON for now
     # This can be normalized further if needed for Feature 2 (Enhanced Resource Management)
-    path_data_json = db.Column(db.JSON, nullable=False) 
-    title = db.Column(db.String(200), nullable=True) # Extracted from path_data for easier display
-    topic = db.Column(db.String(100), nullable=True) # Extracted from path_data
+    path_data_json = db.Column(db.JSON, nullable=False)
+    # Extracted from path_data for easier display
+    title = db.Column(db.String(200), nullable=True)
+    # Extracted from path_data
+    topic = db.Column(db.String(100), nullable=True)
     created_at = db.Column(db.DateTime, index=True, default=datetime.utcnow)
     last_accessed_at = db.Column(db.DateTime, default=datetime.utcnow)
     is_archived = db.Column(db.Boolean, default=False)
 
     # Relationships for Feature 1: Progress Tracking
     # A learning path can have multiple progress entries (one per milestone)
-    progress_entries = db.relationship('LearningProgress', backref='path', lazy='dynamic', cascade='all, delete-orphan')
+    progress_entries = db.relationship(
+        'LearningProgress', backref='path', lazy='dynamic', cascade='all, delete-orphan')
 
     def __repr__(self):
         return f'<UserLearningPath {self.id} for User {self.user_id}>'
 
+
 class LearningProgress(db.Model):
     __tablename__ = 'learning_progress'
 
     id = db.Column(db.Integer, primary_key=True)
-    user_learning_path_id = db.Column(db.String(36), db.ForeignKey('user_learning_paths.id'), nullable=False)
+    user_learning_path_id = db.Column(db.String(36), db.ForeignKey(
+        'user_learning_paths.id'), nullable=False)
     # Assuming milestones have a unique identifier within the path_data_json
     # For simplicity, let's say milestone_title or an index can serve as this ID for now.
     # This might need refinement based on how milestones are structured in path_data_json.
-    milestone_identifier = db.Column(db.String(200), nullable=False) 
-    status = db.Column(db.String(50), default='not_started')  # e.g., 'not_started', 'in_progress', 'completed'
+    milestone_identifier = db.Column(db.String(200), nullable=False)
+    # e.g., 'not_started', 'in_progress', 'completed'
+    status = db.Column(db.String(50), default='not_started')
     started_at = db.Column(db.DateTime)
     completed_at = db.Column(db.DateTime)
     notes = db.Column(db.Text)
     # For Feature 3 (Interactive Learning - Quizzes), we might add quiz attempts here or in a separate table
 
-    __table_args__ = (db.UniqueConstraint('user_learning_path_id', 'milestone_identifier', name='_user_path_milestone_uc'),)
+    __table_args__ = (db.UniqueConstraint('user_learning_path_id',
+                      'milestone_identifier', name='_user_path_milestone_uc'),)
 
     def __repr__(self):
         return f'<LearningProgress for Milestone {self.milestone_identifier} in Path {self.user_learning_path_id}>'
@@ -90,23 +106,28 @@ class ResourceProgress(db.Model):
 
     id = db.Column(db.Integer, primary_key=True)
     user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
-    learning_path_id = db.Column(db.String(36), db.ForeignKey('user_learning_paths.id'), nullable=False)
-    milestone_index = db.Column(db.Integer, nullable=False)  # 0-based index of milestone
-    resource_index = db.Column(db.Integer, nullable=False)  # 0-based index of resource within milestone
-    resource_url = db.Column(db.String(500), nullable=False)  # Store URL for reference
-    
+    learning_path_id = db.Column(db.String(36), db.ForeignKey(
+        'user_learning_paths.id'), nullable=False)
+    # 0-based index of milestone
+    milestone_index = db.Column(db.Integer, nullable=False)
+    # 0-based index of resource within milestone
+    resource_index = db.Column(db.Integer, nullable=False)
+    # Store URL for reference
+    resource_url = db.Column(db.String(500), nullable=False)
+
     # Progress tracking
     completed = db.Column(db.Boolean, default=False)
     completed_at = db.Column(db.DateTime, nullable=True)
-    
+
     # Metadata
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    updated_at = db.Column(
+        db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
 
     # Unique constraint: one entry per user, path, milestone, and resource
     __table_args__ = (
-        db.UniqueConstraint('user_id', 'learning_path_id', 'milestone_index', 'resource_index', 
-                          name='_user_path_milestone_resource_uc'),
+        db.UniqueConstraint('user_id', 'learning_path_id', 'milestone_index', 'resource_index',
+                            name='_user_path_milestone_resource_uc'),
     )
 
     def __repr__(self):
@@ -122,21 +143,24 @@ class MilestoneProgress(db.Model):
 
     id = db.Column(db.Integer, primary_key=True)
     user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
-    learning_path_id = db.Column(db.String(36), db.ForeignKey('user_learning_paths.id'), nullable=False)
-    milestone_index = db.Column(db.Integer, nullable=False)  # 0-based index of milestone
-    
+    learning_path_id = db.Column(db.String(36), db.ForeignKey(
+        'user_learning_paths.id'), nullable=False)
+    # 0-based index of milestone
+    milestone_index = db.Column(db.Integer, nullable=False)
+
     # Progress tracking
     completed = db.Column(db.Boolean, default=False)
     completed_at = db.Column(db.DateTime, nullable=True)
-    
+
     # Metadata
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    updated_at = db.Column(
+        db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
 
     # Unique constraint: one entry per user, path, and milestone
     __table_args__ = (
-        db.UniqueConstraint('user_id', 'learning_path_id', 'milestone_index', 
-                          name='_milestone_progress_uc'),
+        db.UniqueConstraint('user_id', 'learning_path_id', 'milestone_index',
+                            name='_milestone_progress_uc'),
     )
 
     def __repr__(self):
@@ -182,7 +206,7 @@ class MilestoneProgress(db.Model):
 class ChatMessage(db.Model):
     """
     Stores all conversation messages between user and AI assistant.
-    
+
     Enhanced with:
     - Conversation memory and context
     - Multi-turn dialogue support
@@ -191,45 +215,51 @@ class ChatMessage(db.Model):
     - Automatic cleanup utilities
     """
     __tablename__ = 'chat_messages'
-    
+
     id = db.Column(db.Integer, primary_key=True)
     user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
-    learning_path_id = db.Column(db.String(36), db.ForeignKey('user_learning_paths.id'), nullable=True)
-    
+    learning_path_id = db.Column(db.String(36), db.ForeignKey(
+        'user_learning_paths.id'), nullable=True)
+
     # Message content
     message = db.Column(db.Text, nullable=False)
     role = db.Column(db.String(20), nullable=False)  # 'user' or 'assistant'
-    
+
     # Conversation grouping (NEW: enhanced from session_id)
-    conversation_id = db.Column(db.String(36), nullable=True, index=True)  # Groups related messages
-    
+    # Groups related messages
+    conversation_id = db.Column(db.String(36), nullable=True, index=True)
+
     # Learning path context (NEW)
-    context = db.Column(db.JSON, nullable=True)  # Stores path state, progress, current milestone
-    
+    # Stores path state, progress, current milestone
+    context = db.Column(db.JSON, nullable=True)
+
     # Intent classification (Phase 2)
-    intent = db.Column(db.String(50), nullable=True)  # 'modify_path', 'check_progress', 'ask_question', 'general'
-    entities = db.Column(db.JSON, nullable=True)  # Extracted entities from message
-    
+    # 'modify_path', 'check_progress', 'ask_question', 'general'
+    intent = db.Column(db.String(50), nullable=True)
+    # Extracted entities from message
+    entities = db.Column(db.JSON, nullable=True)
+
     # Metadata
     timestamp = db.Column(db.DateTime, default=datetime.utcnow, index=True)
     tokens_used = db.Column(db.Integer, default=0)  # Track API costs
-    response_time_ms = db.Column(db.Integer, nullable=True)  # Performance tracking
-    
+    response_time_ms = db.Column(
+        db.Integer, nullable=True)  # Performance tracking
+
     # Legacy field (kept for backward compatibility)
     session_id = db.Column(db.String(36), nullable=True, index=True)
-    
+
     def __repr__(self):
         return f'<ChatMessage {self.id} by User {self.user_id} ({self.role}) in Conversation {self.conversation_id}>'
-    
+
     @staticmethod
     def get_conversation_history(conversation_id, limit=10):
         """
         Get recent messages from a conversation.
-        
+
         Args:
             conversation_id: The conversation ID to fetch
             limit: Maximum number of messages to return (default: 10)
-            
+
         Returns:
             List of ChatMessage objects, ordered by timestamp (oldest first)
         """
@@ -238,17 +268,17 @@ class ChatMessage(db.Model):
         ).order_by(
             ChatMessage.timestamp.asc()
         ).limit(limit).all()
-        
+
         return messages
-    
+
     @staticmethod
     def get_recent_context(conversation_id):
         """
         Get the most recent context from a conversation.
-        
+
         Args:
             conversation_id: The conversation ID
-            
+
         Returns:
             Dictionary with learning path context, or None
         """
@@ -260,60 +290,61 @@ class ChatMessage(db.Model):
         ).order_by(
             ChatMessage.timestamp.desc()
         ).first()
-        
+
         return message.context if message else None
-    
+
     @staticmethod
     def clean_old_messages(days=7):
         """
         Delete messages older than specified days.
-        
+
         Args:
             days: Number of days to keep (default: 7)
-            
+
         Returns:
             Number of messages deleted
         """
         from datetime import timedelta
         cutoff_date = datetime.utcnow() - timedelta(days=days)
-        
+
         old_messages = ChatMessage.query.filter(
             ChatMessage.timestamp < cutoff_date
         ).all()
-        
+
         count = len(old_messages)
-        
+
         for message in old_messages:
             db.session.delete(message)
-        
+
         db.session.commit()
-        
+
         return count
-    
+
     @staticmethod
     def get_conversation_stats(conversation_id):
         """
         Get statistics about a conversation.
-        
+
         Args:
             conversation_id: The conversation ID
-            
+
         Returns:
             Dictionary with conversation statistics
         """
         messages = ChatMessage.query.filter_by(
             conversation_id=conversation_id
         ).all()
-        
+
         if not messages:
             return None
-        
+
         user_messages = [m for m in messages if m.role == 'user']
         assistant_messages = [m for m in messages if m.role == 'assistant']
-        
+
         total_tokens = sum(m.tokens_used for m in messages if m.tokens_used)
-        avg_response_time = sum(m.response_time_ms for m in assistant_messages if m.response_time_ms) / len(assistant_messages) if assistant_messages else 0
-        
+        avg_response_time = sum(m.response_time_ms for m in assistant_messages if m.response_time_ms) / \
+            len(assistant_messages) if assistant_messages else 0
+
         return {
             'total_messages': len(messages),
             'user_messages': len(user_messages),
@@ -328,7 +359,7 @@ class ChatMessage(db.Model):
 class PathModification(db.Model):
     """
     Tracks all modifications made to learning paths via chatbot.
-    
+
     This enables:
     - Modification history and audit trail
     - Undo functionality
@@ -336,25 +367,31 @@ class PathModification(db.Model):
     - Path evolution tracking
     """
     __tablename__ = 'path_modifications'
-    
+
     id = db.Column(db.Integer, primary_key=True)
-    learning_path_id = db.Column(db.String(36), db.ForeignKey('user_learning_paths.id'), nullable=False)
+    learning_path_id = db.Column(db.String(36), db.ForeignKey(
+        'user_learning_paths.id'), nullable=False)
     user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
-    chat_message_id = db.Column(db.Integer, db.ForeignKey('chat_messages.id'), nullable=True)
-    
+    chat_message_id = db.Column(db.Integer, db.ForeignKey(
+        'chat_messages.id'), nullable=True)
+
     # What changed
-    modification_type = db.Column(db.String(50), nullable=False)  # 'add_resource', 'modify_milestone', 'split_milestone', etc.
-    target_path = db.Column(db.String(200), nullable=True)  # JSON path to modified element (e.g., 'milestones[2].resources')
-    
+    # 'add_resource', 'modify_milestone', 'split_milestone', etc.
+    modification_type = db.Column(db.String(50), nullable=False)
+    # JSON path to modified element (e.g., 'milestones[2].resources')
+    target_path = db.Column(db.String(200), nullable=True)
+
     # Change details
-    change_description = db.Column(db.Text, nullable=False)  # Human-readable description
+    # Human-readable description
+    change_description = db.Column(db.Text, nullable=False)
     old_value = db.Column(db.JSON, nullable=True)  # Previous value (for undo)
     new_value = db.Column(db.JSON, nullable=True)  # New value
-    
+
     # Metadata
     timestamp = db.Column(db.DateTime, default=datetime.utcnow, index=True)
-    is_reverted = db.Column(db.Boolean, default=False)  # If user undid this change
-    
+    # If user undid this change
+    is_reverted = db.Column(db.Boolean, default=False)
+
     def __repr__(self):
         return f'<PathModification {self.id} for Path {self.learning_path_id}>'
 
@@ -362,7 +399,7 @@ class PathModification(db.Model):
 class ConversationSession(db.Model):
     """
     Groups related chat messages into sessions.
-    
+
     This enables:
     - Session-based context management
     - Conversation analytics
@@ -370,26 +407,28 @@ class ConversationSession(db.Model):
     - Better context window management
     """
     __tablename__ = 'conversation_sessions'
-    
-    id = db.Column(db.String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
+
+    id = db.Column(db.String(36), primary_key=True,
+                   default=lambda: str(uuid.uuid4()))
     user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
-    learning_path_id = db.Column(db.String(36), db.ForeignKey('user_learning_paths.id'), nullable=True)
-    
+    learning_path_id = db.Column(db.String(36), db.ForeignKey(
+        'user_learning_paths.id'), nullable=True)
+
     # Session metadata
     started_at = db.Column(db.DateTime, default=datetime.utcnow, index=True)
     last_activity_at = db.Column(db.DateTime, default=datetime.utcnow)
     ended_at = db.Column(db.DateTime, nullable=True)
-    
+
     # Session summary (generated by AI)
     summary = db.Column(db.Text, nullable=True)
-    
+
     # Session stats
     message_count = db.Column(db.Integer, default=0)
     total_tokens_used = db.Column(db.Integer, default=0)
-    
+
     # Session state
     is_active = db.Column(db.Boolean, default=True)
-    
+
     def __repr__(self):
         return f'<ConversationSession {self.id} for User {self.user_id}>'
 
@@ -397,6 +436,6 @@ class ConversationSession(db.Model):
 class OAuth(OAuthConsumerMixin, db.Model):
     """Store OAuth tokens for Flask-Dance"""
     __tablename__ = 'flask_dance_oauth'
-    
+
     user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=True)
     user = db.relationship('User', backref='oauth_tokens')

web_app/templates/dashboard.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,6 +8,7 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/glassmorphic.css') }}">
 </head>
+
 <body class="bg-primary min-h-screen">
     <!-- Navigation -->
     <nav class="glass-nav py-4 px-6">
@@ -26,13 +28,14 @@
                         </svg>
                     </button>
                     <div class="absolute right-0 mt-2 w-48 glass-card p-2 hidden group-hover:block">
-                        <a href="{{ url_for('auth.logout') }}" class="block px-4 py-2 text-sm text-secondary hover:text-neon-cyan">Logout</a>
+                        <a href="{{ url_for('auth.logout') }}"
+                            class="block px-4 py-2 text-sm text-secondary hover:text-neon-cyan">Logout</a>
                     </div>
                 </div>
             </div>
         </div>
     </nav>
-    
+
     <!-- Header -->
     <section class="bg-secondary py-12 px-6">
         <div class="container mx-auto">
@@ -64,50 +67,55 @@
 
         <!-- My Learning Paths -->
         <h2 class="text-3xl font-bold text-white mb-8">My Learning Paths</h2>
-        
+
         {% if user_paths %}
-            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {% for path in user_paths %}
-                    <div id="path-{{ path.id }}" class="glass-card p-6 path-card">
-                        <div class="flex items-center gap-2 mb-3">
-                            <span class="px-3 py-1 bg-neon-cyan bg-opacity-20 border border-neon-cyan text-neon-cyan rounded-full text-xs font-medium">{{ path.topic }}</span>
-                            <span class="px-3 py-1 bg-neon-purple bg-opacity-20 border border-neon-purple text-neon-purple rounded-full text-xs font-medium">{{ path.expertise_level|default('Beginner')|title }}</span>
-                        </div>
-                        <h3 class="text-xl font-bold mb-2 text-white">{{ path.title }}</h3>
-                        <p class="text-muted text-sm mb-4">Created: {{ path.created_at }}</p>
-                        
-                        <!-- Progress bar -->
-                        <div class="mb-6">
-                            <div class="flex justify-between text-sm mb-2">
-                                <span class="text-secondary">Progress</span>
-                                <span class="text-neon-cyan font-mono">{{ path.progress_percentage }}%</span>
-                            </div>
-                            <div class="progress-bar-container">
-                                <div class="progress-bar" style="width: {{ path.progress_percentage }}%"></div>
-                            </div>
-                        </div>
-                        
-                        <div class="flex flex-col gap-2">
-                            <a href="{{ url_for('main.view_path', path_id=path.id) }}" class="neon-btn text-center">Continue</a>
-                            <div class="flex gap-2">
-                                <button onclick="archivePath('{{ path.id }}')" class="neon-btn-sm-purple flex-1">
-                                    {% if path.is_archived %}Unarchive{% else %}Archive{% endif %}
-                                </button>
-                                <button onclick="deletePath('{{ path.id }}')" class="neon-btn-sm flex-1" style="border-color: var(--status-error); color: var(--status-error);">
-                                    Delete
-                                </button>
-                            </div>
-                        </div>
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {% for path in user_paths %}
+            <div id="path-{{ path.id }}" class="glass-card p-6 path-card">
+                <div class="flex items-center gap-2 mb-3">
+                    <span
+                        class="px-3 py-1 bg-neon-cyan bg-opacity-20 border border-neon-cyan text-neon-cyan rounded-full text-xs font-medium">{{
+                        path.topic }}</span>
+                    <span
+                        class="px-3 py-1 bg-neon-purple bg-opacity-20 border border-neon-purple text-neon-purple rounded-full text-xs font-medium">{{
+                        path.expertise_level|default('Beginner')|title }}</span>
+                </div>
+                <h3 class="text-xl font-bold mb-2 text-white">{{ path.title }}</h3>
+                <p class="text-muted text-sm mb-4">Created: {{ path.created_at }}</p>
+
+                <!-- Progress bar -->
+                <div class="mb-6">
+                    <div class="flex justify-between text-sm mb-2">
+                        <span class="text-secondary">Progress</span>
+                        <span class="text-neon-cyan font-mono">{{ path.progress_percentage }}%</span>
                     </div>
-                {% endfor %}
+                    <div class="progress-bar-container">
+                        <div class="progress-bar" style="width: {{ path.progress_percentage }}%"></div>
+                    </div>
+                </div>
+
+                <div class="flex flex-col gap-2">
+                    <a href="{{ url_for('main.view_path', path_id=path.id) }}" class="neon-btn text-center">Continue</a>
+                    <div class="flex gap-2">
+                        <button onclick="archivePath('{{ path.id }}')" class="neon-btn-sm-purple flex-1">
+                            {% if path.is_archived %}Unarchive{% else %}Archive{% endif %}
+                        </button>
+                        <button onclick="deletePath('{{ path.id }}')" class="neon-btn-sm flex-1"
+                            style="border-color: var(--status-error); color: var(--status-error);">
+                            Delete
+                        </button>
+                    </div>
+                </div>
             </div>
+            {% endfor %}
+        </div>
         {% else %}
-            <div class="glass-card p-12 text-center">
-                <div class="text-8xl mb-6">📚</div>
-                <h3 class="text-3xl font-bold text-white mb-4">No Learning Paths Found</h3>
-                <p class="text-secondary mb-8">Create your first personalized learning journey!</p>
-                <a href="/new-path#path-form" class="neon-btn text-lg">Create Your First Path</a>
-            </div>
+        <div class="glass-card p-12 text-center">
+            <div class="text-8xl mb-6">📚</div>
+            <h3 class="text-3xl font-bold text-white mb-4">No Learning Paths Found</h3>
+            <p class="text-secondary mb-8">Create your first personalized learning journey!</p>
+            <a href="/new-path#path-form" class="neon-btn text-lg">Create Your First Path</a>
+        </div>
         {% endif %}
     </div>
 
@@ -123,35 +131,35 @@
                     path_id: pathId
                 })
             })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    // Reload the page to reflect changes
-                    window.location.reload();
-                } else {
-                    alert('Error: ' + data.message);
-                }
-            })
-            .catch(error => {
-                console.error('Error:', error);
-                alert('An error occurred. Please try again.');
-            });
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // Reload the page to reflect changes
+                        window.location.reload();
+                    } else {
+                        alert('Error: ' + data.message);
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('An error occurred. Please try again.');
+                });
         }
     </script>
-    
+
     <!-- JavaScript for path management -->
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', function () {
             // Handle archive/unarchive buttons
             const archiveButtons = document.querySelectorAll('.archive-btn');
             const unarchiveButtons = document.querySelectorAll('.unarchive-btn');
-            
+
             // Archive path
             archiveButtons.forEach(btn => {
-                btn.addEventListener('click', function() {
+                btn.addEventListener('click', function () {
                     const pathId = this.getAttribute('data-path-id');
                     const pathCard = document.getElementById('path-' + pathId);
-                    
+
                     // Send request to server
                     fetch('/archive_path', {
                         method: 'POST',
@@ -163,19 +171,19 @@
                             archive: true
                         })
                     })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.status === 'success') {
-                            // Remove path card with animation
-                            pathCard.classList.add('opacity-0');
-                            setTimeout(() => {
-                                pathCard.remove();
-                                
-                                // Check if there are no more active paths
-                                const remainingPaths = document.querySelectorAll('.path-card');
-                                if (remainingPaths.length === 0) {
-                                    const pathsContainer = document.getElementById('active-paths-container');
-                                    pathsContainer.innerHTML = `
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.status === 'success') {
+                                // Remove path card with animation
+                                pathCard.classList.add('opacity-0');
+                                setTimeout(() => {
+                                    pathCard.remove();
+
+                                    // Check if there are no more active paths
+                                    const remainingPaths = document.querySelectorAll('.path-card');
+                                    if (remainingPaths.length === 0) {
+                                        const pathsContainer = document.getElementById('active-paths-container');
+                                        pathsContainer.innerHTML = `
                                         <div class="bg-white rounded-xl shadow-md p-8 text-center">
                                             <img src="https://img.freepik.com/free-vector/empty-concept-illustration_114360-1188.jpg" alt="No paths found" class="w-64 h-64 mx-auto mb-6">
                                             <h3 class="text-2xl font-bold text-gray-800 mb-4">No Active Learning Paths</h3>
@@ -183,22 +191,22 @@
                                             <a href="/" class="inline-block bg-magenta text-white px-6 py-3 rounded-full font-bold hover:bg-magentaLight transition-colors duration-300">Create Your First Path</a>
                                         </div>
                                     `;
-                                }
-                                
-                                // Update archived paths section
-                                const archivedPathsContainer = document.getElementById('archived-paths-container');
-                                const archivedPathsCount = document.getElementById('archived-paths-count');
-                                
-                                // Create new archived path card
-                                const pathTitle = this.getAttribute('data-path-title');
-                                const pathTopic = this.getAttribute('data-path-topic');
-                                const pathExpertise = this.getAttribute('data-path-expertise');
-                                const pathCreated = this.getAttribute('data-path-created');
-                                
-                                const newArchivedPath = document.createElement('div');
-                                newArchivedPath.id = 'archived-' + pathId;
-                                newArchivedPath.className = 'bg-white rounded-xl shadow-md overflow-hidden archived-path-card';
-                                newArchivedPath.innerHTML = `
+                                    }
+
+                                    // Update archived paths section
+                                    const archivedPathsContainer = document.getElementById('archived-paths-container');
+                                    const archivedPathsCount = document.getElementById('archived-paths-count');
+
+                                    // Create new archived path card
+                                    const pathTitle = this.getAttribute('data-path-title');
+                                    const pathTopic = this.getAttribute('data-path-topic');
+                                    const pathExpertise = this.getAttribute('data-path-expertise');
+                                    const pathCreated = this.getAttribute('data-path-created');
+
+                                    const newArchivedPath = document.createElement('div');
+                                    newArchivedPath.id = 'archived-' + pathId;
+                                    newArchivedPath.className = 'bg-white rounded-xl shadow-md overflow-hidden archived-path-card';
+                                    newArchivedPath.innerHTML = `
                                     <div class="p-6">
                                         <div class="flex items-center gap-2 mb-2">
                                             <span class="px-3 py-1 bg-magentaLight text-white rounded-full text-xs font-medium">${pathTopic}</span>
@@ -212,42 +220,42 @@
                                         </div>
                                     </div>
                                 `;
-                                
-                                // Show archived paths section if it was hidden
-                                const archivedSection = document.getElementById('archived-section');
-                                if (archivedSection.classList.contains('hidden')) {
-                                    archivedSection.classList.remove('hidden');
-                                }
-                                
-                                // Add the new archived path
-                                archivedPathsContainer.appendChild(newArchivedPath);
-                                
-                                // Update count
-                                const currentCount = parseInt(archivedPathsCount.textContent) || 0;
-                                archivedPathsCount.textContent = currentCount + 1;
-                                
-                                // Add event listener to the new unarchive button
-                                const newUnarchiveBtn = newArchivedPath.querySelector('.unarchive-btn');
-                                addUnarchiveListener(newUnarchiveBtn);
-                            }, 300);
-                        } else {
-                            console.error('Error archiving path:', data.message);
-                            alert('Error archiving path. Please try again.');
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error:', error);
-                        alert('An error occurred. Please try again.');
-                    });
+
+                                    // Show archived paths section if it was hidden
+                                    const archivedSection = document.getElementById('archived-section');
+                                    if (archivedSection.classList.contains('hidden')) {
+                                        archivedSection.classList.remove('hidden');
+                                    }
+
+                                    // Add the new archived path
+                                    archivedPathsContainer.appendChild(newArchivedPath);
+
+                                    // Update count
+                                    const currentCount = parseInt(archivedPathsCount.textContent) || 0;
+                                    archivedPathsCount.textContent = currentCount + 1;
+
+                                    // Add event listener to the new unarchive button
+                                    const newUnarchiveBtn = newArchivedPath.querySelector('.unarchive-btn');
+                                    addUnarchiveListener(newUnarchiveBtn);
+                                }, 300);
+                            } else {
+                                console.error('Error archiving path:', data.message);
+                                alert('Error archiving path. Please try again.');
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                            alert('An error occurred. Please try again.');
+                        });
                 });
             });
-            
+
             // Function to add unarchive event listener
             function addUnarchiveListener(btn) {
-                btn.addEventListener('click', function() {
+                btn.addEventListener('click', function () {
                     const pathId = this.getAttribute('data-path-id');
                     const archivedCard = document.getElementById('archived-' + pathId);
-                    
+
                     // Send request to server
                     fetch('/archive_path', {
                         method: 'POST',
@@ -259,36 +267,36 @@
                             archive: false
                         })
                     })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.status === 'success') {
-                            // Remove archived card with animation
-                            archivedCard.classList.add('opacity-0');
-                            setTimeout(() => {
-                                archivedCard.remove();
-                                
-                                // Check if there are no more archived paths
-                                const remainingArchived = document.querySelectorAll('.archived-path-card');
-                                if (remainingArchived.length === 0) {
-                                    const archivedSection = document.getElementById('archived-section');
-                                    archivedSection.classList.add('hidden');
-                                }
-                                
-                                // Update archived paths count
-                                const archivedPathsCount = document.getElementById('archived-paths-count');
-                                const currentCount = parseInt(archivedPathsCount.textContent) || 0;
-                                archivedPathsCount.textContent = Math.max(0, currentCount - 1);
-                                
-                                // Create new active path card
-                                const pathTitle = this.getAttribute('data-path-title');
-                                const pathTopic = this.getAttribute('data-path-topic');
-                                const pathExpertise = this.getAttribute('data-path-expertise');
-                                const pathCreated = this.getAttribute('data-path-created');
-                                
-                                const newActivePath = document.createElement('div');
-                                newActivePath.id = 'path-' + pathId;
-                                newActivePath.className = 'bg-white rounded-xl shadow-md overflow-hidden path-card opacity-0';
-                                newActivePath.innerHTML = `
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.status === 'success') {
+                                // Remove archived card with animation
+                                archivedCard.classList.add('opacity-0');
+                                setTimeout(() => {
+                                    archivedCard.remove();
+
+                                    // Check if there are no more archived paths
+                                    const remainingArchived = document.querySelectorAll('.archived-path-card');
+                                    if (remainingArchived.length === 0) {
+                                        const archivedSection = document.getElementById('archived-section');
+                                        archivedSection.classList.add('hidden');
+                                    }
+
+                                    // Update archived paths count
+                                    const archivedPathsCount = document.getElementById('archived-paths-count');
+                                    const currentCount = parseInt(archivedPathsCount.textContent) || 0;
+                                    archivedPathsCount.textContent = Math.max(0, currentCount - 1);
+
+                                    // Create new active path card
+                                    const pathTitle = this.getAttribute('data-path-title');
+                                    const pathTopic = this.getAttribute('data-path-topic');
+                                    const pathExpertise = this.getAttribute('data-path-expertise');
+                                    const pathCreated = this.getAttribute('data-path-created');
+
+                                    const newActivePath = document.createElement('div');
+                                    newActivePath.id = 'path-' + pathId;
+                                    newActivePath.className = 'bg-white rounded-xl shadow-md overflow-hidden path-card opacity-0';
+                                    newActivePath.innerHTML = `
                                     <div class="p-6">
                                         <div class="flex items-center gap-2 mb-2">
                                             <span class="px-3 py-1 bg-magentaLight text-white rounded-full text-xs font-medium">${pathTopic}</span>
@@ -309,38 +317,38 @@
                                         </div>
                                     </div>
                                 `;
-                                
-                                // Check if there are no active paths and remove placeholder if needed
-                                const activePathsContainer = document.getElementById('active-paths-container');
-                                const noPathsPlaceholder = activePathsContainer.querySelector('.text-center');
-                                if (noPathsPlaceholder) {
-                                    activePathsContainer.innerHTML = '';
-                                }
-                                
-                                // Add the new active path
-                                activePathsContainer.appendChild(newActivePath);
-                                
-                                // Fade in the new card
-                                setTimeout(() => {
-                                    newActivePath.classList.remove('opacity-0');
-                                }, 10);
-                                
-                                // Add event listener to the new archive button
-                                const newArchiveBtn = newActivePath.querySelector('.archive-btn');
-                                newArchiveBtn.addEventListener('click', archiveButtons[0].onclick);
-                            }, 300);
-                        } else {
-                            console.error('Error unarchiving path:', data.message);
-                            alert('Error unarchiving path. Please try again.');
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error:', error);
-                        alert('An error occurred. Please try again.');
-                    });
+
+                                    // Check if there are no active paths and remove placeholder if needed
+                                    const activePathsContainer = document.getElementById('active-paths-container');
+                                    const noPathsPlaceholder = activePathsContainer.querySelector('.text-center');
+                                    if (noPathsPlaceholder) {
+                                        activePathsContainer.innerHTML = '';
+                                    }
+
+                                    // Add the new active path
+                                    activePathsContainer.appendChild(newActivePath);
+
+                                    // Fade in the new card
+                                    setTimeout(() => {
+                                        newActivePath.classList.remove('opacity-0');
+                                    }, 10);
+
+                                    // Add event listener to the new archive button
+                                    const newArchiveBtn = newActivePath.querySelector('.archive-btn');
+                                    newArchiveBtn.addEventListener('click', archiveButtons[0].onclick);
+                                }, 300);
+                            } else {
+                                console.error('Error unarchiving path:', data.message);
+                                alert('Error unarchiving path. Please try again.');
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                            alert('An error occurred. Please try again.');
+                        });
                 });
             }
-            
+
             // Add listeners to all unarchive buttons
             unarchiveButtons.forEach(btn => {
                 addUnarchiveListener(btn);
@@ -360,27 +368,28 @@
                 },
                 body: JSON.stringify({ path_id: pathId })
             })
-            .then(response => response.json())
-            .then(data => {
-                if (data.status === 'success') {
-                    // Remove card from UI
-                    const card = document.getElementById('path-' + pathId);
-                    if (card) card.remove();
-                    // If no cards left, show placeholder
-                    const remaining = document.querySelectorAll('.path-card');
-                    if (remaining.length === 0) {
-                        window.location.reload();
+                .then(response => response.json())
+                .then(data => {
+                    if (data.status === 'success') {
+                        // Remove card from UI
+                        const card = document.getElementById('path-' + pathId);
+                        if (card) card.remove();
+                        // If no cards left, show placeholder
+                        const remaining = document.querySelectorAll('.path-card');
+                        if (remaining.length === 0) {
+                            window.location.reload();
+                        }
+                    } else {
+                        alert('Error: ' + data.message);
                     }
-                } else {
-                    alert('Error: ' + data.message);
-                }
-            })
-            .catch(err => {
-                console.error('Error deleting path:', err);
-                alert('An error occurred. Please try again.');
-            });
+                })
+                .catch(err => {
+                    console.error('Error deleting path:', err);
+                    alert('An error occurred. Please try again.');
+                });
         }
     </script>
     <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
 </body>
-</html>
+
+</html>

web_app/templates/index.html

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" class="dark">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Learning Path Generator</title>
     <!-- Initialize theme immediately to prevent flash -->
     <script>
-        (function() {
+        (function () {
             const theme = localStorage.getItem('theme');
             if (theme === 'light') {
                 document.documentElement.classList.remove('dark');
@@ -32,24 +33,25 @@
             font-weight: 600;
             box-shadow: 0 0 0 2px var(--tw-ring-color, currentColor);
         }
-        
-        .bg-magenta, .magenta-bg {
+
+        .bg-magenta,
+        .magenta-bg {
             background-color: #ff50c5 !important;
         }
-        
+
         .text-magenta {
             color: #ff50c5 !important;
         }
-        
+
         .yellow-bg {
             background-color: #F9C846;
         }
-        
+
         /* Ensure footer uses proper background */
         footer {
             background-color: rgba(31, 41, 55, 0.95) !important;
         }
-        
+
         /* Category Accordion Styles */
         .category-accordion {
             border: 1px solid var(--glass-border);
@@ -57,57 +59,57 @@
             overflow: hidden;
             transition: all 0.3s ease;
         }
-        
+
         .category-accordion:hover {
             border-color: rgba(255, 80, 197, 0.4);
         }
-        
+
         .category-header {
             cursor: pointer;
             user-select: none;
         }
-        
+
         .category-header:active {
             transform: scale(0.98);
         }
-        
+
         .category-accordion.active .category-arrow {
             transform: rotate(180deg);
         }
-        
+
         .category-content {
             transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
             overflow: hidden;
         }
-        
+
         .category-content.hidden {
             max-height: 0 !important;
             opacity: 0;
         }
-        
+
         .category-content.show {
             max-height: 2000px;
             opacity: 1;
         }
-        
+
         .skill-btn {
             background: rgba(255, 80, 197, 0.1);
             border: 1px solid rgba(255, 80, 197, 0.3);
             transition: all 0.2s ease;
         }
-        
+
         .skill-btn:hover {
             background: rgba(255, 80, 197, 0.2);
             border-color: rgba(255, 80, 197, 0.5);
             transform: translateY(-2px);
         }
-        
+
         .skill-btn.active {
             background: var(--neon-cyan);
             color: var(--bg-primary);
             border-color: var(--neon-cyan);
         }
-        
+
         /* ===== CHAT WIDGET STYLES ===== */
         .chat-widget {
             position: fixed;
@@ -116,7 +118,7 @@
             z-index: 9999;
             font-family: 'Inter', sans-serif;
         }
-        
+
         .chat-toggle {
             width: 60px;
             height: 60px;
@@ -131,18 +133,18 @@
             transition: all 0.3s ease;
             position: relative;
         }
-        
+
         .chat-toggle:hover {
             transform: scale(1.1);
             box-shadow: 0 12px 32px rgba(255, 80, 197, 0.6);
         }
-        
+
         .chat-toggle svg {
             width: 28px;
             height: 28px;
             color: white;
         }
-        
+
         .chat-badge {
             position: absolute;
             top: -4px;
@@ -155,7 +157,7 @@
             border-radius: 12px;
             box-shadow: 0 2px 8px rgba(0, 255, 136, 0.4);
         }
-        
+
         .chat-window {
             position: absolute;
             bottom: 80px;
@@ -172,18 +174,19 @@
             overflow: hidden;
             animation: slideUp 0.3s ease-out;
         }
-        
+
         @keyframes slideUp {
             from {
                 opacity: 0;
                 transform: translateY(20px);
             }
+
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
-        
+
         .chat-header {
             background: linear-gradient(135deg, rgba(255, 80, 197, 0.2), rgba(200, 80, 255, 0.2));
             border-bottom: 1px solid var(--glass-border);
@@ -192,7 +195,7 @@
             align-items: center;
             justify-content: space-between;
         }
-        
+
         .chat-avatar {
             width: 40px;
             height: 40px;
@@ -203,20 +206,20 @@
             justify-content: center;
             flex-shrink: 0;
         }
-        
+
         .chat-avatar svg {
             width: 24px;
             height: 24px;
             color: white;
         }
-        
+
         .chat-title {
             font-size: 16px;
             font-weight: 600;
             color: var(--text-primary);
             margin: 0;
         }
-        
+
         .chat-status {
             font-size: 12px;
             color: var(--text-muted);
@@ -225,7 +228,7 @@
             gap: 6px;
             margin: 2px 0 0 0;
         }
-        
+
         .status-dot {
             width: 8px;
             height: 8px;
@@ -233,12 +236,19 @@
             background: var(--status-success);
             animation: pulse 2s infinite;
         }
-        
+
         @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.5;
+            }
         }
-        
+
         .chat-minimize {
             background: none;
             border: none;
@@ -248,17 +258,17 @@
             border-radius: 8px;
             transition: all 0.2s;
         }
-        
+
         .chat-minimize:hover {
             background: rgba(255, 255, 255, 0.1);
             color: var(--text-primary);
         }
-        
+
         .chat-minimize svg {
             width: 20px;
             height: 20px;
         }
-        
+
         .chat-modes {
             display: flex;
             gap: 8px;
@@ -266,7 +276,7 @@
             border-bottom: 1px solid var(--glass-border);
             background: rgba(255, 255, 255, 0.02);
         }
-        
+
         .mode-btn {
             flex: 1;
             display: flex;
@@ -283,18 +293,18 @@
             cursor: pointer;
             transition: all 0.2s;
         }
-        
+
         .mode-btn:hover {
             background: rgba(255, 255, 255, 0.08);
             border-color: rgba(255, 80, 197, 0.3);
         }
-        
+
         .mode-btn.active {
             background: linear-gradient(135deg, rgba(255, 80, 197, 0.2), rgba(200, 80, 255, 0.2));
             border-color: var(--neon-cyan);
             color: var(--neon-cyan);
         }
-        
+
         .chat-messages {
             flex: 1;
             overflow-y: auto;
@@ -303,37 +313,38 @@
             flex-direction: column;
             gap: 16px;
         }
-        
+
         .chat-messages::-webkit-scrollbar {
             width: 6px;
         }
-        
+
         .chat-messages::-webkit-scrollbar-track {
             background: rgba(255, 255, 255, 0.05);
         }
-        
+
         .chat-messages::-webkit-scrollbar-thumb {
             background: rgba(255, 80, 197, 0.3);
             border-radius: 3px;
         }
-        
+
         .message {
             display: flex;
             gap: 12px;
             animation: fadeIn 0.3s ease-out;
         }
-        
+
         @keyframes fadeIn {
             from {
                 opacity: 0;
                 transform: translateY(10px);
             }
+
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
-        
+
         .message-avatar {
             width: 32px;
             height: 32px;
@@ -344,17 +355,17 @@
             justify-content: center;
             flex-shrink: 0;
         }
-        
+
         .message-avatar svg {
             width: 18px;
             height: 18px;
             color: white;
         }
-        
+
         .user-message .message-avatar {
             background: linear-gradient(135deg, #667eea, #764ba2);
         }
-        
+
         .message-content {
             flex: 1;
             background: rgba(255, 255, 255, 0.05);
@@ -365,22 +376,22 @@
             font-size: 14px;
             line-height: 1.6;
         }
-        
+
         .user-message .message-content {
             background: linear-gradient(135deg, rgba(255, 80, 197, 0.15), rgba(200, 80, 255, 0.15));
             border-color: rgba(255, 80, 197, 0.3);
         }
-        
+
         .message-list {
             margin: 8px 0;
             padding-left: 20px;
         }
-        
+
         .message-list li {
             margin: 4px 0;
             color: var(--text-secondary);
         }
-        
+
         .quick-actions {
             display: flex;
             gap: 8px;
@@ -389,7 +400,7 @@
             background: rgba(255, 255, 255, 0.02);
             flex-wrap: wrap;
         }
-        
+
         .quick-action-btn {
             display: flex;
             align-items: center;
@@ -404,26 +415,26 @@
             cursor: pointer;
             transition: all 0.2s;
         }
-        
+
         .quick-action-btn:hover {
             background: rgba(255, 80, 197, 0.2);
             border-color: var(--neon-cyan);
             color: var(--neon-cyan);
             transform: translateY(-2px);
         }
-        
+
         .chat-input-container {
             border-top: 1px solid var(--glass-border);
             background: rgba(255, 255, 255, 0.02);
             padding: 16px;
         }
-        
+
         .chat-input-wrapper {
             display: flex;
             gap: 12px;
             align-items: flex-end;
         }
-        
+
         .chat-input {
             flex: 1;
             background: rgba(255, 255, 255, 0.1);
@@ -437,32 +448,32 @@
             max-height: 120px;
             transition: all 0.2s;
         }
-        
+
         .chat-input:focus {
             outline: none;
             border-color: var(--neon-cyan);
             background: rgba(255, 255, 255, 0.15);
         }
-        
+
         .chat-input::placeholder {
             color: rgba(255, 255, 255, 0.5);
         }
-        
+
         /* Light mode input fix */
         :root:not(.dark) .chat-input {
             background: rgba(0, 0, 0, 0.05);
             border-color: rgba(0, 0, 0, 0.1);
             color: #0f172a !important;
         }
-        
+
         :root:not(.dark) .chat-input:focus {
             background: rgba(0, 0, 0, 0.08);
         }
-        
+
         :root:not(.dark) .chat-input::placeholder {
             color: rgba(0, 0, 0, 0.4);
         }
-        
+
         .chat-send {
             width: 44px;
             height: 44px;
@@ -476,27 +487,27 @@
             transition: all 0.2s;
             flex-shrink: 0;
         }
-        
+
         .chat-send:hover {
             transform: scale(1.05);
             box-shadow: 0 4px 12px rgba(255, 80, 197, 0.4);
         }
-        
+
         .chat-send:active {
             transform: scale(0.95);
         }
-        
+
         .chat-send svg {
             width: 20px;
             height: 20px;
             color: white;
         }
-        
+
         .loading-spinner-chat {
             width: 20px;
             height: 20px;
         }
-        
+
         .spinner-ring {
             width: 20px;
             height: 20px;
@@ -505,18 +516,20 @@
             border-radius: 50%;
             animation: spin 0.8s linear infinite;
         }
-        
+
         @keyframes spin {
-            to { transform: rotate(360deg); }
+            to {
+                transform: rotate(360deg);
+            }
         }
-        
+
         .chat-footer-text {
             text-align: center;
             font-size: 11px;
             color: var(--text-muted);
             margin-top: 8px;
         }
-        
+
         /* Mobile Responsive */
         @media (max-width: 768px) {
             .chat-window {
@@ -525,13 +538,13 @@
                 bottom: 80px;
                 right: 16px;
             }
-            
+
             .chat-widget {
                 bottom: 16px;
                 right: 16px;
             }
         }
-        
+
         /* ===== PROGRESS CARD STYLES ===== */
         .progress-card {
             background: var(--glass-bg);
@@ -542,25 +555,26 @@
             margin-top: 24px;
             animation: slideIn 0.5s ease-out;
         }
-        
+
         @keyframes slideIn {
             from {
                 opacity: 0;
                 transform: translateY(-20px);
             }
+
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
-        
+
         .progress-card-header {
             display: flex;
             align-items: center;
             gap: 16px;
             margin-bottom: 24px;
         }
-        
+
         .progress-icon {
             width: 56px;
             height: 56px;
@@ -571,37 +585,37 @@
             justify-content: center;
             flex-shrink: 0;
         }
-        
+
         .progress-icon svg {
             width: 32px;
             height: 32px;
             color: white;
         }
-        
+
         .animate-spin {
             animation: spin 2s linear infinite;
         }
-        
+
         .progress-title {
             font-size: 20px;
             font-weight: 700;
             color: var(--text-primary);
             margin: 0;
         }
-        
+
         .progress-subtitle {
             font-size: 14px;
             color: var(--text-secondary);
             margin: 4px 0 0 0;
         }
-        
+
         .progress-bar-container {
             display: flex;
             align-items: center;
             gap: 16px;
             margin-bottom: 24px;
         }
-        
+
         .progress-bar-bg {
             flex: 1;
             height: 12px;
@@ -610,7 +624,7 @@
             overflow: hidden;
             position: relative;
         }
-        
+
         .progress-bar-fill {
             height: 100%;
             background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
@@ -620,7 +634,7 @@
             position: relative;
             overflow: hidden;
         }
-        
+
         .progress-bar-fill::after {
             content: '';
             position: absolute;
@@ -628,20 +642,23 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: linear-gradient(
-                90deg,
-                transparent,
-                rgba(255, 255, 255, 0.3),
-                transparent
-            );
+            background: linear-gradient(90deg,
+                    transparent,
+                    rgba(255, 255, 255, 0.3),
+                    transparent);
             animation: shimmer 2s infinite;
         }
-        
+
         @keyframes shimmer {
-            0% { transform: translateX(-100%); }
-            100% { transform: translateX(100%); }
+            0% {
+                transform: translateX(-100%);
+            }
+
+            100% {
+                transform: translateX(100%);
+            }
         }
-        
+
         .progress-percentage {
             font-size: 18px;
             font-weight: 700;
@@ -649,13 +666,13 @@
             min-width: 50px;
             text-align: right;
         }
-        
+
         .progress-steps {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
             gap: 16px;
         }
-        
+
         .progress-step {
             display: flex;
             flex-direction: column;
@@ -668,67 +685,67 @@
             transition: all 0.3s ease;
             opacity: 0.4;
         }
-        
+
         .progress-step.active {
             opacity: 1;
             background: linear-gradient(135deg, rgba(255, 80, 197, 0.15), rgba(200, 80, 255, 0.15));
             border-color: var(--neon-cyan);
             transform: scale(1.05);
         }
-        
+
         .progress-step.completed {
             opacity: 0.7;
             background: rgba(0, 255, 136, 0.1);
             border-color: var(--status-success);
         }
-        
+
         .step-icon {
             font-size: 32px;
             filter: grayscale(100%);
             transition: filter 0.3s ease;
         }
-        
+
         .progress-step.active .step-icon,
         .progress-step.completed .step-icon {
             filter: grayscale(0%);
         }
-        
+
         .step-text {
             font-size: 13px;
             font-weight: 500;
             color: var(--text-secondary);
             text-align: center;
         }
-        
+
         .progress-step.active .step-text {
             color: var(--neon-cyan);
             font-weight: 600;
         }
-        
+
         .progress-step.completed .step-text {
             color: var(--status-success);
         }
-        
+
         @media (max-width: 768px) {
             .progress-card {
                 padding: 24px 20px;
             }
-            
+
             .progress-steps {
                 grid-template-columns: repeat(2, 1fr);
             }
-            
+
             .progress-title {
                 font-size: 18px;
             }
         }
-        
+
         .wave-divider {
             position: relative;
             height: 70px;
             width: 100%;
         }
-        
+
         .wave-divider svg {
             position: absolute;
             bottom: 0;
@@ -741,12 +758,12 @@
             transition: all 0.3s ease;
             border-top: 4px solid transparent;
         }
-        
+
         .agent-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
         }
-        
+
         .agent-icon {
             width: 50px;
             height: 50px;
@@ -757,7 +774,7 @@
             margin-right: 15px;
             font-size: 24px;
         }
-        
+
         .chat-message {
             max-width: 80%;
             margin-bottom: 15px;
@@ -766,27 +783,27 @@
             position: relative;
             animation: fadeIn 0.3s ease-out;
         }
-        
+
         .chat-message.user {
             background-color: #ff50c5;
             color: white;
             margin-left: auto;
             border-bottom-right-radius: 4px;
         }
-        
+
         .chat-message.assistant {
             background-color: #f3f4f6;
             color: #1f2937;
             margin-right: auto;
             border-bottom-left-radius: 4px;
         }
-        
+
         .typing-indicator {
             display: flex;
             justify-content: center;
             padding: 10px 0;
         }
-        
+
         .typing-indicator span {
             display: inline-block;
             width: 8px;
@@ -795,44 +812,51 @@
             border-radius: 50%;
             margin: 0 2px;
         }
-        
+
         @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
-        
+
         /* Chat interface styles */
         .chat-container {
             border-radius: 1rem;
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
             overflow: hidden;
         }
-        
+
         .chat-messages {
             max-height: 400px;
             overflow-y: auto;
             scrollbar-width: thin;
             scrollbar-color: #cbd5e0 #edf2f7;
         }
-        
+
         .chat-messages::-webkit-scrollbar {
             width: 6px;
         }
-        
+
         .chat-messages::-webkit-scrollbar-track {
             background: #edf2f7;
         }
-        
+
         .chat-messages::-webkit-scrollbar-thumb {
             background-color: #cbd5e0;
             border-radius: 3px;
         }
-        
+
         .chat-input-container {
             border-top: 1px solid #e2e8f0;
             background: #f8fafc;
         }
-        
+
         .chat-input {
             resize: none;
             max-height: 120px;
@@ -840,62 +864,63 @@
             border: 1px solid #e2e8f0;
             transition: border-color 0.2s, box-shadow 0.2s;
         }
-        
+
         .chat-input:focus {
             outline: none;
             border-color: #a78bfa;
             box-shadow: 0 0 0 1px #a78bfa;
         }
-        
+
         .send-button {
             transition: all 0.2s;
         }
-        
+
         .send-button:disabled {
             opacity: 0.5;
             cursor: not-allowed;
         }
-        
+
         .suggestion-button {
             transition: all 0.2s;
         }
-        
+
         .suggestion-button:hover {
             transform: translateY(-1px);
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
-        
+
         /* Responsive adjustments */
         @media (max-width: 768px) {
             .agent-card {
                 margin-bottom: 20px;
             }
-            
+
             .chat-message {
                 max-width: 90%;
             }
-            
+
             .chat-messages {
                 max-height: 300px;
             }
         }
-        
+
         /* Animation for message appearance */
         @keyframes messageAppear {
             from {
                 opacity: 0;
                 transform: translateY(10px);
             }
+
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
-        
+
         .message {
             animation: messageAppear 0.3s ease-out forwards;
         }
-        
+
         .loading-spinner {
             display: none;
             border: 3px solid #f3f3f3;
@@ -906,37 +931,50 @@
             animation: spin 1s linear infinite;
             margin: 0 auto;
         }
-        
+
         @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
         }
-        
+
         @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-20px); }
-            100% { transform: translateY(0px); }
+            0% {
+                transform: translateY(0px);
+            }
+
+            50% {
+                transform: translateY(-20px);
+            }
+
+            100% {
+                transform: translateY(0px);
+            }
         }
-        
+
         .float-animation {
             animation: float 6s ease-in-out infinite;
         }
-        
+
         .card-hover {
             transition: all 0.3s ease;
         }
-        
+
         .card-hover:hover {
             transform: translateY(-10px);
             box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
         }
-        
+
         .btn-hover {
             position: relative;
             overflow: hidden;
             transition: all 0.3s ease;
         }
-        
+
         .btn-hover:after {
             content: '';
             position: absolute;
@@ -944,10 +982,10 @@
             left: -100%;
             width: 100%;
             height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
             transition: all 0.5s ease;
         }
-        
+
         .btn-hover:hover:after {
             left: 100%;
         }
@@ -957,6 +995,7 @@
         .nav-stripe a {
             position: relative;
         }
+
         .nav-stripe a::after {
             content: "";
             position: absolute;
@@ -964,16 +1003,19 @@
             bottom: -4px;
             width: 100%;
             height: 3px;
-            background-color: #ff50c5; /* magenta */
+            background-color: #ff50c5;
+            /* magenta */
             transform: scaleX(0);
             transform-origin: left;
             transition: transform 0.3s ease;
         }
+
         .nav-stripe a:hover::after {
             transform: scaleX(1);
         }
     </style>
 </head>
+
 <body class="grid-background min-h-screen">
     <!-- Navigation -->
     <nav class="glass-nav py-4 px-6">
@@ -983,251 +1025,286 @@
             </a>
             <div class="hidden md:flex items-center gap-6">
                 {% if current_user.is_authenticated %}
-                    <a href="/dashboard" class="text-secondary hover:text-neon-cyan transition">Dashboard</a>
-                    <a href="{{ url_for('auth.logout') }}" class="text-secondary hover:text-neon-cyan transition">Logout</a>
+                <a href="/dashboard" class="text-secondary hover:text-neon-cyan transition">Dashboard</a>
+                <a href="{{ url_for('auth.logout') }}" class="text-secondary hover:text-neon-cyan transition">Logout</a>
                 {% else %}
-                    <a href="{{ url_for('auth.login') }}" class="text-secondary hover:text-neon-cyan transition">Login</a>
-                    <a href="{{ url_for('auth.register') }}" class="neon-btn-sm">Register</a>
+                <a href="{{ url_for('auth.login') }}" class="text-secondary hover:text-neon-cyan transition">Login</a>
+                <a href="{{ url_for('auth.register') }}" class="neon-btn-sm">Register</a>
                 {% endif %}
             </div>
             <!-- Desktop dark mode toggle -->
-            <button id="theme-toggle" class="ml-2 inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-magenta" aria-label="Toggle dark mode">
-                <svg id="theme-toggle-light-icon" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M10 15a5 5 0 100-10 5 5 0 000 10zM10 1a1 1 0 011 1v1a1 1 0 11-2 0V2a1 1 0 011-1zm0 14a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zm9-5a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM3 10a1 1 0 01-1 1H1a1 1 0 110-2h1a1 1 0 011 1zm12.364-6.364a1 1 0 010 1.414L14.95 6.464a1 1 0 01-1.414-1.414l1.414-1.414a1 1 0 011.414 0zM5.05 14.95a1 1 0 011.414 0l1.414-1.414a1 1 0 10-1.414-1.414L5.05 13.536a1 1 0 010 1.414zm9.9 0a1 1 0 10-1.414-1.414l-1.414 1.414a1 1 0 101.414 1.414l1.414-1.414zM5.05 5.05a1 1 0 011.414 0L7.878 6.464A1 1 0 116.464 7.878L5.05 6.464A1 1 0 015.05 5.05z" clip-rule="evenodd"></path>
+            <button id="theme-toggle"
+                class="ml-2 inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-magenta"
+                aria-label="Toggle dark mode">
+                <svg id="theme-toggle-light-icon" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M10 15a5 5 0 100-10 5 5 0 000 10zM10 1a1 1 0 011 1v1a1 1 0 11-2 0V2a1 1 0 011-1zm0 14a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zm9-5a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM3 10a1 1 0 01-1 1H1a1 1 0 110-2h1a1 1 0 011 1zm12.364-6.364a1 1 0 010 1.414L14.95 6.464a1 1 0 01-1.414-1.414l1.414-1.414a1 1 0 011.414 0zM5.05 14.95a1 1 0 011.414 0l1.414-1.414a1 1 0 10-1.414-1.414L5.05 13.536a1 1 0 010 1.414zm9.9 0a1 1 0 10-1.414-1.414l-1.414 1.414a1 1 0 101.414 1.414l1.414-1.414zM5.05 5.05a1 1 0 011.414 0L7.878 6.464A1 1 0 116.464 7.878L5.05 6.464A1 1 0 015.05 5.05z"
+                        clip-rule="evenodd"></path>
                 </svg>
-                <svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg">
                     <path d="M17.293 13.293A8 8 0 016.707 2.707a8 8 0 1010.586 10.586z"></path>
                 </svg>
             </button>
         </div>
-            <!-- Mobile menu button -->
-            <button id="mobile-menu-button" class="md:hidden text-secondary" aria-expanded="false">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-                </svg>
-            </button>
+        <!-- Mobile menu button -->
+        <button id="mobile-menu-button" class="md:hidden text-secondary" aria-expanded="false">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
+                </path>
+            </svg>
+        </button>
         </div>
-        
+
         <!-- Mobile Menu -->
         <div id="mobile-menu" class="hidden md:hidden mt-4 space-y-2">
             {% if current_user.is_authenticated %}
-                <a href="/dashboard" class="block text-secondary hover:text-neon-cyan transition">Dashboard</a>
-                <a href="{{ url_for('auth.logout') }}" class="block text-secondary hover:text-neon-cyan transition">Logout</a>
+            <a href="/dashboard" class="block text-secondary hover:text-neon-cyan transition">Dashboard</a>
+            <a href="{{ url_for('auth.logout') }}"
+                class="block text-secondary hover:text-neon-cyan transition">Logout</a>
             {% else %}
-                <a href="{{ url_for('auth.login') }}" class="block text-secondary hover:text-neon-cyan transition">Login</a>
-                <a href="{{ url_for('auth.register') }}" class="block neon-btn-sm">Register</a>
+            <a href="{{ url_for('auth.login') }}" class="block text-secondary hover:text-neon-cyan transition">Login</a>
+            <a href="{{ url_for('auth.register') }}" class="block neon-btn-sm">Register</a>
             {% endif %}
             <!-- Mobile dark mode toggle -->
-            <button id="theme-toggle-mobile" class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-magenta" aria-label="Toggle dark mode">
-                <svg id="theme-toggle-mobile-light-icon" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M10 15a5 5 0 100-10 5 5 0 000 10zM10 1a1 1 0 011 1v1a1 1 0 11-2 0V2a1 1 0 011-1zm0 14a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zm9-5a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM3 10a1 1 0 01-1 1H1a1 1 0 110-2h1a1 1 0 011 1zm12.364-6.364a1 1 0 010 1.414L14.95 6.464a1 1 0 01-1.414-1.414l1.414-1.414a1 1 0 011.414 0zM5.05 14.95a1 1 0 011.414 0l1.414-1.414a1 1 0 10-1.414-1.414L5.05 13.536a1 1 0 010 1.414zm9.9 0a1 1 0 10-1.414-1.414l-1.414 1.414a1 1 0 101.414 1.414l1.414-1.414zM5.05 5.05a1 1 0 011.414 0L7.878 6.464A1 1 0 116.464 7.878L5.05 6.464A1 1 0 015.05 5.05z" clip-rule="evenodd"></path>
+            <button id="theme-toggle-mobile"
+                class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-magenta"
+                aria-label="Toggle dark mode">
+                <svg id="theme-toggle-mobile-light-icon" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M10 15a5 5 0 100-10 5 5 0 000 10zM10 1a1 1 0 011 1v1a1 1 0 11-2 0V2a1 1 0 011-1zm0 14a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zm9-5a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM3 10a1 1 0 01-1 1H1a1 1 0 110-2h1a1 1 0 011 1zm12.364-6.364a1 1 0 010 1.414L14.95 6.464a1 1 0 01-1.414-1.414l1.414-1.414a1 1 0 011.414 0zM5.05 14.95a1 1 0 011.414 0l1.414-1.414a1 1 0 10-1.414-1.414L5.05 13.536a1 1 0 010 1.414zm9.9 0a1 1 0 10-1.414-1.414l-1.414 1.414a1 1 0 101.414 1.414l1.414-1.414zM5.05 5.05a1 1 0 011.414 0L7.878 6.464A1 1 0 116.464 7.878L5.05 6.464A1 1 0 015.05 5.05z"
+                        clip-rule="evenodd"></path>
                 </svg>
-                <svg id="theme-toggle-mobile-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <svg id="theme-toggle-mobile-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg">
                     <path d="M17.293 13.293A8 8 0 016.707 2.707a8 8 0 1010.586 10.586z"></path>
                 </svg>
             </button>
         </div>
     </nav>
-        
-        <!-- Hero Section -->
-        <section class="py-20 px-6">
-            <div class="container mx-auto text-center max-w-4xl">
-                <h1 class="text-6xl font-bold text-white mb-6">
-                    AI Learning Path<br><span class="text-neon-cyan">Generator</span>
-                </h1>
-                <p class="text-2xl text-secondary mb-12">
-                    Create personalized learning journeys powered by AI
-                </p>
-                <a href="#path-form" class="neon-btn text-lg">Start Your Journey</a>
+
+    <!-- Hero Section -->
+    <section class="py-20 px-6">
+        <div class="container mx-auto text-center max-w-4xl">
+            <h1 class="text-6xl font-bold text-white mb-6">
+                AI Learning Path<br><span class="text-neon-cyan">Generator</span>
+            </h1>
+            <p class="text-2xl text-secondary mb-12">
+                Create personalized learning journeys powered by AI
+            </p>
+            <a href="#path-form" class="neon-btn text-lg">Start Your Journey</a>
+        </div>
+    </section>
+
+    <!-- Form Section -->
+    <section id="path-form" class="py-16 px-6">
+        <div class="container mx-auto max-w-4xl">
+            <h2 class="text-4xl font-bold mb-12 text-center text-white">Create Your <span
+                    class="text-neon-cyan">Learning Path</span></h2>
+
+            <!-- Error message (if any) -->
+            {% if error %}
+            <div class="bg-red-50 text-red-800 p-4 rounded-lg mb-6">
+                {{ error }}
             </div>
-        </section>
-        
-        <!-- Form Section -->
-        <section id="path-form" class="py-16 px-6">
-            <div class="container mx-auto max-w-4xl">
-                <h2 class="text-4xl font-bold mb-12 text-center text-white">Create Your <span class="text-neon-cyan">Learning Path</span></h2>
-                
-                <!-- Error message (if any) -->
-                {% if error %}
-                <div class="bg-red-50 text-red-800 p-4 rounded-lg mb-6">
-                    {{ error }}
-                </div>
-                {% endif %}
-                
-                <div class="glass-card p-8">
-                    <form id="pathGeneratorForm" class="space-y-6" action="/generate" method="POST">
-                        <!-- Expertise Level -->
-                        <div>
-                            <label for="expertise_level" class="block text-lg font-medium text-secondary mb-2">Your current expertise level</label>
-                            <div class="select-wrapper">
-                                <select id="expertise_level" name="expertise_level" class="glass-select" required>
-                                    {% for level, description in expertise_levels.items() %}
-                                        <option value="{{ level }}">{{ level.title() }} - {{ description }}</option>
-                                    {% endfor %}
-                                </select>
-                            </div>
+            {% endif %}
+
+            <div class="glass-card p-8">
+                <form id="pathGeneratorForm" class="space-y-6" action="/generate" method="POST">
+                    <!-- Expertise Level -->
+                    <div>
+                        <label for="expertise_level" class="block text-lg font-medium text-secondary mb-2">Your current
+                            expertise level</label>
+                        <div class="select-wrapper">
+                            <select id="expertise_level" name="expertise_level" class="glass-select" required>
+                                {% for level, description in expertise_levels.items() %}
+                                <option value="{{ level }}">{{ level.title() }} - {{ description }}</option>
+                                {% endfor %}
+                            </select>
                         </div>
-                        
-                        <!-- Topic with Categories -->
-                        <div>
-                            <label for="topic" class="block text-lg font-medium text-secondary mb-2">What do you want to learn?</label>
-                            
-                            <!-- Custom Topic Input (moved to top) -->
-                            <input type="text" id="topic" name="topic" class="glass-input mb-4" placeholder="Type a topic or select from categories below..." required>
-                            
-                            <!-- Collapsible Categories with All Skills -->
-                            <div class="mb-4">
-                                <h4 class="text-sm font-medium text-secondary mb-3">Browse by Category:</h4>
-                                <div class="space-y-2">
-                                    {% for category in categories %}
-                                    <div class="category-accordion glass-card-no-hover">
-                                        <button type="button" class="category-header w-full text-left px-4 py-3 flex items-center justify-between hover:bg-white/5 transition-all rounded-lg" data-category="{{ category }}">
-                                            <span class="flex items-center gap-2 text-secondary font-medium">
-                                                <span class="text-xl">
-                                                    {% if 'Cloud' in category %}☁️
-                                                    {% elif 'Data Science' in category or 'AI' in category %}🤖
-                                                    {% elif 'Web' in category %}🌐
-                                                    {% elif 'Mobile' in category %}📱
-                                                    {% elif 'Design' in category %}🎨
-                                                    {% elif 'Business' in category %}💼
-                                                    {% else %}💡
-                                                    {% endif %}
-                                                </span>
-                                                <span>{{ category }}</span>
-                                                <span class="text-xs text-muted">({{ skills_by_category[category]|length }} skills)</span>
+                    </div>
+
+                    <!-- Topic with Categories -->
+                    <div>
+                        <label for="topic" class="block text-lg font-medium text-secondary mb-2">What do you want to
+                            learn?</label>
+
+                        <!-- Custom Topic Input (moved to top) -->
+                        <input type="text" id="topic" name="topic" class="glass-input mb-4"
+                            placeholder="Type a topic or select from categories below..." required>
+
+                        <!-- Collapsible Categories with All Skills -->
+                        <div class="mb-4">
+                            <h4 class="text-sm font-medium text-secondary mb-3">Browse by Category:</h4>
+                            <div class="space-y-2">
+                                {% for category in categories %}
+                                <div class="category-accordion glass-card-no-hover">
+                                    <button type="button"
+                                        class="category-header w-full text-left px-4 py-3 flex items-center justify-between hover:bg-white/5 transition-all rounded-lg"
+                                        data-category="{{ category }}">
+                                        <span class="flex items-center gap-2 text-secondary font-medium">
+                                            <span class="text-xl">
+                                                {% if 'Cloud' in category %}☁️
+                                                {% elif 'Data Science' in category or 'AI' in category %}🤖
+                                                {% elif 'Web' in category %}🌐
+                                                {% elif 'Mobile' in category %}📱
+                                                {% elif 'Design' in category %}🎨
+                                                {% elif 'Business' in category %}💼
+                                                {% else %}💡
+                                                {% endif %}
                                             </span>
-                                            <svg class="category-arrow w-5 h-5 text-secondary transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                                            </svg>
-                                        </button>
-                                        <div class="category-content hidden px-4 pb-4">
-                                            <div class="flex flex-wrap gap-2 mt-2">
-                                                {% for skill in skills_by_category[category] %}
-                                                <button type="button" class="skill-btn topic-btn text-sm" data-topic="{{ skill }}">
-                                                    {{ skill }}
-                                                </button>
-                                                {% endfor %}
-                                            </div>
+                                            <span>{{ category }}</span>
+                                            <span class="text-xs text-muted">({{ skills_by_category[category]|length }}
+                                                skills)</span>
+                                        </span>
+                                        <svg class="category-arrow w-5 h-5 text-secondary transition-transform duration-300"
+                                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                d="M19 9l-7 7-7-7"></path>
+                                        </svg>
+                                    </button>
+                                    <div class="category-content hidden px-4 pb-4">
+                                        <div class="flex flex-wrap gap-2 mt-2">
+                                            {% for skill in skills_by_category[category] %}
+                                            <button type="button" class="skill-btn topic-btn text-sm"
+                                                data-topic="{{ skill }}">
+                                                {{ skill }}
+                                            </button>
+                                            {% endfor %}
                                         </div>
                                     </div>
-                                    {% endfor %}
                                 </div>
+                                {% endfor %}
                             </div>
-                            
-                            <!-- Quick Access: Most Popular Skills -->
-                            <div class="mb-4">
-                                <button type="button" id="showPopularSkills" class="text-sm text-neon-cyan hover:text-neon-purple transition-colors flex items-center gap-1">
-                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                                    </svg>
-                                    Quick Access: Popular Skills
+                        </div>
+
+                        <!-- Quick Access: Most Popular Skills -->
+                        <div class="mb-4">
+                            <button type="button" id="showPopularSkills"
+                                class="text-sm text-neon-cyan hover:text-neon-purple transition-colors flex items-center gap-1">
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                                </svg>
+                                Quick Access: Popular Skills
+                            </button>
+                            <div id="popularSkillsContainer" class="hidden mt-3 flex flex-wrap gap-2">
+                                {% for skill in all_skills[:15] %}
+                                <button type="button" class="skill-btn topic-btn text-sm" data-topic="{{ skill }}">
+                                    {{ skill }}
                                 </button>
-                                <div id="popularSkillsContainer" class="hidden mt-3 flex flex-wrap gap-2">
-                                    {% for skill in all_skills[:15] %}
-                                    <button type="button" class="skill-btn topic-btn text-sm" data-topic="{{ skill }}">
-                                        {{ skill }}
-                                    </button>
-                                    {% endfor %}
-                                </div>
+                                {% endfor %}
                             </div>
                         </div>
-                        
-                        <!-- Learning Style -->
-                        <div>
-                            <label for="learning_style" class="block text-lg font-medium text-secondary mb-2">Your Learning Style</label>
-                            <div class="select-wrapper mb-4">
-                                <select id="learning_style" name="learning_style" class="glass-select" required>
-                                    <option value="visual">Visual - Learn best through images, diagrams, and spatial understanding</option>
-                                    <option value="auditory">Auditory - Learn best through listening and speaking</option>
-                                    <option value="reading">Reading/Writing - Learn best through written materials and note-taking</option>
-                                    <option value="kinesthetic">Kinesthetic - Learn best through hands-on activities and physical interaction</option>
-                                </select>
-                            </div>
+                    </div>
+
+                    <!-- Learning Style -->
+                    <div>
+                        <label for="learning_style" class="block text-lg font-medium text-secondary mb-2">Your Learning
+                            Style</label>
+                        <div class="select-wrapper mb-4">
+                            <select id="learning_style" name="learning_style" class="glass-select" required>
+                                <option value="visual">Visual - Learn best through images, diagrams, and spatial
+                                    understanding</option>
+                                <option value="auditory">Auditory - Learn best through listening and speaking</option>
+                                <option value="reading">Reading/Writing - Learn best through written materials and
+                                    note-taking</option>
+                                <option value="kinesthetic">Kinesthetic - Learn best through hands-on activities and
+                                    physical interaction</option>
+                            </select>
                         </div>
-                        
-                        <!-- Duration in Weeks -->
-                        <div>
-                            <label for="duration_weeks" class="block text-lg font-medium text-secondary mb-2">
-                                Duration (in weeks)
-                            </label>
-                            <input type="number" id="duration_weeks" name="duration_weeks" min="1" max="52" required
-                                   class="glass-input"
-                                   placeholder="e.g., 4">
-                            <p class="mt-1 text-sm text-muted">How many weeks do you plan to study this topic?</p>
+                    </div>
+
+                    <!-- Duration in Weeks -->
+                    <div>
+                        <label for="duration_weeks" class="block text-lg font-medium text-secondary mb-2">
+                            Duration (in weeks)
+                        </label>
+                        <input type="number" id="duration_weeks" name="duration_weeks" min="1" max="52" required
+                            class="glass-input" placeholder="e.g., 4">
+                        <p class="mt-1 text-sm text-muted">How many weeks do you plan to study this topic?</p>
+                    </div>
+
+                    <!-- Time Commitment -->
+                    <div>
+                        <label for="time_commitment" class="block text-lg font-medium text-secondary mb-2">How much time
+                            can you commit weekly?</label>
+                        <div class="select-wrapper">
+                            <select id="time_commitment" name="time_commitment" class="glass-select" required>
+                                {% for commitment, description in time_commitments.items() %}
+                                <option value="{{ commitment }}">{{ commitment.title() }} - {{ description }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+
+
+                    <!-- Submit Button -->
+                    <div class="pt-6">
+                        <button type="submit" id="generateBtn"
+                            class="neon-btn w-full py-4 text-lg font-bold flex items-center justify-center gap-3">
+                            <span id="btnText">Generate My Learning Path</span>
+                        </button>
+                    </div>
+                </form>
+
+                <!-- Progress Card (Hidden by default) -->
+                <div id="progressCard" class="progress-card hidden">
+                    <div class="progress-card-header">
+                        <div class="progress-icon">
+                            <svg class="animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
+                                </path>
+                            </svg>
                         </div>
-                        
-                        <!-- Time Commitment -->
                         <div>
-                            <label for="time_commitment" class="block text-lg font-medium text-secondary mb-2">How much time can you commit weekly?</label>
-                            <div class="select-wrapper">
-                                <select id="time_commitment" name="time_commitment" class="glass-select" required>
-                                    {% for commitment, description in time_commitments.items() %}
-                                        <option value="{{ commitment }}">{{ commitment.title() }} - {{ description }}</option>
-                                    {% endfor %}
-                                </select>
-                            </div>
+                            <h3 class="progress-title">Generating Your Learning Path</h3>
+                            <p class="progress-subtitle" id="progressStatus">Initializing AI...</p>
                         </div>
-                        
-                        
-                        <!-- Submit Button -->
-                        <div class="pt-6">
-                            <button type="submit" id="generateBtn" class="neon-btn w-full py-4 text-lg font-bold flex items-center justify-center gap-3">
-                                <span id="btnText">Generate My Learning Path</span>
-                            </button>
+                    </div>
+
+                    <div class="progress-bar-container">
+                        <div class="progress-bar-bg">
+                            <div class="progress-bar-fill" id="progressBar"></div>
                         </div>
-                    </form>
-                    
-                    <!-- Progress Card (Hidden by default) -->
-                    <div id="progressCard" class="progress-card hidden">
-                        <div class="progress-card-header">
-                            <div class="progress-icon">
-                                <svg class="animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-                                </svg>
-                            </div>
-                            <div>
-                                <h3 class="progress-title">Generating Your Learning Path</h3>
-                                <p class="progress-subtitle" id="progressStatus">Initializing AI...</p>
-                            </div>
+                        <div class="progress-percentage" id="progressPercentage">0%</div>
+                    </div>
+
+                    <div class="progress-steps">
+                        <div class="progress-step" id="step1">
+                            <div class="step-icon">🔍</div>
+                            <div class="step-text">Analyzing Requirements</div>
                         </div>
-                        
-                        <div class="progress-bar-container">
-                            <div class="progress-bar-bg">
-                                <div class="progress-bar-fill" id="progressBar"></div>
-                            </div>
-                            <div class="progress-percentage" id="progressPercentage">0%</div>
+                        <div class="progress-step" id="step2">
+                            <div class="step-icon">🤖</div>
+                            <div class="step-text">AI Processing</div>
                         </div>
-                        
-                        <div class="progress-steps">
-                            <div class="progress-step" id="step1">
-                                <div class="step-icon">🔍</div>
-                                <div class="step-text">Analyzing Requirements</div>
-                            </div>
-                            <div class="progress-step" id="step2">
-                                <div class="step-icon">🤖</div>
-                                <div class="step-text">AI Processing</div>
-                            </div>
-                            <div class="progress-step" id="step3">
-                                <div class="step-icon">📚</div>
-                                <div class="step-text">Curating Resources</div>
-                            </div>
-                            <div class="progress-step" id="step4">
-                                <div class="step-icon">✨</div>
-                                <div class="step-text">Finalizing Path</div>
-                            </div>
+                        <div class="progress-step" id="step3">
+                            <div class="step-icon">📚</div>
+                            <div class="step-text">Curating Resources</div>
+                        </div>
+                        <div class="progress-step" id="step4">
+                            <div class="step-icon">✨</div>
+                            <div class="step-text">Finalizing Path</div>
                         </div>
                     </div>
                 </div>
             </div>
-        </section>
-    
-    
+        </div>
+    </section>
+
+
     <!-- AI Chat Widget -->
     <div id="chatWidget" class="chat-widget">
         <!-- Chat Button -->
         <button id="chatToggle" class="chat-toggle" aria-label="Open AI Assistant">
             <svg class="chat-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z">
+                </path>
             </svg>
             <svg class="close-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
@@ -1242,7 +1319,9 @@
                 <div class="flex items-center gap-3">
                     <div class="chat-avatar">
                         <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z">
+                            </path>
                         </svg>
                     </div>
                     <div>
@@ -1264,19 +1343,24 @@
             <div class="chat-modes">
                 <button class="mode-btn active" data-mode="general">
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">
+                        </path>
                     </svg>
                     Chat
                 </button>
                 <button class="mode-btn" data-mode="path">
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7">
+                        </path>
                     </svg>
                     Path
                 </button>
                 <button class="mode-btn" data-mode="research">
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                     </svg>
                     Research
                 </button>
@@ -1287,7 +1371,9 @@
                 <div class="message bot-message">
                     <div class="message-avatar">
                         <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z">
+                            </path>
                         </svg>
                     </div>
                     <div class="message-content">
@@ -1313,13 +1399,16 @@
                 </button>
                 <button class="quick-action-btn" data-action="explore-skills">
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                     </svg>
                     Explore Skills
                 </button>
                 <button class="quick-action-btn" data-action="salary-info">
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
+                        </path>
                     </svg>
                     Salary Info
                 </button>
@@ -1328,15 +1417,11 @@
             <!-- Chat Input -->
             <div class="chat-input-container">
                 <div class="chat-input-wrapper">
-                    <textarea 
-                        id="chatInput" 
-                        class="chat-input" 
-                        placeholder="Ask me anything..."
-                        rows="1"
-                    ></textarea>
+                    <textarea id="chatInput" class="chat-input" placeholder="Ask me anything..." rows="1"></textarea>
                     <button id="chatSend" class="chat-send" aria-label="Send message">
                         <svg class="send-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                         </svg>
                         <div class="loading-spinner-chat hidden">
                             <div class="spinner-ring"></div>
@@ -1355,7 +1440,7 @@
             <p>Cpyright 2026</p>
         </div>
     </footer>
-    
+
     <!-- External Scripts -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@@ -1369,10 +1454,10 @@
             mangle: false
         });
     </script>
-    
+
     <!-- Main Application Script -->
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', function () {
             // Form submission with animated progress card
             const pathGeneratorForm = document.getElementById('pathGeneratorForm');
             const generateBtn = document.getElementById('generateBtn');
@@ -1382,23 +1467,23 @@
             const progressStatus = document.getElementById('progressStatus');
 
             if (pathGeneratorForm) {
-                pathGeneratorForm.addEventListener('submit', function(e) {
+                pathGeneratorForm.addEventListener('submit', function (e) {
                     // Show progress card
                     if (progressCard) {
                         progressCard.classList.remove('hidden');
-                        
+
                         // Scroll to progress card
                         setTimeout(() => {
                             progressCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
                         }, 100);
                     }
-                    
+
                     // Disable button
                     if (generateBtn) {
                         generateBtn.disabled = true;
                         generateBtn.style.opacity = '0.5';
                     }
-                    
+
                     // Animate progress through stages
                     animateProgress();
                 });
@@ -1417,7 +1502,7 @@
                 function updateStage() {
                     if (currentStage < stages.length) {
                         const stage = stages[currentStage];
-                        
+
                         // Update progress bar
                         if (progressBar) {
                             progressBar.style.width = stage.progress + '%';
@@ -1428,7 +1513,7 @@
                         if (progressStatus) {
                             progressStatus.textContent = stage.status;
                         }
-                        
+
                         // Mark previous steps as completed
                         for (let i = 1; i < stage.step; i++) {
                             const stepEl = document.getElementById('step' + i);
@@ -1437,13 +1522,13 @@
                                 stepEl.classList.add('completed');
                             }
                         }
-                        
+
                         // Mark current step as active
                         const currentStepEl = document.getElementById('step' + stage.step);
                         if (currentStepEl) {
                             currentStepEl.classList.add('active');
                         }
-                        
+
                         currentStage++;
                         setTimeout(updateStage, stage.duration);
                     }
@@ -1457,7 +1542,7 @@
             const mobileMenu = document.getElementById('mobile-menu');
 
             if (mobileMenuButton) {
-                mobileMenuButton.addEventListener('click', function() {
+                mobileMenuButton.addEventListener('click', function () {
                     if (mobileMenu) {
                         const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
                         mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
@@ -1468,13 +1553,13 @@
 
             // Accordion functionality for categories
             const categoryHeaders = document.querySelectorAll('.category-header');
-            
+
             categoryHeaders.forEach(header => {
-                header.addEventListener('click', function() {
+                header.addEventListener('click', function () {
                     const accordion = this.closest('.category-accordion');
                     const content = accordion.querySelector('.category-content');
                     const isActive = accordion.classList.contains('active');
-                    
+
                     // Close all other accordions
                     document.querySelectorAll('.category-accordion').forEach(acc => {
                         if (acc !== accordion) {
@@ -1484,7 +1569,7 @@
                             otherContent.classList.add('hidden');
                         }
                     });
-                    
+
                     // Toggle current accordion
                     if (isActive) {
                         accordion.classList.remove('active');
@@ -1497,13 +1582,13 @@
                     }
                 });
             });
-            
+
             // Popular Skills toggle
             const showPopularBtn = document.getElementById('showPopularSkills');
             const popularContainer = document.getElementById('popularSkillsContainer');
-            
+
             if (showPopularBtn && popularContainer) {
-                showPopularBtn.addEventListener('click', function() {
+                showPopularBtn.addEventListener('click', function () {
                     popularContainer.classList.toggle('hidden');
                     const icon = this.querySelector('svg');
                     if (popularContainer.classList.contains('hidden')) {
@@ -1517,23 +1602,23 @@
                     }
                 });
             }
-            
+
             // Skill button handlers
             const topicInput = document.getElementById('topic');
-            
+
             // Use event delegation for skill buttons (more efficient)
-            document.addEventListener('click', function(e) {
+            document.addEventListener('click', function (e) {
                 if (e.target.classList.contains('skill-btn')) {
                     const topic = e.target.getAttribute('data-topic') || e.target.textContent.trim();
-                    
+
                     // Remove active from all skill buttons
                     document.querySelectorAll('.skill-btn').forEach(btn => {
                         btn.classList.remove('active');
                     });
-                    
+
                     // Set active on clicked button
                     e.target.classList.add('active');
-                    
+
                     // Set the topic input value
                     if (topicInput) {
                         topicInput.value = topic;
@@ -1551,21 +1636,21 @@
             const chatMessages = document.getElementById('chatMessages');
             const modeButtons = document.querySelectorAll('.mode-btn');
             const quickActionButtons = document.querySelectorAll('.quick-action-btn');
-            
+
             let currentMode = 'general';
             let conversationHistory = [];
 
             // Toggle chat window
-            chatToggle.addEventListener('click', function() {
+            chatToggle.addEventListener('click', function () {
                 const isHidden = chatWindow.classList.contains('hidden');
                 chatWindow.classList.toggle('hidden');
-                
+
                 // Toggle icons
                 const chatIcon = chatToggle.querySelector('.chat-icon');
                 const closeIcon = chatToggle.querySelector('.close-icon');
                 chatIcon.classList.toggle('hidden');
                 closeIcon.classList.toggle('hidden');
-                
+
                 if (!isHidden) {
                     // Closing
                     chatToggle.style.transform = 'rotate(0deg)';
@@ -1580,7 +1665,7 @@
             });
 
             // Minimize chat
-            chatMinimize.addEventListener('click', function() {
+            chatMinimize.addEventListener('click', function () {
                 chatWindow.classList.add('hidden');
                 const chatIcon = chatToggle.querySelector('.chat-icon');
                 const closeIcon = chatToggle.querySelector('.close-icon');
@@ -1590,11 +1675,11 @@
 
             // Mode switching
             modeButtons.forEach(btn => {
-                btn.addEventListener('click', function() {
+                btn.addEventListener('click', function () {
                     modeButtons.forEach(b => b.classList.remove('active'));
                     this.classList.add('active');
                     currentMode = this.getAttribute('data-mode');
-                    
+
                     // Update placeholder based on mode
                     if (currentMode === 'general') {
                         chatInput.placeholder = 'Ask me anything...';
@@ -1608,9 +1693,9 @@
 
             // Quick actions
             quickActionButtons.forEach(btn => {
-                btn.addEventListener('click', function() {
+                btn.addEventListener('click', function () {
                     const action = this.getAttribute('data-action');
-                    
+
                     if (action === 'create-path') {
                         chatInput.value = 'I want to create a learning path for ';
                         chatInput.focus();
@@ -1628,13 +1713,13 @@
             });
 
             // Auto-resize textarea
-            chatInput.addEventListener('input', function() {
+            chatInput.addEventListener('input', function () {
                 this.style.height = 'auto';
                 this.style.height = Math.min(this.scrollHeight, 120) + 'px';
             });
 
             // Send message on Enter (Shift+Enter for new line)
-            chatInput.addEventListener('keydown', function(e) {
+            chatInput.addEventListener('keydown', function (e) {
                 if (e.key === 'Enter' && !e.shiftKey) {
                     e.preventDefault();
                     sendMessage();
@@ -1651,7 +1736,7 @@
 
                 // Add user message to UI
                 addMessageToUI(message, 'user');
-                
+
                 // Clear input
                 if (!customMessage) {
                     chatInput.value = '';
@@ -1683,7 +1768,7 @@
                     if (data.success) {
                         const botMessage = data.response || data.data?.answer || 'I received your message!';
                         addMessageToUI(botMessage, 'bot');
-                        
+
                         // Update conversation history
                         conversationHistory.push({
                             role: 'user',
@@ -1713,16 +1798,16 @@
             function addMessageToUI(message, sender) {
                 const messageDiv = document.createElement('div');
                 messageDiv.className = `message ${sender}-message`;
-                
-                const avatarSvg = sender === 'bot' 
+
+                const avatarSvg = sender === 'bot'
                     ? '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>'
                     : '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>';
-                
+
                 messageDiv.innerHTML = `
                     <div class="message-avatar">${avatarSvg}</div>
                     <div class="message-content">${formatMessage(message)}</div>
                 `;
-                
+
                 chatMessages.appendChild(messageDiv);
                 chatMessages.scrollTop = chatMessages.scrollHeight;
             }
@@ -1740,7 +1825,7 @@
             function showLoading(show) {
                 const sendIcon = chatSend.querySelector('.send-icon');
                 const loadingSpinner = chatSend.querySelector('.loading-spinner-chat');
-                
+
                 if (show) {
                     sendIcon.classList.add('hidden');
                     loadingSpinner.classList.remove('hidden');
@@ -1753,17 +1838,18 @@
             }
         });
     </script>
-<script src="{{ url_for('static', filename='js/theme.js') }}"></script>
-{% if scroll_to_form %}
-<script>
-    // Auto-scroll to the form when coming from /new-path route
-    document.addEventListener('DOMContentLoaded', function() {
-        const pathForm = document.getElementById('path-form');
-        if (pathForm) {
-            pathForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        }
-    });
-</script>
-{% endif %}
+    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
+    {% if scroll_to_form %}
+    <script>
+        // Auto-scroll to the form when coming from /new-path route
+        document.addEventListener('DOMContentLoaded', function () {
+            const pathForm = document.getElementById('path-form');
+            if (pathForm) {
+                pathForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        });
+    </script>
+    {% endif %}
 </body>
-</html>
+
+</html>