Upload 10 files

src/views/InstructorView.js

@@ -2187,223 +2187,92 @@ export function setupInstructorEvents() {
                 aiAnalyzeBtn.classList.remove('animate-pulse');
             }
         });
+        if (!localStorage.getItem('vibecoding_gemini_key')) {
+            alert("請先設定 Gemini API Key");
+            return;
+        }
+        // 1. Open the list
+        window.openPromptList('challenge', challengeId, challengeTitle);
 
-        if (submissions.length === 0) throw new Error("無有效作品");
-
-        // Get Challenge Description
-        const challenge = cachedChallenges.find(c => c.id === window.currentViewingChallengeId);
-        const desc = challenge ? challenge.description : '';
-
-        // Dynamic Import
-        const { initGemini, evaluatePrompts } = await import("../services/gemini.js");
-        // Ensure AI is initialized with the stored key
-        const geminiKey = localStorage.getItem('vibecoding_gemini_key');
-        await initGemini(geminiKey);
-        const results = await evaluatePrompts(submissions, desc);
-
-        // Apply Results to UI (Badges)
-        // Results: { rough: [ids], brave: [ids], ... }
-
-        // Map categories to badges
-        const BadgeMap = {
-            rough: { icon: '💎', color: 'text-blue-400', label: '原石' },
-            precise: { icon: '🎯', color: 'text-green-400', label: '精確' },
-            gentle: { icon: '🤝', color: 'text-pink-400', label: '有禮' },
-            creative: { icon: '🦄', color: 'text-purple-400', label: '創意' },
-            spam: { icon: '🗑️', color: 'text-gray-500', label: '無效' },
-            parrot: { icon: '🦜', color: 'text-yellow-400', label: '鸚鵡' },
-            cheater: { icon: '⚠️', color: 'text-red-500', label: '疑似作弊' }
-        };
-
-        // Iterate cards in DOM
-        const container = document.getElementById('prompt-list-container');
-        const cards = container.querySelectorAll('.group'); // Cards have 'group' class
-
-        // Reset previous badges
-        document.querySelectorAll('.ai-badge').forEach(e => e.remove());
-
-        // Build summary for display
-        let summaryHtml = '<div class="space-y-3">';
-        const categoryOrder = ['creative', 'precise', 'rough', 'gentle', 'parrot', 'spam'];
-
-        // Get student names for display
-        const getStudentName = (userId) => {
-            const student = currentStudents.find(s => s.id === userId);
-            return student?.nickname || student?.displayName || userId.slice(0, 6);
-        };
-
-        categoryOrder.forEach(cat => {
-            const idsRaw = results[cat];
-            if (!idsRaw || idsRaw.length === 0) return;
-
-            // Clean IDs (remove "ID_" prefix if present)
-            const ids = idsRaw.map(id => id.replace(/^ID_/, ''));
-
-            const badge = BadgeMap[cat];
-            if (!badge) return;
-
-            const names = ids.map(id => getStudentName(id)).join(', ');
-            summaryHtml += `
-                                            <div class="p-3 rounded-lg bg-gray-800 border border-gray-700">
-                                                <div class="flex items-center gap-2 mb-1">
-                                                    <span class="text-xl">${badge.icon}</span>
-                                                    <span class="${badge.color} font-bold">${badge.label}</span>
-                                                    <span class="text-gray-400 text-sm">(${ids.length}人)</span>
-                                                </div>
-                                                <div class="text-gray-300 text-sm">${names}</div>
-                                            </div>
-                                        `;
-        });
-        summaryHtml += '</div>';
-
-        // Apply badges to cards
-        cards.forEach(card => {
-            const checkbox = card.querySelector('input[type="checkbox"]');
-            if (!checkbox) return;
-
-            // data-id is "studentId_challengeId"
-            const fullId = checkbox.dataset.id;
-            const studentId = fullId.split('_')[0]; // Simple split
-
-            // Find which category this student falls into
-            let matchedCategory = null;
-            for (const [cat, idsRaw] of Object.entries(results)) {
-                const ids = idsRaw?.map(id => id.replace(/^ID_/, '')) || [];
-                if (ids.includes(studentId)) {
-                    matchedCategory = cat;
-                    break;
-                }
+        // 2. Trigger analysis logic automatically after slight delay (to ensure DOM render)
+        setTimeout(() => {
+            const btn = document.getElementById('btn-ai-analyze');
+            if (btn && !btn.disabled) {
+                btn.click();
+            } else {
+                console.warn("AI Analyze button not found or disabled");
             }
+        }, 300);
+    };
 
-            if (matchedCategory && BadgeMap[matchedCategory]) {
-                const badge = BadgeMap[matchedCategory];
-                const badgeEl = document.createElement('div');
-                badgeEl.className = `ai-badge absolute top-2 right-12 px-2 py-0.5 rounded border border-gray-600 bg-gray-900 ${badge.color} text-xs font-bold flex items-center shadow-lg transform scale-100 animate-pulse`;
-                badgeEl.innerHTML = `${badge.icon} ${badge.label}`;
-                card.style.position = 'relative'; // Ensure absolute positioning works
-                card.appendChild(badgeEl);
-
-                // If spam/parrot, border red
-                if (matchedCategory === 'spam' || matchedCategory === 'parrot') {
-                    card.classList.add('border-red-500');
-                }
+    let isAnonymous = false;
+
+    window.toggleAnonymous = (btn) => {
+        isAnonymous = !isAnonymous;
+        btn.textContent = isAnonymous ? '🙈 顯示姓名' : '👀 隱藏姓名';
+        btn.classList.toggle('bg-gray-700');
+        btn.classList.toggle('bg-purple-700');
+
+        // Update DOM
+        document.querySelectorAll('.comparison-author').forEach(el => {
+            if (isAnonymous) {
+                el.dataset.original = el.textContent;
+                el.textContent = '學員';
+                el.classList.add('blur-sm'); // Optional Effect
+                setTimeout(() => el.classList.remove('blur-sm'), 300);
+            } else {
+                if (el.dataset.original) el.textContent = el.dataset.original;
             }
         });
+    };
 
-        // Show summary modal
-        const existingSummaryModal = document.getElementById('ai-summary-modal');
-        if (existingSummaryModal) existingSummaryModal.remove();
-
-        const summaryModal = document.createElement('div');
-        summaryModal.id = 'ai-summary-modal';
-        summaryModal.className = 'fixed inset-0 bg-black/80 flex items-center justify-center z-[100] p-4';
-        summaryModal.innerHTML = `
-                                        <div class="bg-gray-900 border border-cyan-500/50 rounded-xl p-6 max-w-md w-full shadow-2xl">
-                                            <h3 class="text-xl font-bold text-cyan-400 mb-4 flex items-center gap-2">
-                                                ✨ AI 分析結果
-                                            </h3>
-                                            <div class="max-h-[60vh] overflow-y-auto">
-                                                ${summaryHtml || '<p class="text-gray-400">沒有特別的分類結果</p>'}
-                                            </div>
-                                            <button id="close-ai-summary" class="mt-4 w-full py-2 bg-cyan-600 hover:bg-cyan-500 text-white rounded-lg font-bold transition-colors">
-                                                確定
-                                            </button>
-                                        </div>
-                                    `;
-        document.body.appendChild(summaryModal);
-
-        document.getElementById('close-ai-summary').onclick = () => summaryModal.remove();
-
-
-
-        // Direct Heatmap AI Analysis Link
-        window.analyzeChallenge = (challengeId, challengeTitle) => {
-            if (!localStorage.getItem('vibecoding_gemini_key')) {
-                alert("請先設定 Gemini API Key");
-                return;
-            }
-            // 1. Open the list
-            window.openPromptList('challenge', challengeId, challengeTitle);
-
-            // 2. Trigger analysis logic automatically after slight delay (to ensure DOM render)
-            setTimeout(() => {
-                const btn = document.getElementById('btn-ai-analyze');
-                if (btn && !btn.disabled) {
-                    btn.click();
-                } else {
-                    console.warn("AI Analyze button not found or disabled");
-                }
-            }, 300);
-        };
-
-        let isAnonymous = false;
-
-        window.toggleAnonymous = (btn) => {
-            isAnonymous = !isAnonymous;
-            btn.textContent = isAnonymous ? '🙈 顯示姓名' : '👀 隱藏姓名';
-            btn.classList.toggle('bg-gray-700');
-            btn.classList.toggle('bg-purple-700');
-
-            // Update DOM
-            document.querySelectorAll('.comparison-author').forEach(el => {
-                if (isAnonymous) {
-                    el.dataset.original = el.textContent;
-                    el.textContent = '學員';
-                    el.classList.add('blur-sm'); // Optional Effect
-                    setTimeout(() => el.classList.remove('blur-sm'), 300);
-                } else {
-                    if (el.dataset.original) el.textContent = el.dataset.original;
-                }
-            });
-        };
-
-        window.openComparisonView = (items, initialAnonymous = false) => {
-            const modal = document.getElementById('comparison-modal');
-            const grid = document.getElementById('comparison-grid');
+    window.openComparisonView = (items, initialAnonymous = false) => {
+        const modal = document.getElementById('comparison-modal');
+        const grid = document.getElementById('comparison-grid');
 
-            // Apply Anonymous State
-            isAnonymous = initialAnonymous;
-            const anonBtn = document.getElementById('btn-anonymous-toggle');
+        // Apply Anonymous State
+        isAnonymous = initialAnonymous;
+        const anonBtn = document.getElementById('btn-anonymous-toggle');
 
-            // Update Toggle UI to match state
-            if (anonBtn) {
-                if (isAnonymous) {
-                    anonBtn.textContent = '🙈 顯示姓名';
-                    anonBtn.classList.add('bg-purple-700');
-                    anonBtn.classList.remove('bg-gray-700');
-                } else {
-                    anonBtn.textContent = '👀 隱藏姓名';
-                    anonBtn.classList.remove('bg-purple-700');
-                    anonBtn.classList.add('bg-gray-700');
-                }
+        // Update Toggle UI to match state
+        if (anonBtn) {
+            if (isAnonymous) {
+                anonBtn.textContent = '🙈 顯示姓名';
+                anonBtn.classList.add('bg-purple-700');
+                anonBtn.classList.remove('bg-gray-700');
+            } else {
+                anonBtn.textContent = '👀 隱藏姓名';
+                anonBtn.classList.remove('bg-purple-700');
+                anonBtn.classList.add('bg-gray-700');
             }
+        }
 
-            // Setup Grid Rows (Vertical Stacking)
-            let rowClass = 'grid-rows-1';
-            if (items.length === 2) rowClass = 'grid-rows-2';
-            if (items.length === 3) rowClass = 'grid-rows-3';
-
-            grid.className = `absolute inset-0 grid ${rowClass} gap-0 divide-y divide-gray-600`;
-            grid.innerHTML = '';
-
-            items.forEach(item => {
-                const col = document.createElement('div');
-                // Check overflow-hidden to keep it contained, use flex-row for compact header + content
-                col.className = 'flex flex-row h-full bg-gray-900 p-4 overflow-hidden';
-
-                // Logic for anonymous
-                let displayAuthor = item.author;
-                let blurClass = '';
-
-                if (isAnonymous) {
-                    displayAuthor = '學員';
-                    blurClass = 'blur-sm'; // Initial blur
-                    // Auto remove blur after delay if needed, or keep it? 
-                    // Toggle logic removes it after delay. But initial render should probably just be static '學員' or blurred.
-                    // The toggle logic uses dataset.original. We need to set it here too.
-                }
+        // Setup Grid Rows (Vertical Stacking)
+        let rowClass = 'grid-rows-1';
+        if (items.length === 2) rowClass = 'grid-rows-2';
+        if (items.length === 3) rowClass = 'grid-rows-3';
+
+        grid.className = `absolute inset-0 grid ${rowClass} gap-0 divide-y divide-gray-600`;
+        grid.innerHTML = '';
+
+        items.forEach(item => {
+            const col = document.createElement('div');
+            // Check overflow-hidden to keep it contained, use flex-row for compact header + content
+            col.className = 'flex flex-row h-full bg-gray-900 p-4 overflow-hidden';
+
+            // Logic for anonymous
+            let displayAuthor = item.author;
+            let blurClass = '';
+
+            if (isAnonymous) {
+                displayAuthor = '學員';
+                blurClass = 'blur-sm'; // Initial blur
+                // Auto remove blur after delay if needed, or keep it? 
+                // Toggle logic removes it after delay. But initial render should probably just be static '學員' or blurred.
+                // The toggle logic uses dataset.original. We need to set it here too.
+            }
 
-                col.innerHTML = `
+            col.innerHTML = `
             <div class="w-48 flex-shrink-0 border-r border-gray-700 pr-4 mr-4 flex flex-col justify-center">
                 <h3 class="text-xl font-bold text-cyan-400 mb-1 comparison-author ${blurClass}" data-original="${item.author}">${displayAuthor}</h3>
                 <p class="text-md text-gray-400 truncate" title="${item.title}">${item.title}</p>
@@ -2412,222 +2281,222 @@ export function setupInstructorEvents() {
             <!-- Prompt Content: Larger Text (text-4xl) -->
             <div class="flex-1 overflow-y-auto font-mono text-green-300 text-3xl leading-relaxed whitespace-pre-wrap p-2 hover:bg-white/5 transition-colors rounded custom-scrollbar text-left" style="text-align: left !important;">${cleanText(item.prompt)}</div>
             `;
-                grid.appendChild(col);
-
-                // If blurred, remove blur after animation purely for effect, or keep?
-                // User intention "Hidden Name" usually means "Replaced by generic name".
-                // The blur effect in toggle logic was transient.
-                // If we want persistent anonymity, just "學員" is enough.
-                // The existing toggle logic adds 'blur-sm' then removes it in 300ms.
-                // We should replicate that effect if we want consistency, or just skip blur on init.
-                if (isAnonymous) {
-                    const el = col.querySelector('.comparison-author');
-                    setTimeout(() => el.classList.remove('blur-sm'), 300);
-                }
-            });
+            grid.appendChild(col);
+
+            // If blurred, remove blur after animation purely for effect, or keep?
+            // User intention "Hidden Name" usually means "Replaced by generic name".
+            // The blur effect in toggle logic was transient.
+            // If we want persistent anonymity, just "學員" is enough.
+            // The existing toggle logic adds 'blur-sm' then removes it in 300ms.
+            // We should replicate that effect if we want consistency, or just skip blur on init.
+            if (isAnonymous) {
+                const el = col.querySelector('.comparison-author');
+                setTimeout(() => el.classList.remove('blur-sm'), 300);
+            }
+        });
+
+        document.getElementById('prompt-list-modal').classList.add('hidden');
+        modal.classList.remove('hidden');
 
-            document.getElementById('prompt-list-modal').classList.add('hidden');
-            modal.classList.remove('hidden');
+        // Init Canvas (Phase 3)
+        setTimeout(setupCanvas, 100);
+    };
 
-            // Init Canvas (Phase 3)
-            setTimeout(setupCanvas, 100);
-        };
+    window.closeComparison = () => {
+        document.getElementById('comparison-modal').classList.add('hidden');
+        clearCanvas();
+    };
 
-        window.closeComparison = () => {
-            document.getElementById('comparison-modal').classList.add('hidden');
-            clearCanvas();
+    // --- Phase 3 & 6: Annotation Tools ---
+    let canvas, ctx;
+    let isDrawing = false;
+    let currentPenColor = '#ef4444'; // Red default
+    let currentLineWidth = 3;
+    let currentMode = 'source-over'; // 'source-over' (Pen) or 'destination-out' (Eraser)
+
+    window.setupCanvas = () => {
+        canvas = document.getElementById('annotation-canvas');
+        const container = document.getElementById('comparison-container');
+        if (!canvas || !container) return;
+
+        ctx = canvas.getContext('2d');
+
+        // Resize
+        const resize = () => {
+            canvas.width = container.clientWidth;
+            canvas.height = container.clientHeight;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            ctx.strokeStyle = currentPenColor;
+            ctx.lineWidth = currentLineWidth;
+            ctx.globalCompositeOperation = currentMode;
         };
+        resize();
+        window.addEventListener('resize', resize);
+
+        // Init Size UI & Cursor
+        updateSizeBtnUI();
+        updateCursorStyle();
+
+        // Cursor Logic
+        const cursor = document.getElementById('tool-cursor');
+
+        canvas.addEventListener('mouseenter', () => cursor.classList.remove('hidden'));
+        canvas.addEventListener('mouseleave', () => cursor.classList.add('hidden'));
+        canvas.addEventListener('mousemove', (e) => {
+            const { x, y } = getPos(e);
+            cursor.style.left = `${x}px`;
+            cursor.style.top = `${y}px`;
+        });
 
-        // --- Phase 3 & 6: Annotation Tools ---
-        let canvas, ctx;
-        let isDrawing = false;
-        let currentPenColor = '#ef4444'; // Red default
-        let currentLineWidth = 3;
-        let currentMode = 'source-over'; // 'source-over' (Pen) or 'destination-out' (Eraser)
-
-        window.setupCanvas = () => {
-            canvas = document.getElementById('annotation-canvas');
-            const container = document.getElementById('comparison-container');
-            if (!canvas || !container) return;
-
-            ctx = canvas.getContext('2d');
-
-            // Resize
-            const resize = () => {
-                canvas.width = container.clientWidth;
-                canvas.height = container.clientHeight;
-                ctx.lineCap = 'round';
-                ctx.lineJoin = 'round';
-                ctx.strokeStyle = currentPenColor;
-                ctx.lineWidth = currentLineWidth;
-                ctx.globalCompositeOperation = currentMode;
-            };
-            resize();
-            window.addEventListener('resize', resize);
-
-            // Init Size UI & Cursor
-            updateSizeBtnUI();
-            updateCursorStyle();
-
-            // Cursor Logic
-            const cursor = document.getElementById('tool-cursor');
-
-            canvas.addEventListener('mouseenter', () => cursor.classList.remove('hidden'));
-            canvas.addEventListener('mouseleave', () => cursor.classList.add('hidden'));
-            canvas.addEventListener('mousemove', (e) => {
-                const { x, y } = getPos(e);
-                cursor.style.left = `${x}px`;
-                cursor.style.top = `${y}px`;
-            });
+        // Drawing Events
+        const start = (e) => {
+            isDrawing = true;
+            ctx.beginPath();
 
-            // Drawing Events
-            const start = (e) => {
-                isDrawing = true;
-                ctx.beginPath();
-
-                // Re-apply settings (state might change)
-                ctx.globalCompositeOperation = currentMode;
-                ctx.strokeStyle = currentPenColor;
-                ctx.lineWidth = currentLineWidth;
-
-                const { x, y } = getPos(e);
-                ctx.moveTo(x, y);
-            };
-
-            const move = (e) => {
-                if (!isDrawing) return;
-                const { x, y } = getPos(e);
-                ctx.lineTo(x, y);
-                ctx.stroke();
-            };
-
-            const end = () => {
-                isDrawing = false;
-            };
-
-            canvas.onmousedown = start;
-            canvas.onmousemove = move;
-            canvas.onmouseup = end;
-            canvas.onmouseleave = end;
-
-            // Touch support
-            canvas.ontouchstart = (e) => { e.preventDefault(); start(e.touches[0]); };
-            canvas.ontouchmove = (e) => { e.preventDefault(); move(e.touches[0]); };
-            canvas.ontouchend = (e) => { e.preventDefault(); end(); };
-        };
+            // Re-apply settings (state might change)
+            ctx.globalCompositeOperation = currentMode;
+            ctx.strokeStyle = currentPenColor;
+            ctx.lineWidth = currentLineWidth;
 
-        function getPos(e) {
-            const rect = canvas.getBoundingClientRect();
-            return {
-                x: e.clientX - rect.left,
-                y: e.clientY - rect.top
-            };
-        }
+            const { x, y } = getPos(e);
+            ctx.moveTo(x, y);
+        };
 
-        // Unified Tool Handler
-        window.setPenTool = (tool, color, btn) => {
-            // UI Update
-            document.querySelectorAll('.annotation-tool').forEach(b => {
-                b.classList.remove('ring-white');
-                b.classList.add('ring-transparent');
-            });
-            btn.classList.remove('ring-transparent');
-            btn.classList.add('ring-white');
-
-            if (tool === 'eraser') {
-                currentMode = 'destination-out';
-                // Force larger eraser size (e.g., 3x current size or fixed large)
-                // We'll multiply current selected size by 4 for better UX
-                const multiplier = 4;
-                // Store original explicitly if needed, but currentLineWidth is global. 
-                // We should dynamically adjust context lineWidth during draw, or just hack it here.
-                // Hack: If we change currentLineWidth here, the UI size buttons might look wrong.
-                // Better: Update cursor style only? No, actual draw needs it.
-                // Let's set a separate 'actualWidth' used in draw, OR just change currentLineWidth temporarily?
-                // Simpler: Just change it. When user clicks size button, it resets.
-                // But if user clicks Pen back? We need to restore.
-                // Let's rely on setPenTool being called with color.
-                // When "Pen" is clicked, we usually don't call setPenTool with a saved size...
-                // Actually, let's just use a large default for eraser, and keep currentLineWidth for Pen.
-                // We need to change how draw() uses the width.
-                // BUT, since we don't want to touch draw() deep inside:
-                // We will hijack currentLineWidth.
-                if (!window.savedPenWidth) window.savedPenWidth = currentLineWidth;
-                currentLineWidth = window.savedPenWidth * 4;
-            } else {
-                currentMode = 'source-over';
-                currentPenColor = color;
-                // Restore pen width
-                if (window.savedPenWidth) {
-                    currentLineWidth = window.savedPenWidth;
-                    window.savedPenWidth = null;
-                }
-            }
-            updateCursorStyle();
+        const move = (e) => {
+            if (!isDrawing) return;
+            const { x, y } = getPos(e);
+            ctx.lineTo(x, y);
+            ctx.stroke();
         };
 
-        // Size Handler
-        window.setPenSize = (size, btn) => {
-            currentLineWidth = size;
-            updateSizeBtnUI();
-            updateCursorStyle();
+        const end = () => {
+            isDrawing = false;
         };
 
-        function updateCursorStyle() {
-            const cursor = document.getElementById('tool-cursor');
-            if (!cursor) return;
+        canvas.onmousedown = start;
+        canvas.onmousemove = move;
+        canvas.onmouseup = end;
+        canvas.onmouseleave = end;
 
-            // Size
-            cursor.style.width = `${currentLineWidth}px`;
-            cursor.style.height = `${currentLineWidth}px`;
+        // Touch support
+        canvas.ontouchstart = (e) => { e.preventDefault(); start(e.touches[0]); };
+        canvas.ontouchmove = (e) => { e.preventDefault(); move(e.touches[0]); };
+        canvas.ontouchend = (e) => { e.preventDefault(); end(); };
+    };
 
-            // Color
-            if (currentMode === 'destination-out') {
-                // Eraser: White solid
-                cursor.style.backgroundColor = 'white';
-                cursor.style.borderColor = '#999';
-            } else {
-                // Pen: Tool color
-                cursor.style.backgroundColor = currentPenColor;
-                cursor.style.borderColor = 'rgba(255,255,255,0.8)';
+    function getPos(e) {
+        const rect = canvas.getBoundingClientRect();
+        return {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+        };
+    }
+
+    // Unified Tool Handler
+    window.setPenTool = (tool, color, btn) => {
+        // UI Update
+        document.querySelectorAll('.annotation-tool').forEach(b => {
+            b.classList.remove('ring-white');
+            b.classList.add('ring-transparent');
+        });
+        btn.classList.remove('ring-transparent');
+        btn.classList.add('ring-white');
+
+        if (tool === 'eraser') {
+            currentMode = 'destination-out';
+            // Force larger eraser size (e.g., 3x current size or fixed large)
+            // We'll multiply current selected size by 4 for better UX
+            const multiplier = 4;
+            // Store original explicitly if needed, but currentLineWidth is global. 
+            // We should dynamically adjust context lineWidth during draw, or just hack it here.
+            // Hack: If we change currentLineWidth here, the UI size buttons might look wrong.
+            // Better: Update cursor style only? No, actual draw needs it.
+            // Let's set a separate 'actualWidth' used in draw, OR just change currentLineWidth temporarily?
+            // Simpler: Just change it. When user clicks size button, it resets.
+            // But if user clicks Pen back? We need to restore.
+            // Let's rely on setPenTool being called with color.
+            // When "Pen" is clicked, we usually don't call setPenTool with a saved size...
+            // Actually, let's just use a large default for eraser, and keep currentLineWidth for Pen.
+            // We need to change how draw() uses the width.
+            // BUT, since we don't want to touch draw() deep inside:
+            // We will hijack currentLineWidth.
+            if (!window.savedPenWidth) window.savedPenWidth = currentLineWidth;
+            currentLineWidth = window.savedPenWidth * 4;
+        } else {
+            currentMode = 'source-over';
+            currentPenColor = color;
+            // Restore pen width
+            if (window.savedPenWidth) {
+                currentLineWidth = window.savedPenWidth;
+                window.savedPenWidth = null;
             }
         }
+        updateCursorStyle();
+    };
 
-        function updateSizeBtnUI() {
-            document.querySelectorAll('.size-btn').forEach(b => {
-                if (parseInt(b.dataset.size) === currentLineWidth) {
-                    b.classList.add('bg-gray-600', 'text-white');
-                    b.classList.remove('text-gray-400', 'hover:bg-gray-700');
-                } else {
-                    b.classList.remove('bg-gray-600', 'text-white');
-                    b.classList.add('text-gray-400', 'hover:bg-gray-700');
-                }
-            });
+    // Size Handler
+    window.setPenSize = (size, btn) => {
+        currentLineWidth = size;
+        updateSizeBtnUI();
+        updateCursorStyle();
+    };
+
+    function updateCursorStyle() {
+        const cursor = document.getElementById('tool-cursor');
+        if (!cursor) return;
+
+        // Size
+        cursor.style.width = `${currentLineWidth}px`;
+        cursor.style.height = `${currentLineWidth}px`;
+
+        // Color
+        if (currentMode === 'destination-out') {
+            // Eraser: White solid
+            cursor.style.backgroundColor = 'white';
+            cursor.style.borderColor = '#999';
+        } else {
+            // Pen: Tool color
+            cursor.style.backgroundColor = currentPenColor;
+            cursor.style.borderColor = 'rgba(255,255,255,0.8)';
         }
+    }
 
-        window.clearCanvas = () => {
-            if (canvas && ctx) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
+    function updateSizeBtnUI() {
+        document.querySelectorAll('.size-btn').forEach(b => {
+            if (parseInt(b.dataset.size) === currentLineWidth) {
+                b.classList.add('bg-gray-600', 'text-white');
+                b.classList.remove('text-gray-400', 'hover:bg-gray-700');
+            } else {
+                b.classList.remove('bg-gray-600', 'text-white');
+                b.classList.add('text-gray-400', 'hover:bg-gray-700');
             }
-        };
+        });
+    }
 
-        /**
-         * Renders the Transposed Heatmap (Rows=Challenges, Cols=Students)
-         */
-        function renderTransposedHeatmap(students) {
-            const thead = document.getElementById('heatmap-header');
-            const tbody = document.getElementById('heatmap-body');
+    window.clearCanvas = () => {
+        if (canvas && ctx) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+    };
 
-            if (students.length === 0) {
-                thead.innerHTML = '<th class="p-4 text-left">等待資料...</th>';
-                tbody.innerHTML = '<tr><td class="p-10 text-center text-gray-500">尚無學員加入</td></tr>';
-                return;
-            }
+    /**
+     * Renders the Transposed Heatmap (Rows=Challenges, Cols=Students)
+     */
+    function renderTransposedHeatmap(students) {
+        const thead = document.getElementById('heatmap-header');
+        const tbody = document.getElementById('heatmap-body');
+
+        if (students.length === 0) {
+            thead.innerHTML = '<th class="p-4 text-left">等待資料...</th>';
+            tbody.innerHTML = '<tr><td class="p-10 text-center text-gray-500">尚無學員加入</td></tr>';
+            return;
+        }
 
-            // 1. Render Header (Students)
-            // Sticky Top for Header Row
-            // Sticky Left for the first cell ("Challenge/Student")
-            let headerHtml = `
+        // 1. Render Header (Students)
+        // Sticky Top for Header Row
+        // Sticky Left for the first cell ("Challenge/Student")
+        let headerHtml = `
             <th class="p-3 text-left sticky left-0 top-0 bg-gray-800 z-30 border-b border-gray-600 min-w-[200px] border-r border-gray-700 shadow-md">
                 <div class="flex justify-between items-end">
                     <span class="text-sm text-gray-400">題目</span>
@@ -2636,8 +2505,8 @@ export function setupInstructorEvents() {
             </th>
             `;
 
-            students.forEach(student => {
-                headerHtml += `
+        students.forEach(student => {
+            headerHtml += `
     <th class="p-2 text-center sticky top-0 bg-gray-800 z-20 border-b border-gray-700 min-w-[80px] group">
         <div class="flex flex-col items-center space-y-2 py-2">
             <div class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-700 to-gray-600 flex items-center justify-center text-xs font-bold text-white uppercase border border-gray-500 shadow-sm relative">
@@ -2656,59 +2525,59 @@ export function setupInstructorEvents() {
         </div>
             </th>
     `;
-            });
-            thead.innerHTML = headerHtml;
+        });
+        thead.innerHTML = headerHtml;
 
-            // 2. Render Body (Challenges as Rows)
-            if (cachedChallenges.length === 0) {
-                tbody.innerHTML = '<tr><td colspan="100" class="text-center py-4">沒有題目資料</td></tr>';
-                return;
-            }
+        // 2. Render Body (Challenges as Rows)
+        if (cachedChallenges.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="100" class="text-center py-4">沒有題目資料</td></tr>';
+            return;
+        }
 
-            tbody.innerHTML = cachedChallenges.map((c, index) => {
-                const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
-                const color = colors[c.level] || 'gray';
-
-                // Build Row Cells (One per student)
-                const rowCells = students.map(student => {
-                    const p = student.progress?.[c.id];
-                    let statusClass = 'bg-gray-800/30 border-gray-800'; // Default
-                    let content = '';
-                    let action = '';
-
-                    if (p) {
-                        if (p.status === 'completed') {
-                            statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-pointer shadow-[0_0_10px_rgba(34,197,94,0.1)]';
-                            content = '✅';
-                            // Action restored: Allow direct click to open detailed view
-                            action = `onclick="window.showBroadcastModal('${student.id}', '${c.id}')" title="完成 - 點擊查看詳情"`;
-                        } else if (p.status === 'started') {
-                            // Check stuck
-                            const startedAt = p.timestamp ? p.timestamp.toDate() : new Date();
-                            const now = new Date();
-                            const diffMins = (now - startedAt) / 1000 / 60;
-
-                            if (diffMins > 5) {
-                                statusClass = 'bg-red-900/50 border-red-500 animate-pulse cursor-help';
-                                content = '🆘';
-                            } else {
-                                statusClass = 'bg-blue-600/20 border-blue-500';
-                                content = '🔵';
-                            }
+        tbody.innerHTML = cachedChallenges.map((c, index) => {
+            const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
+            const color = colors[c.level] || 'gray';
+
+            // Build Row Cells (One per student)
+            const rowCells = students.map(student => {
+                const p = student.progress?.[c.id];
+                let statusClass = 'bg-gray-800/30 border-gray-800'; // Default
+                let content = '';
+                let action = '';
+
+                if (p) {
+                    if (p.status === 'completed') {
+                        statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-pointer shadow-[0_0_10px_rgba(34,197,94,0.1)]';
+                        content = '✅';
+                        // Action restored: Allow direct click to open detailed view
+                        action = `onclick="window.showBroadcastModal('${student.id}', '${c.id}')" title="完成 - 點擊查看詳情"`;
+                    } else if (p.status === 'started') {
+                        // Check stuck
+                        const startedAt = p.timestamp ? p.timestamp.toDate() : new Date();
+                        const now = new Date();
+                        const diffMins = (now - startedAt) / 1000 / 60;
+
+                        if (diffMins > 5) {
+                            statusClass = 'bg-red-900/50 border-red-500 animate-pulse cursor-help';
+                            content = '🆘';
+                        } else {
+                            statusClass = 'bg-blue-600/20 border-blue-500';
+                            content = '🔵';
                         }
                     }
+                }
 
-                    return `
+                return `
             <td class="p-1 border border-gray-800/50 text-center align-middle h-14 hover:bg-white/5 transition-colors">
                 <div class="mx-auto w-10 h-10 rounded-lg border flex items-center justify-center ${statusClass} transition-all duration-300" ${action}>
                     ${content}
                 </div>
             </td>
             `;
-                }).join('');
+            }).join('');
 
-                // Row Header (Challenge Title)
-                return `
+            // Row Header (Challenge Title)
+            return `
             <tr class="hover:bg-gray-800/50 transition-colors">
                 <td class="p-3 sticky left-0 bg-gray-900 z-10 border-r border-b border-gray-700 shadow-md">
                     <div class="flex items-center justify-between">
@@ -2728,45 +2597,45 @@ export function setupInstructorEvents() {
                 ${rowCells}
             </tr>
             `;
-            }).join('');
-        }
+        }).join('');
+    }
 
-        // Global scope for HTML access
-        function showBroadcastModal(userId, challengeId) {
-            const student = currentStudents.find(s => s.id === userId);
-            if (!student) return;
-
-            const p = student.progress?.[challengeId];
-            if (!p) return;
-
-            const challenge = cachedChallenges.find(c => c.id === challengeId);
-            const title = challenge ? challenge.title : 'Unknown Challenge'; // Fallback
-
-            const modal = document.getElementById('broadcast-modal');
-            const content = document.getElementById('broadcast-content');
-
-            document.getElementById('broadcast-avatar').textContent = student.nickname[0];
-            document.getElementById('broadcast-author').textContent = student.nickname;
-            document.getElementById('broadcast-challenge').textContent = title;
-            // content is already just text, but let's be safe
-            const rawText = p.prompt || p.code || '';
-            const isCode = !p.prompt && !!p.code; // If only code exists, treat as code
-            document.getElementById('broadcast-prompt').textContent = cleanText(rawText, isCode);
-            document.getElementById('broadcast-prompt').style.textAlign = isCode ? 'left' : 'left'; // Always left, but explicit
-
-            // Store IDs for actions
-            modal.dataset.userId = userId;
-            modal.classList.remove('hidden');
-            // Animation trigger
-            setTimeout(() => {
-                content.classList.remove('scale-95', 'opacity-0');
-                content.classList.add('opacity-100', 'scale-100');
-            }, 10);
-        }
+    // Global scope for HTML access
+    function showBroadcastModal(userId, challengeId) {
+        const student = currentStudents.find(s => s.id === userId);
+        if (!student) return;
+
+        const p = student.progress?.[challengeId];
+        if (!p) return;
+
+        const challenge = cachedChallenges.find(c => c.id === challengeId);
+        const title = challenge ? challenge.title : 'Unknown Challenge'; // Fallback
 
-        // Bind to window
-        window.renderTransposedHeatmap = renderTransposedHeatmap;
-        window.showBroadcastModal = showBroadcastModal;
+        const modal = document.getElementById('broadcast-modal');
+        const content = document.getElementById('broadcast-content');
+
+        document.getElementById('broadcast-avatar').textContent = student.nickname[0];
+        document.getElementById('broadcast-author').textContent = student.nickname;
+        document.getElementById('broadcast-challenge').textContent = title;
+        // content is already just text, but let's be safe
+        const rawText = p.prompt || p.code || '';
+        const isCode = !p.prompt && !!p.code; // If only code exists, treat as code
+        document.getElementById('broadcast-prompt').textContent = cleanText(rawText, isCode);
+        document.getElementById('broadcast-prompt').style.textAlign = isCode ? 'left' : 'left'; // Always left, but explicit
+
+        // Store IDs for actions
+        modal.dataset.userId = userId;
+        modal.classList.remove('hidden');
+        // Animation trigger
+        setTimeout(() => {
+            content.classList.remove('scale-95', 'opacity-0');
+            content.classList.add('opacity-100', 'scale-100');
+        }, 10);
     }
 
+    // Bind to window
+    window.renderTransposedHeatmap = renderTransposedHeatmap;
+    window.showBroadcastModal = showBroadcastModal;
+}
+