feat: enhance session collections, automate classification sync, and overhaul manual classification wizard UI/UX

- Automated sync of classified questions to NEETprep collections via sync_neetprep_collection helper.
- Standard sessions with classified questions can now be viewed directly as collections without duplication.
- Overhauled manual classification wizard in question_entry_v2 with Shift+1-4/~ subject shortcuts and Arrow cycling for AI suggestions.
- Improved 'Double Enter' flow for rapid classification.
- Added Zoology support to classification systems.
- Unified dashboard view with 'View as Collection' for applicable sessions.
- Fixed CSS leak in question_entry_v2.html.
- Fixed BuildError for collection view links.

classifier_routes.py

@@ -1,6 +1,6 @@
 from flask import Blueprint, jsonify, current_app, render_template, request
 from flask_login import login_required, current_user
-from utils import get_db_connection
+from utils import get_db_connection, sync_neetprep_collection
 import os
 import time
 import json
@@ -169,6 +169,12 @@ def update_question_classification_single():
             'UPDATE questions SET subject = ?, chapter = ? WHERE image_id = ?',
             (subject, chapter, image_id)
         )
+        
+        # Auto-convert and sync neetprep collection
+        img_row = conn.execute('SELECT session_id FROM images WHERE id = ?', (image_id,)).fetchone()
+        if img_row:
+            sync_neetprep_collection(conn, img_row['session_id'], current_user.id)
+            
         conn.commit()
         conn.close()
         return jsonify({'success': True})
@@ -262,6 +268,9 @@ def delete_classified_question(question_id):
         # Update the question to remove classification
         conn.execute('UPDATE questions SET subject = NULL, chapter = NULL WHERE id = ?', (question_id,))
         
+        # Remove bookmark too
+        conn.execute('DELETE FROM neetprep_bookmarks WHERE neetprep_question_id = ? AND question_type = ?', (str(question_id), 'classified'))
+        
         conn.commit()
         conn.close()
         return jsonify({'success': True})
@@ -298,6 +307,10 @@ def delete_many_classified_questions():
         update_placeholders = ','.join('?' for _ in owned_q_ids)
         conn.execute(f'UPDATE questions SET subject = NULL, chapter = NULL WHERE id IN ({update_placeholders})', owned_q_ids)
         
+        # Remove bookmarks too
+        owned_ids_str = [str(qid) for qid in owned_q_ids]
+        conn.execute(f"DELETE FROM neetprep_bookmarks WHERE neetprep_question_id IN ({update_placeholders}) AND question_type = 'classified'", owned_ids_str)
+        
         conn.commit()
         conn.close()
         return jsonify({'success': True})
@@ -452,6 +465,10 @@ def extract_and_classify_all(session_id):
                 current_app.logger.info("Waiting 5 seconds before next batch...")
                 time.sleep(5)
 
+        # Auto-convert and sync neetprep collection
+        sync_neetprep_collection(conn, session_id, current_user.id)
+
+        conn.commit()
         conn.close()
 
         return jsonify({'success': True, 'message': f'Successfully extracted and classified {total_questions} questions. Updated {total_update_count} entries in the database.'})

dashboard.py

@@ -137,58 +137,37 @@ def dashboard():
 
     conn = get_db_connection()
 
-    # Build the base query
+    # Unified query for all session types with classified check
+    query = """
+        SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name,
+               COUNT(DISTINCT CASE WHEN i.image_type = 'original' THEN i.id END) as page_count,
+               (COUNT(DISTINCT CASE WHEN i.image_type = 'cropped' THEN i.id END) + 
+                COUNT(DISTINCT nb.id)) as question_count,
+               EXISTS(
+                   SELECT 1 FROM questions q 
+                   WHERE q.session_id = s.id 
+                   AND q.subject IS NOT NULL AND q.subject != 'Unclassified'
+                   AND q.chapter IS NOT NULL AND q.chapter != 'Unclassified'
+               ) as has_classified
+        FROM sessions s
+        LEFT JOIN images i ON s.id = i.session_id
+        LEFT JOIN neetprep_bookmarks nb ON s.id = nb.session_id
+        WHERE s.user_id = ? AND (s.session_type IS NULL OR s.session_type != 'final_pdf')
+    """
+    
+    params = [current_user.id]
+
     if filter_type == 'collections':
-        # Only show neetprep collections
-        sessions_rows = conn.execute("""
-            SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name,
-                   0 as page_count,
-                   COUNT(nb.id) as question_count
-            FROM sessions s
-            LEFT JOIN neetprep_bookmarks nb ON s.id = nb.session_id
-            WHERE s.user_id = ? AND s.session_type = 'neetprep_collection'
-            GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name
-            ORDER BY s.created_at DESC
-        """, (current_user.id,)).fetchall()
+        query += " AND s.session_type = 'neetprep_collection'"
     elif filter_type == 'standard':
-        # Only show standard sessions (exclude collections and final_pdf)
-        sessions_rows = conn.execute("""
-            SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name,
-                   COUNT(CASE WHEN i.image_type = 'original' THEN 1 END) as page_count,
-                   COUNT(CASE WHEN i.image_type = 'cropped' THEN 1 END) as question_count
-            FROM sessions s
-            LEFT JOIN images i ON s.id = i.session_id
-            WHERE s.user_id = ? AND (s.session_type IS NULL OR s.session_type NOT IN ('final_pdf', 'neetprep_collection'))
-            GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name
-            ORDER BY s.created_at DESC
-        """, (current_user.id,)).fetchall()
-    else:
-        # Show all (both standard and collections, but not final_pdf)
-        # First get standard sessions
-        standard_sessions = conn.execute("""
-            SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name,
-                   COUNT(CASE WHEN i.image_type = 'original' THEN 1 END) as page_count,
-                   COUNT(CASE WHEN i.image_type = 'cropped' THEN 1 END) as question_count
-            FROM sessions s
-            LEFT JOIN images i ON s.id = i.session_id
-            WHERE s.user_id = ? AND (s.session_type IS NULL OR s.session_type NOT IN ('final_pdf', 'neetprep_collection'))
-            GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name
-        """, (current_user.id,)).fetchall()
-
-        # Then get neetprep collections
-        collection_sessions = conn.execute("""
-            SELECT s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name,
-                   0 as page_count,
-                   COUNT(nb.id) as question_count
-            FROM sessions s
-            LEFT JOIN neetprep_bookmarks nb ON s.id = nb.session_id
-            WHERE s.user_id = ? AND s.session_type = 'neetprep_collection'
-            GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name
-        """, (current_user.id,)).fetchall()
-
-        # Combine and sort by created_at
-        all_sessions = list(standard_sessions) + list(collection_sessions)
-        sessions_rows = sorted(all_sessions, key=lambda x: x['created_at'], reverse=True)
+        query += " AND (s.session_type IS NULL OR s.session_type = 'standard')"
+
+    query += """
+        GROUP BY s.id, s.created_at, s.original_filename, s.persist, s.name, s.session_type, s.group_name
+        ORDER BY s.created_at DESC
+    """
+    
+    sessions_rows = conn.execute(query, params).fetchall()
 
     sessions = []
     for session in sessions_rows:

neetprep.py

@@ -1073,7 +1073,7 @@ def view_collection(session_id):
         flash('Collection not found', 'danger')
         return redirect(url_for('dashboard.dashboard', filter='collections'))
 
-    # Fetch neetprep questions
+    # Fetch neetprep questions from bookmarks
     neetprep_questions = conn.execute("""
         SELECT nq.id, nq.question_text, nq.options, nq.correct_answer_index,
                nq.level, nq.topic, nq.subject, b.created_at as bookmarked_at, 'neetprep' as question_type
@@ -1083,8 +1083,8 @@ def view_collection(session_id):
         ORDER BY nq.topic, b.created_at
     """, (session_id, current_user.id)).fetchall()
 
-    # Fetch classified questions
-    classified_questions = conn.execute("""
+    # Fetch explicitly bookmarked classified questions
+    bookmarked_classified = conn.execute("""
         SELECT q.id, q.question_text, NULL as options, q.actual_solution as correct_answer_index,
                NULL as level, q.chapter as topic, q.subject, b.created_at as bookmarked_at, 'classified' as question_type,
                i.processed_filename as image_filename, q.question_number
@@ -1095,16 +1095,44 @@ def view_collection(session_id):
         ORDER BY q.chapter, b.created_at
     """, (session_id, current_user.id)).fetchall()
 
+    # Fetch ALL classified questions from the session (even if not bookmarked)
+    # This enables "View as Collection" for any standard session
+    session_classified = conn.execute("""
+        SELECT q.id, q.question_text, NULL as options, q.actual_solution as correct_answer_index,
+               NULL as level, q.chapter as topic, q.subject, q.id as bookmarked_at, 'classified' as question_type,
+               i.processed_filename as image_filename, q.question_number
+        FROM questions q
+        LEFT JOIN images i ON q.image_id = i.id
+        WHERE q.session_id = ? AND q.subject IS NOT NULL AND q.subject != 'Unclassified'
+        AND q.chapter IS NOT NULL AND q.chapter != 'Unclassified'
+        ORDER BY q.chapter, q.id
+    """, (session_id,)).fetchall()
+
     conn.close()
 
-    # Combine all questions
+    # Combine all questions, ensuring uniqueness by question ID
     all_questions = []
+    seen_ids = set()
+
+    # Add bookmarked neetprep questions
     for q in neetprep_questions:
         qd = dict(q)
         qd['image_filename'] = None
         all_questions.append(qd)
-    for q in classified_questions:
-        all_questions.append(dict(q))
+
+    # Add bookmarked classified questions
+    for q in bookmarked_classified:
+        qid = f"classified_{q['id']}"
+        if qid not in seen_ids:
+            all_questions.append(dict(q))
+            seen_ids.add(qid)
+
+    # Add session's own classified questions (the "View as Collection" part)
+    for q in session_classified:
+        qid = f"classified_{q['id']}"
+        if qid not in seen_ids:
+            all_questions.append(dict(q))
+            seen_ids.add(qid)
 
     # Group questions by topic
     topics = {}
@@ -1203,7 +1231,38 @@ def collection_quiz(session_id):
         ORDER BY b.created_at
     """, (session_id, current_user.id)).fetchall()
 
+    # Get explicitly bookmarked classified questions
+    bookmarked_classified = conn.execute("""
+        SELECT q.id, q.actual_solution as correct_answer_index, q.marked_solution as user_answer_index,
+               q.chapter as topic, q.subject, i.processed_filename, i.note_filename
+        FROM neetprep_bookmarks b
+        JOIN questions q ON CAST(b.neetprep_question_id AS INTEGER) = q.id
+        LEFT JOIN images i ON q.image_id = i.id
+        WHERE b.session_id = ? AND b.user_id = ? AND b.question_type = 'classified'
+        ORDER BY b.created_at
+    """, (session_id, current_user.id)).fetchall()
+
+    # Get ALL classified questions from the session directly
+    session_classified = conn.execute("""
+        SELECT q.id, q.actual_solution as correct_answer_index, q.marked_solution as user_answer_index,
+               q.chapter as topic, q.subject, i.processed_filename, i.note_filename
+        FROM questions q
+        LEFT JOIN images i ON q.image_id = i.id
+        WHERE q.session_id = ? AND q.subject IS NOT NULL AND q.subject != 'Unclassified'
+        AND q.chapter IS NOT NULL AND q.chapter != 'Unclassified'
+        ORDER BY q.chapter, q.id
+    """, (session_id,)).fetchall()
+
+    conn.close()
+
+    seen_ids = set()
+
+    # Process neetprep questions
     for q in neetprep_questions:
+        qid = f"neetprep_{q['id']}"
+        if qid in seen_ids: continue
+        seen_ids.add(qid)
+        
         try:
             html_content = f"""<html><head><meta charset="utf-8"></head><body>{q['question_text']}</body></html>"""
             img_filename = f"neetprep_{q['id']}.jpg"
@@ -1224,18 +1283,12 @@ def collection_quiz(session_id):
         except Exception as e:
             current_app.logger.error(f"Failed to convert question {q['id']} to image: {e}")
 
-    # Get classified bookmarked questions
-    classified_questions = conn.execute("""
-        SELECT q.id, q.actual_solution as correct_answer_index, q.marked_solution as user_answer_index,
-               q.chapter as topic, q.subject, i.processed_filename, i.note_filename
-        FROM neetprep_bookmarks b
-        JOIN questions q ON CAST(b.neetprep_question_id AS INTEGER) = q.id
-        LEFT JOIN images i ON q.image_id = i.id
-        WHERE b.session_id = ? AND b.user_id = ? AND b.question_type = 'classified'
-        ORDER BY b.created_at
-    """, (session_id, current_user.id)).fetchall()
-
-    for q in classified_questions:
+    # Helper to add classified question
+    def add_classified(q):
+        qid = f"classified_{q['id']}"
+        if qid in seen_ids: return
+        seen_ids.add(qid)
+        
         if q['processed_filename']:
             all_questions.append({
                 'image_path': f"/processed/{q['processed_filename']}",
@@ -1251,7 +1304,13 @@ def collection_quiz(session_id):
                 }
             })
 
-    conn.close()
+    # Process bookmarked classified questions
+    for q in bookmarked_classified:
+        add_classified(q)
+
+    # Process session's own classified questions
+    for q in session_classified:
+        add_classified(q)
 
     if not all_questions:
         from flask import redirect, flash
@@ -1283,8 +1342,8 @@ def generate_collection_pdf(session_id):
         ORDER BY nq.topic, b.created_at
     """, (session_id, current_user.id)).fetchall()
 
-    # Get classified bookmarked questions
-    classified_questions = conn.execute("""
+    # Get explicitly bookmarked classified questions
+    bookmarked_classified = conn.execute("""
         SELECT q.id, q.question_text, q.actual_solution as correct_answer_index,
                q.chapter as topic, q.subject, i.processed_filename
         FROM neetprep_bookmarks b
@@ -1294,15 +1353,32 @@ def generate_collection_pdf(session_id):
         ORDER BY q.chapter, b.created_at
     """, (session_id, current_user.id)).fetchall()
 
+    # Get ALL classified questions from the session directly
+    session_classified = conn.execute("""
+        SELECT q.id, q.question_text, q.actual_solution as correct_answer_index,
+               q.chapter as topic, q.subject, i.processed_filename
+        FROM questions q
+        LEFT JOIN images i ON q.image_id = i.id
+        WHERE q.session_id = ? AND q.subject IS NOT NULL AND q.subject != 'Unclassified'
+        AND q.chapter IS NOT NULL AND q.chapter != 'Unclassified'
+        ORDER BY q.chapter, q.id
+    """, (session_id,)).fetchall()
+
     conn.close()
 
-    if not neetprep_questions and not classified_questions:
+    if not neetprep_questions and not bookmarked_classified and not session_classified:
         return jsonify({'error': 'No questions in this collection'}), 400
 
     data = request.json or {}
     all_questions = []
+    seen_ids = set()
 
+    # Process neetprep questions
     for q in neetprep_questions:
+        qid = f"neetprep_{q['id']}"
+        if qid in seen_ids: continue
+        seen_ids.add(qid)
+        
         all_questions.append({
             "id": q['id'],
             "question_text": q['question_text'],
@@ -1318,7 +1394,12 @@ def generate_collection_pdf(session_id):
             }
         })
 
-    for q in classified_questions:
+    # Helper to add classified
+    def add_classified(q):
+        qid = f"classified_{q['id']}"
+        if qid in seen_ids: return
+        seen_ids.add(qid)
+        
         if q['processed_filename']:
             # Use absolute path for PDF generation
             abs_img_path = os.path.abspath(os.path.join(current_app.config['PROCESSED_FOLDER'], q['processed_filename']))
@@ -1336,6 +1417,14 @@ def generate_collection_pdf(session_id):
                 }
             })
 
+    # Process bookmarked classified
+    for q in bookmarked_classified:
+        add_classified(q)
+        
+    # Process session classified
+    for q in session_classified:
+        add_classified(q)
+
     topics = list(set(q['custom_fields']['topic'] for q in all_questions if q['custom_fields'].get('topic')))
 
     final_json_output = {

routes/questions.py

@@ -1,6 +1,7 @@
 import os
 from flask import current_app, request, jsonify, render_template, flash, redirect, url_for
 from .common import main_bp, get_db_connection, login_required, current_user
+from utils import sync_neetprep_collection
 from processing import resize_image_if_needed, call_nim_ocr_api, extract_question_number_from_ocr_result
 from strings import ROUTE_SAVE_QUESTIONS, ROUTE_EXTRACT_QUESTION_NUMBER, ROUTE_EXTRACT_ALL_QUESTION_NUMBERS, METHOD_POST
 import requests
@@ -329,6 +330,9 @@ def update_question_classification_single():
                 VALUES (?, ?, '', ?, ?, 'unattempted')
             ''', (img_info['session_id'], image_id, subject, chapter))
 
+        # Auto-convert and sync neetprep collection
+        sync_neetprep_collection(conn, session_id, current_user.id)
+
         conn.commit(); conn.close()
         return jsonify({'success': True})
     except Exception as e:
@@ -381,6 +385,9 @@ def save_questions():
                 VALUES (?, ?, ?, '', ?, ?, ?, ?, ?)
             ''', (session_id, q['image_id'], q['question_number'], q['status'], q.get('marked_solution', ''), q.get('actual_solution', ''), q.get('time_taken', ''), data.get('pdf_tags', '')))
 
+    # Auto-convert and sync neetprep collection
+    sync_neetprep_collection(conn, session_id, current_user.id)
+
     conn.commit(); conn.close()
     return jsonify({'success': True, 'message': 'Questions saved successfully.'})
 
@@ -426,6 +433,9 @@ def autosave_question():
                 VALUES (?, ?, ?, '', ?, ?, ?, '', '')
             ''', (session_id, image_id, question_number, status, marked_solution, actual_solution))
 
+        # Auto-convert and sync neetprep collection
+        sync_neetprep_collection(conn, session_id, current_user.id)
+
         conn.commit()
         conn.close()
         return jsonify({'success': True})
@@ -544,8 +554,17 @@ def delete_question(image_id):
             conn.close(); return jsonify({'error': 'Unauthorized'}), 403
         image_info = conn.execute('SELECT session_id, filename, processed_filename FROM images WHERE id = ?', (image_id,)).fetchone()
         if not image_info: conn.close(); return jsonify({'error': 'Question not found'}), 404
+        # Get question ID to delete bookmarks
+        q_row = conn.execute('SELECT id FROM questions WHERE image_id = ?', (image_id,)).fetchone()
+        if q_row:
+            conn.execute('DELETE FROM neetprep_bookmarks WHERE neetprep_question_id = ? AND question_type = ?', (str(q_row['id']), 'classified'))
+        
         conn.execute('DELETE FROM questions WHERE image_id = ?', (image_id,))
         conn.execute('DELETE FROM images WHERE id = ?', (image_id,))
+        
+        # Auto-convert and sync neetprep collection
+        sync_neetprep_collection(conn, image_info['session_id'], current_user.id)
+
         conn.commit(); conn.close()
         return jsonify({'success': True})
     except Exception as e: return jsonify({'error': str(e)}), 500

templates/_revision_notes.html

@@ -1,581 +1,213 @@
-{# 
-    Revision Notes Modal - Final Fix
-    Fixes: Stylus Logic (via Native Pointer Capture), Object Eraser, UX
-#}
-
-{# ===== STYLES ===== #}
+{# Revision Notes Modal - v3 Compact #}
 <style>
-    /* --- Layout --- */
-    #notesModal .modal-body {
-        padding: 0;
-        background-color: #f0f2f5;
-        overflow: hidden;
-        user-select: none;
-    }
-
-    #notes-canvas-wrapper {
-        width: 100%;
-        height: 100%;
-        background-color: #ffffff;
-        background-image: radial-gradient(#ced4da 1px, transparent 1px);
-        background-size: 24px 24px;
-        /* CRITICAL: Disables browser zooming/scrolling so Pen works */
-        touch-action: none; 
-        cursor: crosshair;
-        position: relative;
-    }
-
-    /* --- Toolbar --- */
-    .notes-toolbar {
-        position: absolute;
-        top: 24px;
-        left: 50%;
-        transform: translateX(-50%);
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 8px 16px;
-        border-radius: 100px;
-        z-index: 1060;
-        background: rgba(33, 37, 41, 0.9);
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
-        border: 1px solid rgba(255, 255, 255, 0.15);
-        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
-    }
-
-    /* --- Buttons --- */
-    .tool-btn {
-        width: 42px;
-        height: 42px;
-        border-radius: 50%;
-        border: none;
-        background: transparent;
-        color: rgba(255,255,255,0.6);
-        font-size: 1.2rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.2s;
-    }
-
-    .tool-btn:hover {
-        background: rgba(255,255,255,0.15);
-        color: #fff;
-        transform: translateY(-2px);
-    }
-
-    .tool-btn.active {
-        background: var(--accent-primary, #0d6efd);
-        color: white;
-        box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4);
-        transform: scale(1.1);
-    }
-
-    /* Stylus Mode Active State */
-    #btn-stylus.active {
-        background: #198754; /* Green */
-        box-shadow: 0 4px 15px rgba(25, 135, 84, 0.4);
-        color: white;
-    }
-
-    .sep { width: 1px; height: 24px; background: rgba(255,255,255,0.2); margin: 0 6px; }
-
-    .color-dot {
-        width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
-    }
-    .color-dot.active { border-color: #fff; transform: scale(1.2); }
-
-    /* --- Ref Panel --- */
-    #ref-panel {
-        position: absolute; bottom: 20px; right: 20px; width: 280px;
-        background: #2b3035; border-radius: 12px; padding: 10px;
-        z-index: 1050; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
-        transition: transform 0.3s ease;
-    }
-    #ref-panel.collapsed { transform: translateY(150%); }
-    #ref-panel img { width: 100%; border-radius: 8px; border: 1px solid #495057; }
-    
-    .status-badge {
-        position: absolute; bottom: 20px; left: 20px;
-        background: rgba(0,0,0,0.7); color: white;
-        padding: 5px 12px; border-radius: 20px;
-        font-family: monospace; font-size: 0.85rem; pointer-events: none;
-    }
+#notesModal .modal-body{padding:0;overflow:hidden;user-select:none}
+#ncw{width:100%;height:100%;background:#fff;background-image:radial-gradient(#ced4da 1px,transparent 1px);background-size:24px 24px;touch-action:none;cursor:crosshair;position:relative}
+.ntb{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:99px;z-index:1060;background:rgba(33,37,41,.92);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
+.tb{width:38px;height:38px;border-radius:50%;border:0;background:0 0;color:rgba(255,255,255,.6);font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:.15s}
+.tb:hover{background:rgba(255,255,255,.15);color:#fff}.tb.on{background:var(--ap,#0d6efd);color:#fff;box-shadow:0 3px 12px rgba(13,110,253,.4);transform:scale(1.08)}
+.tb.sty{background:#198754!important;box-shadow:0 3px 12px rgba(25,135,84,.4)!important}
+.sp{width:1px;height:22px;background:rgba(255,255,255,.2);margin:0 4px}
+.cd{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:.15s}.cd.on{border-color:#fff;transform:scale(1.2)}
+#rpnl{position:absolute;bottom:16px;right:16px;width:260px;background:#2b3035;border-radius:10px;padding:8px;z-index:1050;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .25s}.rpnl-h{transform:translateY(150%)}
+#rpnl img{width:100%;border-radius:6px;border:1px solid #495057}
+#dbg{position:absolute;bottom:16px;left:16px;background:rgba(0,0,0,.7);color:#fff;padding:4px 10px;border-radius:16px;font:.8rem monospace;pointer-events:none}
 </style>
 
-{# ===== HTML ===== #}
 <div class="modal fade" id="notesModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
-    <div class="modal-dialog modal-fullscreen">
-        <div class="modal-content bg-dark">
-            <div class="modal-body">
-                
-                <!-- Toolbar -->
-                <div class="notes-toolbar">
-                    <button class="tool-btn active" id="btn-pencil" onclick="setTool('pencil')" title="Pencil">
-                        <i class="fas fa-pencil-alt"></i>
-                    </button>
-                    <button class="tool-btn" id="btn-highlighter" onclick="setTool('highlighter')" title="Highlighter">
-                        <i class="fas fa-highlighter"></i>
-                    </button>
-                    <button class="tool-btn" id="btn-eraser" onclick="setTool('eraser')" title="Object Eraser">
-                        <i class="fas fa-eraser"></i>
-                    </button>
-
-                    <div class="sep"></div>
-
-                    <div class="d-flex gap-2 mx-1">
-                        <div class="color-dot active" style="background:#212529" onclick="setColor('#212529', this)"></div>
-                        <div class="color-dot" style="background:#dc3545" onclick="setColor('#dc3545', this)"></div>
-                        <div class="color-dot" style="background:#0d6efd" onclick="setColor('#0d6efd', this)"></div>
-                    </div>
-
-                    <div class="sep"></div>
-
-                    <div class="dropdown">
-                        <button class="tool-btn" data-bs-toggle="dropdown"><i class="fas fa-shapes"></i></button>
-                        <ul class="dropdown-menu dropdown-menu-dark">
-                            <li><button class="dropdown-item" onclick="addShape('rect')">Rectangle</button></li>
-                            <li><button class="dropdown-item" onclick="addShape('circle')">Circle</button></li>
-                            <li><button class="dropdown-item" onclick="addShape('arrow')">Arrow</button></li>
-                            <li><button class="dropdown-item" onclick="addText()">Text</button></li>
-                        </ul>
-                    </div>
-                    
-                    <button class="tool-btn" id="btn-select" onclick="setTool('select')"><i class="fas fa-mouse-pointer"></i></button>
-
-                    <div class="sep"></div>
-
-                    <!-- Stylus Toggle -->
-                    <button class="tool-btn" id="btn-stylus" onclick="toggleStylus()" title="Stylus Only Mode">
-                        <i class="fas fa-pen-nib"></i>
-                    </button>
-
-                    <div class="sep"></div>
-
-                    <button class="tool-btn" onclick="undo()"><i class="fas fa-undo"></i></button>
-                    <button class="tool-btn text-success" onclick="saveNotes()"><i class="fas fa-check"></i></button>
-                    <button class="tool-btn text-secondary" data-bs-dismiss="modal"><i class="fas fa-times"></i></button>
-                </div>
-
-                <!-- Canvas Wrapper -->
-                <div id="notes-canvas-wrapper">
-                    <canvas id="notes-canvas"></canvas>
-                </div>
-
-                <!-- Ref Panel -->
-                <div id="ref-panel">
-                    <div class="d-flex justify-content-between align-items-center mb-1">
-                        <small class="text-white-50">Reference</small>
-                        <button class="btn btn-sm btn-link text-white-50 p-0" onclick="document.getElementById('ref-panel').classList.add('collapsed')"><i class="fas fa-chevron-down"></i></button>
-                    </div>
-                    <img id="notes-ref-img" src="">
-                </div>
-                
-                <button class="btn btn-dark rounded-circle shadow position-absolute bottom-0 end-0 m-3" onclick="document.getElementById('ref-panel').classList.remove('collapsed')">
-                    <i class="fas fa-image"></i>
-                </button>
-
-                <div class="status-badge">
-                    <span id="debug-pointer">Mode: Touch Draw</span>
-                </div>
-            </div>
-        </div>
-    </div>
+<div class="modal-dialog modal-fullscreen"><div class="modal-content bg-dark"><div class="modal-body">
+<div class="ntb">
+ <button class="tb on" data-t="pencil" title="Pencil"><i class="fas fa-pencil-alt"></i></button>
+ <button class="tb" data-t="highlighter" title="Highlighter"><i class="fas fa-highlighter"></i></button>
+ <button class="tb" data-t="eraser" title="Eraser"><i class="fas fa-eraser"></i></button>
+ <div class="sp"></div>
+ <div class="d-flex gap-1">
+  <div class="cd on" data-c="#212529" style="background:#212529"></div>
+  <div class="cd" data-c="#dc3545" style="background:#dc3545"></div>
+  <div class="cd" data-c="#0d6efd" style="background:#0d6efd"></div>
+ </div>
+ <div class="sp"></div>
+ <div class="dropdown">
+  <button class="tb" data-bs-toggle="dropdown"><i class="fas fa-shapes"></i></button>
+  <ul class="dropdown-menu dropdown-menu-dark">
+   <li><button class="dropdown-item" data-sh="rect">Rectangle</button></li>
+   <li><button class="dropdown-item" data-sh="circle">Circle</button></li>
+   <li><button class="dropdown-item" data-sh="arrow">Arrow</button></li>
+   <li><button class="dropdown-item" data-sh="text">Text</button></li>
+  </ul>
+ </div>
+ <button class="tb" data-t="select"><i class="fas fa-mouse-pointer"></i></button>
+ <div class="sp"></div>
+ <button class="tb" id="bsty" title="Stylus Mode"><i class="fas fa-pen-nib"></i></button>
+ <div class="sp"></div>
+ <button class="tb" id="bundo"><i class="fas fa-undo"></i></button>
+ <button class="tb text-success" id="bsave"><i class="fas fa-check"></i></button>
+ <button class="tb text-secondary" data-bs-dismiss="modal"><i class="fas fa-times"></i></button>
 </div>
+<div id="ncw"><canvas id="nc"></canvas></div>
+<div id="rpnl">
+ <div class="d-flex justify-content-between align-items-center mb-1">
+  <small class="text-white-50">Reference</small>
+  <button class="btn btn-sm btn-link text-white-50 p-0" id="rpnl-hide"><i class="fas fa-chevron-down"></i></button>
+ </div>
+ <img id="nref" src="">
+</div>
+<button class="btn btn-dark rounded-circle shadow position-absolute bottom-0 end-0 m-3" id="rpnl-show"><i class="fas fa-image"></i></button>
+<div id="dbg">Touch Draw</div>
+</div></div></div></div>
 
-{# ===== JAVASCRIPT ===== #}
 <script>
-    let canvas;
-    let isStylusMode = false;
-    let currentTool = 'pencil';
-    let currentColor = '#212529';
-    let activeImageId = null;
-    let historyStack = [];
-
-    // NATIVE POINTER TRACKING (The Fix)
-    let lastPointerType = 'mouse';
-    let isFingerPanning = false;  // Track if we're currently panning with finger 
-
-    function openNotesModal(imageId, refUrl) {
-        activeImageId = imageId;
-        document.getElementById('notes-ref-img').src = refUrl;
-        document.getElementById('ref-panel').classList.remove('collapsed');
-
-        const modal = new bootstrap.Modal(document.getElementById('notesModal'));
-        modal.show();
-
-        // Init Fabric after modal is shown
-        document.getElementById('notesModal').addEventListener('shown.bs.modal', () => {
-            initFabric();
-        }, { once: true });
-    }
-
-    function initFabric() {
-        if (canvas) canvas.dispose();
-        const wrapper = document.getElementById('notes-canvas-wrapper');
-
-        // 1. Attach NATIVE Pointer Listener to wrapper
-        // This runs before Fabric and tells us exactly what hardware is being used
-        wrapper.addEventListener('pointerdown', (e) => {
-            lastPointerType = e.pointerType; // 'mouse', 'pen', or 'touch'
-            console.log("Hardware Detected:", lastPointerType);
-
-            // If Eraser mode, we can handle deletion here for better responsiveness
-            if (currentTool === 'eraser' && !canvas.isDragging) {
-                // Find object under native event coordinates
-                // We let Fabric's mouse:down handle it to ensure coordinates are transformed correctly
-            }
-        }, true);
-
-        canvas = new fabric.Canvas('notes-canvas', {
-            width: wrapper.clientWidth,
-            height: wrapper.clientHeight,
-            backgroundColor: '#ffffff',
-            isDrawingMode: true,
-            selection: false,
-            preserveObjectStacking: true,
-            perPixelTargetFind: true // Critical for Object Eraser precision
-        });
-
-        setupFabricEvents();
-        setupZoom();
-        setTool('pencil');
-
-        // Always try to load existing note from server (in case page state is stale)
-        loadNoteJson();
-
-        // Handle Resize
-        window.addEventListener('resize', () => {
-            canvas.setWidth(wrapper.clientWidth);
-            canvas.setHeight(wrapper.clientHeight);
-        });
-    }
-
-    async function loadNoteJson() {
-        try {
-            console.log('Loading note for image:', activeImageId);
-            const response = await fetch('/get_note_json/' + activeImageId);
-            console.log('Response status:', response.status);
-            if (response.ok) {
-                const data = await response.json();
-                console.log('Response data:', data);
-                if (data.success && data.json_data) {
-                    const jsonData = typeof data.json_data === 'string' ? JSON.parse(data.json_data) : data.json_data;
-                    console.log('Parsed JSON:', jsonData);
-                    canvas.loadFromJSON(jsonData, () => {
-                        canvas.renderAll();
-                        console.log('Canvas loaded successfully');
-                        saveState();
-                    });
-                    return;
-                }
-            }
-        } catch (e) {
-            console.log('Error loading note:', e);
-        }
-        saveState();
-    }
-
-    function setupFabricEvents() {
-        // Intercept path creation - in stylus mode, only keep paths from pen
-        canvas.on('path:created', function(opt) {
-            if (isStylusMode && lastPointerType !== 'pen') {
-                // Remove paths created by finger/touch in stylus mode
-                canvas.remove(opt.path);
-                canvas.requestRenderAll();
-                return;
-            }
-            if (isFingerPanning) {
-                // Also remove if we're still in finger panning state
-                canvas.remove(opt.path);
-                canvas.requestRenderAll();
-                return;
-            }
-        });
-
-        canvas.on('mouse:down', function(opt) {
-            const evt = opt.e;
-
-            // --- STYLUS LOGIC ---
-            if (isStylusMode) {
-                // We ignore Fabric's event type and check our global 'lastPointerType'
-                if (lastPointerType === 'touch') {
-                    // It is a finger -> PAN ONLY
-                    isFingerPanning = true;
-                    this.isDrawingMode = false;
-                    this.selection = false;
-                    this.isDragging = true;
-                    this.lastPosX = evt.clientX || (evt.touches && evt.touches[0]?.clientX) || 0;
-                    this.lastPosY = evt.clientY || (evt.touches && evt.touches[0]?.clientY) || 0;
-
-                    // Cancel any in-progress drawing
-                    if (this._isCurrentlyDrawing) {
-                        this._isCurrentlyDrawing = false;
-                    }
-                    return; // Stop here
-                }
-
-                if (lastPointerType === 'pen') {
-                    // It is a pen -> DRAW
-                    isFingerPanning = false;
-                    if (currentTool === 'pencil' || currentTool === 'highlighter') {
-                        this.isDrawingMode = true;
-                    }
-                }
-            }
-            // --- TOUCH MODE (Default) ---
-            else {
-                isFingerPanning = false;
-                // Multi-touch always pans
-                if (evt.touches && evt.touches.length > 1) {
-                    this.isDrawingMode = false;
-                    this.isDragging = true;
-                    return;
-                }
-            }
-
-            // --- ERASER LOGIC (Object) ---
-            if (currentTool === 'eraser') {
-                this.isDrawingMode = false;
-                this.isErasing = true;
-                deleteObjectUnderPointer(opt.e);
-            }
-        });
-
-        canvas.on('mouse:move', function(opt) {
-            if (this.isDragging) {
-                const e = opt.e;
-                const vpt = this.viewportTransform;
-                const clientX = e.clientX || (e.touches && e.touches[0]?.clientX) || this.lastPosX;
-                const clientY = e.clientY || (e.touches && e.touches[0]?.clientY) || this.lastPosY;
-                vpt[4] += clientX - this.lastPosX;
-                vpt[5] += clientY - this.lastPosY;
-                this.requestRenderAll();
-                this.lastPosX = clientX;
-                this.lastPosY = clientY;
-            }
-            if (this.isErasing) {
-                deleteObjectUnderPointer(opt.e);
-            }
-        });
-
-        canvas.on('mouse:up', function() {
-            const wasPanning = isFingerPanning;
-            this.isDragging = false;
-            this.isErasing = false;
-            isFingerPanning = false;
-
-            // Restore drawing mode if needed (only if not just finished finger panning)
-            if ((currentTool === 'pencil' || currentTool === 'highlighter') && !wasPanning) {
-                if (!isStylusMode || lastPointerType === 'pen') {
-                    canvas.isDrawingMode = true;
-                }
-            }
-
-            // In stylus mode, keep drawing disabled until next pen touch
-            if (isStylusMode && lastPointerType === 'touch') {
-                canvas.isDrawingMode = false;
-            }
-
-            saveState();
-        });
-    }
-
-    function deleteObjectUnderPointer(e) {
-        // findTarget requires pointer event coordinates
-        const target = canvas.findTarget(e, false);
-        if (target) {
-            canvas.remove(target);
-            canvas.requestRenderAll();
-        }
-    }
-
-    function setTool(name) {
-        currentTool = name;
-        document.querySelectorAll('.tool-btn').forEach(b => b.classList.remove('active'));
-        document.getElementById(`btn-${name}`)?.classList.add('active');
-
-        // Reset
-        canvas.isDrawingMode = false;
-        canvas.selection = false;
-        canvas.defaultCursor = 'default';
-        canvas.getObjects().forEach(o => { o.selectable = false; o.evented = false; });
-
-        if (name === 'pencil') {
-            // In stylus mode, keep drawing disabled until pen touch
-            // In touch mode, enable immediately
-            canvas.isDrawingMode = !isStylusMode;
-            canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
-            canvas.freeDrawingBrush.color = currentColor;
-            canvas.freeDrawingBrush.width = 3;
-        }
-        else if (name === 'highlighter') {
-            // In stylus mode, keep drawing disabled until pen touch
-            canvas.isDrawingMode = !isStylusMode;
-            canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
-            const c = hexToRgb(currentColor);
-            canvas.freeDrawingBrush.color = `rgba(${c.r},${c.g},${c.b},0.3)`;
-            canvas.freeDrawingBrush.width = 20;
-        }
-        else if (name === 'eraser') {
-            canvas.defaultCursor = 'crosshair';
-            // Objects must be evented to be found by findTarget
-            canvas.getObjects().forEach(o => o.evented = true);
-        }
-        else if (name === 'select') {
-            canvas.selection = true;
-            canvas.defaultCursor = 'move';
-            canvas.getObjects().forEach(o => { o.selectable = true; o.evented = true; });
-        }
-    }
-
-    function toggleStylus() {
-        isStylusMode = !isStylusMode;
-        const btn = document.getElementById('btn-stylus');
-        const debug = document.getElementById('debug-pointer');
-
-        if (isStylusMode) {
-            btn.classList.add('active');
-            debug.textContent = "Mode: Stylus Only (Fingers Pan)";
-            debug.style.color = "#20c997";
-            // Disable drawing mode - will be enabled on pen touch
-            if (currentTool === 'pencil' || currentTool === 'highlighter') {
-                canvas.isDrawingMode = false;
-            }
-        } else {
-            btn.classList.remove('active');
-            debug.textContent = "Mode: Touch Draw";
-            debug.style.color = "white";
-            // Re-enable drawing mode for touch
-            if (currentTool === 'pencil' || currentTool === 'highlighter') {
-                canvas.isDrawingMode = true;
-            }
-        }
-    }
-
-    function addShape(type) {
-        setTool('select');
-        const center = canvas.getVpCenter();
-        const opts = { left:center.x, top:center.y, fill:'transparent', stroke:currentColor, strokeWidth:3, originX:'center', originY:'center' };
-        let obj;
-        if(type==='rect') obj = new fabric.Rect({...opts, width:100, height:80});
-        if(type==='circle') obj = new fabric.Circle({...opts, radius:40});
-        if(type==='arrow') obj = new fabric.Path('M 0 0 L 100 0 M 90 -10 L 100 0 L 90 10', {...opts, fill:null});
-        
-        if(obj) { canvas.add(obj); canvas.setActiveObject(obj); saveState(); }
-    }
-
-    function addText() {
-        setTool('select');
-        const center = canvas.getVpCenter();
-        const t = new fabric.IText('Text', { left:center.x, top:center.y, fontSize:24, fill:currentColor });
-        canvas.add(t); canvas.setActiveObject(t); t.enterEditing(); saveState();
-    }
-
-    function setColor(hex, el) {
-        currentColor = hex;
-        document.querySelectorAll('.color-dot').forEach(d => d.classList.remove('active'));
-        if(el) el.classList.add('active');
-        if(['pencil','highlighter'].includes(currentTool)) setTool(currentTool);
-    }
-
-    function setupZoom() {
-        canvas.on('mouse:wheel', function(opt) {
-            const delta = opt.e.deltaY;
-            let zoom = canvas.getZoom();
-            zoom *= 0.999 ** delta;
-            if (zoom > 5) zoom = 5; if (zoom < 0.2) zoom = 0.2;
-            canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
-            opt.e.preventDefault(); opt.e.stopPropagation();
-        });
-    }
-
-    function undo() {
-        if(historyStack.length <= 1) return;
-        historyStack.pop();
-        canvas.loadFromJSON(historyStack[historyStack.length-1], canvas.renderAll.bind(canvas));
-    }
-
-    function saveState() {
-        if(historyStack.length>10) historyStack.shift();
-        historyStack.push(JSON.stringify(canvas));
-    }
-
-    async function saveNotes() {
-        // Save as JSON AND rasterized PNG (needed for PDF/quiz display)
-        const jsonData = JSON.stringify(canvas.toJSON());
-
-        // Rasterize canvas to PNG data URL for PDF/quiz rendering
-        const imageData = canvas.toDataURL({ format: 'png', multiplier: 2 });
-
-        try {
-            const response = await fetch('/save_note_json', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    image_id: activeImageId,
-                    session_id: '{{ session_id }}',
-                    json_data: jsonData,
-                    image_data: imageData
-                })
-            });
-
-            const result = await response.json();
-            if (result.success) {
-                // Close modal
-                const modal = bootstrap.Modal.getInstance(document.getElementById('notesModal'));
-                modal.hide();
-                showStatus('Notes saved!', 'success');
-                // Reload page to update the UI state
-                setTimeout(() => location.reload(), 500);
-            } else {
-                showStatus('Error saving notes: ' + result.error, 'danger');
-            }
-        } catch (e) {
-            showStatus('Error: ' + e.message, 'danger');
-        }
-    }
-
-    function hexToRgb(hex) {
-        const r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16);
-        return {r,g,b};
-    }
-
-    async function toggleNoteInPdf(imageId, include) {
-        try {
-            const response = await fetch('/toggle_note_in_pdf', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ image_id: imageId, include: include })
-            });
-            const result = await response.json();
-            if (!result.success) {
-                showStatus('Failed to update setting: ' + result.error, 'danger');
-            }
-        } catch (e) {
-            showStatus('Error: ' + e.message, 'danger');
-        }
-    }
-
-    async function deleteNote(imageId) {
-        if (!confirm('Delete this note? This cannot be undone.')) return;
-
-        try {
-            const response = await fetch('/delete_note', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ image_id: imageId })
-            });
-            const result = await response.json();
-            if (result.success) {
-                showStatus('Note deleted', 'success');
-                location.reload();
-            } else {
-                showStatus('Failed to delete note: ' + result.error, 'danger');
-            }
-        } catch (e) {
-            showStatus('Error: ' + e.message, 'danger');
-        }
-    }
+(function(){
+const $ = s => document.querySelector(s), $$ = s => document.querySelectorAll(s);
+let C, tool='pencil', color='#212529', imgId, hist=[], styMode=false, ptrType='mouse', fingerPan=false;
+
+window.openNotesModal = function(id, ref) {
+ imgId = id; $('#nref').src = ref;
+ $('#rpnl').classList.remove('rpnl-h');
+ const m = new bootstrap.Modal($('#notesModal'));
+ m.show();
+ $('#notesModal').addEventListener('shown.bs.modal', init, {once:true});
+};
+
+function init() {
+ C && C.dispose();
+ const w = $('#ncw');
+ w.addEventListener('pointerdown', e => { ptrType = e.pointerType; }, true);
+ C = new fabric.Canvas('nc', {
+  width: w.clientWidth, height: w.clientHeight,
+  backgroundColor:'#fff', isDrawingMode:true, selection:false,
+  preserveObjectStacking:true, perPixelTargetFind:true
+ });
+ wire(); zoom(); setT('pencil'); load();
+ window.onresize = () => { C.setWidth(w.clientWidth); C.setHeight(w.clientHeight); };
+}
+
+async function load() {
+ try {
+  const r = await fetch('/get_note_json/'+imgId);
+  if(r.ok){ const d=await r.json(); if(d.success&&d.json_data){
+   const j = typeof d.json_data==='string'?JSON.parse(d.json_data):d.json_data;
+   C.loadFromJSON(j,()=>{ C.renderAll(); snap(); }); return;
+  }}
+ } catch(e){}
+ snap();
+}
+
+function wire() {
+ C.on('path:created', o => {
+  if((styMode && ptrType!=='pen') || fingerPan){ C.remove(o.path); C.requestRenderAll(); }
+ });
+ C.on('mouse:down', function(o){
+  const e = o.e;
+  if(styMode && ptrType==='touch'){
+   fingerPan=true; this.isDrawingMode=false; this.selection=false;
+   this.isDragging=true; this.lastPosX=e.clientX||0; this.lastPosY=e.clientY||0; return;
+  }
+  if(styMode && ptrType==='pen' && (tool==='pencil'||tool==='highlighter')) this.isDrawingMode=true;
+  if(!styMode && e.touches && e.touches.length>1){ this.isDrawingMode=false; this.isDragging=true; return; }
+  if(tool==='eraser'){ this.isDrawingMode=false; this.isErasing=true; eraseAt(e); }
+ });
+ C.on('mouse:move', function(o){
+  if(this.isDragging){
+   const e=o.e, v=this.viewportTransform,
+    x=e.clientX||(e.touches&&e.touches[0]?.clientX)||this.lastPosX,
+    y=e.clientY||(e.touches&&e.touches[0]?.clientY)||this.lastPosY;
+   v[4]+=x-this.lastPosX; v[5]+=y-this.lastPosY;
+   this.requestRenderAll(); this.lastPosX=x; this.lastPosY=y;
+  }
+  if(this.isErasing) eraseAt(o.e);
+ });
+ C.on('mouse:up', function(){
+  const wasPan=fingerPan;
+  this.isDragging=false; this.isErasing=false; fingerPan=false;
+  if((tool==='pencil'||tool==='highlighter')&&!wasPan&&(!styMode||ptrType==='pen')) C.isDrawingMode=true;
+  if(styMode&&ptrType==='touch') C.isDrawingMode=false;
+  snap();
+ });
+}
+
+function eraseAt(e){ const t=C.findTarget(e,false); if(t){ C.remove(t); C.requestRenderAll(); }}
+
+function setT(t){
+ tool=t;
+ $$('.tb[data-t]').forEach(b=>b.classList.toggle('on',b.dataset.t===t));
+ C.isDrawingMode=false; C.selection=false; C.defaultCursor='default';
+ C.getObjects().forEach(o=>{ o.selectable=false; o.evented=false; });
+ if(t==='pencil'||t==='highlighter'){
+  C.isDrawingMode=!styMode;
+  C.freeDrawingBrush=new fabric.PencilBrush(C);
+  if(t==='highlighter'){ const c=h2r(color); C.freeDrawingBrush.color=`rgba(${c.r},${c.g},${c.b},.3)`; C.freeDrawingBrush.width=20; }
+  else{ C.freeDrawingBrush.color=color; C.freeDrawingBrush.width=3; }
+ } else if(t==='eraser'){
+  C.defaultCursor='crosshair'; C.getObjects().forEach(o=>o.evented=true);
+ } else if(t==='select'){
+  C.selection=true; C.defaultCursor='move'; C.getObjects().forEach(o=>{ o.selectable=true; o.evented=true; });
+ }
+}
+
+function setC(hex,el){ color=hex; $$('.cd').forEach(d=>d.classList.toggle('on',d===el)); if(tool==='pencil'||tool==='highlighter') setT(tool); }
+
+function togSty(){
+ styMode=!styMode;
+ const b=$('#bsty'), d=$('#dbg');
+ b.classList.toggle('on',styMode); b.classList.toggle('sty',styMode);
+ d.textContent=styMode?'Stylus Only':'Touch Draw'; d.style.color=styMode?'#20c997':'#fff';
+ if(tool==='pencil'||tool==='highlighter') C.isDrawingMode=!styMode;
+}
+
+function addSh(type){
+ setT('select'); const p=C.getVpCenter(),
+  o={left:p.x,top:p.y,fill:'transparent',stroke:color,strokeWidth:3,originX:'center',originY:'center'};
+ let s;
+ if(type==='rect') s=new fabric.Rect({...o,width:100,height:80});
+ if(type==='circle') s=new fabric.Circle({...o,radius:40});
+ if(type==='arrow') s=new fabric.Path('M0 0L100 0M90-10L100 0L90 10',{...o,fill:null});
+ if(type==='text'){ s=new fabric.IText('Text',{left:p.x,top:p.y,fontSize:24,fill:color}); C.add(s); C.setActiveObject(s); s.enterEditing(); snap(); return; }
+ if(s){ C.add(s); C.setActiveObject(s); snap(); }
+}
+
+function zoom(){
+ C.on('mouse:wheel',function(o){
+  let z=C.getZoom()*(.999**o.e.deltaY);
+  z=Math.min(5,Math.max(.2,z));
+  C.zoomToPoint({x:o.e.offsetX,y:o.e.offsetY},z);
+  o.e.preventDefault(); o.e.stopPropagation();
+ });
+}
+
+function snap(){ if(hist.length>20) hist.shift(); hist.push(JSON.stringify(C)); }
+function undo(){ if(hist.length<=1) return; hist.pop(); C.loadFromJSON(hist[hist.length-1],C.renderAll.bind(C)); }
+
+async function save(){
+ const json=JSON.stringify(C.toJSON()), img=C.toDataURL({format:'png',multiplier:2});
+ try{
+  const r=await fetch('/save_note_json',{method:'POST',headers:{'Content-Type':'application/json'},
+   body:JSON.stringify({image_id:imgId,session_id:'{{ session_id }}',json_data:json,image_data:img})});
+  const d=await r.json();
+  if(d.success){ bootstrap.Modal.getInstance($('#notesModal')).hide(); showStatus('Saved!','success'); setTimeout(()=>location.reload(),400); }
+  else showStatus('Error: '+d.error,'danger');
+ }catch(e){ showStatus('Error: '+e.message,'danger'); }
+}
+
+function h2r(h){ return{r:parseInt(h.slice(1,3),16),g:parseInt(h.slice(3,5),16),b:parseInt(h.slice(5,7),16)}; }
+
+// Event delegation
+document.addEventListener('click', e => {
+ const t=e.target.closest('[data-t]'); if(t&&C){ setT(t.dataset.t); return; }
+ const c=e.target.closest('.cd'); if(c&&C){ setC(c.dataset.c,c); return; }
+ const s=e.target.closest('[data-sh]'); if(s&&C){ addSh(s.dataset.sh); return; }
+ if(e.target.closest('#bsty')){ togSty(); return; }
+ if(e.target.closest('#bundo')){ undo(); return; }
+ if(e.target.closest('#bsave')){ save(); return; }
+ if(e.target.closest('#rpnl-hide')){ $('#rpnl').classList.add('rpnl-h'); return; }
+ if(e.target.closest('#rpnl-show')){ $('#rpnl').classList.remove('rpnl-h'); return; }
+});
+
+window.toggleNoteInPdf = async(id,inc)=>{
+ try{ const r=await fetch('/toggle_note_in_pdf',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({image_id:id,include:inc})}); const d=await r.json(); if(!d.success) showStatus('Error: '+d.error,'danger'); }catch(e){ showStatus(e.message,'danger'); }
+};
+window.deleteNote = async id=>{
+ if(!confirm('Delete this note?')) return;
+ try{ const r=await fetch('/delete_note',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({image_id:id})}); const d=await r.json(); if(d.success){ showStatus('Deleted','success'); location.reload(); } else showStatus(d.error,'danger'); }catch(e){ showStatus(e.message,'danger'); }
+};
+})();
 </script>

templates/dashboard.html

@@ -113,23 +113,23 @@
                     <td>
                         <div class="btn-group" role="group">
                             {% if session.session_type == 'neetprep_collection' %}
-                                <a href="{{ url_for('neetprep_bp.view_collection', session_id=session.id) }}" class="btn btn-sm btn-warning text-dark"><i class="bi bi-bookmark-fill me-1"></i>View</a>
-                                <button class="btn btn-sm btn-success generate-collection-pdf-btn" data-session-id="{{ session.id }}"><i class="bi bi-file-pdf me-1"></i>PDF</button>
-                                <button class="btn btn-sm btn-info toggle-persist-btn">Toggle Persist</button>
+                                <a href="{{ url_for('neetprep_bp.view_collection', session_id=session.id) }}" class="btn btn-sm btn-warning text-dark" title="View Collection"><i class="bi bi-eye-fill me-1"></i>View Collection</a>
+                                <a href="{{ url_for('main.question_entry_v2', session_id=session.id) }}" class="btn btn-sm btn-primary" title="View Questions"><i class="bi bi-list-check me-1"></i>View</a>
+                                <button class="btn btn-sm btn-info toggle-persist-btn" title="Toggle Persistence"><i class="bi bi-shield-lock"></i></button>
                             {% elif session.session_type == 'color_rm' %}
                                 <a href="{{ url_for('main.color_rm_interface', session_id=session.id, image_index=0) }}" class="btn btn-sm btn-warning text-dark">Color RM</a>
                                 <button class="btn btn-sm btn-info toggle-persist-btn">Toggle Persist</button>
-                                {% if show_size %}
-                                <button class="btn btn-sm btn-warning reduce-space-btn">Reduce Space</button>
-                                {% endif %}
                             {% else %}
-                                <a href="{{ url_for('main.question_entry_v2', session_id=session.id) }}" class="btn btn-sm btn-primary">View</a>
-                                <a href="{{ url_for('main.crop_interface_v2', session_id=session.id, image_index=0) }}" class="btn btn-sm btn-secondary">Crop</a>
-                                <button class="btn btn-sm btn-outline-success duplicate-session-btn" data-session-id="{{ session.id }}" title="Duplicate as NEETprep Collection"><i class="bi bi-copy"></i></button>
-                                <button class="btn btn-sm btn-info toggle-persist-btn">Toggle Persist</button>
-                                {% if show_size %}
-                                <button class="btn btn-sm btn-warning reduce-space-btn">Reduce Space</button>
+                                <a href="{{ url_for('main.question_entry_v2', session_id=session.id) }}" class="btn btn-sm btn-primary" title="View Questions"><i class="bi bi-list-check me-1"></i>View</a>
+                                <a href="{{ url_for('main.crop_interface_v2', session_id=session.id, image_index=0) }}" class="btn btn-sm btn-secondary" title="Crop"><i class="bi bi-pencil"></i></a>
+                                
+                                {% if session.has_classified %}
+                                <a href="{{ url_for('neetprep_bp.view_collection', session_id=session.id) }}" class="btn btn-sm btn-warning fw-bold text-dark shadow-sm border-0" style="background: linear-gradient(135deg, #ffcc33 0%, #ffb300 100%);" title="View as Collection">
+                                    <i class="bi bi-star-fill me-1"></i>Collection
+                                </a>
                                 {% endif %}
+
+                                <button class="btn btn-sm btn-info toggle-persist-btn" title="Toggle Persistence"><i class="bi bi-shield-lock"></i></button>
                             {% endif %}
                         </div>
                     </td>
@@ -387,35 +387,6 @@ $(document).ready(function() {
             }
         });
     });
-
-    // Duplicate session as collection
-    $('.duplicate-session-btn').on('click', function() {
-        const button = $(this);
-        const sessionId = button.data('session-id');
-        
-        if (confirm('Duplicate this session as a NEETprep collection? Only classified questions (subject + topic) will be included.')) {
-            button.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');
-            
-            $.ajax({
-                url: `/neetprep/collections/duplicate/${sessionId}`,
-                type: 'POST',
-                success: function(response) {
-                    if (response.success) {
-                        alert(`Successfully duplicated! Created collection "${response.name}" with ${response.count} questions.`);
-                        location.reload();
-                    } else {
-                        alert('Error duplicating session: ' + response.error);
-                        button.prop('disabled', false).html('<i class="bi bi-copy"></i>');
-                    }
-                },
-                error: function(xhr) {
-                    const err = xhr.responseJSON ? xhr.responseJSON.error : 'Unknown error';
-                    alert('Error duplicating session: ' + err);
-                    button.prop('disabled', false).html('<i class="bi bi-copy"></i>');
-                }
-            });
-        }
-    });
 });
 </script>
 {% endblock %}

templates/question_entry_v2.html

@@ -95,8 +95,13 @@
         color: #fff;
     }
 
-    .ts-dropdown .option:hover, .ts-dropdown .active {
-        background: var(--border-subtle);
+    /* Highlighted chip for keyboard navigation */
+    #ai_suggestion_chips button.highlighted {
+        background-color: var(--accent-info);
+        color: var(--bg-dark);
+        border-color: #fff;
+        box-shadow: 0 0 8px var(--accent-info);
+        transform: translateY(-2px);
     }
 
     /* --- UNIFIED NOTE CARD STYLES --- */
@@ -172,15 +177,8 @@
 
             <form id="questions-form">
 
-                
-                {% if not nvidia_nim_available %}
-                <div class="alert alert-warning alert-dismissible fade show" role="alert">
-                    <i class="bi bi-exclamation-triangle me-2"></i>
-                    NVIDIA NIM OCR feature is not available. To enable automatic question number extraction, please set the <code>NVIDIA_API_KEY</code> environment variable.
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                </div>
-                {% else %}
-                <div class="mb-3">
+                <div class="mb-3 d-flex flex-wrap gap-2">
+                    {% if nvidia_nim_available %}
                     <button id="auto-extract-all" class="btn btn-primary">
                         <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                         <span class="extract-text">Auto Extract All Question Numbers</span>
@@ -189,11 +187,12 @@
                         <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                         <span class="extract-text">Extract & Classify All</span>
                     </button>
-                    <button type="button" class="btn btn-warning ms-2" data-bs-toggle="modal" data-bs-target="#manualClassificationModal">
-                        <i class="bi bi-list-check"></i> Manual Classification
+                    {% endif %}
+                    
+                    <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#manualClassificationModal">
+                        <i class="bi bi-list-check me-1"></i> Manual Classification
                     </button>
                 </div>
-                {% endif %}
 
                 {% for image in images %}
                 <fieldset class="row mb-4 border-bottom pb-3" data-question-index="{{ loop.index0 }}" id="question-fieldset-{{ image.id }}">
@@ -529,10 +528,11 @@
                 <div class="mb-3">
                     <label class="form-label small text-muted mb-2">Subject</label>
                     <div id="subject_pills" class="d-flex flex-wrap gap-2">
-                        <button type="button" class="btn btn-sm btn-outline-success subject-pill" data-subject="Biology">Biology</button>
-                        <button type="button" class="btn btn-sm btn-outline-warning subject-pill" data-subject="Chemistry">Chemistry</button>
-                        <button type="button" class="btn btn-sm btn-outline-info subject-pill" data-subject="Physics">Physics</button>
-                        <button type="button" class="btn btn-sm btn-outline-danger subject-pill" data-subject="Mathematics">Maths</button>
+                        <button type="button" class="btn btn-sm btn-outline-info subject-pill" data-subject="Physics">Physics (⇧1)</button>
+                        <button type="button" class="btn btn-sm btn-outline-warning subject-pill" data-subject="Chemistry">Chemistry (⇧2)</button>
+                        <button type="button" class="btn btn-sm btn-outline-success subject-pill" data-subject="Biology">Biology (⇧3)</button>
+                        <button type="button" class="btn btn-sm btn-outline-primary subject-pill" data-subject="Zoology">Zoology (⇧4)</button>
+                        <button type="button" class="btn btn-sm btn-outline-danger subject-pill" data-subject="Mathematics">Maths (⇧~)</button>
                     </div>
                 </div>
 
@@ -541,6 +541,9 @@
                     <label class="form-label small text-muted mb-2">Chapter / Topic</label>
                     <div class="input-group input-group-lg">
                         <input type="text" id="topic_input" class="form-control bg-dark text-white border-secondary" placeholder="Start typing or use AI...">
+                        <button class="btn btn-outline-secondary" type="button" onclick="document.getElementById('topic_input').value=''; document.getElementById('topic_input').focus();">
+                            <i class="bi bi-x-lg"></i>
+                        </button>
                         <button class="btn btn-info" type="button" id="btn_get_suggestion" onclick="getAiSuggestion()">
                             <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                             <i class="bi bi-stars"></i>
@@ -550,6 +553,7 @@
 
                 <!-- Suggestions -->
                 <div id="ai_suggestion_container" class="d-none">
+                    <label class="form-label d-block small text-info mb-2 mt-1"><i class="bi bi-robot me-1"></i>AI Suggested:</label>
                     <div id="ai_suggestion_chips" class="d-flex flex-wrap gap-2"></div>
                 </div>
                 <div id="ai_error_msg" class="alert alert-danger d-none mt-2 py-2"></div>
@@ -1347,6 +1351,15 @@
     let selectedRangeMode = 'all'; // 'all', 'unclassified', 'wrong', 'unattempted', 'custom'
     let customRanges = []; // Array of {start, end, subject} for custom slider ranges
     let questionSubjectMap = new Map(); // Maps question index to pre-selected subject
+    let activeSuggestionIndex = -1; // -1 means focus is in input
+
+    function updateHighlightedSuggestion() {
+        const chips = document.querySelectorAll('#ai_suggestion_chips button');
+        chips.forEach((chip, idx) => {
+            if (idx === activeSuggestionIndex) chip.classList.add('highlighted');
+            else chip.classList.remove('highlighted');
+        });
+    }
 
     // Get question image URL by index
     function getQuestionImageUrl(index) {
@@ -1512,7 +1525,8 @@
 
     // Subject detection keywords
     const SUBJECT_KEYWORDS = {
-        'Biology': ['cell', 'dna', 'rna', 'protein', 'enzyme', 'mitosis', 'meiosis', 'chromosome', 'gene', 'photosynthesis', 'respiration', 'nucleus', 'cytoplasm', 'membrane', 'tissue', 'organ', 'species', 'evolution', 'ecology', 'bacteria', 'virus', 'plant', 'animal', 'blood', 'heart', 'kidney', 'liver', 'neuron', 'hormone', 'digestion', 'reproduction', 'inheritance', 'mutation', 'allele', 'phenotype', 'genotype', 'ecosystem', 'biodiversity', 'nitrogen cycle', 'carbon cycle', 'food chain', 'lymph', 'antibody', 'antigen', 'vaccine', 'pathogen', 'biomolecule', 'carbohydrate', 'lipid', 'amino acid', 'nucleotide', 'atp', 'chlorophyll', 'stomata', 'xylem', 'phloem', 'transpiration', 'pollination', 'fertilization', 'embryo', 'zygote', 'gamete', 'ovary', 'testis', 'sperm', 'ovum', 'menstrual', 'placenta', 'umbilical', 'gestation', 'lactation', 'immunology', 'homeostasis'],
+        'Biology': ['cell', 'dna', 'rna', 'protein', 'enzyme', 'mitosis', 'meiosis', 'chromosome', 'gene', 'photosynthesis', 'respiration', 'nucleus', 'cytoplasm', 'membrane', 'tissue', 'organ', 'species', 'evolution', 'ecology', 'bacteria', 'virus', 'plant', 'animal', 'blood', 'heart', 'kidney', 'liver', 'neuron', 'hormone', 'digestion', 'reproduction', 'inheritance', 'mutation', 'allele', 'phenotype', 'genotype', 'ecosystem', 'biodiversity', 'nitrogen cycle', 'carbon cycle', 'food chain', 'lymph', 'antibody', 'antigen', 'vaccine', 'pathogen', 'biomolecule', 'carbohydrate', 'lipid', 'amino acid', 'nucleotide', 'atp', 'chlorophyll', 'stomata', 'xylem', 'phloem', 'transpiration', 'pollination', 'fertilization', 'embryo', 'zygote', 'gamete', 'ovary', 'testis', ' sperm', 'ovum', 'menstrual', 'placenta', 'umbilical', 'gestation', 'lactation', 'immunology', 'homeostasis'],
+        'Zoology': ['animal', 'human', 'mammal', 'reproduction', 'nervous system', 'muscular', 'skeletal', 'circulatory', 'digestive', 'respiratory', 'excretory', 'endocrine', 'evolution', 'genetics', 'biotechnology', 'health', 'disease', 'immunity', 'blood', 'heart', 'brain', 'hormones'],
         'Chemistry': ['atom', 'molecule', 'ion', 'electron', 'proton', 'neutron', 'orbital', 'bond', 'covalent', 'ionic', 'metallic', 'oxidation', 'reduction', 'redox', 'acid', 'base', 'ph', 'salt', 'solution', 'concentration', 'mole', 'molarity', 'stoichiometry', 'equilibrium', 'catalyst', 'reaction', 'organic', 'inorganic', 'hydrocarbon', 'alkane', 'alkene', 'alkyne', 'alcohol', 'aldehyde', 'ketone', 'carboxylic', 'ester', 'amine', 'amide', 'polymer', 'isomer', 'electrolysis', 'electrochemical', 'thermodynamics', 'enthalpy', 'entropy', 'gibbs', 'periodic table', 'atomic number', 'mass number', 'isotope', 'valence', 'hybridization', 'resonance', 'aromaticity', 'benzene', 'phenol', 'ether', 'haloalkane', 'grignard', 'nucleophile', 'electrophile', 'sn1', 'sn2', 'elimination', 'addition', 'substitution', 'coordination', 'ligand', 'crystal field', 'lanthanide', 'actinide', 'd-block', 'p-block', 's-block', 'f-block', 'buffer', 'titration', 'indicator', 'solubility', 'precipitation', 'colligative', 'osmotic', 'vapour pressure', 'raoult', 'henry', 'nernst', 'faraday', 'electrochemistry', 'galvanic', 'electrolytic'],
         'Physics': ['force', 'mass', 'acceleration', 'velocity', 'momentum', 'energy', 'work', 'power', 'newton', 'gravity', 'friction', 'tension', 'torque', 'angular', 'rotational', 'oscillation', 'wave', 'frequency', 'wavelength', 'amplitude', 'sound', 'light', 'optics', 'lens', 'mirror', 'reflection', 'refraction', 'diffraction', 'interference', 'polarization', 'electric', 'current', 'voltage', 'resistance', 'capacitor', 'inductor', 'magnetic', 'electromagnetic', 'induction', 'transformer', 'generator', 'motor', 'circuit', 'ohm', 'kirchhoff', 'coulomb', 'gauss', 'ampere', 'faraday', 'lenz', 'maxwell', 'photoelectric', 'quantum', 'photon', 'electron', 'nucleus', 'radioactive', 'decay', 'fission', 'fusion', 'relativity', 'thermodynamics', 'heat', 'temperature', 'entropy', 'carnot', 'adiabatic', 'isothermal', 'isobaric', 'isochoric', 'kinetic theory', 'ideal gas', 'real gas', 'semiconductor', 'diode', 'transistor', 'logic gate', 'communication', 'modulation', 'satellite', 'doppler', 'spectrum', 'laser', 'holography', 'fibre optic', 'ray optics', 'wave optics', 'young', 'single slit', 'double slit', 'grating', 'brewster', 'malus', 'huygen'],
         'Mathematics': ['equation', 'function', 'derivative', 'integral', 'limit', 'matrix', 'vector', 'determinant', 'polynomial', 'quadratic', 'linear', 'differential', 'probability', 'statistics', 'mean', 'median', 'variance', 'standard deviation', 'permutation', 'combination', 'trigonometry', 'sine', 'cosine', 'tangent', 'logarithm', 'exponential', 'complex number', 'real number', 'set', 'relation', 'sequence', 'series', 'arithmetic progression', 'geometric progression', 'binomial', 'conic', 'parabola', 'ellipse', 'hyperbola', 'circle', 'straight line', 'plane', 'three dimensional', 'coordinate', 'calculus', 'continuity', 'differentiability', 'maxima', 'minima', 'area under curve', 'definite integral', 'indefinite integral', 'inverse trigonometric', 'mathematical induction', 'boolean algebra']
@@ -1521,6 +1535,7 @@
     // All NCERT chapters for autocomplete
     const ALL_CHAPTERS = {
         'Biology': ['The Living World', 'Biological Classification', 'Plant Kingdom', 'Animal Kingdom', 'Morphology of Flowering Plants', 'Anatomy of Flowering Plants', 'Structural Organisation in Animals', 'Cell: The Unit of Life', 'Biomolecules', 'Cell Cycle and Cell Division', 'Photosynthesis in Higher Plants', 'Respiration in Plants', 'Plant Growth and Development', 'Breathing and Exchange of Gases', 'Body Fluids and Circulation', 'Excretory Products and their Elimination', 'Locomotion and Movement', 'Neural Control and Coordination', 'Chemical Coordination and Integration', 'Reproduction in Organisms', 'Sexual Reproduction in Flowering Plants', 'Human Reproduction', 'Reproductive Health', 'Principles of Inheritance and Variation', 'Molecular Basis of Inheritance', 'Evolution', 'Human Health and Disease', 'Strategies for Enhancement in Food Production', 'Microbes in Human Welfare', 'Biotechnology: Principles and Processes', 'Biotechnology and its Applications', 'Organisms and Populations', 'Ecosystem', 'Biodiversity and Conservation', 'Environmental Issues', 'Transport in Plants', 'Mineral Nutrition', 'Digestion and Absorption'],
+        'Zoology': ['Animal Kingdom', 'Structural Organisation in Animals', 'Biomolecules', 'Breathing and Exchange of Gases', 'Body Fluids and Circulation', 'Excretory Products and their Elimination', 'Locomotion and Movement', 'Neural Control and Coordination', 'Chemical Coordination and Integration', 'Human Reproduction', 'Reproductive Health', 'Principles of Inheritance and Variation', 'Molecular Basis of Inheritance', 'Evolution', 'Human Health and Disease', 'Strategies for Enhancement in Food Production', 'Microbes in Human Welfare', 'Biotechnology: Principles and Processes', 'Biotechnology and its Applications', 'Organisms and Populations', 'Ecosystem', 'Biodiversity and Conservation', 'Environmental Issues'],
         'Chemistry': ['Some Basic Concepts of Chemistry', 'Structure of Atom', 'Classification of Elements and Periodicity in Properties', 'Chemical Bonding and Molecular Structure', 'Thermodynamics', 'Equilibrium', 'Redox Reactions', 'Organic Chemistry – Some Basic Principles and Techniques (GOC)', 'Hydrocarbons', 'Hydrogen', 'The s-Block Elements', 'The p-Block Elements', 'The d- and f-Block Elements', 'Coordination Compounds', 'Haloalkanes and Haloarenes', 'Alcohols, Phenols and Ethers', 'Aldehydes, Ketones and Carboxylic Acids', 'Amines', 'Biomolecules', 'Polymers', 'Chemistry in Everyday Life', 'Electrochemistry', 'Chemical Kinetics', 'Surface Chemistry', 'General Principles and Processes of Isolation of Elements', 'Solutions', 'Solid State', 'States of Matter'],
         'Physics': ['Physical World', 'Units and Measurements', 'Motion in a Straight Line', 'Motion in a Plane', 'Laws of Motion', 'Work, Energy and Power', 'System of Particles and Rotational Motion', 'Gravitation', 'Mechanical Properties of Solids', 'Mechanical Properties of Fluids', 'Thermal Properties of Matter', 'Thermodynamics', 'Kinetic Theory', 'Oscillations', 'Waves', 'Electric Charges and Fields', 'Electrostatic Potential and Capacitance', 'Current Electricity', 'Moving Charges and Magnetism', 'Magnetism and Matter', 'Electromagnetic Induction', 'Alternating Current', 'Electromagnetic Waves', 'Ray Optics and Optical Instruments', 'Wave Optics', 'Dual Nature of Radiation and Matter', 'Atoms', 'Nuclei', 'Semiconductor Electronics', 'Communication Systems'],
         'Mathematics': ['Sets', 'Relations and Functions', 'Trigonometric Functions', 'Complex Numbers and Quadratic Equations', 'Linear Inequalities', 'Permutations and Combinations', 'Binomial Theorem', 'Sequences and Series', 'Straight Lines', 'Conic Sections', 'Introduction to Three Dimensional Geometry', 'Limits and Derivatives', 'Statistics', 'Probability', 'Matrices', 'Determinants', 'Continuity and Differentiability', 'Applications of Derivatives', 'Integrals', 'Applications of Integrals', 'Differential Equations', 'Vector Algebra', 'Three Dimensional Geometry', 'Linear Programming', 'Inverse Trigonometric Functions', 'Mathematical Reasoning', 'Principle of Mathematical Induction']
@@ -1554,11 +1569,17 @@
     function setActiveSubject(subject) {
         manualSubject = subject;
         document.querySelectorAll('.subject-pill').forEach(pill => {
-            pill.classList.remove('active', 'btn-success', 'btn-warning', 'btn-info', 'btn-danger');
-            pill.classList.add('btn-outline-success', 'btn-outline-warning', 'btn-outline-info', 'btn-outline-danger');
+            pill.classList.remove('active', 'btn-success', 'btn-warning', 'btn-info', 'btn-danger', 'btn-primary');
+            pill.classList.add('btn-outline-success', 'btn-outline-warning', 'btn-outline-info', 'btn-outline-danger', 'btn-outline-primary');
             if (pill.dataset.subject === subject) {
-                pill.classList.remove('btn-outline-success', 'btn-outline-warning', 'btn-outline-info', 'btn-outline-danger');
-                const colorMap = { 'Biology': 'btn-success', 'Chemistry': 'btn-warning', 'Physics': 'btn-info', 'Mathematics': 'btn-danger' };
+                pill.classList.remove('btn-outline-success', 'btn-outline-warning', 'btn-outline-info', 'btn-outline-danger', 'btn-outline-primary');
+                const colorMap = { 
+                    'Biology': 'btn-success', 
+                    'Chemistry': 'btn-warning', 
+                    'Physics': 'btn-info', 
+                    'Zoology': 'btn-primary',
+                    'Mathematics': 'btn-danger' 
+                };
                 pill.classList.add('active', colorMap[subject] || 'btn-primary');
             }
         });
@@ -1871,10 +1892,16 @@
         document.getElementById('ai_suggestion_chips').innerHTML = '';
         document.getElementById('ai_error_msg').classList.add('d-none');
 
-        // Reset button
-        const btn = document.getElementById('btn_get_suggestion');
-        btn.disabled = false;
-        btn.innerHTML = `<span class="spinner-border spinner-border-sm d-none" role="status"></span> <i class="bi bi-stars"></i>`;
+        // Reset keyboard navigation
+        activeSuggestionIndex = -1;
+        updateHighlightedSuggestion();
+
+        // Focus input after a small delay
+        setTimeout(() => {
+            const input = document.getElementById('topic_input');
+            input.focus();
+            input.select();
+        }, 100);
 
         // Auto-load suggestions if topic is empty
         if (!document.getElementById('topic_input').value) {
@@ -1937,6 +1964,12 @@
         const chipsContainer = document.getElementById('ai_suggestion_chips');
         const errorDiv = document.getElementById('ai_error_msg');
 
+        {% if not nvidia_nim_available %}
+        container.classList.remove('d-none');
+        chipsContainer.innerHTML = '<span class="text-muted small"><i class="bi bi-info-circle me-1"></i>AI suggestions unavailable (No API key). Use manual entry below.</span>';
+        return;
+        {% endif %}
+
         btn.disabled = true;
         btn.querySelector('.spinner-border').classList.remove('d-none');
         errorDiv.classList.add('d-none');
@@ -1994,15 +2027,25 @@
                 result.suggestions.forEach(suggestion => {
                     const chip = document.createElement('button');
                     chip.className = 'btn btn-outline-info btn-sm rounded-1';
-                    chip.innerText = suggestion;
+                    chip.innerHTML = `<i class="bi bi-plus-circle me-1"></i>${suggestion}`;
                     chip.onclick = () => {
                         document.getElementById('topic_input').value = suggestion;
+                        // Clear suggestion highlighting and focus input
+                        activeSuggestionIndex = -1;
+                        updateHighlightedSuggestion();
+                        const input = document.getElementById('topic_input');
+                        input.focus();
+                        // We don't call nextTopicQuestion() here to allow review/editing
                     };
                     chipsContainer.appendChild(chip);
                 });
 
-                // Auto-fill input if empty and we have a primary suggestion
-                const currentVal = document.getElementById('topic_input').value;
+                // Reset selection
+                activeSuggestionIndex = -1;
+                updateHighlightedSuggestion();
+
+                // ONLY auto-fill input if it's currently empty
+                const currentVal = document.getElementById('topic_input').value.trim();
                 if (!currentVal && result.suggestions.length > 0) {
                      document.getElementById('topic_input').value = result.suggestions[0];
                 }
@@ -2024,6 +2067,87 @@
         loadSettings();
         setupEventListeners();
         setupRangeToggles();
+
+        // Keyboard navigation for Topic Wizard
+        let lastEnterTime = 0;
+        document.addEventListener('keydown', (e) => {
+            const modal = document.getElementById('topicSelectionModal');
+            if (!modal.classList.contains('show')) return;
+
+            const chips = document.querySelectorAll('#ai_suggestion_chips button');
+            const input = document.getElementById('topic_input');
+
+            // --- Suggestion Cycling Logic ---
+            if (e.key === 'ArrowDown') {
+                if (activeSuggestionIndex === -1 && chips.length > 0) {
+                    e.preventDefault();
+                    activeSuggestionIndex = 0;
+                    updateHighlightedSuggestion();
+                }
+            } else if (e.key === 'ArrowUp') {
+                if (activeSuggestionIndex !== -1) {
+                    e.preventDefault();
+                    activeSuggestionIndex = -1;
+                    updateHighlightedSuggestion();
+                    input.focus();
+                }
+            } else if (e.key === 'ArrowRight' && activeSuggestionIndex !== -1) {
+                e.preventDefault();
+                activeSuggestionIndex = (activeSuggestionIndex + 1) % chips.length;
+                updateHighlightedSuggestion();
+            } else if (e.key === 'ArrowLeft' && activeSuggestionIndex !== -1) {
+                e.preventDefault();
+                activeSuggestionIndex = (activeSuggestionIndex - 1 + chips.length) % chips.length;
+                updateHighlightedSuggestion();
+            }
+
+            // Enter to save and next
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                const now = Date.now();
+                
+                // Double Enter Fallback: If pressed twice within 300ms, always go next
+                if (now - lastEnterTime < 300) {
+                    nextTopicQuestion();
+                    lastEnterTime = 0;
+                    return;
+                }
+                lastEnterTime = now;
+
+                if (activeSuggestionIndex !== -1 && chips[activeSuggestionIndex]) {
+                    // Enter 1: Select the suggestion (triggers the click handler we modified)
+                    chips[activeSuggestionIndex].click(); 
+                } else {
+                    // Enter 2 (or just Enter if in input): Save and move to next question
+                    nextTopicQuestion();
+                }
+            }
+
+            // Shift + Number shortcuts for subjects (Android compatible)
+            if (e.shiftKey && !e.ctrlKey && !e.altKey) {
+                let targetSubject = null;
+                if (e.key === '1' || e.key === '!') targetSubject = 'Physics';
+                else if (e.key === '2' || e.key === '@') targetSubject = 'Chemistry';
+                else if (e.key === '3' || e.key === '#') targetSubject = 'Biology';
+                else if (e.key === '4' || e.key === '$') targetSubject = 'Zoology';
+                else if (e.key === '`' || e.key === '~') targetSubject = 'Mathematics';
+
+                if (targetSubject) {
+                    e.preventDefault();
+                    setActiveSubject(targetSubject);
+                    // Clear and fetch fresh suggestions for the new subject
+                    input.value = '';
+                    input.focus();
+                    getAiSuggestion();
+                }
+            }
+
+            // Alt + S to trigger AI suggestion
+            if (e.altKey && (e.key === 's' || e.key === 'S')) {
+                e.preventDefault();
+                getAiSuggestion();
+            }
+        });
     });
 </script>
 {% endblock %}

templates/templates/question_entry_v2.html

@@ -37,14 +37,7 @@
 
             <form id="questions-form">
 
-                
-                {% if not nvidia_nim_available %}
-                <div class="alert alert-warning alert-dismissible fade show" role="alert">
-                    <i class="bi bi-exclamation-triangle me-2"></i>
-                    NVIDIA NIM OCR feature is not available. To enable automatic question number extraction, please set the <code>NVIDIA_API_KEY</code> environment variable.
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                </div>
-                {% else %}
+                {% if nvidia_nim_available %}
                 <div class="mb-3">
                     <button id="auto-extract-all" class="btn btn-primary">
                         <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>

utils.py

@@ -12,6 +12,37 @@ def get_db_connection():
     conn.row_factory = sqlite3.Row
     return conn
 
+def sync_neetprep_collection(conn, session_id, user_id):
+    """
+    Ensures all classified questions in a session are bookmarked for the neetprep view.
+    """
+    # Check if session has any classified questions (subject AND chapter set)
+    classified_qs = conn.execute('''
+        SELECT id FROM questions 
+        WHERE session_id = ? AND subject IS NOT NULL AND subject != 'Unclassified' 
+        AND chapter IS NOT NULL AND chapter != 'Unclassified'
+    ''', (session_id,)).fetchall()
+    
+    if not classified_qs:
+        return False
+        
+    # Sync bookmarks for all classified questions
+    for q in classified_qs:
+        q_id = str(q['id'])
+        # Check if already bookmarked
+        exists = conn.execute('''
+            SELECT id FROM neetprep_bookmarks 
+            WHERE user_id = ? AND neetprep_question_id = ? AND question_type = 'classified'
+        ''', (user_id, q_id)).fetchone()
+        
+        if not exists:
+            conn.execute('''
+                INSERT INTO neetprep_bookmarks (user_id, neetprep_question_id, session_id, question_type)
+                VALUES (?, ?, ?, 'classified')
+            ''', (user_id, q_id, session_id))
+            
+    return True
+
 def get_or_download_font(font_path="arial.ttf", font_size=50):
     if not os.path.exists(font_path):
         try: