feat: refactor revision notes to store JSON instead of rasterized images

- Extract revision notes modal to separate partial (_revision_notes.html)
- Save Fabric.js canvas as JSON to database instead of PNG files
- Add /save_note_json and /get_note_json API endpoints
- Add note_json column migration to images table
- Fix stylus mode palm rejection - remove accidental paths from finger touch
- Add two_page_crop user setting with database migration
- Update serve_processed_file to authorize both processed_filename and note_filename
- Add null checks in setupEventListeners to prevent JS errors

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

database.py

@@ -339,6 +339,11 @@ def setup_database():
     except sqlite3.OperationalError:
         cursor.execute("ALTER TABLE images ADD COLUMN include_note_in_pdf INTEGER DEFAULT 1")
 
+    try:
+        cursor.execute("SELECT note_json FROM images LIMIT 1")
+    except sqlite3.OperationalError:
+        cursor.execute("ALTER TABLE images ADD COLUMN note_json TEXT")
+
     try:
         cursor.execute("SELECT session_type FROM sessions LIMIT 1")
 
@@ -380,6 +385,11 @@ def setup_database():
     except sqlite3.OperationalError:
         cursor.execute("ALTER TABLE neetprep_bookmarks ADD COLUMN question_type TEXT DEFAULT 'neetprep'")
 
+    try:
+        cursor.execute("SELECT two_page_crop FROM users LIMIT 1")
+    except sqlite3.OperationalError:
+        cursor.execute("ALTER TABLE users ADD COLUMN two_page_crop INTEGER DEFAULT 0")
+
     conn.commit()
     conn.close()
 

image_routes.py

@@ -125,7 +125,7 @@ def delete_note():
             if os.path.exists(note_path):
                 os.remove(note_path)
 
-        conn.execute("UPDATE images SET note_filename = NULL WHERE id = ?", (image_id,))
+        conn.execute("UPDATE images SET note_filename = NULL, note_json = NULL WHERE id = ?", (image_id,))
         conn.commit()
         conn.close()
 
@@ -133,4 +133,67 @@ def delete_note():
 
     except Exception as e:
         current_app.logger.error(f"Error deleting note: {e}")
+        return jsonify({'error': str(e)}), 500
+
+
+@image_bp.route('/save_note_json', methods=['POST'])
+@login_required
+def save_note_json():
+    """Save revision notes as JSON (no rasterization)."""
+    try:
+        data = request.json
+        image_id = data.get('image_id')
+        session_id = data.get('session_id')
+        json_data = data.get('json_data')
+
+        if not image_id or not session_id or not json_data:
+            return jsonify({'error': 'Missing required fields'}), 400
+
+        # Validate ownership
+        conn = get_db_connection()
+        img = conn.execute("""
+            SELECT i.id, s.user_id FROM images i
+            JOIN sessions s ON i.session_id = s.id WHERE i.id = ?
+        """, (image_id,)).fetchone()
+
+        if not img or img['user_id'] != current_user.id:
+            conn.close()
+            return jsonify({'error': 'Unauthorized'}), 403
+
+        # Save JSON to database
+        conn.execute("UPDATE images SET note_json = ? WHERE id = ?", (json_data, image_id))
+        conn.commit()
+        conn.close()
+
+        return jsonify({'success': True})
+
+    except Exception as e:
+        current_app.logger.error(f"Error saving note JSON: {e}")
+        return jsonify({'error': str(e)}), 500
+
+
+@image_bp.route('/get_note_json/<int:image_id>')
+@login_required
+def get_note_json(image_id):
+    """Get revision notes as JSON."""
+    try:
+        conn = get_db_connection()
+        img = conn.execute("""
+            SELECT i.note_json, s.user_id FROM images i
+            JOIN sessions s ON i.session_id = s.id WHERE i.id = ?
+        """, (image_id,)).fetchone()
+
+        if not img or img['user_id'] != current_user.id:
+            conn.close()
+            return jsonify({'error': 'Unauthorized'}), 403
+
+        conn.close()
+
+        if img['note_json']:
+            return jsonify({'success': True, 'json_data': img['note_json']})
+        else:
+            return jsonify({'success': False, 'error': 'No note found'}), 404
+
+    except Exception as e:
+        current_app.logger.error(f"Error getting note JSON: {e}")
         return jsonify({'error': str(e)}), 500

routes/processing.py

@@ -21,12 +21,56 @@ def crop_interface_v2(session_id, image_index):
     session_owner = conn.execute('SELECT user_id FROM sessions WHERE id = ?', (session_id,)).fetchone()
     if not session_owner or session_owner['user_id'] != current_user.id:
         conn.close(); return "Unauthorized", 403
-    image_info = conn.execute("SELECT * FROM images WHERE session_id = ? AND image_index = ? AND image_type = 'original'", (session_id, image_index)).fetchone()
-    if not image_info: conn.close(); return "Original page/image not found.", 404
-    total_pages = conn.execute("SELECT COUNT(*) FROM images WHERE session_id = ? AND image_type = 'original'", (session_id,)).fetchone()[0]
-    all_pages = [{'image_index': row['image_index'], 'filename': row['filename']} for row in conn.execute("SELECT image_index, filename FROM images WHERE session_id = ? AND image_type = 'original' ORDER BY image_index ASC", (session_id,)).fetchall()]
-    conn.close()
-    return render_template('cropv2.html', session_id=session_id, user_id=current_user.id, image_index=image_index, image_info=image_info, total_pages=total_pages, all_pages=all_pages)
+
+    # Check if two-page mode is enabled
+    two_page_mode = getattr(current_user, 'two_page_crop', 0)
+
+    if two_page_mode:
+        # In two-page mode, image_index represents the pair index (0 = pages 0-1, 1 = pages 2-3, etc.)
+        pair_index = image_index
+        left_page_index = pair_index * 2
+        right_page_index = left_page_index + 1
+
+        left_image = conn.execute("SELECT * FROM images WHERE session_id = ? AND image_index = ? AND image_type = 'original'", (session_id, left_page_index)).fetchone()
+        right_image = conn.execute("SELECT * FROM images WHERE session_id = ? AND image_index = ? AND image_type = 'original'", (session_id, right_page_index)).fetchone()
+
+        if not left_image:
+            conn.close(); return "Original page/image not found.", 404
+
+        total_pages = conn.execute("SELECT COUNT(*) FROM images WHERE session_id = ? AND image_type = 'original'", (session_id,)).fetchone()[0]
+        total_pairs = (total_pages + 1) // 2  # Round up for odd number of pages
+
+        all_pages = [{'image_index': row['image_index'], 'filename': row['filename']} for row in conn.execute("SELECT image_index, filename FROM images WHERE session_id = ? AND image_type = 'original' ORDER BY image_index ASC", (session_id,)).fetchall()]
+        conn.close()
+
+        return render_template('cropv2.html',
+            session_id=session_id,
+            user_id=current_user.id,
+            image_index=pair_index,
+            image_info=left_image,
+            right_image_info=dict(right_image) if right_image else None,
+            total_pages=total_pairs,
+            all_pages=all_pages,
+            two_page_mode=True,
+            left_page_index=left_page_index,
+            right_page_index=right_page_index
+        )
+    else:
+        # Standard single-page mode
+        image_info = conn.execute("SELECT * FROM images WHERE session_id = ? AND image_index = ? AND image_type = 'original'", (session_id, image_index)).fetchone()
+        if not image_info: conn.close(); return "Original page/image not found.", 404
+        total_pages = conn.execute("SELECT COUNT(*) FROM images WHERE session_id = ? AND image_type = 'original'", (session_id,)).fetchone()[0]
+        all_pages = [{'image_index': row['image_index'], 'filename': row['filename']} for row in conn.execute("SELECT image_index, filename FROM images WHERE session_id = ? AND image_type = 'original' ORDER BY image_index ASC", (session_id,)).fetchall()]
+        conn.close()
+        return render_template('cropv2.html',
+            session_id=session_id,
+            user_id=current_user.id,
+            image_index=image_index,
+            image_info=image_info,
+            total_pages=total_pages,
+            all_pages=all_pages,
+            two_page_mode=False
+        )
 
 @main_bp.route(ROUTE_PROCESS_CROP_V2, methods=[METHOD_POST])
 @login_required

routes/serving.py

@@ -16,9 +16,10 @@ def serve_tmp_file(filename):
 @login_required
 def serve_processed_file(filename):
     conn = get_db_connection()
+    # Check both processed_filename and note_filename columns
     image_owner = conn.execute(
-        "SELECT s.user_id FROM images i JOIN sessions s ON i.session_id = s.id WHERE i.processed_filename = ?",
-        (filename,)
+        "SELECT s.user_id FROM images i JOIN sessions s ON i.session_id = s.id WHERE i.processed_filename = ? OR i.note_filename = ?",
+        (filename, filename)
     ).fetchone()
     conn.close()
 

settings_routes.py

@@ -32,6 +32,9 @@ def settings():
         # --- Handle Magnifier Toggle ---
         magnifier_enabled = 1 if request.form.get('magnifier_enabled') else 0
 
+        # --- Handle Two-Page Crop Toggle ---
+        two_page_crop = 1 if request.form.get('two_page_crop') else 0
+
         # --- Handle Classifier Model Setting ---
         classifier_model = request.form.get('classifier_model', 'gemini')
         if classifier_model not in ['gemini', 'nova', 'gemma']:
@@ -67,15 +70,16 @@ def settings():
 
         # --- Update Database ---
         conn = get_db_connection()
-        conn.execute('UPDATE users SET neetprep_enabled = ?, v2_default = ?, magnifier_enabled = ?, dpi = ?, color_rm_dpi = ?, classifier_model = ? WHERE id = ?', 
-                     (neetprep_enabled, v2_default, magnifier_enabled, dpi, color_rm_dpi, classifier_model, current_user.id))
+        conn.execute('UPDATE users SET neetprep_enabled = ?, v2_default = ?, magnifier_enabled = ?, two_page_crop = ?, dpi = ?, color_rm_dpi = ?, classifier_model = ? WHERE id = ?',
+                     (neetprep_enabled, v2_default, magnifier_enabled, two_page_crop, dpi, color_rm_dpi, classifier_model, current_user.id))
         conn.commit()
         conn.close()
-        
+
         # --- Update current_user object for the session ---
         current_user.neetprep_enabled = neetprep_enabled
         current_user.v2_default = v2_default
         current_user.magnifier_enabled = magnifier_enabled
+        current_user.two_page_crop = two_page_crop
         current_user.dpi = dpi
         current_user.color_rm_dpi = color_rm_dpi
         current_user.classifier_model = classifier_model

templates/_revision_notes.html

@@ -0,0 +1,577 @@
+{# 
+    Revision Notes Modal - Final Fix
+    Fixes: Stylus Logic (via Native Pointer Capture), Object Eraser, UX
+#}
+
+{# ===== STYLES ===== #}
+<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;
+    }
+</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>
+
+{# ===== 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 instead of rasterized image
+        const jsonData = JSON.stringify(canvas.toJSON());
+
+        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
+                })
+            });
+
+            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');
+        }
+    }
+</script>

templates/cropv2.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, viewport-fit=cover">
-    <title>Crop Page {{ image_index + 1 }}</title>
+    <title>Crop {% if two_page_mode %}Pages {{ left_page_index + 1 }}-{{ right_page_index + 1 }}{% else %}Page {{ image_index + 1 }}{% endif %}</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <style>
@@ -119,6 +119,58 @@
         .content-wrapper { flex: 1; position: relative; background-color: #181a1c; overflow: hidden; display: flex; flex-direction: column; width: 100%; }
         .image-pane { flex-grow: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100%; height: 100%; }
 
+        /* Two-Page Layout */
+        .image-pane.two-page-mode {
+            gap: 8px;
+            padding: 4px;
+            flex-direction: row;
+            flex-wrap: nowrap;
+        }
+        .two-page-mode #crop-area,
+        .two-page-mode .crop-area-right {
+            flex: 0 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .page-label {
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            background: rgba(0, 0, 0, 0.75);
+            color: #fff;
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 600;
+            z-index: 15;
+            pointer-events: none;
+        }
+        .crop-area-right {
+            position: relative;
+            line-height: 0;
+            box-shadow: 0 0 30px rgba(0,0,0,0.5);
+            user-select: none;
+            -webkit-user-select: none;
+            transition: opacity var(--transition-normal);
+        }
+        .crop-area-right.loading { opacity: 0.5; }
+        .crop-area-right img {
+            display: block;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.4s ease-out;
+        }
+        .crop-area-right img.loaded { opacity: 1; }
+        .crop-area-right canvas {
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            z-index: 10;
+            cursor: crosshair;
+            touch-action: none;
+        }
+
         #crop-area {
             position: relative;
             line-height: 0;
@@ -151,7 +203,7 @@
         }
 
         /* --- MAGNIFIER LENS --- */
-        #magnifier {
+        #magnifier, #magnifier-right {
             position: absolute;
             width: var(--lens-size);
             height: var(--lens-size);
@@ -167,7 +219,7 @@
             transition: opacity var(--transition-fast);
         }
 
-        #magnifier::after {
+        #magnifier::after, #magnifier-right::after {
             content: '';
             position: absolute;
             top: 50%;
@@ -295,6 +347,51 @@
         #box-toolbar button.delete-btn { color: #dc3545; }
         #box-toolbar button.delete-btn:hover { background: rgba(220, 53, 69, 0.2); }
 
+        /* Secondary toolbar for right page */
+        .box-toolbar-secondary {
+            position: absolute;
+            background: rgba(33, 37, 41, 0.95);
+            border: 1px solid #6c757d;
+            border-radius: 50px;
+            padding: 8px 16px;
+            display: none;
+            gap: 16px;
+            backdrop-filter: blur(8px);
+            z-index: 100;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+            opacity: 0;
+            transform: translateY(10px);
+            transition: all var(--transition-normal);
+        }
+        .box-toolbar-secondary.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .box-toolbar-secondary button {
+            background: transparent;
+            border: none;
+            color: #e9ecef;
+            width: 32px;
+            height: 32px;
+            font-size: 1.4rem;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all var(--transition-fast);
+            border-radius: 50%;
+        }
+        .box-toolbar-secondary button:hover {
+            background: rgba(255,255,255,0.1);
+            transform: scale(1.1);
+        }
+        .box-toolbar-secondary button:active {
+            transform: scale(0.9);
+            color: #fff;
+        }
+        .box-toolbar-secondary button.delete-btn { color: #dc3545; }
+        .box-toolbar-secondary button.delete-btn:hover { background: rgba(220, 53, 69, 0.2); }
+
         /* --- FAB CONTAINER - Improved Spacing --- */
         .fab-container {
             position: absolute;
@@ -348,6 +445,8 @@
             transform: translateX(10px);
             pointer-events: none;
             transition: all var(--transition-normal);
+            max-height: calc(100vh - 200px);
+            overflow-y: auto;
         }
         .filters-panel.show {
             opacity: 1;
@@ -355,14 +454,16 @@
             pointer-events: auto;
         }
 
-        /* Data Panel - Higher up to avoid brightness panel */
+        /* Data Panel - Position from bottom of FAB container */
         #dataPanel {
-            bottom: 150px;
+            bottom: 80px;
+            right: 76px;
         }
 
-        /* Brightness Panel - Lower */
+        /* Brightness Panel - Position from bottom of FAB container */
         #filtersPanel {
             bottom: 80px;
+            right: 76px;
         }
 
         .form-range { height: 4px; }
@@ -419,7 +520,7 @@
     </div>
 
     <header class="app-header">
-        <h1 class="header-title"><i class="bi bi-bounding-box me-2"></i>Page {{ image_index + 1 }} / {{ total_pages }}</h1>
+        <h1 class="header-title"><i class="bi bi-bounding-box me-2"></i>{% if two_page_mode %}Pages {{ left_page_index + 1 }}-{{ right_page_index + 1 if right_image_info else left_page_index + 1 }} / {{ total_pages }}{% else %}Page {{ image_index + 1 }} / {{ total_pages }}{% endif %}</h1>
         <div class="header-actions">
             <button id="backBtn" class="btn btn-secondary" aria-label="Back"><i class="bi bi-arrow-left"></i></button>
             <button id="clearBtn" class="btn btn-outline-info" aria-label="Clear All"><i class="bi bi-eraser"></i></button>
@@ -428,12 +529,13 @@
     </header>
 
     <div class="content-wrapper">
-        <div class="image-pane" id="imagePane">
+        <div class="image-pane{% if two_page_mode %} two-page-mode{% endif %}" id="imagePane">
             <div id="crop-area">
+                {% if two_page_mode %}<div class="page-label">Page {{ left_page_index + 1 }}</div>{% endif %}
                 <img id="main-image" src="/image/upload/{{ image_info.filename }}" alt="Page" crossorigin="anonymous">
                 <div id="magnifier"></div>
                 <canvas id="draw-canvas"></canvas>
-                
+
                 <div id="box-toolbar">
                     <button id="stitch-btn" title="Stitch"><i class="bi bi-scissors"></i></button>
                     <button id="move-up-btn" title="Move Up"><i class="bi bi-arrow-up-circle"></i></button>
@@ -442,6 +544,22 @@
                 </div>
             </div>
 
+            {% if two_page_mode and right_image_info %}
+            <div class="crop-area-right" id="crop-area-right">
+                <div class="page-label">Page {{ right_page_index + 1 }}</div>
+                <img id="right-image" src="/image/upload/{{ right_image_info.filename }}" alt="Right Page" crossorigin="anonymous">
+                <div id="magnifier-right"></div>
+                <canvas id="draw-canvas-right"></canvas>
+
+                <div id="box-toolbar-right" class="box-toolbar-secondary">
+                    <button id="stitch-btn-right" title="Stitch"><i class="bi bi-scissors"></i></button>
+                    <button id="move-up-btn-right" title="Move Up"><i class="bi bi-arrow-up-circle"></i></button>
+                    <button id="move-down-btn-right" title="Move Down"><i class="bi bi-arrow-down-circle"></i></button>
+                    <button id="delete-btn-right" title="Delete Box" class="delete-btn"><i class="bi bi-trash"></i></button>
+                </div>
+            </div>
+            {% endif %}
+
             <!-- Floating Actions -->
             <div class="fab-container">
                 <!-- Data Panel - Higher up -->
@@ -500,16 +618,31 @@
         </div>
 
         <div class="thumbnail-bar">
+            {% if two_page_mode %}
+            {% for i in range((all_pages|length + 1) // 2) %}
+            {% set left_idx = i * 2 %}
+            {% set right_idx = left_idx + 1 %}
+            <div class="thumb-item {% if i == image_index %}active{% endif %}" data-page-index="{{ i }}">
+                <div class="thumb-loader"></div>
+                <img data-src="/image/upload/{{ all_pages[left_idx].filename }}"
+                     alt="Pages {{ left_idx + 1 }}-{{ right_idx + 1 }}"
+                     data-session="{{ session_id }}"
+                     class="thumb-img">
+                <div class="thumb-number">{{ left_idx + 1 }}-{{ right_idx + 1 if right_idx < all_pages|length else left_idx + 1 }}</div>
+            </div>
+            {% endfor %}
+            {% else %}
             {% for page in all_pages %}
             <div class="thumb-item {% if page.image_index == image_index %}active{% endif %}" data-page-index="{{ page.image_index }}">
                 <div class="thumb-loader"></div>
-                <img data-src="/image/upload/{{ page.filename }}" 
+                <img data-src="/image/upload/{{ page.filename }}"
                      alt="Page {{ page.image_index + 1 }}"
                      data-session="{{ session_id }}"
                      class="thumb-img">
                 <div class="thumb-number">{{ page.image_index + 1 }}</div>
             </div>
             {% endfor %}
+            {% endif %}
         </div>
     </div>
 
@@ -523,9 +656,14 @@
             userId: '{{ user_id }}',
             imageIndex: parseInt('{{ image_index }}'),
             totalPages: parseInt('{{ total_pages }}'),
-            enableMagnifier: {{ 'true' if current_user.magnifier_enabled else 'false' }}
+            enableMagnifier: {{ 'true' if current_user.magnifier_enabled else 'false' }},
+            twoPageMode: {{ 'true' if two_page_mode else 'false' }},
+            leftPageIndex: parseInt('{{ left_page_index|default(image_index) }}'),
+            rightPageIndex: parseInt('{{ right_page_index|default(-1) }}'),
+            hasRightPage: {{ 'true' if two_page_mode and right_image_info else 'false' }}
         };
-        const storageKey = CONFIG.userId ? `cropState_${CONFIG.userId}_${CONFIG.sessionId}_${CONFIG.imageIndex}` : `cropState_${CONFIG.sessionId}_${CONFIG.imageIndex}`;
+        const storageKey = CONFIG.userId ? `cropState_${CONFIG.userId}_${CONFIG.sessionId}_${CONFIG.leftPageIndex}` : `cropState_${CONFIG.sessionId}_${CONFIG.leftPageIndex}`;
+        const storageKeyRight = CONFIG.hasRightPage ? (CONFIG.userId ? `cropState_${CONFIG.userId}_${CONFIG.sessionId}_${CONFIG.rightPageIndex}` : `cropState_${CONFIG.sessionId}_${CONFIG.rightPageIndex}`) : null;
 
         // --- ENHANCED PROGRESS BAR WITH BYTES ---
         const ProgressBar = {
@@ -741,11 +879,21 @@
             canvas: document.getElementById('draw-canvas'),
             ctx: document.getElementById('draw-canvas').getContext('2d'),
             toolbar: document.getElementById('box-toolbar'),
-            magnifier: document.getElementById('magnifier')
+            magnifier: document.getElementById('magnifier'),
+            // Right page elements (two-page mode)
+            rightImage: CONFIG.hasRightPage ? document.getElementById('right-image') : null,
+            rightCropArea: CONFIG.hasRightPage ? document.getElementById('crop-area-right') : null,
+            rightCanvas: CONFIG.hasRightPage ? document.getElementById('draw-canvas-right') : null,
+            rightCtx: CONFIG.hasRightPage ? document.getElementById('draw-canvas-right').getContext('2d') : null,
+            rightToolbar: CONFIG.hasRightPage ? document.getElementById('box-toolbar-right') : null,
+            rightMagnifier: CONFIG.hasRightPage ? document.getElementById('magnifier-right') : null
         };
 
         let boxes = [];
+        let boxesRight = []; // For right page in two-page mode
         let selectedBoxIndex = -1;
+        let selectedBoxIndexRight = -1;
+        let activePane = 'left'; // Which pane is currently active
         let isDrawing = false;
         let startX, startY;
         let dragTarget = null;
@@ -764,11 +912,17 @@
             // Load main image with progress tracking
             loadMainImageWithProgress();
 
+            // Load right image if in two-page mode
+            if (CONFIG.hasRightPage) {
+                loadRightImageWithProgress();
+            }
+
             const ro = new ResizeObserver(() => requestAnimationFrame(fitImage));
             ro.observe(els.imagePane);
 
             loadSettings();
             loadBoxes();
+            if (CONFIG.hasRightPage) loadBoxesRight();
             setupListeners();
             updateStitchButton();
 
@@ -799,29 +953,95 @@
             }
         }
 
+        async function loadRightImageWithProgress() {
+            if (!CONFIG.hasRightPage || !els.rightImage) return;
+
+            const imageUrl = els.rightImage.src;
+            els.rightCropArea.classList.add('loading');
+
+            try {
+                const blob = await ThumbCache.fetchWithProgress(imageUrl, false); // Don't show progress for second image
+                els.rightImage.src = URL.createObjectURL(blob);
+                els.rightImage.onload = () => {
+                    els.rightImage.classList.add('loaded');
+                    els.rightCropArea.classList.remove('loading');
+                    fitImage();
+                };
+            } catch (err) {
+                els.rightImage.onload = () => {
+                    els.rightImage.classList.add('loaded');
+                    els.rightCropArea.classList.remove('loading');
+                    fitImage();
+                };
+            }
+        }
+
         function fitImage() {
             if (!els.image.naturalWidth) return;
             const rect = els.imagePane.getBoundingClientRect();
-            const padding = 10;
-            const availableW = rect.width - padding;
-            const availableH = rect.height - padding;
-            const scale = Math.min(availableW / els.image.naturalWidth, availableH / els.image.naturalHeight);
-            
-            const finalW = Math.floor(els.image.naturalWidth * scale);
-            const finalH = Math.floor(els.image.naturalHeight * scale);
-            els.cropArea.style.width = `${finalW}px`;
-            els.cropArea.style.height = `${finalH}px`;
-            els.image.style.width = `${finalW}px`;
-            els.image.style.height = `${finalH}px`;
-            els.canvas.width = finalW;
-            els.canvas.height = finalH;
-            
-            if (CONFIG.enableMagnifier) {
-                els.magnifier.style.backgroundImage = `url('${els.image.src}')`;
+            const padding = 4;
+            const gap = 8;
+
+            if (CONFIG.twoPageMode) {
+                // Two-page mode: always side by side, maximize space
+                const halfWidth = (rect.width - gap) / 2 - padding;
+                const fullHeight = rect.height - padding * 2;
+
+                // Fit left image - maximize space
+                const scaleLeft = Math.min(halfWidth / els.image.naturalWidth, fullHeight / els.image.naturalHeight);
+                const finalWLeft = Math.floor(els.image.naturalWidth * scaleLeft);
+                const finalHLeft = Math.floor(els.image.naturalHeight * scaleLeft);
+                els.cropArea.style.width = `${finalWLeft}px`;
+                els.cropArea.style.height = `${finalHLeft}px`;
+                els.image.style.width = `${finalWLeft}px`;
+                els.image.style.height = `${finalHLeft}px`;
+                els.canvas.width = finalWLeft;
+                els.canvas.height = finalHLeft;
+
+                if (CONFIG.enableMagnifier) {
+                    els.magnifier.style.backgroundImage = `url('${els.image.src}')`;
+                }
+
+                // Fit right image if present - maximize space
+                if (CONFIG.hasRightPage && els.rightImage && els.rightImage.naturalWidth) {
+                    const scaleRight = Math.min(halfWidth / els.rightImage.naturalWidth, fullHeight / els.rightImage.naturalHeight);
+                    const finalWRight = Math.floor(els.rightImage.naturalWidth * scaleRight);
+                    const finalHRight = Math.floor(els.rightImage.naturalHeight * scaleRight);
+                    els.rightCropArea.style.width = `${finalWRight}px`;
+                    els.rightCropArea.style.height = `${finalHRight}px`;
+                    els.rightImage.style.width = `${finalWRight}px`;
+                    els.rightImage.style.height = `${finalHRight}px`;
+                    els.rightCanvas.width = finalWRight;
+                    els.rightCanvas.height = finalHRight;
+
+                    if (CONFIG.enableMagnifier && els.rightMagnifier) {
+                        els.rightMagnifier.style.backgroundImage = `url('${els.rightImage.src}')`;
+                    }
+                }
+            } else {
+                // Single-page mode - use full available space
+                const availableW = rect.width - padding * 2;
+                const availableH = rect.height - padding * 2;
+                const scale = Math.min(availableW / els.image.naturalWidth, availableH / els.image.naturalHeight);
+
+                const finalW = Math.floor(els.image.naturalWidth * scale);
+                const finalH = Math.floor(els.image.naturalHeight * scale);
+                els.cropArea.style.width = `${finalW}px`;
+                els.cropArea.style.height = `${finalH}px`;
+                els.image.style.width = `${finalW}px`;
+                els.image.style.height = `${finalH}px`;
+                els.canvas.width = finalW;
+                els.canvas.height = finalH;
+
+                if (CONFIG.enableMagnifier) {
+                    els.magnifier.style.backgroundImage = `url('${els.image.src}')`;
+                }
             }
 
             if (selectedBoxIndex !== -1) updateToolbar();
+            if (selectedBoxIndexRight !== -1 && CONFIG.hasRightPage) updateToolbar();
             drawBoxes();
+            if (CONFIG.hasRightPage) drawBoxesRight();
         }
 
         // --- DRAWING ENGINE ---
@@ -888,6 +1108,55 @@
             }
         }
 
+        // --- DRAWING ENGINE FOR RIGHT PAGE ---
+        function drawBoxesRight() {
+            if (!CONFIG.hasRightPage || !els.rightCtx) return;
+
+            els.rightCtx.clearRect(0, 0, els.rightCanvas.width, els.rightCanvas.height);
+
+            boxesRight.forEach((box, index) => {
+                const isSelected = index === selectedBoxIndexRight && activePane === 'right';
+                const isStitched = box.remote_stitch_source != null;
+                const p = (pt) => ({ x: pt.x * els.rightCanvas.width, y: pt.y * els.rightCanvas.height });
+
+                els.rightCtx.lineWidth = isSelected ? 3 : 2;
+                els.rightCtx.strokeStyle = isSelected ? '#ff4d4d' : (isStitched ? '#0dcaf0' : '#ffc107');
+                els.rightCtx.fillStyle = isSelected ? 'rgba(255, 77, 77, 0.15)' : (isStitched ? 'rgba(13, 202, 240, 0.2)' : 'rgba(255, 193, 7, 0.1)');
+
+                els.rightCtx.beginPath();
+                els.rightCtx.moveTo(p(box.tl).x, p(box.tl).y);
+                els.rightCtx.lineTo(p(box.tr).x, p(box.tr).y);
+                els.rightCtx.lineTo(p(box.br).x, p(box.br).y);
+                els.rightCtx.lineTo(p(box.bl).x, p(box.bl).y);
+                els.rightCtx.closePath();
+                els.rightCtx.stroke();
+                els.rightCtx.fill();
+
+                if (isSelected) {
+                    els.rightCtx.fillStyle = 'white';
+                    ['tl', 'tr', 'bl', 'br'].forEach(k => {
+                        els.rightCtx.beginPath();
+                        els.rightCtx.arc(p(box[k]).x, p(box[k]).y, 8, 0, Math.PI * 2);
+                        els.rightCtx.fill();
+                        els.rightCtx.stroke();
+                    });
+                }
+
+                const cx = (p(box.tl).x + p(box.br).x) / 2;
+                const cy = (p(box.tl).y + p(box.br).y) / 2;
+                els.rightCtx.font = "bold 24px system-ui";
+                els.rightCtx.fillStyle = "white";
+                els.rightCtx.shadowColor = "rgba(0,0,0,0.8)";
+                els.rightCtx.shadowBlur = 6;
+                els.rightCtx.fillText(index + 1, cx - 6, cy + 8);
+                if (isStitched) {
+                    els.rightCtx.font = "20px system-ui";
+                    els.rightCtx.fillText("🔗", p(box.tr).x - 28, p(box.tr).y + 24);
+                }
+                els.rightCtx.shadowBlur = 0;
+            });
+        }
+
         // --- MAGNIFIER LOGIC ---
         function updateMagnifierState(x, y, active) {
             if (!CONFIG.enableMagnifier) return;
@@ -919,8 +1188,8 @@
         }
 
         // --- INTERACTION ---
-        function getPos(e) {
-            const rect = els.canvas.getBoundingClientRect();
+        function getPos(e, canvas = els.canvas) {
+            const rect = canvas.getBoundingClientRect();
             const cx = e.touches ? e.touches[0].clientX : e.clientX;
             const cy = e.touches ? e.touches[0].clientY : e.clientY;
             let x = (cx - rect.left) / rect.width;
@@ -928,10 +1197,18 @@
             return { x: Math.max(0, Math.min(1, x)), y: Math.max(0, Math.min(1, y)) };
         }
 
-        function hitTest(x, y) {
-            const pad = 30 / els.canvas.width;
-            for (let i = boxes.length - 1; i >= 0; i--) {
-                const b = boxes[i];
+        function isEventOnRightCanvas(e) {
+            if (!CONFIG.hasRightPage || !els.rightCanvas) return false;
+            const rect = els.rightCanvas.getBoundingClientRect();
+            const cx = e.touches ? e.touches[0].clientX : e.clientX;
+            const cy = e.touches ? e.touches[0].clientY : e.clientY;
+            return cx >= rect.left && cx <= rect.right && cy >= rect.top && cy <= rect.bottom;
+        }
+
+        function hitTest(x, y, boxArray = boxes, canvas = els.canvas) {
+            const pad = 30 / canvas.width;
+            for (let i = boxArray.length - 1; i >= 0; i--) {
+                const b = boxArray[i];
                 for (let k of ['tl', 'tr', 'bl', 'br']) {
                     if (Math.hypot(b[k].x - x, b[k].y - y) < pad) {
                         return { type: 'corner', index: i, corner: k };
@@ -947,40 +1224,62 @@
         }
 
         function onDown(e) {
-            if (e.target.closest('#box-toolbar')) return;
+            if (e.target.closest('#box-toolbar') || e.target.closest('.box-toolbar-secondary')) return;
             e.preventDefault();
-            const { x, y } = getPos(e);
-            
+
+            // Determine which pane is being interacted with
+            const onRight = isEventOnRightCanvas(e);
+            activePane = onRight ? 'right' : 'left';
+            const currentCanvas = onRight ? els.rightCanvas : els.canvas;
+            const currentBoxes = onRight ? boxesRight : boxes;
+
+            const { x, y } = getPos(e, currentCanvas);
+
             updateMagnifierState(x, y, true);
 
-            const hit = hitTest(x, y);
+            const hit = hitTest(x, y, currentBoxes, currentCanvas);
             if (hit) {
-                dragTarget = hit;
-                selectedBoxIndex = hit.index;
-                startPositions = JSON.parse(JSON.stringify(boxes[hit.index]));
+                dragTarget = { ...hit, pane: activePane };
+                if (onRight) {
+                    selectedBoxIndexRight = hit.index;
+                    selectedBoxIndex = -1;
+                    startPositions = JSON.parse(JSON.stringify(boxesRight[hit.index]));
+                } else {
+                    selectedBoxIndex = hit.index;
+                    selectedBoxIndexRight = -1;
+                    startPositions = JSON.parse(JSON.stringify(boxes[hit.index]));
+                }
                 startX = x;
                 startY = y;
                 updateToolbar();
                 updateStitchButton();
             } else {
-                selectedBoxIndex = -1;
-                els.toolbar.style.display = 'none';
+                if (onRight) {
+                    selectedBoxIndexRight = -1;
+                    if (els.rightToolbar) els.rightToolbar.style.display = 'none';
+                } else {
+                    selectedBoxIndex = -1;
+                    els.toolbar.style.display = 'none';
+                }
                 isDrawing = true;
                 startX = x;
                 startY = y;
             }
             drawBoxes();
+            if (CONFIG.hasRightPage) drawBoxesRight();
         }
 
         function onMove(e) {
             if (isDrawing || dragTarget) {
                 e.preventDefault();
-                const { x, y } = getPos(e);
+                const currentCanvas = activePane === 'right' ? els.rightCanvas : els.canvas;
+                const { x, y } = getPos(e, currentCanvas);
                 updateMagnifierState(x, y, true);
-                
+
                 const dx = x - startX, dy = y - startY;
                 if (dragTarget) {
-                    const b = boxes[dragTarget.index];
+                    const currentBoxes = dragTarget.pane === 'right' ? boxesRight : boxes;
+                    const b = currentBoxes[dragTarget.index];
                     if (dragTarget.type === 'corner') {
                         b[dragTarget.corner].x = x;
                         b[dragTarget.corner].y = y;
@@ -991,13 +1290,18 @@
                         });
                     }
                     drawBoxes();
+                    if (CONFIG.hasRightPage) drawBoxesRight();
                     updateToolbar();
                 } else if (isDrawing) {
                     drawBoxes();
-                    const sx = startX * els.canvas.width, sy = startY * els.canvas.height;
-                    const w = (x - startX) * els.canvas.width, h = (y - startY) * els.canvas.height;
-                    els.ctx.strokeStyle = 'rgba(255, 77, 77, 0.5)';
-                    els.ctx.strokeRect(sx, sy, w, h);
+                    if (CONFIG.hasRightPage) drawBoxesRight();
+                    const ctx = activePane === 'right' ? els.rightCtx : els.ctx;
+                    const canvasWidth = activePane === 'right' ? els.rightCanvas.width : els.canvas.width;
+                    const canvasHeight = activePane === 'right' ? els.rightCanvas.height : els.canvas.height;
+                    const sx = startX * canvasWidth, sy = startY * canvasHeight;
+                    const w = (x - startX) * canvasWidth, h = (y - startY) * canvasHeight;
+                    ctx.strokeStyle = 'rgba(255, 77, 77, 0.5)';
+                    ctx.strokeRect(sx, sy, w, h);
                 }
             }
         }
@@ -1006,13 +1310,15 @@
             updateMagnifierState(0, 0, false);
 
             if (isDrawing) {
-                const rect = els.canvas.getBoundingClientRect();
+                const currentCanvas = activePane === 'right' ? els.rightCanvas : els.canvas;
+                const currentBoxes = activePane === 'right' ? boxesRight : boxes;
+                const rect = currentCanvas.getBoundingClientRect();
                 const cx = e.changedTouches ? e.changedTouches[0].clientX : e.clientX;
                 const cy = e.changedTouches ? e.changedTouches[0].clientY : e.clientY;
                 let endX = Math.max(0, Math.min(1, (cx - rect.left) / rect.width));
                 let endY = Math.max(0, Math.min(1, (cy - rect.top) / rect.height));
-                if (Math.abs(endX - startX) * els.canvas.width > 20) {
-                    boxes.push({
+                if (Math.abs(endX - startX) * currentCanvas.width > 20) {
+                    currentBoxes.push({
                         id: Date.now(),
                         tl: { x: Math.min(startX, endX), y: Math.min(startY, endY) },
                         tr: { x: Math.max(startX, endX), y: Math.min(startY, endY) },
@@ -1020,13 +1326,19 @@
                         br: { x: Math.max(startX, endX), y: Math.max(startY, endY) },
                         remote_stitch_source: null
                     });
-                    selectedBoxIndex = boxes.length - 1;
+                    if (activePane === 'right') {
+                        selectedBoxIndexRight = boxesRight.length - 1;
+                    } else {
+                        selectedBoxIndex = boxes.length - 1;
+                    }
                 }
             }
             isDrawing = false;
             dragTarget = null;
             saveBoxes();
+            if (CONFIG.hasRightPage) saveBoxesRight();
             drawBoxes();
+            if (CONFIG.hasRightPage) drawBoxesRight();
             updateToolbar();
             updateStitchButton();
         }
@@ -1035,6 +1347,13 @@
         function setupListeners() {
             els.canvas.addEventListener('mousedown', onDown);
             els.canvas.addEventListener('touchstart', onDown, { passive: false });
+
+            // Add listeners for right canvas in two-page mode
+            if (CONFIG.hasRightPage && els.rightCanvas) {
+                els.rightCanvas.addEventListener('mousedown', onDown);
+                els.rightCanvas.addEventListener('touchstart', onDown, { passive: false });
+            }
+
             document.addEventListener('mousemove', onMove);
             document.addEventListener('touchmove', onMove, { passive: false });
             document.addEventListener('mouseup', onUp);
@@ -1045,27 +1364,53 @@
             };
             
             document.getElementById('clearBtn').onclick = () => {
-                if (confirm("Clear all boxes?")) {
+                const msg = CONFIG.twoPageMode ? "Clear all boxes on both pages?" : "Clear all boxes?";
+                if (confirm(msg)) {
                     boxes = [];
                     selectedBoxIndex = -1;
                     saveBoxes();
                     drawBoxes();
                     els.toolbar.style.display = 'none';
+
+                    if (CONFIG.hasRightPage) {
+                        boxesRight = [];
+                        selectedBoxIndexRight = -1;
+                        saveBoxesRight();
+                        drawBoxesRight();
+                        if (els.rightToolbar) els.rightToolbar.style.display = 'none';
+                    }
                 }
             };
             
             document.getElementById('delete-btn').onclick = (e) => {
                 e.stopPropagation();
-                boxes.splice(selectedBoxIndex, 1);
-                selectedBoxIndex = -1;
-                els.toolbar.style.display = 'none';
-                saveBoxes();
-                drawBoxes();
+                if (activePane === 'right' && selectedBoxIndexRight > -1 && CONFIG.hasRightPage) {
+                    boxesRight.splice(selectedBoxIndexRight, 1);
+                    selectedBoxIndexRight = -1;
+                    if (els.rightToolbar) els.rightToolbar.style.display = 'none';
+                    saveBoxesRight();
+                    drawBoxesRight();
+                } else {
+                    boxes.splice(selectedBoxIndex, 1);
+                    selectedBoxIndex = -1;
+                    els.toolbar.style.display = 'none';
+                    saveBoxes();
+                    drawBoxes();
+                }
             };
-            
+
             document.getElementById('move-up-btn').onclick = (e) => {
                 e.stopPropagation();
-                if (selectedBoxIndex < boxes.length - 1) {
+                if (activePane === 'right' && selectedBoxIndexRight > -1 && CONFIG.hasRightPage) {
+                    if (selectedBoxIndexRight < boxesRight.length - 1) {
+                        const b = boxesRight.splice(selectedBoxIndexRight, 1)[0];
+                        boxesRight.splice(selectedBoxIndexRight + 1, 0, b);
+                        selectedBoxIndexRight++;
+                        saveBoxesRight();
+                        drawBoxesRight();
+                        updateToolbar();
+                    }
+                } else if (selectedBoxIndex < boxes.length - 1) {
                     const b = boxes.splice(selectedBoxIndex, 1)[0];
                     boxes.splice(selectedBoxIndex + 1, 0, b);
                     selectedBoxIndex++;
@@ -1074,10 +1419,19 @@
                     updateToolbar();
                 }
             };
-            
+
             document.getElementById('move-down-btn').onclick = (e) => {
                 e.stopPropagation();
-                if (selectedBoxIndex > 0) {
+                if (activePane === 'right' && selectedBoxIndexRight > -1 && CONFIG.hasRightPage) {
+                    if (selectedBoxIndexRight > 0) {
+                        const b = boxesRight.splice(selectedBoxIndexRight, 1)[0];
+                        boxesRight.splice(selectedBoxIndexRight - 1, 0, b);
+                        selectedBoxIndexRight--;
+                        saveBoxesRight();
+                        drawBoxesRight();
+                        updateToolbar();
+                    }
+                } else if (selectedBoxIndex > 0) {
                     const b = boxes.splice(selectedBoxIndex, 1)[0];
                     boxes.splice(selectedBoxIndex - 1, 0, b);
                     selectedBoxIndex--;
@@ -1086,10 +1440,48 @@
                     updateToolbar();
                 }
             };
-            
+
             document.getElementById('stitch-btn').onclick = handleStitch;
             document.getElementById('processBtn').onclick = processPage;
 
+            // Setup listeners for right page toolbar buttons
+            if (CONFIG.hasRightPage) {
+                document.getElementById('delete-btn-right').onclick = (e) => {
+                    e.stopPropagation();
+                    boxesRight.splice(selectedBoxIndexRight, 1);
+                    selectedBoxIndexRight = -1;
+                    els.rightToolbar.style.display = 'none';
+                    saveBoxesRight();
+                    drawBoxesRight();
+                };
+
+                document.getElementById('move-up-btn-right').onclick = (e) => {
+                    e.stopPropagation();
+                    if (selectedBoxIndexRight < boxesRight.length - 1) {
+                        const b = boxesRight.splice(selectedBoxIndexRight, 1)[0];
+                        boxesRight.splice(selectedBoxIndexRight + 1, 0, b);
+                        selectedBoxIndexRight++;
+                        saveBoxesRight();
+                        drawBoxesRight();
+                        updateToolbar();
+                    }
+                };
+
+                document.getElementById('move-down-btn-right').onclick = (e) => {
+                    e.stopPropagation();
+                    if (selectedBoxIndexRight > 0) {
+                        const b = boxesRight.splice(selectedBoxIndexRight, 1)[0];
+                        boxesRight.splice(selectedBoxIndexRight - 1, 0, b);
+                        selectedBoxIndexRight--;
+                        saveBoxesRight();
+                        drawBoxesRight();
+                        updateToolbar();
+                    }
+                };
+
+                document.getElementById('stitch-btn-right').onclick = handleStitch;
+            }
+
             // Data Entry
             document.getElementById('dataToggle').onclick = () => {
                 const panel = document.getElementById('dataPanel');
@@ -1114,10 +1506,13 @@
                 'box-marked': 'marked_solution',
                 'box-actual': 'actual_solution'
             };
-            
+
             Object.keys(dataFields).forEach(id => {
                 document.getElementById(id).addEventListener('input', (e) => {
-                    if (selectedBoxIndex > -1) {
+                    if (activePane === 'right' && selectedBoxIndexRight > -1 && CONFIG.hasRightPage) {
+                        boxesRight[selectedBoxIndexRight][dataFields[id]] = e.target.value;
+                        saveBoxesRight();
+                    } else if (selectedBoxIndex > -1) {
                         boxes[selectedBoxIndex][dataFields[id]] = e.target.value;
                         saveBoxes();
                     }
@@ -1203,16 +1598,23 @@
         }
 
         function updateDataPanel() {
-            const b = selectedBoxIndex > -1 ? boxes[selectedBoxIndex] : null;
+            // Get the selected box from either pane
+            let b = null;
+            if (activePane === 'right' && selectedBoxIndexRight > -1 && CONFIG.hasRightPage) {
+                b = boxesRight[selectedBoxIndexRight];
+            } else if (selectedBoxIndex > -1) {
+                b = boxes[selectedBoxIndex];
+            }
+
             const msg = document.getElementById('no-selection-msg');
             const form = document.getElementById('data-form');
-            
+
             if (!b) {
                 if (msg) msg.style.display = 'block';
                 if (form) form.style.display = 'none';
                 return;
             }
-            
+
             if (msg) msg.style.display = 'none';
             if (form) form.style.display = 'block';
 
@@ -1224,29 +1626,59 @@
 
         function updateToolbar() {
             updateDataPanel();
-            if (selectedBoxIndex === -1) {
+
+            // Handle left toolbar
+            if (selectedBoxIndex === -1 || activePane !== 'left') {
                 els.toolbar.classList.remove('show');
                 setTimeout(() => { if (!els.toolbar.classList.contains('show')) els.toolbar.style.display = 'none'; }, 200);
-                return;
+            } else {
+                const b = boxes[selectedBoxIndex];
+                const p = (pt) => ({ x: pt.x * els.canvas.width, y: pt.y * els.canvas.height });
+                const maxX = Math.max(p(b.tr).x, p(b.br).x);
+                const minY = Math.min(p(b.tl).y, p(b.tr).y);
+                let left = maxX - 180;
+                if (left < 0) left = 0;
+                let top = minY + 10;
+                els.toolbar.style.left = `${left}px`;
+                els.toolbar.style.top = `${top}px`;
+                els.toolbar.style.display = 'flex';
+                requestAnimationFrame(() => els.toolbar.classList.add('show'));
+            }
+
+            // Handle right toolbar
+            if (CONFIG.hasRightPage && els.rightToolbar) {
+                if (selectedBoxIndexRight === -1 || activePane !== 'right') {
+                    els.rightToolbar.classList.remove('show');
+                    setTimeout(() => { if (!els.rightToolbar.classList.contains('show')) els.rightToolbar.style.display = 'none'; }, 200);
+                } else {
+                    const b = boxesRight[selectedBoxIndexRight];
+                    const p = (pt) => ({ x: pt.x * els.rightCanvas.width, y: pt.y * els.rightCanvas.height });
+                    const maxX = Math.max(p(b.tr).x, p(b.br).x);
+                    const minY = Math.min(p(b.tl).y, p(b.tr).y);
+                    let left = maxX - 180;
+                    if (left < 0) left = 0;
+                    let top = minY + 10;
+                    els.rightToolbar.style.left = `${left}px`;
+                    els.rightToolbar.style.top = `${top}px`;
+                    els.rightToolbar.style.display = 'flex';
+                    requestAnimationFrame(() => els.rightToolbar.classList.add('show'));
+                }
             }
-            const b = boxes[selectedBoxIndex];
-            const p = (pt) => ({ x: pt.x * els.canvas.width, y: pt.y * els.canvas.height });
-            const maxX = Math.max(p(b.tr).x, p(b.br).x);
-            const minY = Math.min(p(b.tl).y, p(b.tr).y);
-            let left = maxX - 180;
-            if (left < 0) left = 0;
-            let top = minY + 10;
-            els.toolbar.style.left = `${left}px`;
-            els.toolbar.style.top = `${top}px`;
-            els.toolbar.style.display = 'flex';
-            requestAnimationFrame(() => els.toolbar.classList.add('show'));
         }
 
         function updateStitchButton() {
             const btn = document.getElementById('stitch-btn');
             const icon = btn.querySelector('i');
             const isBuffer = stitchBuffer && stitchBuffer.session_id === CONFIG.sessionId;
-            const isStitched = selectedBoxIndex > -1 && boxes[selectedBoxIndex]?.remote_stitch_source;
+
+            // Check if current selection is stitched (either left or right page)
+            let isStitched = false;
+            if (activePane === 'right' && selectedBoxIndexRight > -1 && CONFIG.hasRightPage) {
+                isStitched = boxesRight[selectedBoxIndexRight]?.remote_stitch_source;
+            } else if (selectedBoxIndex > -1) {
+                isStitched = boxes[selectedBoxIndex]?.remote_stitch_source;
+            }
+
             if (isBuffer) {
                 icon.className = 'bi bi-link-45deg';
                 btn.style.color = '#0dcaf0';
@@ -1257,12 +1689,48 @@
                 icon.className = 'bi bi-scissors';
                 btn.style.color = '#e9ecef';
             }
+
+            // Update right stitch button too if present
+            if (CONFIG.hasRightPage) {
+                const btnRight = document.getElementById('stitch-btn-right');
+                if (btnRight) {
+                    const iconRight = btnRight.querySelector('i');
+                    const isStitchedRight = selectedBoxIndexRight > -1 && boxesRight[selectedBoxIndexRight]?.remote_stitch_source;
+                    if (isBuffer) {
+                        iconRight.className = 'bi bi-link-45deg';
+                        btnRight.style.color = '#0dcaf0';
+                    } else if (isStitchedRight) {
+                        iconRight.className = 'bi bi-x-lg';
+                        btnRight.style.color = '#dc3545';
+                    } else {
+                        iconRight.className = 'bi bi-scissors';
+                        btnRight.style.color = '#e9ecef';
+                    }
+                }
+            }
         }
 
         function handleStitch(e) {
             e.stopPropagation();
-            if (selectedBoxIndex === -1) return;
-            const b = boxes[selectedBoxIndex];
+
+            // Determine which box is selected
+            let b, currentBoxes, currentPageIndex, saveFunc, drawFunc;
+            if (activePane === 'right' && selectedBoxIndexRight > -1 && CONFIG.hasRightPage) {
+                b = boxesRight[selectedBoxIndexRight];
+                currentBoxes = boxesRight;
+                currentPageIndex = CONFIG.rightPageIndex;
+                saveFunc = saveBoxesRight;
+                drawFunc = drawBoxesRight;
+            } else if (selectedBoxIndex > -1) {
+                b = boxes[selectedBoxIndex];
+                currentBoxes = boxes;
+                currentPageIndex = CONFIG.leftPageIndex;
+                saveFunc = saveBoxes;
+                drawFunc = drawBoxes;
+            } else {
+                return;
+            }
+
             if (stitchBuffer && stitchBuffer.session_id === CONFIG.sessionId) {
                 b.remote_stitch_source = {
                     page_index: stitchBuffer.page_index,
@@ -1280,15 +1748,16 @@
                 const cleanBox = { ...b, x: minX, y: minY, w: maxX - minX, h: maxY - minY };
                 stitchBuffer = {
                     session_id: CONFIG.sessionId,
-                    page_index: CONFIG.imageIndex,
+                    page_index: currentPageIndex,
                     box: cleanBox
                 };
                 localStorage.setItem('gemini_stitch_buffer', JSON.stringify(stitchBuffer));
                 toast('Copied!');
             }
-            saveBoxes();
+            saveFunc();
             updateStitchButton();
             drawBoxes();
+            if (CONFIG.hasRightPage) drawBoxesRight();
         }
 
         function toast(msg) {
@@ -1300,51 +1769,90 @@
         }
 
         async function processPage() {
-            if (!boxes.length) {
+            const hasLeftBoxes = boxes.length > 0;
+            const hasRightBoxes = CONFIG.hasRightPage && boxesRight.length > 0;
+
+            if (!hasLeftBoxes && !hasRightBoxes) {
                 // Show non-intrusive toast and continue
-                toast('Skipping page...');
+                toast('Skipping page(s)...');
                 await new Promise(r => setTimeout(r, 300)); // Brief delay for toast visibility
             }
 
-            ProgressBar.show(0.3);
+            ProgressBar.show(0.2);
             document.getElementById('loader-overlay').style.display = 'flex';
-            
-            const finalBoxes = boxes.map(b => ({
-                ...b,
-                x: Math.min(b.tl.x, b.bl.x),
-                y: Math.min(b.tl.y, b.tr.y),
-                w: Math.max(b.tr.x, b.br.x) - Math.min(b.tl.x, b.bl.x),
-                h: Math.max(b.bl.y, b.br.y) - Math.min(b.tl.y, b.tr.y)
-            }));
-            
-            const cv = document.createElement('canvas');
-            cv.width = els.image.naturalWidth;
-            cv.height = els.image.naturalHeight;
-            const c = cv.getContext('2d');
-            c.filter = els.image.style.filter;
-            c.drawImage(els.image, 0, 0);
-            
-            ProgressBar.update(0.5);
-            
+
             try {
-                const res = await fetch('/process_crop_v2', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        session_id: CONFIG.sessionId,
-                        image_index: CONFIG.imageIndex,
-                        boxes: finalBoxes,
-                        imageData: cv.toDataURL('image/jpeg', 0.85)
-                    })
-                });
-                
-                if (!res.ok) throw new Error(await res.text());
-                
+                // Process left page
+                if (hasLeftBoxes || !CONFIG.twoPageMode) {
+                    const finalBoxes = boxes.map(b => ({
+                        ...b,
+                        x: Math.min(b.tl.x, b.bl.x),
+                        y: Math.min(b.tl.y, b.tr.y),
+                        w: Math.max(b.tr.x, b.br.x) - Math.min(b.tl.x, b.bl.x),
+                        h: Math.max(b.bl.y, b.br.y) - Math.min(b.tl.y, b.tr.y)
+                    }));
+
+                    const cv = document.createElement('canvas');
+                    cv.width = els.image.naturalWidth;
+                    cv.height = els.image.naturalHeight;
+                    const c = cv.getContext('2d');
+                    c.filter = els.image.style.filter;
+                    c.drawImage(els.image, 0, 0);
+
+                    ProgressBar.update(0.4);
+
+                    const res = await fetch('/process_crop_v2', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            session_id: CONFIG.sessionId,
+                            image_index: CONFIG.leftPageIndex,
+                            boxes: finalBoxes,
+                            imageData: cv.toDataURL('image/jpeg', 0.85)
+                        })
+                    });
+
+                    if (!res.ok) throw new Error(await res.text());
+                }
+
+                ProgressBar.update(0.6);
+
+                // Process right page if in two-page mode
+                if (CONFIG.hasRightPage && (hasRightBoxes || CONFIG.twoPageMode)) {
+                    const finalBoxesRight = boxesRight.map(b => ({
+                        ...b,
+                        x: Math.min(b.tl.x, b.bl.x),
+                        y: Math.min(b.tl.y, b.tr.y),
+                        w: Math.max(b.tr.x, b.br.x) - Math.min(b.tl.x, b.bl.x),
+                        h: Math.max(b.bl.y, b.br.y) - Math.min(b.tl.y, b.tr.y)
+                    }));
+
+                    const cvRight = document.createElement('canvas');
+                    cvRight.width = els.rightImage.naturalWidth;
+                    cvRight.height = els.rightImage.naturalHeight;
+                    const cRight = cvRight.getContext('2d');
+                    cRight.filter = els.rightImage.style.filter;
+                    cRight.drawImage(els.rightImage, 0, 0);
+
+                    const resRight = await fetch('/process_crop_v2', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            session_id: CONFIG.sessionId,
+                            image_index: CONFIG.rightPageIndex,
+                            boxes: finalBoxesRight,
+                            imageData: cvRight.toDataURL('image/jpeg', 0.85)
+                        })
+                    });
+
+                    if (!resRight.ok) throw new Error(await resRight.text());
+                }
+
                 ProgressBar.update(1);
                 setTimeout(() => {
                     const next = CONFIG.imageIndex + 1;
-                    location.href = next < CONFIG.totalPages 
-                        ? `/cropv2/${CONFIG.sessionId}/${next}` 
+                    location.href = next < CONFIG.totalPages
+                        ? `/cropv2/${CONFIG.sessionId}/${next}`
                         : `/question_entry_v2/${CONFIG.sessionId}`;
                 }, 200);
             } catch (e) {
@@ -1357,7 +1865,13 @@
         function saveBoxes() {
             localStorage.setItem(storageKey, JSON.stringify(boxes));
         }
-        
+
+        function saveBoxesRight() {
+            if (storageKeyRight) {
+                localStorage.setItem(storageKeyRight, JSON.stringify(boxesRight));
+            }
+        }
+
         function loadBoxes() {
             try {
                 const s = localStorage.getItem(storageKey);
@@ -1375,17 +1889,45 @@
             } catch (e) {}
         }
 
+        function loadBoxesRight() {
+            if (!storageKeyRight) return;
+            try {
+                const s = localStorage.getItem(storageKeyRight);
+                if (s) {
+                    boxesRight = JSON.parse(s).map(b => b.tl ? b : {
+                        id: b.id || Date.now(),
+                        tl: { x: b.x, y: b.y },
+                        tr: { x: b.x + b.w, y: b.y },
+                        bl: { x: b.x, y: b.y + b.h },
+                        br: { x: b.x + b.w, y: b.y + b.h },
+                        remote_stitch_source: b.remote_stitch_source
+                    });
+                    drawBoxesRight();
+                }
+            } catch (e) {}
+        }
+
         function updateFilters() {
             const b = document.getElementById('brightness').value;
             const c = document.getElementById('contrast').value;
             const g = document.getElementById('gamma').value;
-            
+
             document.getElementById('val-b').innerText = b;
             document.getElementById('val-c').innerText = c;
             document.getElementById('val-g').innerText = g;
-            
-            els.image.style.filter = `brightness(${100 + parseFloat(b)}%) contrast(${c})`;
-            els.magnifier.style.filter = els.image.style.filter;
+
+            const filterValue = `brightness(${100 + parseFloat(b)}%) contrast(${c})`;
+            els.image.style.filter = filterValue;
+            els.magnifier.style.filter = filterValue;
+
+            // Apply filters to right page in two-page mode
+            if (CONFIG.hasRightPage && els.rightImage) {
+                els.rightImage.style.filter = filterValue;
+                if (els.rightMagnifier) {
+                    els.rightMagnifier.style.filter = filterValue;
+                }
+            }
+
             localStorage.setItem('pdfFilters', JSON.stringify({ b, c, g }));
         }
         

templates/question_entry_v2.html

@@ -100,77 +100,6 @@
         background: var(--border-subtle);
     }
 
-    /* Notes Modal Styles */
-    #notes-canvas-body {
-        height: calc(100vh - 140px);
-    }
-    #question-reference-panel {
-        min-width: 200px;
-        max-width: 300px;
-    }
-    #notes-canvas-container {
-        height: 100%;
-        background: #f8f9fa;
-        border: 1px solid var(--border-subtle);
-        overflow: hidden;
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        touch-action: none;
-    }
-    #notes-canvas-container canvas {
-        touch-action: none;
-    }
-    @media (max-width: 768px) {
-        #question-reference-panel {
-            display: none !important;
-        }
-    }
-    .notes-toolbar {
-        display: flex;
-        gap: 8px;
-        padding: 12px 16px;
-        background: linear-gradient(180deg, var(--bg-card), var(--bg-dark));
-        border-bottom: 1px solid var(--border-subtle);
-        flex-wrap: wrap;
-        align-items: center;
-    }
-    .notes-toolbar .tool-group {
-        display: flex;
-        gap: 4px;
-        padding: 0 8px;
-        border-right: 1px solid var(--border-subtle);
-    }
-    .notes-toolbar .tool-group:last-child {
-        border-right: none;
-    }
-    .notes-toolbar .btn {
-        min-width: 40px;
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 8px;
-        transition: all var(--transition-fast);
-    }
-    .notes-toolbar .btn:hover {
-        transform: translateY(-2px);
-    }
-    .notes-toolbar .btn.active {
-        box-shadow: 0 0 10px rgba(255,255,255,0.3);
-    }
-    .color-swatch {
-        width: 28px;
-        height: 28px;
-        border-radius: 50%;
-        cursor: pointer;
-        border: 2px solid transparent;
-        transition: all var(--transition-fast);
-    }
-    .color-swatch:hover { transform: scale(1.1); }
-    .color-swatch.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 10px rgba(255,255,255,0.5); }
-
     /* --- UNIFIED NOTE CARD STYLES --- */
     .note-card {
         background: linear-gradient(135deg, rgba(13, 202, 240, 0.08), rgba(13, 202, 240, 0.15));
@@ -283,10 +212,11 @@
                     </legend>
                     <div class="col-md-3 mb-3 text-center">
                         <img src="/image/processed/{{ session_id }}/{{ image.processed_filename }}" class="img-fluid rounded mb-2" alt="Cropped Question {{ loop.index }}">
-                        {% if image.note_filename %}
+                        {% if image.note_json %}
                         <div class="note-card">
-                            <div class="position-relative">
-                                <img src="/processed/{{ image.note_filename }}" class="img-fluid note-thumbnail" alt="Note">
+                            <div class="d-flex align-items-center justify-content-center gap-2 py-2 text-success">
+                                <i class="bi bi-check-circle-fill"></i>
+                                <span class="small">Notes saved</span>
                             </div>
                             <div class="note-actions flex-wrap justify-content-center">
                                 <div class="form-check form-switch include-pdf-toggle">
@@ -295,7 +225,7 @@
                                            onchange="toggleNoteInPdf('{{ image.id }}', this.checked)">
                                     <label class="form-check-label small" for="include_note_{{ image.id }}">In PDF</label>
                                 </div>
-                                <button type="button" class="btn btn-sm btn-outline-info btn-pill" onclick="openNotesModal('{{ image.id }}', '/image/processed/{{ session_id }}/{{ image.processed_filename }}', '{{ image.note_filename }}')" title="Edit Note">
+                                <button type="button" class="btn btn-sm btn-outline-info btn-pill" onclick="openNotesModal('{{ image.id }}', '/image/processed/{{ session_id }}/{{ image.processed_filename }}')" title="Edit Note">
                                     <i class="bi bi-pencil"></i>
                                 </button>
                                 <button type="button" class="btn btn-sm btn-outline-danger btn-pill" onclick="deleteNote('{{ image.id }}')" title="Delete Note">
@@ -304,7 +234,7 @@
                             </div>
                         </div>
                         {% else %}
-                        <button type="button" class="btn btn-sm btn-outline-info btn-pill w-100" onclick="openNotesModal('{{ image.id }}', '/image/processed/{{ session_id }}/{{ image.processed_filename }}', '')">
+                        <button type="button" class="btn btn-sm btn-outline-info btn-pill w-100" onclick="openNotesModal('{{ image.id }}', '/image/processed/{{ session_id }}/{{ image.processed_filename }}')">
                             <i class="bi bi-pencil-square me-1"></i>Add Revision Notes
                         </button>
                         {% endif %}
@@ -451,108 +381,8 @@
                 </div>
             </div>
 
-            <!-- Notes Modal -->
-            <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 text-white">
-                        <div class="modal-header py-2 border-secondary" style="background: linear-gradient(180deg, var(--bg-card), var(--bg-dark));">
-                            <h5 class="modal-title"><i class="bi bi-pencil-fill me-2"></i>Add Revision Notes</h5>
-                            <div class="d-flex gap-2">
-                                <button class="btn btn-success btn-pill px-3" onclick="saveNotes()">
-                                    <i class="bi bi-check-lg me-1"></i>Save Notes
-                                </button>
-                                <button type="button" class="btn btn-outline-secondary btn-pill" data-bs-dismiss="modal">
-                                    <i class="bi bi-x-lg me-1"></i>Cancel
-                                </button>
-                            </div>
-                        </div>
-                        <div class="notes-toolbar">
-                            <!-- Drawing Tools -->
-                            <div class="tool-group">
-                                <button class="btn btn-outline-light active" id="tool-pencil" onclick="setTool('pencil')" title="Pencil (P)">
-                                    <i class="bi bi-pencil"></i>
-                                </button>
-                                <button class="btn btn-outline-light" id="tool-highlighter" onclick="setTool('highlighter')" title="Highlighter (H)">
-                                    <i class="bi bi-highlighter"></i>
-                                </button>
-                                <button class="btn btn-outline-light" id="tool-select" onclick="setTool('select')" title="Select (S)">
-                                    <i class="bi bi-cursor"></i>
-                                </button>
-                            </div>
-
-                            <!-- Colors -->
-                            <div class="tool-group">
-                                <div class="color-swatch active" style="background: #000000;" data-color="#000000" onclick="setColor('#000000')" title="Black"></div>
-                                <div class="color-swatch" style="background: #dc3545;" data-color="#dc3545" onclick="setColor('#dc3545')" title="Red"></div>
-                                <div class="color-swatch" style="background: #0d6efd;" data-color="#0d6efd" onclick="setColor('#0d6efd')" title="Blue"></div>
-                                <div class="color-swatch" style="background: #198754;" data-color="#198754" onclick="setColor('#198754')" title="Green"></div>
-                                <div class="color-swatch" style="background: #ffc107;" data-color="#ffc107" onclick="setColor('#ffc107')" title="Yellow"></div>
-                                <div class="color-swatch" style="background: #6f42c1;" data-color="#6f42c1" onclick="setColor('#6f42c1')" title="Purple"></div>
-                            </div>
-
-                            <!-- Brush Size -->
-                            <div class="tool-group">
-                                <label class="text-muted small me-1 d-flex align-items-center">Size:</label>
-                                <input type="range" class="form-range" style="width: 80px;" min="1" max="30" value="3" id="brush-size" oninput="setBrushSize(this.value)">
-                                <span class="text-white small ms-1" id="brush-size-val">3</span>
-                            </div>
-
-                            <!-- Shapes -->
-                            <div class="tool-group">
-                                <button class="btn btn-outline-light" onclick="addShape('rect')" title="Rectangle">
-                                    <i class="bi bi-square"></i>
-                                </button>
-                                <button class="btn btn-outline-light" onclick="addShape('circle')" title="Circle">
-                                    <i class="bi bi-circle"></i>
-                                </button>
-                                <button class="btn btn-outline-light" onclick="addShape('arrow')" title="Arrow">
-                                    <i class="bi bi-arrow-up-right"></i>
-                                </button>
-                                <button class="btn btn-outline-light" onclick="addText()" title="Add Text (T)">
-                                    <i class="bi bi-fonts"></i>
-                                </button>
-                            </div>
-
-                            <!-- Actions -->
-                            <div class="tool-group">
-                                <button class="btn btn-outline-warning" onclick="undoCanvas()" title="Undo (Ctrl+Z)">
-                                    <i class="bi bi-arrow-counterclockwise"></i>
-                                </button>
-                                <button class="btn btn-outline-warning" onclick="redoCanvas()" title="Redo (Ctrl+Y)">
-                                    <i class="bi bi-arrow-clockwise"></i>
-                                </button>
-                                <button class="btn btn-outline-danger" onclick="deleteSelected()" title="Delete Selected (Del)">
-                                    <i class="bi bi-trash"></i>
-                                </button>
-                                <button class="btn btn-outline-danger" onclick="clearCanvas()" title="Clear All">
-                                    <i class="bi bi-x-circle"></i>
-                                </button>
-                            </div>
-
-                            <!-- Pen Only Mode -->
-                            <div class="tool-group border-0">
-                                <div class="form-check form-switch">
-                                    <input class="form-check-input" type="checkbox" id="pen-only-mode" onchange="togglePenOnly()">
-                                    <label class="form-check-label small" for="pen-only-mode">Stylus Only</label>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="modal-body p-0 d-flex" id="notes-canvas-body">
-                            <!-- Question Reference Panel -->
-                            <div id="question-reference-panel" class="bg-secondary" style="width: 250px; flex-shrink: 0; overflow: auto; border-right: 2px solid #495057;">
-                                <div class="p-2 text-center">
-                                    <small class="text-white-50">Question Reference</small>
-                                    <img id="notes-question-ref" src="" class="img-fluid rounded mt-2" style="max-height: 80vh; object-fit: contain;" alt="Question">
-                                </div>
-                            </div>
-                            <!-- Canvas Area -->
-                            <div id="notes-canvas-container" style="flex: 1;">
-                                <canvas id="notes-canvas"></canvas>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <!-- Revision Notes Modal (from partial) -->
+            {% include '_revision_notes.html' %}
 
             <div class="accordion mt-4" id="misc-accordion">
                 <div class="accordion-item bg-dark">
@@ -758,16 +588,6 @@
     const sessionId = '{{ session_id }}';
     let answerKeyData = new Map();
     let miscellaneousQuestions = [];
-    
-    // Canvas Variables
-    let canvas;
-    let currentNoteImageId = null;
-    let penColor = '#000000';
-    let penWidth = 3;
-    let isPenOnly = false;
-    let canvasHistory = [];
-    let historyIndex = -1;
-    let isHistoryAction = false;
 
     async function initializeTomSelect() {
         try {
@@ -795,377 +615,6 @@
             console.error('Error initializing Tom Select:', err);
         }
     }
-    
-    // --- CANVAS FUNCTIONS ---
-    let currentQuestionImageUrl = null;
-
-    function openNotesModal(imageId, imageUrl, existingNoteUrl) {
-        currentNoteImageId = imageId;
-        currentQuestionImageUrl = imageUrl;
-        canvasHistory = [];
-        historyIndex = -1;
-
-        // Set the question reference image
-        document.getElementById('notes-question-ref').src = imageUrl;
-
-        const modal = new bootstrap.Modal(document.getElementById('notesModal'));
-        modal.show();
-
-        document.getElementById('notesModal').addEventListener('shown.bs.modal', function init() {
-            initCanvas(existingNoteUrl);
-            document.getElementById('notesModal').removeEventListener('shown.bs.modal', init);
-        });
-    }
-
-    function initCanvas(existingNoteUrl) {
-        // Dispose existing canvas if any
-        if (canvas) {
-            canvas.dispose();
-        }
-
-        const container = document.getElementById('notes-canvas-container');
-        const maxWidth = container.clientWidth;
-        const maxHeight = container.clientHeight;
-
-        // Create canvas with a blank white background (separate revision notes)
-        canvas = new fabric.Canvas('notes-canvas', {
-            isDrawingMode: true,
-            selection: false,
-            preserveObjectStacking: true,
-            width: maxWidth,
-            height: maxHeight,
-            backgroundColor: '#ffffff'  // White background for handwritten notes
-        });
-
-        // Set initial brush
-        setTool('pencil');
-
-        // Save state after each modification (debounced to avoid too many saves)
-        let saveTimeout;
-        const debouncedSave = () => {
-            clearTimeout(saveTimeout);
-            saveTimeout = setTimeout(saveCanvasState, 100);
-        };
-        canvas.on('path:created', debouncedSave);
-        canvas.on('object:modified', debouncedSave);
-        canvas.on('object:removed', saveCanvasState);
-
-        // Better touch/stylus handling
-        canvas.on('mouse:down', function(opt) {
-            // Palm rejection: disable drawing for touch when stylus-only mode is on
-            if (isPenOnly && opt.e.pointerType !== 'pen') {
-                canvas.isDrawingMode = false;
-            }
-        });
-
-        canvas.on('mouse:up', function(opt) {
-            // Re-enable drawing mode after palm rejection
-            if (isPenOnly) {
-                const tool = document.querySelector('.notes-toolbar .btn.active')?.id;
-                if (tool === 'tool-pencil' || tool === 'tool-highlighter') {
-                    canvas.isDrawingMode = true;
-                }
-            }
-        });
-
-        // Keyboard shortcuts
-        document.addEventListener('keydown', handleCanvasKeyboard);
-
-        // Load existing note if present
-        if (existingNoteUrl) {
-            fabric.Image.fromURL('/processed/' + existingNoteUrl, function(noteImg) {
-                // Scale to fit while maintaining aspect ratio
-                const scale = Math.min(maxWidth / noteImg.width, maxHeight / noteImg.height, 1);
-                noteImg.scale(scale);
-                noteImg.set({
-                    left: (maxWidth - noteImg.width * scale) / 2,
-                    top: (maxHeight - noteImg.height * scale) / 2,
-                    selectable: true,
-                    evented: true
-                });
-                canvas.add(noteImg);
-                canvas.renderAll();
-                saveCanvasState();
-            }, { crossOrigin: 'anonymous' });
-        } else {
-            canvas.renderAll();
-            saveCanvasState();
-        }
-    }
-
-    function handleCanvasKeyboard(e) {
-        if (!document.getElementById('notesModal').classList.contains('show')) return;
-
-        // Ctrl+Z: Undo
-        if (e.ctrlKey && e.key === 'z') {
-            e.preventDefault();
-            undoCanvas();
-            return;
-        }
-
-        // Ctrl+Y: Redo
-        if (e.ctrlKey && e.key === 'y') {
-            e.preventDefault();
-            redoCanvas();
-            return;
-        }
-
-        // Delete/Backspace: Delete selected
-        if (e.key === 'Delete' || e.key === 'Backspace') {
-            if (document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
-                e.preventDefault();
-                deleteSelected();
-            }
-            return;
-        }
-
-        // Tool shortcuts
-        if (e.key === 'p') setTool('pencil');
-        if (e.key === 'h') setTool('highlighter');
-        if (e.key === 's') setTool('select');
-        if (e.key === 't') addText();
-    }
-
-    function saveCanvasState() {
-        if (isHistoryAction) return;
-
-        // Remove any states after current index
-        canvasHistory = canvasHistory.slice(0, historyIndex + 1);
-
-        // Save current state
-        const state = canvas.toJSON(['selectable', 'evented']);
-        canvasHistory.push(state);
-        historyIndex++;
-
-        // Limit history size
-        if (canvasHistory.length > 50) {
-            canvasHistory.shift();
-            historyIndex--;
-        }
-    }
-
-    function undoCanvas() {
-        if (historyIndex <= 0) return;
-
-        isHistoryAction = true;
-        historyIndex--;
-
-        const bg = canvas.backgroundImage;
-        canvas.loadFromJSON(canvasHistory[historyIndex], function() {
-            canvas.setBackgroundImage(bg, canvas.renderAll.bind(canvas));
-            isHistoryAction = false;
-        });
-    }
-
-    function redoCanvas() {
-        if (historyIndex >= canvasHistory.length - 1) return;
-
-        isHistoryAction = true;
-        historyIndex++;
-
-        const bg = canvas.backgroundImage;
-        canvas.loadFromJSON(canvasHistory[historyIndex], function() {
-            canvas.setBackgroundImage(bg, canvas.renderAll.bind(canvas));
-            isHistoryAction = false;
-        });
-    }
-
-    function setTool(tool) {
-        if (!canvas) return;
-
-        document.querySelectorAll('.notes-toolbar .btn').forEach(b => b.classList.remove('active'));
-
-        if (tool === 'pencil') {
-            document.getElementById('tool-pencil').classList.add('active');
-            canvas.isDrawingMode = true;
-            canvas.selection = false;
-            canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
-            canvas.freeDrawingBrush.color = penColor;
-            canvas.freeDrawingBrush.width = parseInt(penWidth, 10);
-        } else if (tool === 'highlighter') {
-            document.getElementById('tool-highlighter').classList.add('active');
-            canvas.isDrawingMode = true;
-            canvas.selection = false;
-            canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
-            // Highlighter: larger, semi-transparent
-            canvas.freeDrawingBrush.color = hexToRgba(penColor, 0.4);
-            canvas.freeDrawingBrush.width = parseInt(penWidth, 10) * 4;
-        } else if (tool === 'select') {
-            document.getElementById('tool-select').classList.add('active');
-            canvas.isDrawingMode = false;
-            canvas.selection = true;
-            // Make all objects selectable
-            canvas.getObjects().forEach(obj => {
-                obj.selectable = true;
-                obj.evented = true;
-            });
-        }
-    }
-
-    function hexToRgba(hex, alpha) {
-        const r = parseInt(hex.slice(1, 3), 16);
-        const g = parseInt(hex.slice(3, 5), 16);
-        const b = parseInt(hex.slice(5, 7), 16);
-        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-    }
-
-    function setColor(color) {
-        penColor = color;
-
-        document.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('active'));
-        document.querySelector(`.color-swatch[data-color="${color}"]`)?.classList.add('active');
-
-        if (canvas && canvas.freeDrawingBrush) {
-            const activeTool = document.querySelector('.notes-toolbar .btn.active')?.id;
-            if (activeTool === 'tool-highlighter') {
-                canvas.freeDrawingBrush.color = hexToRgba(color, 0.4);
-            } else {
-                canvas.freeDrawingBrush.color = color;
-            }
-        }
-    }
-
-    function setBrushSize(size) {
-        penWidth = size;
-        document.getElementById('brush-size-val').textContent = size;
-
-        if (canvas && canvas.freeDrawingBrush) {
-            const activeTool = document.querySelector('.notes-toolbar .btn.active')?.id;
-            if (activeTool === 'tool-highlighter') {
-                canvas.freeDrawingBrush.width = parseInt(size, 10) * 4;
-            } else {
-                canvas.freeDrawingBrush.width = parseInt(size, 10);
-            }
-        }
-    }
-
-    function deleteSelected() {
-        if (!canvas) return;
-        const active = canvas.getActiveObjects();
-        if (active.length > 0) {
-            active.forEach(obj => canvas.remove(obj));
-            canvas.discardActiveObject();
-            canvas.renderAll();
-        }
-    }
-
-    function clearCanvas() {
-        if (!canvas) return;
-        if (confirm("Clear all notes? This cannot be undone.")) {
-            canvas.clear();
-            canvas.backgroundColor = '#ffffff';
-            canvas.renderAll();
-            saveCanvasState();
-        }
-    }
-
-    function addShape(shape) {
-        if (!canvas) return;
-        setTool('select');
-
-        let obj;
-        const centerX = canvas.width / 2 - 50;
-        const centerY = canvas.height / 2 - 50;
-
-        if (shape === 'rect') {
-            obj = new fabric.Rect({
-                left: centerX, top: centerY,
-                fill: 'transparent',
-                stroke: penColor,
-                strokeWidth: parseInt(penWidth, 10),
-                width: 100, height: 60
-            });
-        } else if (shape === 'circle') {
-            obj = new fabric.Circle({
-                left: centerX, top: centerY,
-                fill: 'transparent',
-                stroke: penColor,
-                strokeWidth: parseInt(penWidth, 10),
-                radius: 40
-            });
-        } else if (shape === 'arrow') {
-            // Create an arrow using a line and triangle
-            const line = new fabric.Line([centerX, centerY + 50, centerX + 80, centerY], {
-                stroke: penColor,
-                strokeWidth: parseInt(penWidth, 10),
-                selectable: false
-            });
-            const triangle = new fabric.Triangle({
-                left: centerX + 80, top: centerY - 8,
-                fill: penColor,
-                width: 16, height: 16,
-                angle: 45,
-                selectable: false
-            });
-            obj = new fabric.Group([line, triangle], {
-                left: centerX, top: centerY
-            });
-        }
-
-        if (obj) {
-            canvas.add(obj);
-            canvas.setActiveObject(obj);
-        }
-    }
-
-    function addText() {
-        if (!canvas) return;
-        setTool('select');
-
-        const text = new fabric.IText('Type here...', {
-            left: canvas.width / 2 - 50,
-            top: canvas.height / 2 - 10,
-            fontFamily: 'Arial, sans-serif',
-            fill: penColor,
-            fontSize: 18 + (parseInt(penWidth, 10) * 2)
-        });
-
-        canvas.add(text);
-        canvas.setActiveObject(text);
-        text.selectAll();
-        text.enterEditing();
-    }
-
-    function togglePenOnly() {
-        isPenOnly = document.getElementById('pen-only-mode').checked;
-    }
-
-    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');
-        }
-    }
 
     // --- AUTO-SAVE FUNCTIONALITY ---
     let autoSaveTimeout = null;
@@ -1279,49 +728,6 @@
         autoSaveQuestion(fieldset);
     }
 
-    async function saveNotes() {
-        if (!canvas || !currentNoteImageId) return;
-
-        // Export the entire canvas with white background
-        const dataUrl = canvas.toDataURL({
-            format: 'png',
-            multiplier: 2  // Higher quality
-        });
-
-        // Convert data URL to blob
-        const response = await fetch(dataUrl);
-        const blob = await response.blob();
-
-        const formData = new FormData();
-        formData.append('image', blob, 'note.png');
-        formData.append('image_id', currentNoteImageId);
-        formData.append('session_id', sessionId);
-
-        try {
-            showStatus('Saving notes...', 'info');
-            const res = await fetch('/save_note_image', {
-                method: 'POST',
-                body: formData
-            });
-            const result = await res.json();
-
-            if (result.success) {
-                showStatus('Notes saved!', 'success');
-
-                // Close modal
-                const modal = bootstrap.Modal.getInstance(document.getElementById('notesModal'));
-                modal.hide();
-
-                // Reload page to show updated note
-                location.reload();
-            } else {
-                showStatus('Error saving notes: ' + result.error, 'danger');
-            }
-        } catch (e) {
-            showStatus('Error: ' + e.message, 'danger');
-        }
-    }
-
     function saveSettings() {
         // Session-specific settings
         const sessionSettings = {
@@ -1431,10 +837,18 @@
     }
 
     function setupEventListeners() {
-        document.getElementById('json-upload').addEventListener('change', handleJsonUpload);
-        document.getElementById('images_per_page').addEventListener('change', updateGridDefaults);
-        document.getElementById('orientation').addEventListener('change', updateGridDefaults);
-        document.getElementById('practice_mode').addEventListener('change', handlePracticeModeChange);
+        const jsonUpload = document.getElementById('json-upload');
+        if (jsonUpload) jsonUpload.addEventListener('change', handleJsonUpload);
+
+        const imagesPerPage = document.getElementById('images_per_page');
+        if (imagesPerPage) imagesPerPage.addEventListener('change', updateGridDefaults);
+
+        const orientation = document.getElementById('orientation');
+        if (orientation) orientation.addEventListener('change', updateGridDefaults);
+
+        const practiceMode = document.getElementById('practice_mode');
+        if (practiceMode) practiceMode.addEventListener('change', handlePracticeModeChange);
+
         document.querySelectorAll('input[id^="question_number_"]').forEach(input => {
             input.addEventListener('change', handleQuestionNumberChange);
             input.addEventListener('blur', () => autoSaveQuestion(input.closest('fieldset')));
@@ -1445,8 +859,12 @@
         });
         document.addEventListener('keydown', handleShortcuts);
         document.querySelectorAll('.status-buttons').forEach(setupStatusButtons);
-        document.getElementById('questions-form').addEventListener('submit', handleFormSubmit);
-        document.getElementById('preview-btn').addEventListener('click', handlePreview);
+
+        const questionsForm = document.getElementById('questions-form');
+        if (questionsForm) questionsForm.addEventListener('submit', handleFormSubmit);
+
+        const previewBtn = document.getElementById('preview-btn');
+        if (previewBtn) previewBtn.addEventListener('click', handlePreview);
 
         // Auto-save PDF metadata fields on blur
         ['pdf_subject', 'pdf_tags', 'pdf_notes', 'pdf_name'].forEach(fieldId => {
@@ -1454,28 +872,30 @@
             if (field) field.addEventListener('blur', autoSaveSessionMetadata);
         });
 
-        document.getElementById('add-misc-question').addEventListener('click', handleAddMiscQuestion);
-        
-        document.getElementById('extract-classify-all').addEventListener('click', async () => {
-            const extractBtn = document.getElementById('extract-classify-all');
-            const spinner = extractBtn.querySelector('.spinner-border');
-            const text = extractBtn.querySelector('.extract-text');
-
-            spinner.classList.remove('d-none');
-            text.textContent = 'Processing...';
-            extractBtn.disabled = true;
-
-            // First, save the questions
-            const questions = [];
-            document.querySelectorAll('fieldset[data-question-index]').forEach((fieldset, i) => {
-                questions.push({
-                    image_id: fieldset.querySelector('input[name^="image_id_"]').value,
-                    question_number: fieldset.querySelector('input[name^="question_number_"]').value,
-                    status: fieldset.querySelector('select[name^="status_"]').value,
-                    marked_solution: fieldset.querySelector('input[name^="marked_solution_"]').value,
-                    actual_solution: fieldset.querySelector('input[name^="actual_solution_"]').value
+        const addMiscBtn = document.getElementById('add-misc-question');
+        if (addMiscBtn) addMiscBtn.addEventListener('click', handleAddMiscQuestion);
+
+        const extractBtn = document.getElementById('extract-classify-all');
+        if (extractBtn) {
+            extractBtn.addEventListener('click', async () => {
+                const spinner = extractBtn.querySelector('.spinner-border');
+                const text = extractBtn.querySelector('.extract-text');
+
+                spinner.classList.remove('d-none');
+                text.textContent = 'Processing...';
+                extractBtn.disabled = true;
+
+                // First, save the questions
+                const questions = [];
+                document.querySelectorAll('fieldset[data-question-index]').forEach((fieldset, i) => {
+                    questions.push({
+                        image_id: fieldset.querySelector('input[name^="image_id_"]').value,
+                        question_number: fieldset.querySelector('input[name^="question_number_"]').value,
+                        status: fieldset.querySelector('select[name^="status_"]').value,
+                        marked_solution: fieldset.querySelector('input[name^="marked_solution_"]').value,
+                        actual_solution: fieldset.querySelector('input[name^="actual_solution_"]').value
+                    });
                 });
-            });
 
             try {
                             const saveResponse = await fetch('/save_questions', {
@@ -1513,6 +933,7 @@
                 extractBtn.disabled = false;
             }
         });
+        }
 
         // Add event listeners for auto-extract buttons if NVIDIA NIM is available
         {% if nvidia_nim_available %}
@@ -1523,9 +944,10 @@
                 autoExtractQuestionNumber(this, imageId, index);
             });
         });
-        
+
         // Add event listener for auto-extract all button
-        document.getElementById('auto-extract-all').addEventListener('click', autoExtractAllQuestionNumbers);
+        const autoExtractAllBtn = document.getElementById('auto-extract-all');
+        if (autoExtractAllBtn) autoExtractAllBtn.addEventListener('click', autoExtractAllQuestionNumbers);
         
         // Add event listeners for delete buttons
         document.querySelectorAll('.delete-question-btn').forEach(button => {

templates/settings.html

@@ -118,6 +118,28 @@
                             </div>
                         </fieldset>
                         <hr>
+                        <fieldset>
+                            <legend class="h5 mb-3"><i class="bi bi-layout-split me-2"></i>Crop View Settings</legend>
+                            <div class="mb-3 form-check form-switch">
+                                <input type="checkbox" class="form-check-input" id="two_page_crop" name="two_page_crop" {% if current_user.two_page_crop %}checked{% endif %}>
+                                <label class="form-check-label" for="two_page_crop">
+                                    Enable Two-Page Layout
+                                </label>
+                                <div class="form-text">
+                                    Show two pages side by side in the crop view (pages 0-1, 2-3, etc.). Useful for scanned books or documents with facing pages.
+                                </div>
+                            </div>
+                            <div class="mb-3 form-check form-switch">
+                                <input type="checkbox" class="form-check-input" id="magnifier_enabled" name="magnifier_enabled" {% if current_user.magnifier_enabled %}checked{% endif %}>
+                                <label class="form-check-label" for="magnifier_enabled">
+                                    Enable Magnifier Lens
+                                </label>
+                                <div class="form-text">
+                                    Show a magnifying lens when drawing crop boxes for precise selection.
+                                </div>
+                            </div>
+                        </fieldset>
+                        <hr>
                         <button type="submit" class="btn btn-primary btn-pill btn-lg px-4">
                             <i class="bi bi-check-lg me-1"></i>Save Settings
                         </button>

user_auth.py

@@ -5,7 +5,7 @@ from utils import get_db_connection
 
 class User(UserMixin):
     """User model for Flask-Login."""
-    def __init__(self, id, username, email, password_hash, neetprep_enabled, dpi, color_rm_dpi, v2_default=0, magnifier_enabled=1, google_token=None, classifier_model='gemini'):
+    def __init__(self, id, username, email, password_hash, neetprep_enabled, dpi, color_rm_dpi, v2_default=0, magnifier_enabled=1, two_page_crop=0, google_token=None, classifier_model='gemini'):
         self.id = id
         self.username = username
         self.email = email
@@ -15,6 +15,7 @@ class User(UserMixin):
         self.color_rm_dpi = color_rm_dpi
         self.v2_default = v2_default
         self.magnifier_enabled = magnifier_enabled
+        self.two_page_crop = two_page_crop
         self.google_token = google_token
         self.classifier_model = classifier_model
 
@@ -26,15 +27,16 @@ class User(UserMixin):
         if user_row:
             user_data = dict(user_row)
             return User(
-                user_data['id'], 
-                user_data['username'], 
-                user_data['email'], 
-                user_data['password_hash'], 
-                user_data['neetprep_enabled'], 
-                user_data['dpi'], 
+                user_data['id'],
+                user_data['username'],
+                user_data['email'],
+                user_data['password_hash'],
+                user_data['neetprep_enabled'],
+                user_data['dpi'],
                 user_data.get('color_rm_dpi', 200),
                 user_data.get('v2_default', 0),
                 user_data.get('magnifier_enabled', 1),
+                user_data.get('two_page_crop', 0),
                 user_data.get('google_token'),
                 user_data.get('classifier_model', 'gemini')
             )
@@ -48,15 +50,16 @@ class User(UserMixin):
         if user_row:
             user_data = dict(user_row)
             return User(
-                user_data['id'], 
-                user_data['username'], 
-                user_data['email'], 
-                user_data['password_hash'], 
-                user_data['neetprep_enabled'], 
-                user_data['dpi'], 
+                user_data['id'],
+                user_data['username'],
+                user_data['email'],
+                user_data['password_hash'],
+                user_data['neetprep_enabled'],
+                user_data['dpi'],
                 user_data.get('color_rm_dpi', 200),
                 user_data.get('v2_default', 0),
                 user_data.get('magnifier_enabled', 1),
+                user_data.get('two_page_crop', 0),
                 user_data.get('google_token'),
                 user_data.get('classifier_model', 'gemini')
             )