Redesign ClassLens v2: 3-step exam analysis workflow

Replace ChatKit-based chat UI with a structured 3-step workflow:
1. Upload & parse exam files (questions, student answers, teacher answers) via GPT Vision
2. Edit analysis prompts with save/load/share functionality
3. Generate and export HTML reports (PDF/PNG)

- Add JWT email/password auth (replace Google OAuth)
- Add file processor with multi-format support (PDF, images, text files)
- Add image-to-text description for visual exam content
- Add model selector (GPT-5.4, 5.3 Instant, 4o, etc.)
- Add per-zone file upload with inline parsed data preview
- Remove ChatKit SDK, Google Sheets, email service dependencies
- Remove .env from tracking (contains API keys)

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

.env

@@ -1,50 +0,0 @@
-# ExamInsight Environment Variables
-# Copy to .env for local development
-# For HF Spaces, add these as Secrets in the Space settings
-
-# =============================================================================
-# REQUIRED
-# =============================================================================
-
-# OpenAI API Key (required for ChatKit)
-OPENAI_API_KEY=sk-your-openai-api-key
-
-# =============================================================================
-# GOOGLE OAUTH (optional - for private Google Sheets)
-# =============================================================================
-
-# Get these from Google Cloud Console > APIs & Services > Credentials
-GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
-GOOGLE_CLIENT_SECRET=GOCSPX-your-client-secret
-
-# Redirect URI - update for production
-# Local: http://localhost:8000/auth/callback
-# HF Spaces: https://taboola-cz-examinsight.hf.space/auth/callback
-GOOGLE_REDIRECT_URI=http://localhost:8000/auth/callback
-
-# =============================================================================
-# EMAIL (optional - for sending reports)
-# =============================================================================
-
-# Option 1: Gmail SMTP (easier setup)
-GMAIL_USER=your-email@gmail.com
-GMAIL_APP_PASSWORD=your-16-char-app-password
-
-# Option 2: SendGrid API
-SENDGRID_API_KEY=SG.your-sendgrid-api-key
-SENDGRID_FROM_EMAIL=examinsight@yourdomain.com
-
-# =============================================================================
-# SECURITY
-# =============================================================================
-
-# Generate with: python -c "from cryptography.fernet import Fernet; print(Fernet.generate_key().decode())"
-ENCRYPTION_KEY=your-fernet-encryption-key
-
-# =============================================================================
-# FRONTEND (for HF Spaces domain key)
-# =============================================================================
-
-# Register your HF Space domain at:
-# https://platform.openai.com/settings/organization/security/domain-allowlist
-VITE_CHATKIT_API_DOMAIN_KEY=domain_pk_your-production-key

.gitignore

@@ -1,3 +1,16 @@
+# Secrets
+.env
+
+# Claude Code
+.claude/
+
+# Python
+__pycache__/
+*.pyc
+*.db
+
+# Node
+node_modules/
 
 # Binary files for HF Spaces
 managed-chatkit/docs/*.jpg

Dockerfile

@@ -1,4 +1,4 @@
-# ExamInsight - Hugging Face Spaces Docker Deployment
+# ClassLens v2 - Hugging Face Spaces Docker Deployment
 # Multi-stage build for React frontend + FastAPI backend
 
 # =============================================================================
@@ -45,9 +45,6 @@ RUN pip install --no-cache-dir --upgrade pip && \
 # Copy backend code
 COPY --chown=user chatkit/backend/app ./app
 
-# Copy report template
-COPY --chown=user report-template.html ./
-
 # Copy built frontend from Stage 1
 COPY --from=frontend-builder --chown=user /app/frontend/dist ./static
 

chatkit/backend/app/auth.py

@@ -0,0 +1,78 @@
+"""Simple email + password JWT authentication for ClassLens."""
+
+from __future__ import annotations
+
+from datetime import datetime, timedelta
+from typing import Optional
+
+from passlib.context import CryptContext
+from jose import JWTError, jwt
+from fastapi import Depends, HTTPException, status
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
+
+from .config import get_settings
+from .database import get_user_by_email, get_user_by_id, create_user, update_last_login
+
+pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
+security = HTTPBearer(auto_error=False)
+
+
+def hash_password(password: str) -> str:
+    return pwd_context.hash(password)
+
+
+def verify_password(plain: str, hashed: str) -> bool:
+    return pwd_context.verify(plain, hashed)
+
+
+def create_access_token(data: dict, expires_delta: Optional[timedelta] = None) -> str:
+    settings = get_settings()
+    to_encode = data.copy()
+    expire = datetime.utcnow() + (expires_delta or timedelta(minutes=settings.jwt_expire_minutes))
+    to_encode.update({"exp": expire})
+    return jwt.encode(to_encode, settings.jwt_secret_key, algorithm=settings.jwt_algorithm)
+
+
+async def get_current_user(
+    credentials: Optional[HTTPAuthorizationCredentials] = Depends(security),
+) -> dict:
+    """FastAPI dependency: extract and validate JWT, return user dict."""
+    if credentials is None:
+        raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="Not authenticated")
+
+    settings = get_settings()
+    try:
+        payload = jwt.decode(
+            credentials.credentials, settings.jwt_secret_key, algorithms=[settings.jwt_algorithm]
+        )
+        user_id: int = payload.get("sub")
+        if user_id is None:
+            raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="Invalid token")
+    except JWTError:
+        raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="Invalid token")
+
+    user = await get_user_by_id(int(user_id))
+    if user is None:
+        raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="User not found")
+    return user
+
+
+async def register_user(email: str, password: str) -> dict:
+    """Register a new user. Returns user dict."""
+    existing = await get_user_by_email(email)
+    if existing:
+        raise HTTPException(status_code=400, detail="Email already registered")
+    hashed = hash_password(password)
+    user_id = await create_user(email, hashed)
+    user = await get_user_by_id(user_id)
+    return user
+
+
+async def login_user(email: str, password: str) -> dict:
+    """Validate credentials and return user dict + JWT token."""
+    user = await get_user_by_email(email)
+    if not user or not verify_password(password, user["password_hash"]):
+        raise HTTPException(status_code=401, detail="Invalid email or password")
+    await update_last_login(user["id"])
+    token = create_access_token({"sub": str(user["id"])})
+    return {"token": token, "user": {"id": user["id"], "email": user["email"], "display_name": user["display_name"]}}

chatkit/backend/app/config.py

@@ -9,35 +9,37 @@ from functools import lru_cache
 from dotenv import load_dotenv
 from pydantic import BaseModel
 
-# Load .env file from the chatkit directory (parent of backend)
-env_path = Path(__file__).parent.parent.parent / ".env"
-load_dotenv(env_path)
+# Load .env file — try project root first, then chatkit/
+_root = Path(__file__).parent.parent.parent.parent  # hf-classlens-deploy/
+_chatkit = Path(__file__).parent.parent.parent       # chatkit/
+load_dotenv(_root / ".env")
+load_dotenv(_chatkit / ".env")  # overrides root if both exist
 
 
 class Settings(BaseModel):
     """Application settings loaded from environment variables."""
-    
-    # OpenAI
+
+    # OpenAI (single key for both vision parsing and report generation)
     openai_api_key: str = ""
-    
-    # Google OAuth
-    google_client_id: str = ""
-    google_client_secret: str = ""
-    google_redirect_uri: str = "http://localhost:8000/auth/callback"
-    
-    # SendGrid
-    sendgrid_api_key: str = ""
-    sendgrid_from_email: str = "classlens@example.com"
-    
+
+    # JWT Auth
+    jwt_secret_key: str = ""
+    jwt_algorithm: str = "HS256"
+    jwt_expire_minutes: int = 1440  # 24 hours
+
     # Database
-    database_url: str = "sqlite+aiosqlite:///./classlens.db"
-    
-    # Encryption key for tokens (32 bytes, base64 encoded)
+    database_path: str = ""  # auto-resolved if empty
+
+    # Encryption key for sensitive data
     encryption_key: str = ""
-    
+
+    # File upload
+    upload_dir: str = ""  # auto-resolved if empty
+    max_file_size_mb: int = 20
+
     # Frontend URL for redirects
     frontend_url: str = "http://localhost:3000"
-    
+
     class Config:
         env_file = ".env"
 
@@ -47,21 +49,12 @@ def get_settings() -> Settings:
     """Get cached settings instance."""
     return Settings(
         openai_api_key=os.getenv("OPENAI_API_KEY", ""),
-        google_client_id=os.getenv("GOOGLE_CLIENT_ID", ""),
-        google_client_secret=os.getenv("GOOGLE_CLIENT_SECRET", ""),
-        google_redirect_uri=os.getenv("GOOGLE_REDIRECT_URI", "http://localhost:8000/auth/callback"),
-        sendgrid_api_key=os.getenv("SENDGRID_API_KEY", ""),
-        sendgrid_from_email=os.getenv("SENDGRID_FROM_EMAIL", "classlens@example.com"),
-        database_url=os.getenv("DATABASE_URL", "sqlite+aiosqlite:///./classlens.db"),
+        jwt_secret_key=os.getenv("JWT_SECRET_KEY", "classlens-dev-secret-change-in-prod"),
+        jwt_algorithm=os.getenv("JWT_ALGORITHM", "HS256"),
+        jwt_expire_minutes=int(os.getenv("JWT_EXPIRE_MINUTES", "1440")),
+        database_path=os.getenv("DATABASE_PATH", ""),
         encryption_key=os.getenv("ENCRYPTION_KEY", ""),
+        upload_dir=os.getenv("UPLOAD_DIR", ""),
+        max_file_size_mb=int(os.getenv("MAX_FILE_SIZE_MB", "20")),
         frontend_url=os.getenv("FRONTEND_URL", "http://localhost:3000"),
     )
-
-
-# Google OAuth scopes required for the application
-# Note: drive.readonly is sensitive scope; spreadsheets.readonly is less restricted
-GOOGLE_SCOPES = [
-    "https://www.googleapis.com/auth/spreadsheets.readonly",
-    "https://www.googleapis.com/auth/userinfo.email",
-    "openid",
-]

chatkit/backend/app/database.py

@@ -1,137 +1,320 @@
-"""SQLite database for token storage."""
+"""SQLite database for ClassLens - users, sessions, parsed data, prompts, reports."""
 
 from __future__ import annotations
 
 import aiosqlite
 import json
-import base64
-import os
 from pathlib import Path
 from datetime import datetime
 from typing import Optional
 
-from cryptography.fernet import Fernet
-
+from .config import get_settings
 
 DATABASE_PATH = Path(__file__).parent.parent / "classlens.db"
 
 
-def get_encryption_key() -> bytes:
-    """Get or generate encryption key."""
-    key = os.getenv("ENCRYPTION_KEY", "")
-    if not key:
-        # Generate a new key for development (should be set in production)
-        key = Fernet.generate_key().decode()
-        print(f"⚠️  No ENCRYPTION_KEY set. Generated temporary key: {key}")
-        print("⚠️  Set this in your .env file for persistent token storage.")
-    return key.encode() if isinstance(key, str) else key
-
+def _get_db_path() -> Path:
+    settings = get_settings()
+    if settings.database_path:
+        return Path(settings.database_path)
+    return DATABASE_PATH
 
-def encrypt_token(token_data: dict) -> str:
-    """Encrypt token data for storage."""
-    key = get_encryption_key()
-    f = Fernet(key)
-    json_data = json.dumps(token_data)
-    encrypted = f.encrypt(json_data.encode())
-    return base64.b64encode(encrypted).decode()
 
+async def init_database():
+    """Initialize the database with required tables."""
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
+        await db.execute("""
+            CREATE TABLE IF NOT EXISTS users (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                email TEXT UNIQUE NOT NULL,
+                password_hash TEXT NOT NULL,
+                display_name TEXT,
+                created_at TEXT NOT NULL,
+                last_login TEXT
+            )
+        """)
 
-def decrypt_token(encrypted_data: str) -> dict:
-    """Decrypt stored token data."""
-    key = get_encryption_key()
-    f = Fernet(key)
-    encrypted = base64.b64decode(encrypted_data.encode())
-    decrypted = f.decrypt(encrypted)
-    return json.loads(decrypted.decode())
+        await db.execute("""
+            CREATE TABLE IF NOT EXISTS exam_sessions (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                user_id INTEGER NOT NULL,
+                title TEXT DEFAULT 'Untitled Session',
+                status TEXT DEFAULT 'draft',
+                created_at TEXT NOT NULL,
+                updated_at TEXT NOT NULL,
+                FOREIGN KEY (user_id) REFERENCES users(id)
+            )
+        """)
 
+        await db.execute("""
+            CREATE TABLE IF NOT EXISTS parsed_data (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                session_id INTEGER NOT NULL,
+                data_type TEXT NOT NULL,
+                file_name TEXT,
+                raw_text TEXT,
+                structured_data TEXT NOT NULL,
+                created_at TEXT NOT NULL,
+                FOREIGN KEY (session_id) REFERENCES exam_sessions(id) ON DELETE CASCADE
+            )
+        """)
 
-async def init_database():
-    """Initialize the database with required tables."""
-    async with aiosqlite.connect(DATABASE_PATH) as db:
         await db.execute("""
-            CREATE TABLE IF NOT EXISTS oauth_tokens (
-                teacher_email TEXT PRIMARY KEY,
-                encrypted_tokens TEXT NOT NULL,
+            CREATE TABLE IF NOT EXISTS prompts (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                user_id INTEGER NOT NULL,
+                name TEXT NOT NULL,
+                content TEXT NOT NULL,
+                is_default BOOLEAN DEFAULT 0,
                 created_at TEXT NOT NULL,
-                updated_at TEXT NOT NULL
+                updated_at TEXT NOT NULL,
+                FOREIGN KEY (user_id) REFERENCES users(id)
             )
         """)
-        
+
         await db.execute("""
-            CREATE TABLE IF NOT EXISTS analysis_reports (
+            CREATE TABLE IF NOT EXISTS reports (
                 id INTEGER PRIMARY KEY AUTOINCREMENT,
-                teacher_email TEXT NOT NULL,
-                exam_title TEXT,
-                report_markdown TEXT,
-                report_json TEXT,
-                created_at TEXT NOT NULL
+                session_id INTEGER NOT NULL,
+                prompt_id INTEGER,
+                html_content TEXT NOT NULL,
+                created_at TEXT NOT NULL,
+                FOREIGN KEY (session_id) REFERENCES exam_sessions(id) ON DELETE CASCADE,
+                FOREIGN KEY (prompt_id) REFERENCES prompts(id)
             )
         """)
-        
+
         await db.commit()
 
 
-async def save_oauth_tokens(teacher_email: str, tokens: dict):
-    """Save encrypted OAuth tokens for a teacher."""
-    encrypted = encrypt_token(tokens)
+# ---- User CRUD ----
+
+async def create_user(email: str, password_hash: str, display_name: str = "") -> int:
+    db_path = _get_db_path()
     now = datetime.utcnow().isoformat()
-    
-    async with aiosqlite.connect(DATABASE_PATH) as db:
-        await db.execute("""
-            INSERT INTO oauth_tokens (teacher_email, encrypted_tokens, created_at, updated_at)
-            VALUES (?, ?, ?, ?)
-            ON CONFLICT(teacher_email) DO UPDATE SET
-                encrypted_tokens = excluded.encrypted_tokens,
-                updated_at = excluded.updated_at
-        """, (teacher_email, encrypted, now, now))
+    async with aiosqlite.connect(db_path) as db:
+        cursor = await db.execute(
+            "INSERT INTO users (email, password_hash, display_name, created_at) VALUES (?, ?, ?, ?)",
+            (email, password_hash, display_name or email.split("@")[0], now),
+        )
         await db.commit()
+        return cursor.lastrowid
 
 
-async def get_oauth_tokens(teacher_email: str) -> Optional[dict]:
-    """Retrieve OAuth tokens for a teacher."""
-    async with aiosqlite.connect(DATABASE_PATH) as db:
+async def get_user_by_email(email: str) -> Optional[dict]:
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute("SELECT * FROM users WHERE email = ?", (email,)) as cursor:
+            row = await cursor.fetchone()
+            return dict(row) if row else None
+
+
+async def get_user_by_id(user_id: int) -> Optional[dict]:
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute("SELECT * FROM users WHERE id = ?", (user_id,)) as cursor:
+            row = await cursor.fetchone()
+            return dict(row) if row else None
+
+
+async def update_last_login(user_id: int):
+    db_path = _get_db_path()
+    now = datetime.utcnow().isoformat()
+    async with aiosqlite.connect(db_path) as db:
+        await db.execute("UPDATE users SET last_login = ? WHERE id = ?", (now, user_id))
+        await db.commit()
+
+
+# ---- Session CRUD ----
+
+async def create_session(user_id: int, title: str = "Untitled Session") -> int:
+    db_path = _get_db_path()
+    now = datetime.utcnow().isoformat()
+    async with aiosqlite.connect(db_path) as db:
+        cursor = await db.execute(
+            "INSERT INTO exam_sessions (user_id, title, status, created_at, updated_at) VALUES (?, ?, 'draft', ?, ?)",
+            (user_id, title, now, now),
+        )
+        await db.commit()
+        return cursor.lastrowid
+
+
+async def get_sessions(user_id: int) -> list[dict]:
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
+        db.row_factory = aiosqlite.Row
         async with db.execute(
-            "SELECT encrypted_tokens FROM oauth_tokens WHERE teacher_email = ?",
-            (teacher_email,)
+            "SELECT * FROM exam_sessions WHERE user_id = ? ORDER BY created_at DESC", (user_id,)
         ) as cursor:
+            rows = await cursor.fetchall()
+            return [dict(row) for row in rows]
+
+
+async def get_session(session_id: int) -> Optional[dict]:
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute("SELECT * FROM exam_sessions WHERE id = ?", (session_id,)) as cursor:
             row = await cursor.fetchone()
-            if row:
-                return decrypt_token(row[0])
-    return None
+            return dict(row) if row else None
 
 
-async def delete_oauth_tokens(teacher_email: str):
-    """Delete OAuth tokens for a teacher."""
-    async with aiosqlite.connect(DATABASE_PATH) as db:
+async def update_session_status(session_id: int, status: str):
+    db_path = _get_db_path()
+    now = datetime.utcnow().isoformat()
+    async with aiosqlite.connect(db_path) as db:
         await db.execute(
-            "DELETE FROM oauth_tokens WHERE teacher_email = ?",
-            (teacher_email,)
+            "UPDATE exam_sessions SET status = ?, updated_at = ? WHERE id = ?",
+            (status, now, session_id),
         )
         await db.commit()
 
 
-async def save_report(teacher_email: str, exam_title: str, report_markdown: str, report_json: str):
-    """Save an analysis report."""
+# ---- Parsed Data CRUD ----
+
+async def save_parsed_data(
+    session_id: int, data_type: str, file_name: str, raw_text: str, structured_data: dict
+) -> int:
+    db_path = _get_db_path()
     now = datetime.utcnow().isoformat()
-    
-    async with aiosqlite.connect(DATABASE_PATH) as db:
-        await db.execute("""
-            INSERT INTO analysis_reports (teacher_email, exam_title, report_markdown, report_json, created_at)
-            VALUES (?, ?, ?, ?, ?)
-        """, (teacher_email, exam_title, report_markdown, report_json, now))
+    async with aiosqlite.connect(db_path) as db:
+        cursor = await db.execute(
+            "INSERT INTO parsed_data (session_id, data_type, file_name, raw_text, structured_data, created_at) VALUES (?, ?, ?, ?, ?, ?)",
+            (session_id, data_type, file_name, raw_text, json.dumps(structured_data, ensure_ascii=False), now),
+        )
         await db.commit()
+        return cursor.lastrowid
 
 
-async def get_teacher_reports(teacher_email: str, limit: int = 10) -> list[dict]:
-    """Get recent reports for a teacher."""
-    async with aiosqlite.connect(DATABASE_PATH) as db:
+async def get_parsed_data(session_id: int) -> list[dict]:
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
         db.row_factory = aiosqlite.Row
-        async with db.execute("""
-            SELECT id, exam_title, report_markdown, report_json, created_at
-            FROM analysis_reports
-            WHERE teacher_email = ?
-            ORDER BY created_at DESC
-            LIMIT ?
-        """, (teacher_email, limit)) as cursor:
+        async with db.execute(
+            "SELECT * FROM parsed_data WHERE session_id = ? ORDER BY data_type, created_at",
+            (session_id,),
+        ) as cursor:
+            rows = await cursor.fetchall()
+            result = []
+            for row in rows:
+                d = dict(row)
+                d["structured_data"] = json.loads(d["structured_data"])
+                result.append(d)
+            return result
+
+
+async def delete_parsed_data(session_id: int, data_type: Optional[str] = None):
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
+        if data_type:
+            await db.execute(
+                "DELETE FROM parsed_data WHERE session_id = ? AND data_type = ?",
+                (session_id, data_type),
+            )
+        else:
+            await db.execute("DELETE FROM parsed_data WHERE session_id = ?", (session_id,))
+        await db.commit()
+
+
+# ---- Prompt CRUD ----
+
+async def save_prompt(user_id: int, name: str, content: str, is_default: bool = False) -> int:
+    db_path = _get_db_path()
+    now = datetime.utcnow().isoformat()
+    async with aiosqlite.connect(db_path) as db:
+        cursor = await db.execute(
+            "INSERT INTO prompts (user_id, name, content, is_default, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?)",
+            (user_id, name, content, is_default, now, now),
+        )
+        await db.commit()
+        return cursor.lastrowid
+
+
+async def get_prompts(user_id: int) -> list[dict]:
+    """Get user's own prompts plus all default prompts."""
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute(
+            "SELECT * FROM prompts WHERE user_id = ? OR is_default = 1 ORDER BY is_default DESC, updated_at DESC",
+            (user_id,),
+        ) as cursor:
+            rows = await cursor.fetchall()
+            return [dict(row) for row in rows]
+
+
+async def get_all_prompts() -> list[dict]:
+    """Get all prompts from all users (for the 'read others' dropdown)."""
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute(
+            "SELECT p.*, u.email as author_email FROM prompts p JOIN users u ON p.user_id = u.id ORDER BY p.updated_at DESC"
+        ) as cursor:
             rows = await cursor.fetchall()
             return [dict(row) for row in rows]
+
+
+async def get_prompt(prompt_id: int) -> Optional[dict]:
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute("SELECT * FROM prompts WHERE id = ?", (prompt_id,)) as cursor:
+            row = await cursor.fetchone()
+            return dict(row) if row else None
+
+
+async def update_prompt(prompt_id: int, name: str, content: str):
+    db_path = _get_db_path()
+    now = datetime.utcnow().isoformat()
+    async with aiosqlite.connect(db_path) as db:
+        await db.execute(
+            "UPDATE prompts SET name = ?, content = ?, updated_at = ? WHERE id = ?",
+            (name, content, now, prompt_id),
+        )
+        await db.commit()
+
+
+async def delete_prompt(prompt_id: int):
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
+        await db.execute("DELETE FROM prompts WHERE id = ?", (prompt_id,))
+        await db.commit()
+
+
+# ---- Report CRUD ----
+
+async def save_report(session_id: int, prompt_id: Optional[int], html_content: str) -> int:
+    db_path = _get_db_path()
+    now = datetime.utcnow().isoformat()
+    async with aiosqlite.connect(db_path) as db:
+        cursor = await db.execute(
+            "INSERT INTO reports (session_id, prompt_id, html_content, created_at) VALUES (?, ?, ?, ?)",
+            (session_id, prompt_id, html_content, now),
+        )
+        await db.commit()
+        return cursor.lastrowid
+
+
+async def get_reports(session_id: int) -> list[dict]:
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute(
+            "SELECT * FROM reports WHERE session_id = ? ORDER BY created_at DESC",
+            (session_id,),
+        ) as cursor:
+            rows = await cursor.fetchall()
+            return [dict(row) for row in rows]
+
+
+async def get_report(report_id: int) -> Optional[dict]:
+    db_path = _get_db_path()
+    async with aiosqlite.connect(db_path) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute("SELECT * FROM reports WHERE id = ?", (report_id,)) as cursor:
+            row = await cursor.fetchone()
+            return dict(row) if row else None

chatkit/backend/app/email_service.py

@@ -1,250 +0,0 @@
-"""Email service for sending exam reports to teachers."""
-
-from __future__ import annotations
-
-import os
-import smtplib
-import ssl
-from email.mime.text import MIMEText
-from email.mime.multipart import MIMEMultipart
-from typing import Optional
-
-import markdown
-
-from .config import get_settings
-
-
-def markdown_to_html(md_content: str) -> str:
-    """Convert markdown to styled HTML for email."""
-    # Convert markdown to HTML
-    html_body = markdown.markdown(
-        md_content,
-        extensions=['tables', 'fenced_code', 'nl2br']
-    )
-    
-    # Wrap in email template
-    return f"""
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style>
-            body {{
-                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                line-height: 1.6;
-                color: #333;
-                max-width: 800px;
-                margin: 0 auto;
-                padding: 20px;
-                background-color: #f5f5f5;
-            }}
-            .container {{
-                background-color: white;
-                padding: 30px;
-                border-radius: 10px;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            }}
-            h1 {{
-                color: #2563eb;
-                border-bottom: 2px solid #2563eb;
-                padding-bottom: 10px;
-            }}
-            h2 {{
-                color: #1e40af;
-                margin-top: 30px;
-            }}
-            h3 {{
-                color: #3b82f6;
-            }}
-            table {{
-                width: 100%;
-                border-collapse: collapse;
-                margin: 20px 0;
-            }}
-            th, td {{
-                border: 1px solid #ddd;
-                padding: 12px;
-                text-align: left;
-            }}
-            th {{
-                background-color: #2563eb;
-                color: white;
-            }}
-            tr:nth-child(even) {{
-                background-color: #f8fafc;
-            }}
-            code {{
-                background-color: #f1f5f9;
-                padding: 2px 6px;
-                border-radius: 4px;
-                font-family: monospace;
-            }}
-            .footer {{
-                margin-top: 40px;
-                padding-top: 20px;
-                border-top: 1px solid #ddd;
-                text-align: center;
-                color: #666;
-                font-size: 0.9em;
-            }}
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            {html_body}
-            <div class="footer">
-                <p>Generated by ClassLens • AI-Powered Exam Analysis for Teachers</p>
-            </div>
-        </div>
-    </body>
-    </html>
-    """
-
-
-async def send_email_via_gmail(
-    to_email: str,
-    subject: str,
-    body_markdown: str,
-    gmail_user: str,
-    gmail_app_password: str
-) -> dict:
-    """
-    Send email using Gmail SMTP.
-    
-    Requires:
-    - Gmail account
-    - App Password (not your regular password)
-    
-    To get an App Password:
-    1. Enable 2-Step Verification on your Google account
-    2. Go to https://myaccount.google.com/apppasswords
-    3. Generate an app password for "Mail"
-    """
-    try:
-        html_content = markdown_to_html(body_markdown)
-        
-        # Create message
-        message = MIMEMultipart("alternative")
-        message["Subject"] = subject
-        message["From"] = gmail_user
-        message["To"] = to_email
-        
-        # Add plain text and HTML versions
-        part1 = MIMEText(body_markdown, "plain")
-        part2 = MIMEText(html_content, "html")
-        message.attach(part1)
-        message.attach(part2)
-        
-        # Create secure connection and send
-        context = ssl.create_default_context()
-        with smtplib.SMTP_SSL("smtp.gmail.com", 465, context=context) as server:
-            server.login(gmail_user, gmail_app_password)
-            server.sendmail(gmail_user, to_email, message.as_string())
-        
-        return {"status": "ok", "message": "Email sent via Gmail"}
-        
-    except smtplib.SMTPAuthenticationError:
-        return {
-            "status": "error",
-            "message": "Gmail authentication failed. Check your email and app password."
-        }
-    except Exception as e:
-        return {
-            "status": "error",
-            "message": f"Failed to send email: {str(e)}"
-        }
-
-
-async def send_email_via_sendgrid(
-    to_email: str,
-    subject: str,
-    body_markdown: str
-) -> dict:
-    """Send email using SendGrid API."""
-    settings = get_settings()
-    
-    try:
-        from sendgrid import SendGridAPIClient
-        from sendgrid.helpers.mail import Mail, Email, To, Content, HtmlContent
-        
-        html_content = markdown_to_html(body_markdown)
-        
-        message = Mail(
-            from_email=Email(settings.sendgrid_from_email, "ClassLens"),
-            to_emails=To(to_email),
-            subject=subject,
-            html_content=HtmlContent(html_content)
-        )
-        message.add_content(Content("text/plain", body_markdown))
-        
-        sg = SendGridAPIClient(settings.sendgrid_api_key)
-        response = sg.send(message)
-        
-        if response.status_code in (200, 201, 202):
-            return {"status": "ok", "message": "Email sent via SendGrid"}
-        else:
-            return {
-                "status": "error",
-                "message": f"SendGrid returned status {response.status_code}"
-            }
-            
-    except Exception as e:
-        return {
-            "status": "error",
-            "message": str(e)
-        }
-
-
-async def send_email_report(
-    email: str,
-    subject: str,
-    body_markdown: str
-) -> dict:
-    """
-    Send an email report to a teacher.
-    
-    Tries in order:
-    1. Gmail SMTP (if configured)
-    2. SendGrid (if configured)
-    3. Logs to console (fallback)
-    
-    Returns:
-        {"status": "ok"} on success
-        {"status": "error", "message": str} on failure
-    """
-    # Try Gmail SMTP first
-    gmail_user = os.getenv("GMAIL_USER", "")
-    gmail_app_password = os.getenv("GMAIL_APP_PASSWORD", "")
-    
-    if gmail_user and gmail_app_password:
-        result = await send_email_via_gmail(email, subject, body_markdown, gmail_user, gmail_app_password)
-        if result["status"] == "ok":
-            print(f"📧 Email sent to {email} via Gmail")
-            return result
-        else:
-            print(f"⚠️ Gmail failed: {result['message']}, trying fallback...")
-    
-    # Try SendGrid
-    settings = get_settings()
-    if settings.sendgrid_api_key:
-        result = await send_email_via_sendgrid(email, subject, body_markdown)
-        if result["status"] == "ok":
-            print(f"📧 Email sent to {email} via SendGrid")
-            return result
-        else:
-            print(f"⚠️ SendGrid failed: {result['message']}")
-    
-    # Fallback: print to console
-    print(f"\n{'='*60}")
-    print(f"📧 EMAIL (not sent - no email service configured)")
-    print(f"To: {email}")
-    print(f"Subject: {subject}")
-    print(f"{'='*60}")
-    print(body_markdown[:500] + "..." if len(body_markdown) > 500 else body_markdown)
-    print(f"{'='*60}\n")
-    
-    return {
-        "status": "ok", 
-        "message": "Email logged to console (configure GMAIL_USER/GMAIL_APP_PASSWORD or SENDGRID_API_KEY to send real emails)"
-    }

chatkit/backend/app/file_processor.py

@@ -0,0 +1,279 @@
+"""File processing: upload files and extract structured Q&A via GPT-4 Vision / GPT-4o."""
+
+from __future__ import annotations
+
+import base64
+import json
+import mimetypes
+from pathlib import Path
+from typing import Optional
+
+import fitz  # pymupdf
+from openai import AsyncOpenAI
+from fastapi import UploadFile
+
+from .config import get_settings
+from .database import save_parsed_data, delete_parsed_data
+
+
+# Extensions that should be read as text, not sent as images
+TEXT_EXTENSIONS = {".txt", ".csv", ".tsv", ".json", ".xml", ".md", ".html", ".htm", ".log"}
+
+# Image extensions with their MIME types
+IMAGE_MIME = {
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".gif": "image/gif",
+    ".bmp": "image/bmp",
+    ".webp": "image/webp",
+    ".tiff": "image/tiff",
+    ".tif": "image/tiff",
+}
+
+NO_FABRICATION_RULE = """
+CRITICAL: Only extract data that is ACTUALLY present in the provided content.
+Do NOT invent, fabricate, or hallucinate any data.
+If the content is empty, unreadable, or does not contain the expected data, return an empty result like {"questions": []} or {"students": []} or {"answers": []}.
+"""
+
+IMAGE_DESCRIPTION_RULE = """
+IMPORTANT - Images, Diagrams, Charts, and Figures:
+- If a question contains or references an image, diagram, chart, graph, map, table, or any visual element, you MUST describe it in detail as part of the question text.
+- Use the format: [圖片描述: ...detailed description...] inserted where the image appears in the question.
+- The description must be detailed enough that someone who CANNOT see the image can still fully understand and answer the question.
+- Include all relevant data points, labels, axes, values, shapes, positions, colors, relationships, and any text visible in the image.
+- For charts/graphs: describe the type, axes labels, data values, trends, and all visible data points.
+- For diagrams: describe all components, connections, labels, measurements, and spatial relationships.
+- For maps: describe locations, boundaries, labels, and any marked features.
+- For tables embedded as images: transcribe the full table content.
+"""
+
+EXTRACTION_PROMPTS = {
+    "questions": """You are an exam data extraction expert. Extract all exam questions from the provided content.
+
+Return a JSON object with this structure:
+{
+  "questions": [
+    {
+      "number": 1,
+      "text": "the full question text (including [圖片描述: ...] for any images/diagrams)",
+      "type": "multiple_choice" or "short_answer" or "essay" or "true_false",
+      "options": ["A) ...", "B) ...", "C) ...", "D) ..."],  // null if not multiple choice
+      "points": 10  // point value if visible, null otherwise
+    }
+  ]
+}
+
+Rules:
+- Extract EVERY question you can see
+- Preserve the original language of the questions
+- If options are present, include them exactly as written
+- If point values are shown, include them
+""" + IMAGE_DESCRIPTION_RULE + NO_FABRICATION_RULE + "- Return valid JSON only",
+
+    "student_answers": """You are an exam data extraction expert. Extract all student answers from the provided content.
+
+Return a JSON object with this structure:
+{
+  "students": [
+    {
+      "name": "student name or ID",
+      "id": "student ID if visible",
+      "answers": [
+        {
+          "question_number": 1,
+          "answer": "the student's answer text"
+        }
+      ]
+    }
+  ]
+}
+
+Rules:
+- Extract answers for EVERY student visible
+- Preserve exact answer text
+- If a student left a question blank, set answer to null
+- Use the student's name or ID as shown in the document
+- If a student's answer includes a drawing or diagram, describe it as text: [圖片描述: ...]
+""" + IMAGE_DESCRIPTION_RULE + NO_FABRICATION_RULE + "- Return valid JSON only",
+
+    "teacher_answers": """You are an exam data extraction expert. Extract the correct/model answers (answer key) from the provided content.
+
+Return a JSON object with this structure:
+{
+  "answers": [
+    {
+      "question_number": 1,
+      "correct_answer": "the correct answer",
+      "explanation": "explanation if provided, otherwise null"
+    }
+  ]
+}
+
+Rules:
+- Extract the correct answer for EVERY question
+- Include explanations if they are provided
+- Preserve exact answer text
+- If the answer references or includes an image/diagram, describe it as text: [圖片描述: ...]
+""" + IMAGE_DESCRIPTION_RULE + NO_FABRICATION_RULE + "- Return valid JSON only",
+}
+
+
+def pdf_to_images(pdf_bytes: bytes) -> list[bytes]:
+    """Convert PDF bytes to a list of PNG image bytes, one per page."""
+    doc = fitz.open(stream=pdf_bytes, filetype="pdf")
+    images = []
+    for page in doc:
+        # Render at 2x resolution for better OCR quality
+        pix = page.get_pixmap(matrix=fitz.Matrix(2, 2))
+        images.append(pix.tobytes("png"))
+    doc.close()
+    return images
+
+
+def try_read_as_text(file_bytes: bytes, filename: str) -> Optional[str]:
+    """Try to decode file bytes as text. Returns None if not text."""
+    ext = Path(filename).suffix.lower()
+    if ext in TEXT_EXTENSIONS:
+        for encoding in ("utf-8", "utf-8-sig", "big5", "gb2312", "shift_jis", "latin-1"):
+            try:
+                return file_bytes.decode(encoding)
+            except (UnicodeDecodeError, ValueError):
+                continue
+    return None
+
+
+def get_image_mime(filename: str) -> Optional[str]:
+    """Get MIME type for image files. Returns None if not a known image type."""
+    ext = Path(filename).suffix.lower()
+    return IMAGE_MIME.get(ext)
+
+
+async def process_uploaded_files(
+    files: list[UploadFile],
+    data_type: str,
+    session_id: int,
+    description: str = "",
+    model: str = "gpt-5.4",
+) -> dict:
+    """
+    Process uploaded files: convert to images/text, then extract data via GPT-4o.
+    Returns the structured data extracted.
+    """
+    image_parts: list[dict] = []      # image content parts for GPT
+    text_parts: list[str] = []         # text content from text files
+    source_files: list[str] = []
+
+    for file in files:
+        file_bytes = await file.read()
+        filename = file.filename or "unknown"
+
+        if not file_bytes:
+            raise ValueError(f"File '{filename}' is empty (0 bytes). Please upload a valid file.")
+
+        ext = Path(filename).suffix.lower()
+        source_files.append(filename)
+
+        if ext == ".pdf":
+            page_images = pdf_to_images(file_bytes)
+            for i, img in enumerate(page_images):
+                b64 = base64.b64encode(img).decode()
+                image_parts.append({
+                    "type": "image_url",
+                    "image_url": {"url": f"data:image/png;base64,{b64}", "detail": "high"},
+                })
+        else:
+            # Try to read as text first
+            text_content = try_read_as_text(file_bytes, filename)
+            if text_content is not None:
+                text_parts.append(f"--- Content from {filename} ---\n{text_content}")
+            else:
+                # Try as image with correct MIME type
+                mime = get_image_mime(filename) or "image/png"
+                b64 = base64.b64encode(file_bytes).decode()
+                image_parts.append({
+                    "type": "image_url",
+                    "image_url": {"url": f"data:{mime};base64,{b64}", "detail": "high"},
+                })
+
+    if not image_parts and not text_parts:
+        raise ValueError("No valid content found in uploaded files")
+
+    # Extract data using selected model
+    structured = await extract_data(
+        image_parts=image_parts,
+        text_parts=text_parts,
+        data_type=data_type,
+        description=description,
+        model=model,
+    )
+
+    # Clear old data of this type for the session, then save new
+    await delete_parsed_data(session_id, data_type)
+
+    raw_text = json.dumps({"source_files": source_files}, ensure_ascii=False)
+    await save_parsed_data(session_id, data_type, files[0].filename or "upload", raw_text, structured)
+
+    return structured
+
+
+async def extract_data(
+    image_parts: list[dict],
+    text_parts: list[str],
+    data_type: str,
+    description: str = "",
+    model: str = "gpt-5.4",
+) -> dict:
+    """Call GPT-4o to extract structured data from images and/or text."""
+    settings = get_settings()
+    client = AsyncOpenAI(api_key=settings.openai_api_key)
+
+    system_prompt = EXTRACTION_PROMPTS.get(data_type)
+    if not system_prompt:
+        raise ValueError(f"Unknown data_type: {data_type}")
+
+    # Build user message content
+    user_text = f"Please extract the {data_type.replace('_', ' ')} from the provided content."
+    if description.strip():
+        user_text = f"Context about this data: {description.strip()}\n\n{user_text}"
+
+    # If we have text content, include it
+    if text_parts:
+        combined_text = "\n\n".join(text_parts)
+        user_text += f"\n\n--- FILE CONTENT ---\n{combined_text}"
+
+    content_parts: list[dict] = [{"type": "text", "text": user_text}]
+    content_parts.extend(image_parts)
+
+    messages = [
+        {"role": "system", "content": system_prompt},
+        {"role": "user", "content": content_parts},
+    ]
+
+    # Build kwargs — some models don't support all parameters
+    kwargs: dict = {
+        "model": model,
+        "messages": messages,
+        "max_completion_tokens": 16384,
+    }
+    # json_object response_format may not work on all models; try with it first
+    try:
+        response = await client.chat.completions.create(
+            **kwargs,
+            response_format={"type": "json_object"},
+        )
+    except Exception:
+        # Fallback: no response_format, rely on prompt to return JSON
+        response = await client.chat.completions.create(**kwargs)
+
+    choice = response.choices[0]
+    content = choice.message.content
+    if not content:
+        reason = getattr(choice, "finish_reason", "unknown")
+        refusal = getattr(choice.message, "refusal", None)
+        detail = f"finish_reason={reason}"
+        if refusal:
+            detail += f", refusal={refusal}"
+        raise ValueError(f"Model returned empty content ({detail}). Try a different model.")
+    return json.loads(content)

chatkit/backend/app/google_sheets.py

@@ -1,408 +0,0 @@
-"""Google Sheets API service for fetching form responses."""
-
-from __future__ import annotations
-
-import re
-import csv
-from io import StringIO
-from typing import Optional
-from datetime import datetime
-
-import httpx
-
-from google.oauth2.credentials import Credentials
-from google.auth.transport.requests import Request
-from googleapiclient.discovery import build
-from googleapiclient.errors import HttpError
-
-from .database import get_oauth_tokens, save_oauth_tokens
-from .config import get_settings, GOOGLE_SCOPES
-
-
-def extract_sheet_id(url: str) -> Optional[str]:
-    """Extract the spreadsheet ID from a Google Sheets or Forms URL."""
-    # Google Sheets URL pattern
-    sheets_pattern = r'/spreadsheets/d/([a-zA-Z0-9-_]+)'
-    sheets_match = re.search(sheets_pattern, url)
-    if sheets_match:
-        return sheets_match.group(1)
-    
-    # Google Forms URL pattern - need to find linked response sheet
-    forms_pattern = r'/forms/d/e?/?([a-zA-Z0-9-_]+)'
-    forms_match = re.search(forms_pattern, url)
-    if forms_match:
-        # For forms, we need to handle this differently
-        # The user should provide the response sheet URL directly
-        return None
-    
-    return None
-
-
-async def fetch_public_sheet(sheet_id: str, answer_key: Optional[dict] = None) -> dict:
-    """
-    Fetch data from a PUBLIC Google Sheet (no OAuth needed).
-    The sheet must be shared as "Anyone with the link can view".
-    
-    Uses the CSV export endpoint which works for public sheets.
-    """
-    # Google Sheets public CSV export URL
-    csv_url = f"https://docs.google.com/spreadsheets/d/{sheet_id}/export?format=csv"
-    
-    try:
-        async with httpx.AsyncClient(follow_redirects=True) as client:
-            response = await client.get(csv_url, timeout=30.0)
-            
-            if response.status_code == 200:
-                csv_content = response.text
-                
-                # Check if we got actual CSV data
-                if csv_content.startswith('<!DOCTYPE') or '<html' in csv_content[:100].lower():
-                    return {
-                        "error": "This sheet is not public. Please make it 'Anyone with the link can view' or use CSV export.",
-                        "needs_auth": False
-                    }
-                
-                # Parse the CSV
-                result = parse_csv_responses(csv_content, answer_key)
-                if "error" not in result:
-                    result["exam_title"] = f"Google Sheet {sheet_id[:8]}..."
-                return result
-                
-            elif response.status_code == 404:
-                return {
-                    "error": "Sheet not found. Please check the URL.",
-                    "needs_auth": False
-                }
-            else:
-                return {
-                    "error": f"Could not access sheet (status {response.status_code}). Make sure it's set to 'Anyone with the link can view'.",
-                    "needs_auth": False
-                }
-                
-    except httpx.TimeoutException:
-        return {
-            "error": "Request timed out. Please try again.",
-            "needs_auth": False
-        }
-    except Exception as e:
-        return {
-            "error": f"Error fetching sheet: {str(e)}",
-            "needs_auth": False
-        }
-
-
-async def get_google_credentials(teacher_email: str) -> Optional[Credentials]:
-    """Get valid Google credentials for a teacher."""
-    tokens = await get_oauth_tokens(teacher_email)
-    if not tokens:
-        return None
-    
-    settings = get_settings()
-    
-    credentials = Credentials(
-        token=tokens.get("access_token"),
-        refresh_token=tokens.get("refresh_token"),
-        token_uri="https://oauth2.googleapis.com/token",
-        client_id=settings.google_client_id,
-        client_secret=settings.google_client_secret,
-        scopes=GOOGLE_SCOPES,
-    )
-    
-    # Refresh if expired
-    if credentials.expired and credentials.refresh_token:
-        try:
-            credentials.refresh(Request())
-            # Save updated tokens
-            new_tokens = {
-                "access_token": credentials.token,
-                "refresh_token": credentials.refresh_token,
-            }
-            await save_oauth_tokens(teacher_email, new_tokens)
-        except Exception as e:
-            print(f"Error refreshing credentials: {e}")
-            return None
-    
-    return credentials
-
-
-def normalize_question_type(header: str, sample_answers: list[str]) -> str:
-    """Infer question type from header and sample answers."""
-    header_lower = header.lower()
-    
-    # Check for common patterns
-    if any(word in header_lower for word in ['multiple choice', 'mcq', 'select']):
-        return 'mcq'
-    
-    # Check if answers are numeric
-    numeric_count = 0
-    for answer in sample_answers[:5]:  # Check first 5 answers
-        if answer:
-            try:
-                float(answer.replace(',', ''))
-                numeric_count += 1
-            except ValueError:
-                pass
-    
-    if numeric_count >= len([a for a in sample_answers[:5] if a]) * 0.8:
-        return 'numeric'
-    
-    # Check for short answers (likely MCQ) vs long answers (open)
-    avg_length = sum(len(a) for a in sample_answers if a) / max(len([a for a in sample_answers if a]), 1)
-    if avg_length < 20:
-        return 'mcq'
-    
-    return 'open'
-
-
-def extract_question_text(header: str) -> str:
-    """Extract clean question text from a header."""
-    # Remove common prefixes like "Q1:", "1.", etc.
-    cleaned = re.sub(r'^[Q]?\d+[\.\:\)]\s*', '', header)
-    # Remove parenthetical scoring info like "(2 points)"
-    cleaned = re.sub(r'\s*\(\d+\s*(?:points?|pts?|marks?)\)\s*$', '', cleaned, flags=re.IGNORECASE)
-    return cleaned.strip() or header
-
-
-async def fetch_google_form_responses(
-    google_form_url: str,
-    teacher_email: str,
-    answer_key: Optional[dict] = None
-) -> dict:
-    """
-    Fetch responses from a Google Form's response spreadsheet.
-    
-    Returns normalized exam JSON format:
-    {
-        "exam_title": str,
-        "questions": [{"question_id", "question_text", "type", "choices", "correct_answer"}],
-        "responses": [{"student_id", "student_name", "answers": {...}}]
-    }
-    """
-    credentials = await get_google_credentials(teacher_email)
-    if not credentials:
-        return {
-            "error": "Not authorized. Please connect your Google account first.",
-            "needs_auth": True
-        }
-    
-    sheet_id = extract_sheet_id(google_form_url)
-    if not sheet_id:
-        return {
-            "error": "Could not extract spreadsheet ID from URL. Please provide a valid Google Sheets response URL.",
-            "needs_auth": False
-        }
-    
-    try:
-        # Build the Sheets API service
-        service = build('sheets', 'v4', credentials=credentials)
-        
-        # Get spreadsheet metadata
-        spreadsheet = service.spreadsheets().get(spreadsheetId=sheet_id).execute()
-        title = spreadsheet.get('properties', {}).get('title', 'Untitled Exam')
-        
-        # Try to find "Form Responses 1" sheet, or use first sheet
-        sheet_name = None
-        for sheet in spreadsheet.get('sheets', []):
-            props = sheet.get('properties', {})
-            name = props.get('title', '')
-            if 'response' in name.lower() or 'form' in name.lower():
-                sheet_name = name
-                break
-        
-        if not sheet_name:
-            sheet_name = spreadsheet['sheets'][0]['properties']['title']
-        
-        # Fetch all values
-        result = service.spreadsheets().values().get(
-            spreadsheetId=sheet_id,
-            range=f"'{sheet_name}'!A:ZZ"
-        ).execute()
-        
-        values = result.get('values', [])
-        if not values or len(values) < 2:
-            return {
-                "error": "No responses found in the spreadsheet.",
-                "needs_auth": False
-            }
-        
-        # First row is headers
-        headers = values[0]
-        responses_data = values[1:]
-        
-        # Identify columns
-        # Typically: Timestamp, Email, Name, Q1, Q2, ...
-        timestamp_col = None
-        email_col = None
-        name_col = None
-        question_cols = []
-        
-        for idx, header in enumerate(headers):
-            header_lower = header.lower()
-            if 'timestamp' in header_lower or 'time' in header_lower:
-                timestamp_col = idx
-            elif 'email' in header_lower and email_col is None:
-                email_col = idx
-            elif any(word in header_lower for word in ['name', 'student', 'your name']):
-                name_col = idx
-            else:
-                # This is likely a question
-                question_cols.append((idx, header))
-        
-        # Build questions list
-        questions = []
-        for q_idx, (col_idx, header) in enumerate(question_cols):
-            question_id = f"Q{q_idx + 1}"
-            
-            # Sample answers for type detection
-            sample_answers = [row[col_idx] if col_idx < len(row) else "" for row in responses_data[:10]]
-            
-            question = {
-                "question_id": question_id,
-                "question_text": extract_question_text(header),
-                "type": normalize_question_type(header, sample_answers),
-                "choices": [],  # Would need to parse from form structure
-                "correct_answer": ""
-            }
-            
-            # Apply answer key if provided
-            if answer_key and question_id in answer_key:
-                question["correct_answer"] = answer_key[question_id]
-            
-            questions.append(question)
-        
-        # Build responses list
-        responses = []
-        for row_idx, row in enumerate(responses_data):
-            student_id = f"S{row_idx + 1:02d}"
-            
-            # Get student name
-            if name_col is not None and name_col < len(row):
-                student_name = row[name_col]
-            elif email_col is not None and email_col < len(row):
-                # Use email prefix as name
-                email = row[email_col]
-                student_name = email.split('@')[0] if '@' in email else email
-            else:
-                student_name = f"Student {row_idx + 1}"
-            
-            # Get answers
-            answers = {}
-            for q_idx, (col_idx, _) in enumerate(question_cols):
-                question_id = f"Q{q_idx + 1}"
-                answer = row[col_idx] if col_idx < len(row) else ""
-                answers[question_id] = answer
-            
-            responses.append({
-                "student_id": student_id,
-                "student_name": student_name,
-                "answers": answers
-            })
-        
-        return {
-            "exam_title": title,
-            "questions": questions,
-            "responses": responses
-        }
-        
-    except HttpError as e:
-        if e.resp.status == 403:
-            return {
-                "error": "Access denied. Please ensure the spreadsheet is shared with your Google account.",
-                "needs_auth": False
-            }
-        elif e.resp.status == 404:
-            return {
-                "error": "Spreadsheet not found. Please check the URL.",
-                "needs_auth": False
-            }
-        else:
-            return {
-                "error": f"Google API error: {str(e)}",
-                "needs_auth": False
-            }
-    except Exception as e:
-        return {
-            "error": f"Error fetching responses: {str(e)}",
-            "needs_auth": False
-        }
-
-
-def parse_csv_responses(csv_content: str, answer_key: Optional[dict] = None) -> dict:
-    """
-    Parse CSV content into normalized exam format.
-    Fallback when OAuth is not available.
-    """
-    import csv
-    from io import StringIO
-    
-    reader = csv.reader(StringIO(csv_content))
-    rows = list(reader)
-    
-    if not rows or len(rows) < 2:
-        return {"error": "CSV must have at least a header row and one response."}
-    
-    headers = rows[0]
-    responses_data = rows[1:]
-    
-    # Same logic as Google Sheets parsing
-    timestamp_col = None
-    email_col = None
-    name_col = None
-    question_cols = []
-    
-    for idx, header in enumerate(headers):
-        header_lower = header.lower()
-        if 'timestamp' in header_lower:
-            timestamp_col = idx
-        elif 'email' in header_lower and email_col is None:
-            email_col = idx
-        elif any(word in header_lower for word in ['name', 'student']):
-            name_col = idx
-        else:
-            question_cols.append((idx, header))
-    
-    # Build questions
-    questions = []
-    for q_idx, (col_idx, header) in enumerate(question_cols):
-        question_id = f"Q{q_idx + 1}"
-        sample_answers = [row[col_idx] if col_idx < len(row) else "" for row in responses_data[:10]]
-        
-        question = {
-            "question_id": question_id,
-            "question_text": extract_question_text(header),
-            "type": normalize_question_type(header, sample_answers),
-            "choices": [],
-            "correct_answer": answer_key.get(question_id, "") if answer_key else ""
-        }
-        questions.append(question)
-    
-    # Build responses
-    responses = []
-    for row_idx, row in enumerate(responses_data):
-        student_id = f"S{row_idx + 1:02d}"
-        
-        if name_col is not None and name_col < len(row):
-            student_name = row[name_col]
-        elif email_col is not None and email_col < len(row):
-            email = row[email_col]
-            student_name = email.split('@')[0] if '@' in email else email
-        else:
-            student_name = f"Student {row_idx + 1}"
-        
-        answers = {}
-        for q_idx, (col_idx, _) in enumerate(question_cols):
-            question_id = f"Q{q_idx + 1}"
-            answer = row[col_idx] if col_idx < len(row) else ""
-            answers[question_id] = answer
-        
-        responses.append({
-            "student_id": student_id,
-            "student_name": student_name,
-            "answers": answers
-        })
-    
-    return {
-        "exam_title": "Uploaded Exam",
-        "questions": questions,
-        "responses": responses
-    }

chatkit/backend/app/main.py

@@ -1,45 +1,39 @@
-"""FastAPI entrypoint for the ClassLens backend."""
+"""FastAPI entrypoint for the ClassLens backend (v2 - 3-step workflow)."""
 
 from __future__ import annotations
 
-import os
-import json
-import asyncio
 from pathlib import Path
 from contextlib import asynccontextmanager
-from typing import Optional, AsyncIterator
+from typing import Optional
 
-from chatkit.server import StreamingResult
-from fastapi import FastAPI, Request
+from fastapi import FastAPI, Depends, File, Form, UploadFile, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import JSONResponse, Response, StreamingResponse, FileResponse
+from fastapi.responses import JSONResponse, Response, FileResponse
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel
 
-from .server import ClassLensChatServer
-from .oauth import router as oauth_router
-from .database import init_database
-from .google_sheets import fetch_google_form_responses, parse_csv_responses
-from .email_service import send_email_report
-from .status_tracker import get_status, subscribe, unsubscribe
+from .database import (
+    init_database,
+    create_session,
+    get_sessions,
+    get_session,
+    update_session_status,
+    get_parsed_data,
+    save_prompt,
+    get_prompts,
+    get_all_prompts,
+    get_prompt,
+    update_prompt,
+    delete_prompt,
+    save_report,
+    get_reports,
+    get_report,
+)
+from .auth import get_current_user, register_user, login_user
+from .file_processor import process_uploaded_files
+from .report_generator import generate_report, get_default_prompt
 
-# Static files directory (for production deployment)
 STATIC_DIR = Path(__file__).parent.parent / "static"
-# Report template path (check multiple possible locations)
-# Docker: /home/user/app/report-template.html (parent.parent from app/main.py)
-# Dev: project_root/report-template.html (parent.parent.parent from backend/app/main.py)
-def find_report_template():
-    """Find report template in common locations."""
-    possible_paths = [
-        Path(__file__).parent.parent / "report-template.html",  # Docker location
-        Path(__file__).parent.parent.parent / "report-template.html",  # Dev location
-    ]
-    for path in possible_paths:
-        if path.exists():
-            return path
-    return None
-
-REPORT_TEMPLATE_PATH = find_report_template()
 
 
 @asynccontextmanager
@@ -51,8 +45,8 @@ async def lifespan(app: FastAPI):
 
 app = FastAPI(
     title="ClassLens API",
-    description="AI-powered exam analysis for teachers",
-    version="1.0.0",
+    description="AI-powered exam analysis for teachers (v2)",
+    version="2.0.0",
     lifespan=lifespan,
 )
 
@@ -64,329 +58,283 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-# Include OAuth routes
-app.include_router(oauth_router)
 
-# ChatKit server instance
-chatkit_server = ClassLensChatServer()
+# =============================================================================
+# Auth Endpoints
+# =============================================================================
+
+class AuthRequest(BaseModel):
+    email: str
+    password: str
+
+
+@app.post("/api/auth/register")
+async def api_register(body: AuthRequest):
+    user = await register_user(body.email, body.password)
+    from .auth import create_access_token
+    token = create_access_token({"sub": str(user["id"])})
+    return {"token": token, "user": {"id": user["id"], "email": user["email"], "display_name": user["display_name"]}}
+
+
+@app.post("/api/auth/login")
+async def api_login(body: AuthRequest):
+    result = await login_user(body.email, body.password)
+    return result
+
+
+@app.get("/api/auth/me")
+async def api_me(user=Depends(get_current_user)):
+    return {"id": user["id"], "email": user["email"], "display_name": user["display_name"]}
 
 
 # =============================================================================
-# ChatKit Endpoint
+# Session Endpoints
 # =============================================================================
 
-@app.get("/api/models")
-async def get_available_models():
-    """Get list of available AI models."""
-    from .server import AVAILABLE_MODELS, DEFAULT_MODEL
-    return {
-        "models": AVAILABLE_MODELS,
-        "default": DEFAULT_MODEL,
-    }
-
-
-@app.post("/chatkit")
-async def chatkit_endpoint(request: Request) -> Response:
-    """Proxy the ChatKit web component payload to the server implementation."""
-    payload = await request.body()
-    
-    # Try to extract model from multiple sources
-    model = (
-        request.headers.get("X-Model") or
-        request.query_params.get("model") or
-        # Check if model is in cookies (set by frontend)
-        request.cookies.get("selected_model")
-    )
-    
-    context = {
-        "request": request,
-        "model": model,  # Pass model in context
-    }
-    
-    # Also try to extract from payload if it's JSON
-    try:
-        import json
-        payload_json = json.loads(payload)
-        if isinstance(payload_json, dict):
-            # Check various possible locations for model
-            payload_model = (
-                payload_json.get("metadata", {}).get("model") or
-                payload_json.get("model") or
-                payload_json.get("config", {}).get("model")
-            )
-            if payload_model:
-                context["model"] = payload_model
-    except:
-        pass
-    
-    result = await chatkit_server.process(payload, context)
-
-    if isinstance(result, StreamingResult):
-        return StreamingResponse(result, media_type="text/event-stream")
-    if hasattr(result, "json"):
-        return Response(content=result.json, media_type="application/json")
-    return JSONResponse(result)
+class CreateSessionRequest(BaseModel):
+    title: str = "Untitled Session"
+
+
+@app.post("/api/sessions")
+async def api_create_session(body: CreateSessionRequest, user=Depends(get_current_user)):
+    session_id = await create_session(user["id"], body.title)
+    session = await get_session(session_id)
+    return session
+
+
+@app.get("/api/sessions")
+async def api_list_sessions(user=Depends(get_current_user)):
+    sessions = await get_sessions(user["id"])
+    return {"sessions": sessions}
+
+
+@app.get("/api/sessions/{session_id}")
+async def api_get_session(session_id: int, user=Depends(get_current_user)):
+    session = await get_session(session_id)
+    if not session or session["user_id"] != user["id"]:
+        raise HTTPException(status_code=404, detail="Session not found")
+    return session
 
 
 # =============================================================================
-# Workflow Status Endpoints
+# File Upload & Processing Endpoints
 # =============================================================================
 
-@app.get("/api/status/{session_id}")
-async def get_workflow_status(session_id: str):
-    """Get current workflow status for a session."""
-    return get_status(session_id)
+@app.post("/api/sessions/{session_id}/upload")
+async def api_upload_files(
+    session_id: int,
+    data_type: str = Form(...),
+    files: list[UploadFile] = File(...),
+    description: str = Form(""),
+    model: str = Form("gpt-5.4"),
+    user=Depends(get_current_user),
+):
+    """Upload files for a session. data_type: 'questions', 'student_answers', or 'teacher_answers'."""
+    session = await get_session(session_id)
+    if not session or session["user_id"] != user["id"]:
+        raise HTTPException(status_code=404, detail="Session not found")
+
+    if data_type not in ("questions", "student_answers", "teacher_answers"):
+        raise HTTPException(status_code=400, detail="data_type must be 'questions', 'student_answers', or 'teacher_answers'")
 
-
-async def status_stream(session_id: str) -> AsyncIterator[str]:
-    """Generate SSE events for status updates."""
-    queue = await subscribe(session_id)
     try:
-        # Send initial status
-        status = get_status(session_id)
-        yield f"data: {json.dumps(status)}\n\n"
-        
-        while True:
-            try:
-                # Wait for updates with timeout
-                status = await asyncio.wait_for(queue.get(), timeout=30.0)
-                yield f"data: {json.dumps(status)}\n\n"
-            except asyncio.TimeoutError:
-                # Send keepalive
-                yield f": keepalive\n\n"
-    except asyncio.CancelledError:
-        pass
-    finally:
-        unsubscribe(session_id, queue)
-
-
-@app.get("/api/status/{session_id}/stream")
-async def stream_workflow_status(session_id: str):
-    """Stream workflow status updates via Server-Sent Events (SSE)."""
-    return StreamingResponse(
-        status_stream(session_id),
-        media_type="text/event-stream",
-        headers={
-            "Cache-Control": "no-cache",
-            "Connection": "keep-alive",
-            "X-Accel-Buffering": "no",
-        }
-    )
+        structured = await process_uploaded_files(files, data_type, session_id, description=description, model=model)
+        await update_session_status(session_id, "processed")
+        return {"status": "ok", "data_type": data_type, "data": structured}
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Processing failed: {str(e)}")
+
+
+@app.get("/api/sessions/{session_id}/parsed-data")
+async def api_get_parsed_data(session_id: int, user=Depends(get_current_user)):
+    session = await get_session(session_id)
+    if not session or session["user_id"] != user["id"]:
+        raise HTTPException(status_code=404, detail="Session not found")
+    data = await get_parsed_data(session_id)
+    # Group by data_type
+    grouped = {}
+    for item in data:
+        dt = item["data_type"]
+        if dt not in grouped:
+            grouped[dt] = []
+        grouped[dt].append(item)
+    return {"parsed_data": grouped}
 
 
 # =============================================================================
-# Direct API Endpoints (for non-ChatKit integrations)
+# Prompt Endpoints
 # =============================================================================
 
-class FetchResponsesRequest(BaseModel):
-    google_form_url: str
-    teacher_email: str
-    answer_key: Optional[dict] = None
+class PromptRequest(BaseModel):
+    name: str
+    content: str
 
 
-class ParseCSVRequest(BaseModel):
-    csv_content: str
-    answer_key: Optional[dict] = None
+@app.get("/api/prompts")
+async def api_list_prompts(user=Depends(get_current_user)):
+    prompts = await get_prompts(user["id"])
+    return {"prompts": prompts}
 
 
-class SendEmailRequest(BaseModel):
-    email: str
-    subject: str
-    body_markdown: str
-
-
-@app.post("/api/fetch_google_form_responses")
-async def api_fetch_responses(request: FetchResponsesRequest):
-    """
-    Fetch and normalize responses from a Google Form/Sheets URL.
-    
-    This endpoint requires the teacher to have connected their Google account.
-    """
-    result = await fetch_google_form_responses(
-        request.google_form_url,
-        request.teacher_email,
-        request.answer_key
-    )
-    return result
+@app.get("/api/prompts/all")
+async def api_list_all_prompts(user=Depends(get_current_user)):
+    """List all prompts from all users (read others' prompts)."""
+    prompts = await get_all_prompts()
+    return {"prompts": prompts}
 
 
-@app.post("/api/parse_csv")
-async def api_parse_csv(request: ParseCSVRequest):
-    """
-    Parse CSV content directly (fallback when Google OAuth is not available).
-    """
-    result = parse_csv_responses(request.csv_content, request.answer_key)
-    return result
+@app.get("/api/prompts/default")
+async def api_get_default_prompt():
+    """Get the default analysis prompt template."""
+    return {"content": get_default_prompt()}
 
 
-@app.post("/api/send_email_report")
-async def api_send_email(request: SendEmailRequest):
-    """
-    Send an exam analysis report via email.
-    """
-    result = await send_email_report(
-        request.email,
-        request.subject,
-        request.body_markdown
-    )
-    return result
+@app.post("/api/prompts")
+async def api_save_prompt(body: PromptRequest, user=Depends(get_current_user)):
+    prompt_id = await save_prompt(user["id"], body.name, body.content)
+    prompt = await get_prompt(prompt_id)
+    return prompt
 
 
-@app.get("/api/health")
-@app.get("/health")
-async def health_check():
-    """Health check endpoint for HF Spaces."""
-    return {"status": "healthy", "service": "ClassLens"}
-
-
-@app.get("/test-routes")
-async def test_routes():
-    """Test endpoint to verify routes are working."""
-    return {
-        "message": "Routes are working!",
-        "report_demo_route": "/report-demo",
-        "available_paths": [
-            "/health",
-            "/api/health",
-            "/report-demo",
-            "/test-routes"
-        ]
-    }
-
-
-@app.get("/report-template.html")
-async def serve_report_template():
-    """Serve the report template HTML file."""
-    template_path = Path(__file__).parent.parent / "static" / "report-template.html"
-    if template_path.exists():
-        return FileResponse(
-            template_path,
-            media_type="text/html",
-            headers={"Cache-Control": "public, max-age=3600"}
-        )
-    return Response(status_code=404, content="Report template not found")
+@app.get("/api/prompts/{prompt_id}")
+async def api_get_prompt(prompt_id: int, user=Depends(get_current_user)):
+    prompt = await get_prompt(prompt_id)
+    if not prompt:
+        raise HTTPException(status_code=404, detail="Prompt not found")
+    return prompt
+
+
+@app.put("/api/prompts/{prompt_id}")
+async def api_update_prompt(prompt_id: int, body: PromptRequest, user=Depends(get_current_user)):
+    prompt = await get_prompt(prompt_id)
+    if not prompt or prompt["user_id"] != user["id"]:
+        raise HTTPException(status_code=404, detail="Prompt not found")
+    await update_prompt(prompt_id, body.name, body.content)
+    return await get_prompt(prompt_id)
+
+
+@app.delete("/api/prompts/{prompt_id}")
+async def api_delete_prompt(prompt_id: int, user=Depends(get_current_user)):
+    prompt = await get_prompt(prompt_id)
+    if not prompt or prompt["user_id"] != user["id"]:
+        raise HTTPException(status_code=404, detail="Prompt not found")
+    await delete_prompt(prompt_id)
+    return {"status": "deleted"}
+
+
+# =============================================================================
+# Report Generation Endpoints
+# =============================================================================
+
+class GenerateReportRequest(BaseModel):
+    prompt_id: Optional[int] = None
+    prompt_content: Optional[str] = None
+    model: str = "gpt-5.4"
+
+
+@app.post("/api/sessions/{session_id}/generate-report")
+async def api_generate_report(
+    session_id: int, body: GenerateReportRequest, user=Depends(get_current_user)
+):
+    session = await get_session(session_id)
+    if not session or session["user_id"] != user["id"]:
+        raise HTTPException(status_code=404, detail="Session not found")
+
+    # Load parsed data
+    data = await get_parsed_data(session_id)
+    questions = {}
+    student_answers = {}
+    teacher_answers = {}
+    for item in data:
+        if item["data_type"] == "questions":
+            questions = item["structured_data"]
+        elif item["data_type"] == "student_answers":
+            student_answers = item["structured_data"]
+        elif item["data_type"] == "teacher_answers":
+            teacher_answers = item["structured_data"]
+
+    if not questions:
+        raise HTTPException(status_code=400, detail="No questions data found. Upload and process files first.")
+
+    # Get prompt content
+    prompt_content = body.prompt_content
+    if not prompt_content and body.prompt_id:
+        prompt = await get_prompt(body.prompt_id)
+        if prompt:
+            prompt_content = prompt["content"]
+    if not prompt_content:
+        prompt_content = get_default_prompt()
+
+    try:
+        html = await generate_report(questions, student_answers, teacher_answers, prompt_content, body.model)
+        report_id = await save_report(session_id, body.prompt_id, html)
+        return {"report_id": report_id, "html_content": html}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Report generation failed: {str(e)}")
+
+
+@app.get("/api/sessions/{session_id}/reports")
+async def api_list_reports(session_id: int, user=Depends(get_current_user)):
+    session = await get_session(session_id)
+    if not session or session["user_id"] != user["id"]:
+        raise HTTPException(status_code=404, detail="Session not found")
+    reports = await get_reports(session_id)
+    return {"reports": reports}
+
+
+@app.get("/api/reports/{report_id}")
+async def api_get_report(report_id: int, user=Depends(get_current_user)):
+    report = await get_report(report_id)
+    if not report:
+        raise HTTPException(status_code=404, detail="Report not found")
+    return report
 
 
 # =============================================================================
-# Report Demo Route
+# Health Check
 # =============================================================================
 
-@app.get("/report-demo", response_class=Response)
-async def serve_report_demo():
-    """Serve the HTML report template demo - publicly accessible."""
-    # Try multiple possible locations (in order of preference)
-    base_dir = Path(__file__).parent.parent  # /home/user/app in Docker
-    possible_paths = [
-        base_dir / "report-template.html",  # Docker: /home/user/app/report-template.html
-        REPORT_TEMPLATE_PATH,  # From find_report_template() (fallback)
-        STATIC_DIR / "report-template.html" if STATIC_DIR.exists() else None,  # Static dir
-        Path(__file__).parent.parent.parent / "report-template.html",  # Dev fallback
-    ]
-    
-    # Filter out None values
-    possible_paths = [p for p in possible_paths if p is not None]
-    
-    for template_path in possible_paths:
-        if template_path and template_path.exists():
-            # Read file content and return with explicit headers
-            try:
-                content = template_path.read_text(encoding='utf-8')
-                return Response(
-                    content=content,
-                    media_type="text/html; charset=utf-8",
-                    headers={
-                        "Cache-Control": "public, max-age=3600",
-                        "X-Content-Type-Options": "nosniff",
-                        "Access-Control-Allow-Origin": "*",
-                    }
-                )
-            except Exception as e:
-                # If reading fails, try FileResponse as fallback
-                return FileResponse(
-                    template_path,
-                    media_type="text/html; charset=utf-8",
-                    headers={
-                        "Cache-Control": "public, max-age=3600",
-                        "Access-Control-Allow-Origin": "*",
-                    }
-                )
-    
-    # If not found, return helpful error message with debug info
-    current_dir = base_dir
-    files_in_dir = list(current_dir.glob("*")) if current_dir.exists() else []
-    searched_paths = [str(p) for p in possible_paths]
-    debug_info = {
-        "searched_paths": searched_paths,
-        "current_dir": str(current_dir),
-        "files_in_dir": [str(f.name) for f in files_in_dir[:10]],
-        "static_dir": str(STATIC_DIR) if STATIC_DIR.exists() else "does not exist",
-        "__file__": str(Path(__file__)),
-    }
-    return Response(
-        content=f"Report template not found.\nDebug info:\n{json.dumps(debug_info, indent=2)}",
-        status_code=404,
-        media_type="text/plain",
-        headers={"Access-Control-Allow-Origin": "*"}
-    )
+@app.get("/api/health")
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy", "service": "ClassLens", "version": "2.0.0"}
 
 
 # =============================================================================
 # Static File Serving (Production)
 # =============================================================================
 
-# Mount static files if directory exists (production Docker build)
-if STATIC_DIR.exists():
-    # Serve static assets (JS, CSS, images)
-    app.mount("/assets", StaticFiles(directory=STATIC_DIR / "assets"), name="assets")
-    
+if STATIC_DIR.exists() and (STATIC_DIR / "index.html").exists():
+    if (STATIC_DIR / "assets").exists():
+        app.mount("/assets", StaticFiles(directory=STATIC_DIR / "assets"), name="assets")
+
     @app.get("/favicon.ico")
     async def favicon():
         favicon_path = STATIC_DIR / "favicon.ico"
         if favicon_path.exists():
             return FileResponse(favicon_path)
         return Response(status_code=404)
-    
+
     @app.get("/")
     async def serve_spa():
-        """Serve the React SPA."""
         return FileResponse(STATIC_DIR / "index.html")
-    
+
     @app.get("/{full_path:path}")
     async def serve_spa_routes(full_path: str):
-        """Catch-all route to serve React SPA for client-side routing."""
-        # Don't serve SPA for API routes or specific endpoints
-        excluded_paths = ("api/", "auth/", "chatkit", "report-demo", "test-routes", "health")
-        if full_path.startswith(excluded_paths) or full_path in excluded_paths:
+        if full_path.startswith("api/") or full_path == "health":
             return Response(status_code=404)
-        
-        # Check if it's a static file
         file_path = STATIC_DIR / full_path
         if file_path.exists() and file_path.is_file():
             return FileResponse(file_path)
-        
-        # Otherwise serve index.html for SPA routing
         return FileResponse(STATIC_DIR / "index.html")
 else:
-    # Development mode - show API info
     @app.get("/")
     async def root():
-        """Root endpoint with API information (dev mode)."""
         return {
             "name": "ClassLens API",
-            "version": "1.0.0",
+            "version": "2.0.0",
             "mode": "development",
             "description": "AI-powered exam analysis for teachers",
-            "note": "Frontend served separately on port 3000",
-            "endpoints": {
-                "chatkit": "/chatkit",
-                "oauth_start": "/auth/start?teacher_email=...",
-                "oauth_callback": "/auth/callback",
-                "auth_status": "/auth/status?teacher_email=...",
-                "workflow_status": "/api/status/{session_id}",
-                "workflow_stream": "/api/status/{session_id}/stream",
-                "fetch_responses": "/api/fetch_google_form_responses",
-                "parse_csv": "/api/parse_csv",
-                "send_email": "/api/send_email_report",
-                "health": "/api/health",
-            }
         }

chatkit/backend/app/memory_store.py

@@ -1,115 +0,0 @@
-"""
-Simple in-memory store compatible with the ChatKit Store interface.
-A production app would implement this using a persistant database.
-"""
-
-from __future__ import annotations
-
-from collections import defaultdict
-
-from chatkit.store import NotFoundError, Store
-from chatkit.types import Attachment, Page, ThreadItem, ThreadMetadata
-
-
-class MemoryStore(Store[dict]):
-    def __init__(self):
-        self.threads: dict[str, ThreadMetadata] = {}
-        self.items: dict[str, list[ThreadItem]] = defaultdict(list)
-
-    async def load_thread(self, thread_id: str, context: dict) -> ThreadMetadata:
-        if thread_id not in self.threads:
-            raise NotFoundError(f"Thread {thread_id} not found")
-        return self.threads[thread_id]
-
-    async def save_thread(self, thread: ThreadMetadata, context: dict) -> None:
-        self.threads[thread.id] = thread
-
-    async def load_threads(
-        self, limit: int, after: str | None, order: str, context: dict
-    ) -> Page[ThreadMetadata]:
-        threads = list(self.threads.values())
-        return self._paginate(
-            threads,
-            after,
-            limit,
-            order,
-            sort_key=lambda t: t.created_at,
-            cursor_key=lambda t: t.id,
-        )
-
-    async def load_thread_items(
-        self, thread_id: str, after: str | None, limit: int, order: str, context: dict
-    ) -> Page[ThreadItem]:
-        items = self.items.get(thread_id, [])
-        return self._paginate(
-            items,
-            after,
-            limit,
-            order,
-            sort_key=lambda i: i.created_at,
-            cursor_key=lambda i: i.id,
-        )
-
-    async def add_thread_item(
-        self, thread_id: str, item: ThreadItem, context: dict
-    ) -> None:
-        self.items[thread_id].append(item)
-
-    async def save_item(self, thread_id: str, item: ThreadItem, context: dict) -> None:
-        items = self.items[thread_id]
-        for idx, existing in enumerate(items):
-            if existing.id == item.id:
-                items[idx] = item
-                return
-        items.append(item)
-
-    async def load_item(
-        self, thread_id: str, item_id: str, context: dict
-    ) -> ThreadItem:
-        for item in self.items.get(thread_id, []):
-            if item.id == item_id:
-                return item
-        raise NotFoundError(f"Item {item_id} not found in thread {thread_id}")
-
-    async def delete_thread(self, thread_id: str, context: dict) -> None:
-        self.threads.pop(thread_id, None)
-        self.items.pop(thread_id, None)
-
-    async def delete_thread_item(
-        self, thread_id: str, item_id: str, context: dict
-    ) -> None:
-        self.items[thread_id] = [
-            item for item in self.items.get(thread_id, []) if item.id != item_id
-        ]
-
-    def _paginate(
-        self,
-        rows: list,
-        after: str | None,
-        limit: int,
-        order: str,
-        sort_key,
-        cursor_key,
-    ):
-        sorted_rows = sorted(rows, key=sort_key, reverse=order == "desc")
-        start = 0
-        if after:
-            for idx, row in enumerate(sorted_rows):
-                if cursor_key(row) == after:
-                    start = idx + 1
-                    break
-        data = sorted_rows[start : start + limit]
-        has_more = start + limit < len(sorted_rows)
-        next_after = cursor_key(data[-1]) if has_more and data else None
-        return Page(data=data, has_more=has_more, after=next_after)
-
-    # Attachments are not implemented in the quickstart store
-
-    async def save_attachment(self, attachment: Attachment, context: dict) -> None:
-        raise NotImplementedError()
-
-    async def load_attachment(self, attachment_id: str, context: dict) -> Attachment:
-        raise NotImplementedError()
-
-    async def delete_attachment(self, attachment_id: str, context: dict) -> None:
-        raise NotImplementedError()

chatkit/backend/app/oauth.py

@@ -1,251 +0,0 @@
-"""Google OAuth2 authentication endpoints."""
-
-from __future__ import annotations
-
-import json
-from urllib.parse import urlencode
-from typing import Optional
-
-from fastapi import APIRouter, Request, HTTPException
-from fastapi.responses import RedirectResponse
-import httpx
-
-from .config import get_settings, GOOGLE_SCOPES
-from .database import save_oauth_tokens, get_oauth_tokens, delete_oauth_tokens
-
-router = APIRouter(prefix="/auth", tags=["authentication"])
-
-
-# Store state tokens temporarily (in production, use Redis or similar)
-_state_store: dict[str, str] = {}
-
-
-def get_redirect_uri(request: Request, settings) -> str:
-    """Get the OAuth redirect URI, auto-detecting from request if not configured."""
-    if settings.google_redirect_uri and settings.google_redirect_uri != "http://localhost:8000/auth/callback":
-        return settings.google_redirect_uri
-    
-    # Auto-detect from request
-    # Check for common proxy headers first
-    forwarded_proto = request.headers.get("x-forwarded-proto", "http")
-    forwarded_host = request.headers.get("x-forwarded-host") or request.headers.get("host", "localhost:8000")
-    
-    # Normalize 127.0.0.1 to localhost for local development (Google OAuth requires exact match)
-    if forwarded_host.startswith("127.0.0.1"):
-        forwarded_host = forwarded_host.replace("127.0.0.1", "localhost")
-    
-    # Build the redirect URI
-    return f"{forwarded_proto}://{forwarded_host}/auth/callback"
-
-
-@router.get("/start")
-async def start_auth(teacher_email: str, request: Request):
-    """
-    Start OAuth flow by redirecting to Google consent screen.
-    
-    Query params:
-        teacher_email: The teacher's email address
-    """
-    settings = get_settings()
-    
-    if not settings.google_client_id or not settings.google_client_secret:
-        raise HTTPException(
-            status_code=500,
-            detail="Google OAuth not configured. Please set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET."
-        )
-    
-    # Generate state token for CSRF protection
-    import secrets
-    state = secrets.token_urlsafe(32)
-    
-    # Get the redirect URI (auto-detect or from config)
-    redirect_uri = get_redirect_uri(request, settings)
-    
-    # Store both email and redirect_uri in state for callback
-    _state_store[state] = {"email": teacher_email, "redirect_uri": redirect_uri}
-    
-    # Build authorization URL
-    # Use "select_account consent" to allow account selection first, then show consent
-    # This is more flexible and works better when user isn't logged in
-    auth_params = {
-        "client_id": settings.google_client_id,
-        "redirect_uri": redirect_uri,
-        "response_type": "code",
-        "scope": " ".join(GOOGLE_SCOPES),
-        "access_type": "offline",  # Get refresh token
-        "prompt": "select_account consent",  # Allow account selection, then show consent
-        "state": state,
-        # Only add login_hint if email is provided and valid
-        # This helps pre-fill but doesn't break if user isn't logged in
-    }
-    
-    # Add login_hint only if email looks valid (helps pre-fill but not required)
-    if teacher_email and "@" in teacher_email:
-        auth_params["login_hint"] = teacher_email
-    
-    print(f"[OAuth] Starting auth for {teacher_email}")
-    print(f"[OAuth] Redirect URI: {redirect_uri}")
-    print(f"[OAuth] Scopes: {GOOGLE_SCOPES}")
-    print(f"[OAuth] Full auth URL: https://accounts.google.com/o/oauth2/v2/auth?{urlencode(auth_params)}")
-    
-    auth_url = f"https://accounts.google.com/o/oauth2/v2/auth?{urlencode(auth_params)}"
-    return RedirectResponse(url=auth_url)
-
-
-def get_frontend_url(request: Request, settings) -> str:
-    """Get the frontend URL, auto-detecting from request if not configured."""
-    if settings.frontend_url and settings.frontend_url != "http://localhost:3000":
-        return settings.frontend_url
-    
-    # Auto-detect from request (same origin for full-stack deployment)
-    forwarded_proto = request.headers.get("x-forwarded-proto", "http")
-    forwarded_host = request.headers.get("x-forwarded-host") or request.headers.get("host", "localhost:3000")
-    
-    return f"{forwarded_proto}://{forwarded_host}"
-
-
-@router.get("/callback")
-async def auth_callback(request: Request, code: str = None, state: str = None, error: str = None, error_description: str = None):
-    """
-    Handle OAuth callback from Google.
-    
-    Query params:
-        code: Authorization code from Google
-        state: State token for CSRF verification
-        error: Error message if authorization failed
-        error_description: Detailed error description from Google
-    """
-    settings = get_settings()
-    frontend_url = get_frontend_url(request, settings)
-    
-    if error:
-        # Log the full error details
-        error_msg = error
-        if error_description:
-            error_msg = f"{error}: {error_description}"
-        print(f"[OAuth] Error callback: {error_msg}")
-        print(f"[OAuth] Full query params: {dict(request.query_params)}")
-        return RedirectResponse(
-            url=f"{frontend_url}?auth_error={error_msg}"
-        )
-    
-    if not code or not state:
-        return RedirectResponse(
-            url=f"{frontend_url}?auth_error=missing_params"
-        )
-    
-    # Verify state and get stored data
-    state_data = _state_store.pop(state, None)
-    if not state_data:
-        return RedirectResponse(
-            url=f"{frontend_url}?auth_error=invalid_state"
-        )
-    
-    teacher_email = state_data["email"]
-    redirect_uri = state_data["redirect_uri"]
-    
-    print(f"[OAuth] Callback for {teacher_email}")
-    print(f"[OAuth] Using redirect_uri: {redirect_uri}")
-    
-    # Exchange code for tokens
-    try:
-        async with httpx.AsyncClient() as client:
-            token_response = await client.post(
-                "https://oauth2.googleapis.com/token",
-                data={
-                    "client_id": settings.google_client_id,
-                    "client_secret": settings.google_client_secret,
-                    "code": code,
-                    "grant_type": "authorization_code",
-                    "redirect_uri": redirect_uri,
-                },
-            )
-            
-            if token_response.status_code != 200:
-                print(f"[OAuth] Token exchange failed: {token_response.text}")
-                return RedirectResponse(
-                    url=f"{frontend_url}?auth_error=token_exchange_failed"
-                )
-            
-            tokens = token_response.json()
-            
-            # Verify the user's email matches
-            userinfo_response = await client.get(
-                "https://www.googleapis.com/oauth2/v2/userinfo",
-                headers={"Authorization": f"Bearer {tokens['access_token']}"}
-            )
-            
-            if userinfo_response.status_code == 200:
-                userinfo = userinfo_response.json()
-                verified_email = userinfo.get("email", "")
-                
-                # Use the verified email from Google
-                if verified_email:
-                    teacher_email = verified_email
-            
-            # Save tokens
-            await save_oauth_tokens(teacher_email, {
-                "access_token": tokens.get("access_token"),
-                "refresh_token": tokens.get("refresh_token"),
-                "expires_in": tokens.get("expires_in"),
-            })
-            
-            print(f"[OAuth] Success for {teacher_email}")
-            return RedirectResponse(
-                url=f"{frontend_url}?auth_success=true&email={teacher_email}"
-            )
-            
-    except Exception as e:
-        print(f"[OAuth] Error: {e}")
-        return RedirectResponse(
-            url=f"{frontend_url}?auth_error={str(e)}"
-        )
-
-
-@router.get("/status")
-async def auth_status(teacher_email: str):
-    """
-    Check if a teacher is authenticated.
-    
-    Query params:
-        teacher_email: The teacher's email address
-    """
-    tokens = await get_oauth_tokens(teacher_email)
-    return {
-        "authenticated": tokens is not None,
-        "email": teacher_email if tokens else None
-    }
-
-
-@router.post("/disconnect")
-async def disconnect(teacher_email: str):
-    """
-    Disconnect a teacher's Google account.
-    
-    Query params:
-        teacher_email: The teacher's email address
-    """
-    await delete_oauth_tokens(teacher_email)
-    return {"status": "ok", "message": "Google account disconnected"}
-
-
-@router.get("/debug")
-async def debug_oauth(request: Request):
-    """Debug endpoint to check OAuth configuration."""
-    settings = get_settings()
-    redirect_uri = get_redirect_uri(request, settings)
-    frontend_url = get_frontend_url(request, settings)
-    
-    return {
-        "google_client_id_configured": bool(settings.google_client_id),
-        "google_client_secret_configured": bool(settings.google_client_secret),
-        "configured_redirect_uri": settings.google_redirect_uri,
-        "auto_detected_redirect_uri": redirect_uri,
-        "configured_frontend_url": settings.frontend_url,
-        "auto_detected_frontend_url": frontend_url,
-        "request_headers": {
-            "host": request.headers.get("host"),
-            "x-forwarded-host": request.headers.get("x-forwarded-host"),
-            "x-forwarded-proto": request.headers.get("x-forwarded-proto"),
-        }
-    }

chatkit/backend/app/report_generator.py

@@ -0,0 +1,165 @@
+"""Report generation using OpenAI GPT directly (no ChatKit)."""
+
+from __future__ import annotations
+
+import json
+import re
+
+from openai import AsyncOpenAI
+
+from .config import get_settings
+
+
+REPORT_SYSTEM_PROMPT = """You are ClassLens, an AI teaching assistant that creates beautiful, comprehensive exam analysis reports.
+
+## Your Task
+Generate a complete, self-contained HTML report based on the exam data and prompt provided.
+
+## Language
+- Use Traditional Chinese (繁體中文) for all content
+- Include bilingual labels where appropriate (English + 中文)
+
+## HTML Report Requirements
+
+Generate a complete HTML file with these sections:
+
+### Section 1: 📝 Q&A Analysis (題目詳解)
+For each question:
+- Question number, text, and type
+- Correct answer highlighted
+- Concept tags (e.g., 🎯 細節理解, 🔍 推論能力)
+- Detailed explanation with: what it tests, solving strategy, common mistakes, learning points
+
+### Section 2: 📊 Statistics (成績統計)
+- Stats grid: total students, average, highest, lowest
+- Score distribution bar chart (Chart.js)
+- Question accuracy doughnut chart (Chart.js)
+- Student details table with score badges (color-coded)
+
+### Section 3: 👩‍🏫 Teacher Insights (教師分析與建議)
+- Overall performance analysis
+- Teaching recommendations
+- Individual student support suggestions (🔴 needs attention, 🟡 needs reinforcement, 🟢 high performers)
+
+## HTML Template Structure
+
+Use this dark theme with the following CSS variables:
+```
+:root {
+    --bg-primary: #0f1419;
+    --bg-secondary: #1a2332;
+    --bg-card: #212d3b;
+    --accent-coral: #ff6b6b;
+    --accent-teal: #4ecdc4;
+    --accent-gold: #ffd93d;
+    --accent-purple: #a855f7;
+    --text-primary: #f1f5f9;
+    --text-secondary: #94a3b8;
+    --border-color: #334155;
+}
+```
+
+Include Chart.js via CDN: `<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>`
+
+## Privacy
+- Use partial names (e.g., 李X恩) in reports
+- Never expose full student identifiers
+- Group low performers sensitively
+
+## Output
+Return ONLY the complete HTML document. No markdown code fences. Just raw HTML starting with <!DOCTYPE html>."""
+
+
+DEFAULT_ANALYSIS_PROMPT = """請根據以下考試數據生成一份完整的分析報告。
+
+## 考試題目：
+{questions}
+
+## 學生答案：
+{student_answers}
+
+## 標準答案：
+{teacher_answers}
+
+請生成包含以下內容的 HTML 報告：
+1. 題目詳解 (Q&A Analysis) - 每題的詳細分析、解題策略、常見錯誤
+2. 成績統計 (Statistics) - 包含 Chart.js 圖表的統計分析
+3. 教師分析與建議 (Teacher Insights) - 教學改進建議和個別輔導建議
+
+請自動計算每位學生的成績，識別常見錯誤模式，並提供具體的教學建議。"""
+
+
+def get_default_prompt() -> str:
+    return DEFAULT_ANALYSIS_PROMPT
+
+
+def fill_prompt(template: str, questions: dict, student_answers: dict, teacher_answers: dict) -> str:
+    """Fill the prompt template with actual data."""
+    return template.format(
+        questions=json.dumps(questions, ensure_ascii=False, indent=2),
+        student_answers=json.dumps(student_answers, ensure_ascii=False, indent=2),
+        teacher_answers=json.dumps(teacher_answers, ensure_ascii=False, indent=2),
+    )
+
+
+def extract_html(content: str) -> str:
+    """Extract HTML from potential markdown code blocks."""
+    # Try to find HTML in code blocks first
+    match = re.search(r"```html?\s*\n(.*?)```", content, re.DOTALL)
+    if match:
+        return match.group(1).strip()
+    # If content starts with <!DOCTYPE or <html, it's already raw HTML
+    stripped = content.strip()
+    if stripped.startswith("<!DOCTYPE") or stripped.startswith("<html"):
+        return stripped
+    return stripped
+
+
+async def generate_report(
+    questions_data: dict,
+    student_answers_data: dict,
+    teacher_answers_data: dict,
+    prompt_template: str,
+    model: str = "gpt-5.4",
+) -> str:
+    """
+    Generate HTML report by sending parsed exam data + prompt to OpenAI.
+    Uses the same OPENAI_API_KEY as file parsing.
+    Returns complete HTML string.
+    """
+    settings = get_settings()
+    client = AsyncOpenAI(api_key=settings.openai_api_key)
+
+    filled_prompt = fill_prompt(prompt_template, questions_data, student_answers_data, teacher_answers_data)
+
+    kwargs: dict = {
+        "model": model,
+        "messages": [
+            {"role": "system", "content": REPORT_SYSTEM_PROMPT},
+            {"role": "user", "content": filled_prompt},
+        ],
+        "max_completion_tokens": 16384,
+        "temperature": 0.3,
+    }
+
+    try:
+        response = await client.chat.completions.create(**kwargs)
+    except Exception as e:
+        # Some models may not support max_completion_tokens; fallback
+        if "max_completion_tokens" in str(e):
+            kwargs.pop("max_completion_tokens")
+            kwargs["max_tokens"] = 16384
+            response = await client.chat.completions.create(**kwargs)
+        else:
+            raise
+
+    choice = response.choices[0]
+    html_content = choice.message.content
+    if not html_content:
+        reason = getattr(choice, "finish_reason", "unknown")
+        refusal = getattr(choice.message, "refusal", None)
+        detail = f"finish_reason={reason}"
+        if refusal:
+            detail += f", refusal={refusal}"
+        raise ValueError(f"Model returned empty content ({detail}). Try a different model or simplify your prompt.")
+    return extract_html(html_content)

chatkit/backend/app/server.py

@@ -1,589 +0,0 @@
-"""ClassLens ChatKit server with exam analysis agent and tools."""
-
-from __future__ import annotations
-
-import json
-from typing import Any, AsyncIterator
-
-from agents import Runner, Agent, function_tool
-from chatkit.agents import AgentContext, simple_to_agent_input, stream_agent_response
-from chatkit.server import ChatKitServer
-from chatkit.types import ThreadMetadata, ThreadStreamEvent, UserMessageItem
-
-from .memory_store import MemoryStore
-from .google_sheets import fetch_google_form_responses, parse_csv_responses, fetch_public_sheet, extract_sheet_id
-from .email_service import send_email_report
-from .database import save_report
-from .status_tracker import update_status, add_reasoning_step, WorkflowStep, reset_status
-
-
-MAX_RECENT_ITEMS = 50
-DEFAULT_MODEL = "gpt-4.1-mini"  # Default model for cost efficiency (~10x cheaper)
-
-# Available models
-AVAILABLE_MODELS = {
-    "gpt-4.1-mini": {
-        "name": "GPT-4.1-mini",
-        "description": "快速且經濟實惠（默認）",
-        "cost": "低",
-    },
-    "gpt-4o": {
-        "name": "GPT-4o",
-        "description": "高性能，適合複雜分析",
-        "cost": "中",
-    },
-    "gpt-4o-mini": {
-        "name": "GPT-4o-mini",
-        "description": "平衡性能與成本",
-        "cost": "低",
-    },
-    "gpt-5-pro": {
-        "name": "GPT-5 Pro",
-        "description": "最新旗艦模型，具備強大推理能力",
-        "cost": "高",
-    },
-    "o3-pro": {
-        "name": "O3 Pro",
-        "description": "深度推理模型，適合複雜問題分析",
-        "cost": "高",
-    },
-    "o1-preview": {
-        "name": "O1 Preview",
-        "description": "具備深度推理能力",
-        "cost": "高",
-    },
-    "o1-mini": {
-        "name": "O1 Mini",
-        "description": "具備推理能力，經濟實惠",
-        "cost": "中",
-    },
-}
-
-# Current session ID (simplified - in production use proper session management)
-_current_session_id = "default"
-
-
-def set_session_id(session_id: str):
-    global _current_session_id
-    _current_session_id = session_id
-
-
-def get_model_from_context(context: dict[str, Any]) -> str:
-    """Get model from context, default to DEFAULT_MODEL if not specified."""
-    # Try multiple ways to get model from context
-    model = (
-        context.get("model") or
-        context.get("request", {}).get("model") or
-        # Check query params
-        (context.get("request", {}).get("query_params", {}).get("model") if hasattr(context.get("request", {}), "query_params") else None) or
-        # Check headers
-        (context.get("request", {}).headers.get("x-model") if hasattr(context.get("request", {}), "headers") else None)
-    )
-    
-    if model and model in AVAILABLE_MODELS:
-        return model
-    return DEFAULT_MODEL
-
-
-def create_agent(model: str) -> Agent[AgentContext[dict[str, Any]]]:
-    """Create an agent with the specified model."""
-    return Agent[AgentContext[dict[str, Any]]](
-        model=model,
-        name="ClassLens",
-        instructions=EXAMINSIGHT_INSTRUCTIONS,
-        tools=[
-            fetch_responses,
-            parse_csv_data,
-            send_report_email,
-            save_analysis_report,
-            log_reasoning,
-        ],
-    )
-
-
-# =============================================================================
-# Tool Definitions with Status Tracking
-# =============================================================================
-
-@function_tool
-async def fetch_responses(
-    google_form_url: str,
-    teacher_email: str = "",
-    answer_key_json: str = ""
-) -> str:
-    """
-    Fetch student responses from a Google Form/Sheets URL.
-    First tries to fetch as a public sheet (no auth needed).
-    If that fails and teacher_email is provided, tries OAuth.
-    
-    Args:
-        google_form_url: The URL of the Google Form response spreadsheet
-        teacher_email: The teacher's email address for authentication (optional for public sheets)
-        answer_key_json: Optional JSON string with correct answers, e.g. {"Q1": "4", "Q2": "acceleration"}
-    
-    Returns:
-        JSON string with normalized exam data including questions and student responses
-    """
-    # Log tool call
-    await add_reasoning_step(_current_session_id, "tool", f"🔧 Tool: fetch_responses(url={google_form_url[:50]}...)", "active")
-    
-    answer_key = None
-    if answer_key_json:
-        try:
-            answer_key = json.loads(answer_key_json)
-        except json.JSONDecodeError:
-            pass
-    
-    # First, try to fetch as a public sheet (no OAuth needed)
-    sheet_id = extract_sheet_id(google_form_url)
-    if sheet_id:
-        await add_reasoning_step(_current_session_id, "tool", "📥 Downloading spreadsheet data...", "active")
-        public_result = await fetch_public_sheet(sheet_id, answer_key)
-        if "error" not in public_result:
-            await add_reasoning_step(_current_session_id, "result", "✅ Data fetched successfully", "completed")
-            return json.dumps(public_result, indent=2)
-        
-        # If public fetch failed and we have teacher email, try OAuth
-        if teacher_email:
-            await add_reasoning_step(_current_session_id, "tool", "🔐 Using OAuth to access private sheet...", "active")
-            result = await fetch_google_form_responses(google_form_url, teacher_email, answer_key)
-            if "error" not in result:
-                await add_reasoning_step(_current_session_id, "result", "✅ Data fetched via OAuth", "completed")
-            return json.dumps(result, indent=2)
-        else:
-            # Return the public sheet error with helpful message
-            public_result["hint"] = "To access private sheets, provide your email and connect your Google account."
-            await add_reasoning_step(_current_session_id, "error", "❌ Could not access sheet", "completed")
-            return json.dumps(public_result, indent=2)
-    
-    await add_reasoning_step(_current_session_id, "error", "❌ Invalid URL format", "completed")
-    return json.dumps({
-        "error": "Could not extract sheet ID from URL. Please provide a valid Google Sheets URL.",
-        "hint": "URL should look like: https://docs.google.com/spreadsheets/d/SHEET_ID/edit"
-    }, indent=2)
-
-
-@function_tool
-async def parse_csv_data(
-    csv_content: str,
-    answer_key_json: str = ""
-) -> str:
-    """
-    Parse CSV content directly (for manual upload fallback).
-    
-    Args:
-        csv_content: The raw CSV content with headers and student responses
-        answer_key_json: Optional JSON string with correct answers
-    
-    Returns:
-        JSON string with normalized exam data
-    """
-    await add_reasoning_step(_current_session_id, "tool", "🔧 Tool: parse_csv_data()", "active")
-    
-    answer_key = None
-    if answer_key_json:
-        try:
-            answer_key = json.loads(answer_key_json)
-        except json.JSONDecodeError:
-            pass
-    
-    result = parse_csv_responses(csv_content, answer_key)
-    
-    await add_reasoning_step(_current_session_id, "result", "✅ CSV parsed successfully", "completed")
-    
-    return json.dumps(result, indent=2)
-
-
-@function_tool
-async def send_report_email(
-    email: str,
-    subject: str,
-    body_markdown: str
-) -> str:
-    """
-    Send the exam analysis report to the teacher via email.
-    
-    Args:
-        email: The teacher's email address
-        subject: Email subject line
-        body_markdown: The full report in markdown format
-    
-    Returns:
-        JSON string with status of the email send operation
-    """
-    await add_reasoning_step(_current_session_id, "tool", f"🔧 Tool: send_report_email(to={email})", "active")
-    
-    result = await send_email_report(email, subject, body_markdown)
-    
-    if result.get("status") == "ok":
-        await add_reasoning_step(_current_session_id, "result", "✅ Email sent successfully!", "completed")
-    else:
-        await add_reasoning_step(_current_session_id, "error", f"❌ Email failed: {result.get('message', 'unknown error')}", "completed")
-    
-    return json.dumps(result)
-
-
-@function_tool
-async def save_analysis_report(
-    teacher_email: str,
-    exam_title: str,
-    report_markdown: str,
-    report_json: str
-) -> str:
-    """
-    Save the analysis report to the database for future reference.
-    
-    Args:
-        teacher_email: The teacher's email address
-        exam_title: Title of the exam
-        report_markdown: The report in markdown format
-        report_json: The structured report data in JSON format
-    
-    Returns:
-        Confirmation message
-    """
-    await add_reasoning_step(_current_session_id, "tool", f"🔧 Tool: save_analysis_report(exam={exam_title})", "active")
-    await add_reasoning_step(_current_session_id, "result", "✅ Report saved to database", "completed")
-    
-    await save_report(teacher_email, exam_title, report_markdown, report_json)
-    return json.dumps({"status": "saved", "message": "Report saved successfully"})
-
-
-@function_tool
-async def log_reasoning(thought: str) -> str:
-    """
-    Log your current thinking or reasoning step.
-    Use this to show the user what you're analyzing or planning.
-    
-    Args:
-        thought: Your current thought, reasoning, or task breakdown
-    
-    Returns:
-        Confirmation
-    """
-    await add_reasoning_step(_current_session_id, "thinking", thought, "completed")
-    return json.dumps({"status": "logged"})
-
-
-# =============================================================================
-# ClassLens Agent Definition
-# =============================================================================
-
-EXAMINSIGHT_INSTRUCTIONS = """You are ClassLens, an AI teaching assistant that creates beautiful, comprehensive exam analysis reports for teachers.
-
-## Language & Communication
-- Always communicate in Traditional Chinese (繁體中文, zh-TW)
-- Use polite and professional language
-- When greeting users, say: "您好！我是 ClassLens 助手，今天能為您���些什麼？"
-- All responses, explanations, and reports should be in Traditional Chinese unless the user specifically requests English
-
-## Your Core Mission
-
-Transform raw Google Form quiz responses into professional, teacher-ready HTML reports with:
-1. Detailed question analysis with bilingual explanations (English + 中文)
-2. Visual statistics with Chart.js charts
-3. Actionable teaching recommendations
-4. Individual student support suggestions
-
-## IMPORTANT: Show Your Reasoning
-
-Use `log_reasoning` to show your thinking process. Call it at key decision points:
-- `log_reasoning("Task: Analyze 12 students × 5 questions, generate HTML report")`
-- `log_reasoning("Grading Q1: 5 correct (42%), Q2: 10 correct (83%)")`
-- `log_reasoning("Pattern: Many students confused 'is' vs 'wants to be'")`
-
-## Workflow
-
-### Step 1: Fetch & Analyze Data
-Use `fetch_responses` with the Google Form URL.
-Log observations: `log_reasoning("Found 12 students, 5 questions. Q1-Q4 multiple choice, Q5 writing.")`
-
-### Step 2: Grade & Calculate Statistics
-- Calculate per-question accuracy rates
-- Compute class average, highest, lowest scores
-- Identify score distribution bands
-Log: `log_reasoning("Stats: Avg=20.8/70, Q1=42%, Q2=83%, Q3=50%, Q4=83%")`
-
-### Step 3: Identify Patterns & Misconceptions
-Analyze common mistakes and their root causes.
-Log: `log_reasoning("Misconception: Students confused Bella (IS teacher) with Eddie (WANTS TO BE teacher)")`
-
-### Step 4: Generate HTML Report
-
-**CRITICAL: Generate a complete, self-contained HTML file** that includes:
-
-#### Required HTML Structure:
-
-```html
-<!DOCTYPE html>
-<html lang="zh-TW">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>[Quiz Title] Report</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <style>
-        /* Dark theme with coral/teal accents */
-        :root {
-            --bg-primary: #0f1419;
-            --bg-secondary: #1a2332;
-            --bg-card: #212d3b;
-            --accent-coral: #ff6b6b;
-            --accent-teal: #4ecdc4;
-            --accent-gold: #ffd93d;
-            --accent-purple: #a855f7;
-            --text-primary: #f1f5f9;
-            --text-secondary: #94a3b8;
-            --border-color: #334155;
-        }
-        /* Include comprehensive CSS for all elements */
-    </style>
-</head>
-<body>
-    <!-- Header with quiz title and Google Form link -->
-    <!-- Navigation tabs: Q&A, Statistics, Teacher Insights -->
-    <!-- Main content sections -->
-    <!-- Chart.js scripts -->
-</body>
-</html>
-```
-
-#### Section 1: 📝 Q&A Analysis (題目詳解)
-
-For EACH question, include:
-1. **Question number badge** (gradient circle)
-2. **Question text** (bilingual: English + Chinese)
-3. **Answer box** with correct answer highlighted
-4. **Concept tags** showing skills tested (e.g., 🎯 細節理解, 🔍 推論能力)
-5. **Detailed explanation** (詳解) with:
-   - What the question tests (這題測試什麼？)
-   - Key solving strategy (解題關鍵)
-   - Common mistakes (常見錯誤)
-   - Learning points (學習重點)
-
-If there's a reading passage, include it with `<span class="highlight">` for key terms.
-
-#### Section 2: 📊 Statistics (成績統計)
-
-Include:
-1. **Stats grid**: Total students, Average, Highest, Lowest
-2. **Score distribution bar chart** (Chart.js)
-3. **Question accuracy doughnut chart** (Chart.js)
-4. **Student details table** with columns:
-   - Name (姓名), Class (班級), Score, Q1-Qn status (✅/❌)
-   - Color-coded score badges: high (teal), mid (gold), low (coral)
-
-#### Section 3: 👩‍🏫 Teacher Insights (教師分析與建議)
-
-Include:
-1. **Overall Performance Analysis** (整體表現分析)
-   - Summary paragraph
-   - Per-question breakdown with accuracy % and issues identified
-
-2. **Teaching Recommendations** (教學改進建議)
-   - Specific, actionable suggestions based on data
-   - Priority areas to address
-
-3. **Next Exam Prompt** (下次出題 Prompt 建議)
-   - Ready-to-use AI prompt for generating the next quiz
-   - Include specific areas to reinforce based on this quiz's results
-
-4. **Individual Support** (個別輔導建議)
-   - 🔴 Students needing attention (0 or very low scores)
-   - 🟡 Students needing reinforcement
-   - 🟢 High performers (potential peer tutors)
-
-#### Chart.js Implementation
-
-Include these chart configurations:
-```javascript
-// Score Distribution Chart
-new Chart(document.getElementById('scoreChart').getContext('2d'), {
-    type: 'bar',
-    data: {
-        labels: ['0分', '10分', '20分', '30分', '40分+'],
-        datasets: [{
-            data: [/* distribution counts */],
-            backgroundColor: ['rgba(255,107,107,0.7)', ...],
-            borderRadius: 8
-        }]
-    },
-    options: { /* dark theme styling */ }
-});
-
-// Question Accuracy Chart
-new Chart(document.getElementById('questionChart').getContext('2d'), {
-    type: 'doughnut',
-    data: {
-        labels: ['Q1 (XX%)', 'Q2 (XX%)', ...],
-        datasets: [{ data: [/* accuracy rates */] }]
-    }
-});
-```
-
-### Step 5: Summary and Email Report
-
-**CRITICAL: After analyzing the exam data, follow these steps:**
-
-1. **Display a bullet-point summary** in chat (in Traditional Chinese):
-   - 總學生數、平均分數、最高分、最低分
-   - 各題正確率（例如：Q1: 85%, Q2: 60%, Q3: 90%）
-   - 主要發現（例如：多數學生在 Q2 答錯，可能對某概念理解不足）
-   - 需要關注的學生（低分學生）
-   - 表現優秀的學生（可作為同儕導師）
-   
-   Format example:
-   ```
-   📊 考試分析摘要：
-   
-   • 總學生數：25 人
-   • 平均分數：72 分（滿分 100）
-   • 最高分：95 分，最低分：45 分
-   
-   📈 各題正確率：
-   • Q1：85% 正確
-   • Q2：60% 正確 ⚠️（需要加強）
-   • Q3：90% 正確
-   
-   🔍 主要發現：
-   • 多數學生在 Q2 答錯，可能對「加速度」概念理解不足
-   • 約 30% 學生在開放式問題中表達不清楚
-   
-   👥 需要關注的學生：3 人（分數低於 50 分）
-   ⭐ 表現優秀的學生：5 人（分數高於 90 分，可作為同儕導師）
-   ```
-
-2. **Ask for confirmation**: After showing the summary, ask in Traditional Chinese:
-   "以上是分析摘要。您希望我生成完整的 HTML 詳細報告並發送到您的電子郵件嗎？"
-   
-3. **Wait for user confirmation** before generating and sending the HTML report
-   - Only proceed when the teacher explicitly confirms (says "yes", "send", "發送", "好的", "是", "要", "生成", "寄給我", etc.)
-   
-4. **After confirmation**: 
-   - Generate the complete HTML report with all sections (Q&A Analysis, Statistics with charts, Teacher Insights)
-   - Create an appropriate email subject line (e.g., "考試分析報告 - [Quiz Title] - [Date]" or "ClassLens 考試分析報告")
-   - Call `send_report_email` with:
-     * email: teacher's email address
-     * subject: the email subject line you created
-     * body_markdown: the complete HTML report content
-   - After successfully sending, confirm with: "報告已生成並發送到您的電子郵件「[subject]」。報告包含詳細的題目分析、統計圖表和教學建議。請檢查您的收件匣。"
-   - Make sure to include the actual subject line in the confirmation message (replace [subject] with the actual subject you used)
-
-## Output Format
-
-When analyzing exam data:
-1. First display a bullet-point summary in chat (in Traditional Chinese)
-2. Ask: "以上是分析摘要。您希望我生成完整的 HTML 詳細報告並發送到您的電子郵件嗎？"
-3. Wait for user confirmation
-4. Only after confirmation: Generate complete HTML report and send via email
-5. Do NOT automatically generate or send the HTML report - always show summary first and ask for confirmation
-
-## Design Principles
-
-- **Dark theme** with coral (#ff6b6b) and teal (#4ecdc4) accents
-- **Bilingual** content (English + Traditional Chinese)
-- **Responsive** layout for mobile viewing
-- **Smooth scrolling** navigation
-- **Hover effects** on cards and tables
-- **Gradient accents** for visual interest
-
-## Handling Edge Cases
-
-- No answer key: Infer patterns or ask teacher for correct answers
-- Private sheet: Guide teacher through OAuth connection
-- Writing questions: Provide rubric and sample excellent responses
-- Few students: Adjust charts to prevent visual distortion
-
-## Privacy
-
-- Use partial names (e.g., 李X恩) in reports
-- Never expose full student identifiers
-- Group low performers sensitively
-
-## Initial Conversation Flow
-
-When starting a new conversation, follow this sequence:
-
-1. **Greet the teacher** in Traditional Chinese: "您好！我是 ClassLens 助手，今天能為您做些什麼？"
-
-2. **Ask for Google Form/Sheet URL**: "請提供您的 Google 表單或試算表網址。"
-
-3. **Ask about answer key** (標準答案):
-   - "請問您是否方便提供本次考試的正確答案（標準答案）？"
-   - "如果您有標準答案，請提供給我，這樣我可以更準確地評分和分析。"
-   - "如果您沒有標準答案，我可以嘗試根據學生的回答模式自動推斷標準答案。您希望我為您自動生成標準答案嗎？"
-
-4. **Ask for email**: "請提供您的電子郵件地址，以便我將分析報告發送給您。"
-
-5. **Wait for all information** before starting analysis:
-   - Google Form/Sheet URL (required)
-   - Answer key (optional, but recommended for accuracy)
-   - Teacher email (required for sending report)
-
-## Answer Key Handling
-
-- **If teacher provides answer key**: Use it directly for accurate grading
-- **If teacher doesn't have answer key but wants auto-generation**: 
-  - Analyze student responses to infer the most likely correct answers
-  - Show the inferred answers to the teacher for confirmation
-  - Ask: "根據學生回答模式，我推斷的標準答案如下：[列出答案]。請確認這些答案是否正確，或提��修正。"
-- **If teacher doesn't provide and doesn't want auto-generation**: 
-  - Proceed with analysis but note that grading accuracy may be limited
-  - Focus on response patterns and common mistakes rather than absolute correctness"""
-
-
-# Default agent (will be overridden by dynamic agent creation in respond method)
-classlens_agent = create_agent(DEFAULT_MODEL)
-
-
-# =============================================================================
-# ChatKit Server Implementation
-# =============================================================================
-
-class ClassLensChatServer(ChatKitServer[dict[str, Any]]):
-    """Server implementation for ClassLens exam analysis."""
-
-    def __init__(self) -> None:
-        self.store: MemoryStore = MemoryStore()
-        super().__init__(self.store)
-
-    async def respond(
-        self,
-        thread: ThreadMetadata,
-        item: UserMessageItem | None,
-        context: dict[str, Any],
-    ) -> AsyncIterator[ThreadStreamEvent]:
-        # Reset status for new analysis
-        reset_status(thread.id)
-        set_session_id(thread.id)
-        
-        # Get model from context (user selection from frontend)
-        selected_model = get_model_from_context(context)
-        
-        # Create agent with selected model
-        agent = create_agent(selected_model)
-        
-        items_page = await self.store.load_thread_items(
-            thread.id,
-            after=None,
-            limit=MAX_RECENT_ITEMS,
-            order="desc",
-            context=context,
-        )
-        items = list(reversed(items_page.data))
-        agent_input = await simple_to_agent_input(items)
-
-        agent_context = AgentContext(
-            thread=thread,
-            store=self.store,
-            request_context=context,
-        )
-
-        result = Runner.run_streamed(
-            agent,
-            agent_input,
-            context=agent_context,
-        )
-
-        async for event in stream_agent_response(agent_context, result):
-            yield event

chatkit/backend/app/status_tracker.py

@@ -1,102 +0,0 @@
-"""Real-time status tracking for AI agent reasoning."""
-
-from __future__ import annotations
-
-import asyncio
-from datetime import datetime
-from typing import Optional
-from collections import defaultdict
-
-# Global status store
-_status_store: dict[str, dict] = defaultdict(lambda: {
-    "current_step": None,
-    "steps": [],
-    "started_at": None,
-    "completed_at": None,
-})
-
-_subscribers: dict[str, list[asyncio.Queue]] = defaultdict(list)
-
-
-class WorkflowStep:
-    FETCH = "fetch"
-    NORMALIZE = "normalize"
-    GRADE = "grade"
-    EXPLAIN = "explain"
-    GROUP = "group"
-    REPORT = "report"
-    EMAIL = "email"
-
-
-async def add_reasoning_step(session_id: str, step_type: str, content: str, status: str = "completed"):
-    """Add a reasoning step to show what the AI is doing."""
-    store = _status_store[session_id]
-    
-    if store["started_at"] is None:
-        store["started_at"] = datetime.utcnow().isoformat()
-    
-    # Mark any active steps as completed
-    for s in store["steps"]:
-        if s.get("status") == "active":
-            s["status"] = "completed"
-    
-    step_data = {
-        "type": step_type,  # "tool", "result", "error", "thinking"
-        "content": content,
-        "status": status,
-        "timestamp": datetime.utcnow().isoformat(),
-    }
-    
-    store["steps"].append(step_data)
-    store["current_step"] = step_type if status == "active" else None
-    
-    # Emit with "reasoning" key for frontend
-    emit_data = {
-        "reasoning": store["steps"],
-        "started_at": store["started_at"],
-        "completed_at": store["completed_at"],
-    }
-    
-    await notify_subscribers(session_id, emit_data)
-
-
-async def update_status(session_id: str, step: str, status: str = "active", detail: str = ""):
-    """Update the current workflow status (legacy support)."""
-    await add_reasoning_step(session_id, step, detail, status)
-
-
-async def notify_subscribers(session_id: str, status: dict):
-    """Notify all subscribers of status change."""
-    for queue in _subscribers[session_id]:
-        try:
-            await queue.put(status.copy())
-        except:
-            pass
-
-
-def get_status(session_id: str) -> dict:
-    """Get current status for a session."""
-    return dict(_status_store[session_id])
-
-
-def reset_status(session_id: str):
-    """Reset status for a new analysis."""
-    _status_store[session_id] = {
-        "current_step": None,
-        "steps": [],
-        "started_at": None,
-        "completed_at": None,
-    }
-
-
-async def subscribe(session_id: str) -> asyncio.Queue:
-    """Subscribe to status updates for a session."""
-    queue = asyncio.Queue()
-    _subscribers[session_id].append(queue)
-    return queue
-
-
-def unsubscribe(session_id: str, queue: asyncio.Queue):
-    """Unsubscribe from status updates."""
-    if queue in _subscribers[session_id]:
-        _subscribers[session_id].remove(queue)

chatkit/backend/pyproject.toml

@@ -1,23 +1,21 @@
 [project]
-name = "examinsight-backend"
-version = "0.1.0"
-description = "ExamInsight: AI-powered exam analysis for teachers using ChatKit"
+name = "classlens-backend"
+version = "2.0.0"
+description = "ClassLens: AI-powered exam analysis for teachers"
 requires-python = ">=3.10"
 dependencies = [
     "fastapi>=0.114,<0.116",
     "uvicorn[standard]>=0.36,<0.37",
     "openai>=1.40",
-    "openai-chatkit>=1.4.0,<2",
-    "google-auth>=2.0.0",
-    "google-auth-oauthlib>=1.0.0",
-    "google-api-python-client>=2.100.0",
-    "sendgrid>=6.10.0",
+    "python-jose[cryptography]>=3.3.0",
+    "passlib[bcrypt]>=1.7.4",
+    "python-multipart>=0.0.6",
     "python-dotenv>=1.0.0",
     "aiosqlite>=0.19.0",
     "cryptography>=41.0.0",
     "pydantic>=2.0.0",
     "httpx>=0.25.0",
-    "markdown>=3.5.0",
+    "pymupdf>=1.23.0",
 ]
 
 [project.optional-dependencies]

chatkit/frontend/index.html

@@ -4,12 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ClassLens — AI-Powered Exam Analysis for Teachers</title>
-    <meta name="description" content="Analyze student exam responses, generate personalized explanations, and create peer learning groups with AI." />
+    <meta name="description" content="Upload exam files, parse Q&A data, and generate AI-powered analysis reports." />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
-    <script src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"></script>
   </head>
   <body>
     <div id="root"></div>

chatkit/frontend/package-lock.json

@@ -1,14 +1,15 @@
 {
-  "name": "examinsight-frontend",
-  "version": "1.0.0",
+  "name": "classlens-frontend",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "examinsight-frontend",
-      "version": "1.0.0",
+      "name": "classlens-frontend",
+      "version": "2.0.0",
       "dependencies": {
-        "@openai/chatkit-react": ">=1.1.1 <2.0.0",
+        "html2canvas": "^1.4.1",
+        "html2pdf.js": "^0.10.1",
         "react": "^19.2.0",
         "react-dom": "^19.2.0"
       },
@@ -48,6 +49,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
@@ -847,23 +857,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@openai/chatkit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@openai/chatkit/-/chatkit-1.0.0.tgz",
-      "integrity": "sha512-BlRu1UMz29z01bn0D2nA5lgSeo0Eu/5uNdGUMKchoFEDHWQ8ViCHDRFO45O6FT/cdqhXbYZOzIrjUryq6djk4w=="
-    },
-    "node_modules/@openai/chatkit-react": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@openai/chatkit-react/-/chatkit-react-1.1.1.tgz",
-      "integrity": "sha512-sbYZBqLkx5nEIRmBFXJ8OCsRB+0II1eu/9QSVJP4T73PdAsggTMPfxw8FUGioFFJcYrNVoFvYaBFHZVUC71jtw==",
-      "dependencies": {
-        "@openai/chatkit": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -1677,6 +1670,19 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/react": {
       "version": "19.2.1",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.1.tgz",
@@ -1697,6 +1703,13 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.46.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.0.tgz",
@@ -2038,18 +2051,6 @@
         }
       }
     },
-    "node_modules/@vitejs/plugin-react-swc/node_modules/@swc/helpers": {
-      "version": "0.5.17",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
-      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2120,6 +2121,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -2154,6 +2164,26 @@
         "node": ">=6"
       }
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2208,6 +2238,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-js": {
+      "version": "3.48.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.48.0.tgz",
+      "integrity": "sha512-zpEHTy1fjTMZCKLHUZoVeylt9XrzaIN2rbPXEt0k+q7JE5CkCZdo6bNq55bn24a69CH7ErAVLKijxJja4fw+UQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2223,6 +2265,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -2265,6 +2316,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
+      "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
@@ -2279,6 +2340,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -2533,6 +2600,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -2543,6 +2621,12 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -2672,6 +2756,30 @@
         "node": ">=8"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/html2pdf.js": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.10.3.tgz",
+      "integrity": "sha512-RcB1sh8rs5NT3jgbN5zvvTmkmZrsUrxpZ/RI8TMbvuReNZAdJZG5TMfA2TBP6ZXxpXlWf9NB/ciLXVb6W2LbRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es6-promise": "^4.2.5",
+        "html2canvas": "^1.0.0",
+        "jspdf": "^3.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2709,6 +2817,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2793,6 +2907,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jspdf": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.4.tgz",
+      "integrity": "sha512-dc6oQ8y37rRcHn316s4ngz/nOjayLF/FFxBF4V9zamQKRqXxyiH1zagkCdktdWhtoQId5K20xt1lB90XzkB+hQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3232,6 +3363,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3265,6 +3402,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3355,6 +3499,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
@@ -3376,6 +3530,13 @@
         "react": "^19.2.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3397,6 +3558,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.53.3",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
@@ -3515,6 +3686,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -3541,6 +3722,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz",
@@ -3579,6 +3770,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -3705,6 +3905,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/vite": {
       "version": "7.2.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.7.tgz",

chatkit/frontend/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "examinsight-frontend",
-  "version": "1.0.0",
-  "description": "ExamInsight - AI-Powered Exam Analysis for Teachers",
+  "name": "classlens-frontend",
+  "version": "2.0.0",
+  "description": "ClassLens - AI-Powered Exam Analysis for Teachers",
   "private": true,
   "type": "module",
   "scripts": {
@@ -15,7 +15,8 @@
     "npm": ">=9"
   },
   "dependencies": {
-    "@openai/chatkit-react": ">=1.1.1 <2.0.0",
+    "html2canvas": "^1.4.1",
+    "html2pdf.js": "^0.10.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

chatkit/frontend/src/App.tsx

@@ -1,176 +1,129 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Header } from "./components/Header";
-import { Hero } from "./components/Hero";
-import { AuthStatus } from "./components/AuthStatus";
-import { ExamAnalyzer } from "./components/ExamAnalyzer";
-import { Features } from "./components/Features";
-import { SimpleChatPanel } from "./components/SimpleChatPanel";
-import { CLASSLENS_ICON } from "./lib/icon";
-
-const VALID_INVITE_CODE = "taboola-npo-cz";
-
-function InviteCodeGate({ onSuccess }: { onSuccess: () => void }) {
-  const [code, setCode] = useState("");
-  const [error, setError] = useState(false);
-  const [isShaking, setIsShaking] = useState(false);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (code.trim().toLowerCase() === VALID_INVITE_CODE) {
-      // Save to localStorage so user doesn't need to enter again
-      localStorage.setItem("classlens_access", "granted");
-      onSuccess();
-    } else {
-      setError(true);
-      setIsShaking(true);
-      setTimeout(() => setIsShaking(false), 500);
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#0f1419] via-[#1a2332] to-[#0f1419]">
-      <div className="relative">
-        {/* Decorative background elements */}
-        <div className="absolute -top-20 -left-20 w-40 h-40 bg-[var(--color-primary)]/20 rounded-full blur-3xl" />
-        <div className="absolute -bottom-20 -right-20 w-40 h-40 bg-[var(--color-accent)]/20 rounded-full blur-3xl" />
-        
-        <div 
-          className={`relative bg-[var(--color-surface)] border border-[var(--color-border)] rounded-2xl p-8 max-w-md w-full shadow-2xl ${
-            isShaking ? "animate-shake" : ""
-          }`}
-        >
-          {/* Logo */}
-          <div className="text-center mb-8">
-            <img 
-              src={CLASSLENS_ICON} 
-              alt="ClassLens" 
-              className="w-24 h-24 mx-auto mb-4 rounded-2xl shadow-lg"
-            />
-            <h1 className="text-2xl font-bold text-[var(--color-text)] font-display">
-              ClassLens
-            </h1>
-            <p className="text-[var(--color-text-muted)] mt-2">
-              AI 驅動的考試分析
-            </p>
-          </div>
-
-          {/* Invite code form */}
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label 
-                htmlFor="invite-code" 
-                className="block text-sm font-medium text-[var(--color-text-muted)] mb-2"
-              >
-                輸入邀請碼
-              </label>
-              <input
-                id="invite-code"
-                type="text"
-                value={code}
-                onChange={(e) => {
-                  setCode(e.target.value);
-                  setError(false);
-                }}
-                placeholder="請輸入您的邀請碼..."
-                className={`w-full px-4 py-3 bg-[var(--color-background)] border rounded-xl text-[var(--color-text)] placeholder-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] transition-all ${
-                  error 
-                    ? "border-red-500 focus:ring-red-500" 
-                    : "border-[var(--color-border)]"
-                }`}
-                autoFocus
-              />
-              {error && (
-                <p className="mt-2 text-sm text-red-400 flex items-center gap-1">
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                  邀請碼無效，請重試。
-                </p>
-              )}
-            </div>
-
-            <button
-              type="submit"
-              className="w-full py-3 px-4 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-accent)] text-white font-semibold rounded-xl hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface)]"
-            >
-              進入應用程式 →
-            </button>
-          </form>
-
-          {/* Footer */}
-          <p className="text-center text-xs text-[var(--color-text-muted)] mt-6">
-            Don't have an invite code?{" "}
-            <a 
-              href="mailto:kuanz1991@gmail.com" 
-              className="text-[var(--color-primary)] hover:underline"
-            >
-              Contact us
-            </a>
-          </p>
-        </div>
-      </div>
-
-      {/* Add shake animation */}
-      <style>{`
-        @keyframes shake {
-          0%, 100% { transform: translateX(0); }
-          10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
-          20%, 40%, 60%, 80% { transform: translateX(4px); }
-        }
-        .animate-shake {
-          animation: shake 0.5s ease-in-out;
-        }
-      `}</style>
-    </div>
-  );
+import { LoginForm } from "./components/LoginForm";
+import { StepIndicator } from "./components/StepIndicator";
+import { FileUploadPanel } from "./components/step1/FileUploadPanel";
+import { ParsedDataSummary } from "./components/step2/ParsedDataSummary";
+import { PromptEditor } from "./components/step2/PromptEditor";
+import { ReportViewer } from "./components/step3/ReportViewer";
+import { apiGet, apiPost, getToken, clearToken } from "./lib/api";
+
+interface User {
+  id: number;
+  email: string;
+  display_name: string;
 }
 
 export default function App() {
-  const [hasAccess, setHasAccess] = useState<boolean | null>(null);
-  const [teacherEmail, setTeacherEmail] = useState<string>("");
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [showAnalyzer, setShowAnalyzer] = useState(false);
-  const [testMode, setTestMode] = useState(false);
-
-  // Check for existing access on mount
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [currentStep, setCurrentStep] = useState<1 | 2 | 3>(1);
+  const [sessionId, setSessionId] = useState<number | null>(null);
+  const [parsedData, setParsedData] = useState<Record<string, unknown>>({});
+  const [promptContent, setPromptContent] = useState("");
+  const [reportHtml, setReportHtml] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  // Check for saved JWT on mount
   useEffect(() => {
-    const access = localStorage.getItem("classlens_access");
-    setHasAccess(access === "granted");
+    const token = getToken();
+    if (token) {
+      apiGet<User>("/api/auth/me")
+        .then(setUser)
+        .catch(() => clearToken())
+        .finally(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
   }, []);
 
-  // Check URL params for auth callback and test mode
+  // Load default prompt
   useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const authSuccess = params.get("auth_success");
-    const email = params.get("email");
-    const authError = params.get("auth_error");
-    const test = params.get("test");
-
-    if (test === "chat") {
-      setTestMode(true);
-      return;
+    if (user && !promptContent) {
+      apiGet<{ content: string }>("/api/prompts/default")
+        .then((res) => setPromptContent(res.content))
+        .catch(() => {});
     }
+  }, [user]);
 
-    if (authSuccess === "true" && email) {
-      setTeacherEmail(email);
-      setIsAuthenticated(true);
-      setShowAnalyzer(true);
-      // Clean URL
-      window.history.replaceState({}, "", window.location.pathname);
-    } else if (authError) {
-      console.error("Auth error:", authError);
-      window.history.replaceState({}, "", window.location.pathname);
+  // Create session when user is authenticated and no session exists
+  useEffect(() => {
+    if (user && !sessionId) {
+      apiPost<{ id: number }>("/api/sessions", { title: "New Session" })
+        .then((session) => setSessionId(session.id))
+        .catch(() => {});
     }
+  }, [user]);
+
+  const handleLogout = () => {
+    setUser(null);
+    setSessionId(null);
+    setParsedData({});
+    setPromptContent("");
+    setReportHtml("");
+    setCurrentStep(1);
+  };
+
+  const handleParsedDataUpdate = useCallback((dataType: string, data: unknown) => {
+    setParsedData((prev) => ({ ...prev, [dataType]: data }));
   }, []);
 
-  const handleStartAnalysis = () => {
-    if (isAuthenticated) {
-      setShowAnalyzer(true);
+  const handleGoToStep2 = useCallback(() => {
+    setCurrentStep(2);
+  }, []);
+
+  const handleRunSummary = useCallback(async (model: string) => {
+    if (!sessionId || !promptContent.trim()) return;
+    setIsGenerating(true);
+    try {
+      const res = await apiPost<{ report_id: number; html_content: string }>(
+        `/api/sessions/${sessionId}/generate-report`,
+        { prompt_content: promptContent, model }
+      );
+      setReportHtml(res.html_content);
+      setCurrentStep(3);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : "Report generation failed");
+    } finally {
+      setIsGenerating(false);
     }
+  }, [sessionId, promptContent]);
+
+  const handleExportPdf = useCallback(async () => {
+    // Dynamic import to avoid loading html2pdf.js unless needed
+    const html2pdf = (await import("html2pdf.js")).default;
+    const container = document.createElement("div");
+    container.innerHTML = reportHtml;
+    document.body.appendChild(container);
+    await html2pdf()
+      .set({ margin: 10, filename: "classlens-report.pdf", html2canvas: { scale: 2 } })
+      .from(container)
+      .save();
+    document.body.removeChild(container);
+  }, [reportHtml]);
+
+  const handleExportPng = useCallback(async () => {
+    const html2canvas = (await import("html2canvas")).default;
+    const container = document.createElement("div");
+    container.innerHTML = reportHtml;
+    container.style.width = "1200px";
+    container.style.position = "absolute";
+    container.style.left = "-9999px";
+    document.body.appendChild(container);
+    const canvas = await html2canvas(container, { scale: 2 });
+    document.body.removeChild(container);
+    const link = document.createElement("a");
+    link.download = "classlens-report.png";
+    link.href = canvas.toDataURL("image/png");
+    link.click();
+  }, [reportHtml]);
+
+  const handleStepClick = (step: 1 | 2 | 3) => {
+    if (step <= currentStep) setCurrentStep(step);
   };
 
   // Loading state
-  if (hasAccess === null) {
+  if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-[var(--color-background)]">
         <div className="w-8 h-8 border-2 border-[var(--color-primary)] border-t-transparent rounded-full animate-spin" />
@@ -178,62 +131,84 @@ export default function App() {
     );
   }
 
-  // Invite code gate
-  if (!hasAccess) {
-    return <InviteCodeGate onSuccess={() => setHasAccess(true)} />;
-  }
-
-  // Test mode - show simple chat panel
-  if (testMode) {
-    return (
-      <main className="flex min-h-screen flex-col items-center justify-center bg-slate-100 dark:bg-slate-950 p-4">
-        <div className="mx-auto w-full max-w-3xl">
-          <div className="mb-4 text-center">
-            <h1 className="text-2xl font-bold mb-2">ChatKit Test Mode</h1>
-            <p className="text-gray-600">Testing basic ChatKit functionality</p>
-            <a href="/" className="text-blue-500 underline text-sm">← Back to app</a>
-          </div>
-          <SimpleChatPanel />
-        </div>
-      </main>
-    );
+  // Login gate
+  if (!user) {
+    return <LoginForm onLogin={setUser} />;
   }
 
   return (
     <div className="min-h-screen">
-      <Header 
-        isAuthenticated={isAuthenticated}
-        teacherEmail={teacherEmail}
-      />
-      
-      <main>
-        {!showAnalyzer ? (
-          <>
-            <Hero 
-              isAuthenticated={isAuthenticated}
-              onStartAnalysis={handleStartAnalysis}
-            />
-            
-            <AuthStatus
-              teacherEmail={teacherEmail}
-              setTeacherEmail={setTeacherEmail}
-              isAuthenticated={isAuthenticated}
-              setIsAuthenticated={setIsAuthenticated}
-            />
-            
-            <Features />
-          </>
-        ) : (
-          <ExamAnalyzer 
-            teacherEmail={teacherEmail}
-            onBack={() => setShowAnalyzer(false)}
-          />
-        )}
-      </main>
-      
-      <footer className="py-8 text-center text-sm text-[var(--color-text-muted)]">
-        <p>© 2026 ClassLens • AI-Powered Teaching Assistant</p>
-      </footer>
+      <Header userEmail={user.email} onLogout={handleLogout} />
+
+      <div className="pt-20">
+        <StepIndicator currentStep={currentStep} onStepClick={handleStepClick} />
+
+        <main className="max-w-6xl mx-auto px-4 pb-12">
+          {currentStep === 1 && (
+            <div className="space-y-6 animate-fade-in-up">
+              <div className="text-center mb-8">
+                <h2 className="font-display text-2xl font-bold text-[var(--color-text)]">
+                  上傳考試資料
+                </h2>
+                <p className="text-[var(--color-text-muted)] mt-2">
+                  上傳考試題目、學生答案和標準答案，分別解析後確認資料再前往下一步
+                </p>
+              </div>
+              {sessionId && (
+                <FileUploadPanel
+                  sessionId={sessionId}
+                  parsedData={parsedData}
+                  onParsedDataUpdate={handleParsedDataUpdate}
+                  onGoToStep2={handleGoToStep2}
+                />
+              )}
+            </div>
+          )}
+
+          {currentStep === 2 && (
+            <div className="space-y-6 animate-fade-in-up">
+              <div className="text-center mb-4">
+                <h2 className="font-display text-2xl font-bold text-[var(--color-text)]">
+                  編輯分析提示詞
+                </h2>
+                <p className="text-[var(--color-text-muted)] mt-2">
+                  編輯提示詞來自訂分析報告的內容與格式
+                </p>
+              </div>
+              <ParsedDataSummary parsedData={parsedData} />
+              {sessionId && (
+                <PromptEditor
+                  promptContent={promptContent}
+                  onPromptChange={setPromptContent}
+                  sessionId={sessionId}
+                  onRunSummary={handleRunSummary}
+                  isGenerating={isGenerating}
+                />
+              )}
+            </div>
+          )}
+
+          {currentStep === 3 && (
+            <div className="animate-fade-in-up">
+              <div className="text-center mb-4">
+                <h2 className="font-display text-2xl font-bold text-[var(--color-text)]">
+                  分析報告
+                </h2>
+              </div>
+              <ReportViewer
+                reportHtml={reportHtml}
+                onBack={() => setCurrentStep(2)}
+                onExportPdf={handleExportPdf}
+                onExportPng={handleExportPng}
+              />
+            </div>
+          )}
+        </main>
+
+        <footer className="py-8 text-center text-sm text-[var(--color-text-muted)]">
+          <p>&copy; 2026 ClassLens &bull; AI-Powered Teaching Assistant</p>
+        </footer>
+      </div>
     </div>
   );
 }

chatkit/frontend/src/TestChat.tsx

@@ -1,12 +0,0 @@
-import { SimpleChatPanel } from "./components/SimpleChatPanel";
-
-export function TestChat() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-end bg-slate-100 dark:bg-slate-950 p-4">
-      <div className="mx-auto w-full max-w-3xl">
-        <h1 className="text-2xl font-bold mb-4 text-center">ChatKit Test</h1>
-        <SimpleChatPanel />
-      </div>
-    </main>
-  );
-}

chatkit/frontend/src/components/AuthStatus.tsx

@@ -1,212 +0,0 @@
-import { useState } from "react";
-import { GOOGLE_AUTH_URL, AUTH_STATUS_URL } from "../lib/config";
-
-type AuthMode = 'google' | 'csv-only';
-
-interface AuthStatusProps {
-  teacherEmail: string;
-  setTeacherEmail: (email: string) => void;
-  isAuthenticated: boolean;
-  setIsAuthenticated: (auth: boolean) => void;
-}
-
-export function AuthStatus({
-  teacherEmail,
-  setTeacherEmail,
-  isAuthenticated,
-  setIsAuthenticated,
-}: AuthStatusProps) {
-  const [emailInput, setEmailInput] = useState("");
-  const [isChecking, setIsChecking] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [authMode, setAuthMode] = useState<AuthMode | null>(null);
-
-  const checkAuthStatus = async (email: string) => {
-    try {
-      setIsChecking(true);
-      const response = await fetch(`${AUTH_STATUS_URL}?teacher_email=${encodeURIComponent(email)}`);
-      const data = await response.json();
-      
-      if (data.authenticated) {
-        setTeacherEmail(email);
-        setIsAuthenticated(true);
-      }
-      return data.authenticated;
-    } catch (err) {
-      console.error("Error checking auth status:", err);
-      return false;
-    } finally {
-      setIsChecking(false);
-    }
-  };
-
-  const handleConnect = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-    
-    if (!emailInput.trim()) {
-      setError("請輸入您的電子郵件地址");
-      return;
-    }
-    
-    // Check if already authenticated
-    const alreadyAuth = await checkAuthStatus(emailInput);
-    if (alreadyAuth) {
-      return;
-    }
-    
-    // Try to start OAuth - catch errors if not configured
-    try {
-      const response = await fetch(`${GOOGLE_AUTH_URL}?teacher_email=${encodeURIComponent(emailInput)}`, {
-        method: 'GET',
-        redirect: 'manual'
-      });
-      
-      // If we get a redirect, OAuth is configured - follow it
-      if (response.type === 'opaqueredirect' || response.status === 302) {
-        window.location.href = `${GOOGLE_AUTH_URL}?teacher_email=${encodeURIComponent(emailInput)}`;
-      } else if (response.status === 500) {
-        const data = await response.json();
-        if (data.detail?.includes('not configured')) {
-          setAuthMode('csv-only');
-          setError("Google OAuth 未設定。您仍可在聊天中直接上傳 CSV 檔案使用應用程式！");
-          // Set as "connected" with just email for CSV fallback
-          setTeacherEmail(emailInput);
-          setIsAuthenticated(true);
-        } else {
-          setAuthMode('google');
-          setError(data.detail || "Failed to connect");
-        }
-      } else {
-        // Redirect to OAuth
-        window.location.href = `${GOOGLE_AUTH_URL}?teacher_email=${encodeURIComponent(emailInput)}`;
-      }
-    } catch (err) {
-      // Network error or CORS - just redirect
-      window.location.href = `${GOOGLE_AUTH_URL}?teacher_email=${encodeURIComponent(emailInput)}`;
-    }
-  };
-
-  const handleDisconnect = async () => {
-    try {
-      await fetch(`/auth/disconnect?teacher_email=${encodeURIComponent(teacherEmail)}`, {
-        method: 'POST'
-      });
-      setIsAuthenticated(false);
-      setTeacherEmail("");
-    } catch (err) {
-      console.error("Error disconnecting:", err);
-    }
-  };
-
-  return (
-    <section id="connect" className="py-20 px-6">
-      <div className="max-w-xl mx-auto">
-        <div className="card p-8">
-          <div className="text-center mb-8">
-            <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-light)] flex items-center justify-center shadow-lg">
-              <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-              </svg>
-            </div>
-            <h2 className="font-display text-2xl font-bold text-[var(--color-text)] mb-2">
-              {isAuthenticated ? "已連接！" : "連接您的 Google 帳號"}
-            </h2>
-            <p className="text-[var(--color-text-muted)]">
-              {isAuthenticated 
-                ? "您的 Google 帳號已連結。現在可以分析考試答案了。"
-                : "我們只會存取您的 Google 表單回應試算表。不會在我們的伺服器上儲存任何資料。"}
-            </p>
-          </div>
-
-          {isAuthenticated ? (
-            <div className="space-y-4">
-          <div className="flex items-center justify-center gap-3 p-4 rounded-xl bg-[var(--color-success)]/10 border border-[var(--color-success)]/20">
-            <div className="w-10 h-10 rounded-full bg-[var(--color-success)]/20 flex items-center justify-center">
-              <svg className="w-5 h-5 text-[var(--color-success)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              </svg>
-            </div>
-            <div className="text-left">
-              <div className="font-medium text-[var(--color-text)]">{teacherEmail}</div>
-              <div className="text-sm text-[var(--color-text-muted)]">
-                {authMode === 'csv-only' ? 'CSV 上傳模式（Google OAuth 未設定）' : 'Google 帳號已連接'}
-              </div>
-            </div>
-          </div>
-          
-          {authMode === 'csv-only' && (
-            <div className="p-3 rounded-lg bg-amber-50 border border-amber-200 text-amber-700 text-sm">
-              <strong>注意：</strong>您可以在聊天中直接貼上 CSV 資料，或設定 Google OAuth 從 Google 表單取得資料。
-            </div>
-          )}
-              
-              <button
-                onClick={handleDisconnect}
-                className="w-full btn btn-outline text-red-500 border-red-200 hover:border-red-500 hover:text-red-600"
-              >
-                斷開帳號
-              </button>
-            </div>
-          ) : (
-            <form onSubmit={handleConnect} className="space-y-4">
-              <div>
-                <label htmlFor="email" className="block text-sm font-medium text-[var(--color-text)] mb-2">
-                  您的學校電子郵件
-                </label>
-                <input
-                  type="email"
-                  id="email"
-                  value={emailInput}
-                  onChange={(e) => setEmailInput(e.target.value)}
-                  placeholder="teacher@school.edu"
-                  className="input"
-                  required
-                />
-              </div>
-              
-              {error && (
-                <div className="p-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
-                  {error}
-                </div>
-              )}
-              
-              <button 
-                type="submit" 
-                className="w-full btn btn-primary"
-                disabled={isChecking}
-              >
-                {isChecking ? (
-                  <>
-                    <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
-                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-                    </svg>
-                    檢查中...
-                  </>
-                ) : (
-                  <>
-                    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-                      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-                      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-                      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-                      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-                    </svg>
-                    使用 Google 繼續
-                  </>
-                )}
-              </button>
-              
-              <p className="text-center text-xs text-[var(--color-text-muted)]">
-                連接即表示您同意我們的{" "}
-                <a href="#" className="underline hover:text-[var(--color-primary)]">服務條款</a>
-                {" "}和{" "}
-                <a href="#" className="underline hover:text-[var(--color-primary)]">隱私政策</a>
-              </p>
-            </form>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}

chatkit/frontend/src/components/ExamAnalyzer.tsx

@@ -1,237 +0,0 @@
-import { useState, useEffect } from "react";
-import { ChatKit, useChatKit } from "@openai/chatkit-react";
-import { CHATKIT_API_DOMAIN_KEY, CHATKIT_API_URL } from "../lib/config";
-import { ReasoningPanel } from "./ReasoningPanel";
-
-interface ExamAnalyzerProps {
-  teacherEmail: string;
-  onBack: () => void;
-}
-
-export function ExamAnalyzer({ teacherEmail, onBack }: ExamAnalyzerProps) {
-  const [showCopiedToast, setShowCopiedToast] = useState(false);
-  const [selectedModel, setSelectedModel] = useState("gpt-4.1-mini");
-  const [availableModels, setAvailableModels] = useState<Record<string, {name: string; description: string; cost: string}>>({});
-  
-  // Load available models
-  useEffect(() => {
-    fetch("/api/models")
-      .then(res => res.json())
-      .then(data => {
-        setAvailableModels(data.models || {});
-        setSelectedModel(data.default || "gpt-4.1-mini");
-      })
-      .catch(err => console.error("Failed to load models:", err));
-  }, []);
-  
-  // Force Traditional Chinese locale for ChatKit
-  useEffect(() => {
-    // Set document language to zh-TW
-    document.documentElement.lang = 'zh-TW';
-    
-    // Try to override browser language detection
-    if (navigator.language) {
-      Object.defineProperty(navigator, 'language', {
-        get: () => 'zh-TW',
-        configurable: true,
-      });
-    }
-    
-    // Set Accept-Language header hint (may not work for iframe)
-    const meta = document.createElement('meta');
-    meta.httpEquiv = 'Content-Language';
-    meta.content = 'zh-TW';
-    document.head.appendChild(meta);
-  }, []);
-  
-  // Store selected model in sessionStorage for backend access
-  useEffect(() => {
-    sessionStorage.setItem("selected_model", selectedModel);
-  }, [selectedModel]);
-  
-  const chatkit = useChatKit({
-    api: { 
-      url: CHATKIT_API_URL, 
-      domainKey: CHATKIT_API_DOMAIN_KEY,
-    },
-    composer: {
-      attachments: { enabled: false },
-    },
-  });
-
-  const handleCopyPrompt = (prompt: string) => {
-    navigator.clipboard.writeText(prompt);
-    setShowCopiedToast(true);
-    setTimeout(() => setShowCopiedToast(false), 2000);
-  };
-
-  const examplePrompts = [
-    {
-      title: "📊 分析 Google 試算表",
-      prompt: `請分析這個 Google 試算表中的考試答案：
-https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/edit
-
-標準答案是：
-- Q1: 4
-- Q2: 加速度是速度的變化率
-
-我的電子郵件是 ${teacherEmail}。請評分、解釋錯誤答案、建議同儕學習小組，並將報告發送到我的電子郵件。`,
-    },
-    {
-      title: "📝 分析 CSV 資料",
-      prompt: `請分析這些考試資料：
-
-Timestamp,Email,Student Name,Q1 (2+2),Q2 (Explain acceleration)
-2026-01-26 08:00:00,alice@student.edu,Alice,4,Acceleration is the rate of change of velocity
-2026-01-26 08:01:00,bob@student.edu,Bob,3,I dont know
-2026-01-26 08:02:00,carol@student.edu,Carol,4,velocity change over time
-2026-01-26 08:03:00,david@student.edu,David,5,speed
-
-標準答案是：
-- Q1: 4
-- Q2: Acceleration is the rate of change of velocity over time
-
-我的電子郵件是 ${teacherEmail}。請評分並建立完整報告。`,
-    },
-    {
-      title: "⚡ 快速摘要",
-      prompt: `請給我班級表現的快速摘要。我的電子郵件是 ${teacherEmail}。`,
-    },
-  ];
-
-  return (
-    <div className="min-h-screen pt-24 pb-8 px-4">
-      {/* Copied toast */}
-      {showCopiedToast && (
-        <div className="fixed top-24 left-1/2 -translate-x-1/2 z-50 px-4 py-2 bg-green-500 text-white rounded-lg shadow-lg">
-          ✓ 提示已複製！請在聊天中貼上。
-        </div>
-      )}
-      
-      <div className="max-w-7xl mx-auto">
-        {/* Top bar */}
-        <div className="flex items-center justify-between mb-6">
-          <button
-            onClick={onBack}
-            className="flex items-center gap-2 text-gray-500 hover:text-gray-700 transition-colors"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-            </svg>
-            返回首頁
-          </button>
-          
-          <div className="flex items-center gap-3">
-            <span className="text-sm text-gray-500">已連接為</span>
-            <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-medium">
-              {teacherEmail}
-            </span>
-            <div className="flex items-center gap-2">
-              <span className="text-sm text-gray-500">模型：</span>
-              <select
-                value={selectedModel}
-                onChange={(e) => setSelectedModel(e.target.value)}
-                className="px-3 py-1 bg-white border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-              >
-                {Object.entries(availableModels).map(([key, model]) => (
-                  <option key={key} value={key}>
-                    {model.name} {key === "gpt-4.1-mini" ? "(默認)" : ""} - {model.description}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-        </div>
-
-        <div className="grid lg:grid-cols-4 gap-6">
-          {/* Left Sidebar - AI Reasoning */}
-          <div className="lg:col-span-1 space-y-4">
-            {/* AI Reasoning Panel - Shows LLM thinking process */}
-            <ReasoningPanel sessionId="default" />
-
-            {/* Example Prompts */}
-            <div className="bg-white rounded-xl shadow-sm border p-4">
-              <h3 className="text-sm font-semibold text-gray-800 mb-3">
-                快速開始提示
-              </h3>
-              <div className="space-y-2">
-                {examplePrompts.map((example, i) => (
-                  <button
-                    key={i}
-                    onClick={() => handleCopyPrompt(example.prompt)}
-                    className="w-full text-left p-3 rounded-lg bg-gray-50 hover:bg-blue-50 transition-colors group border border-transparent hover:border-blue-200"
-                  >
-                    <div className="text-sm font-medium text-gray-700 group-hover:text-blue-600">
-                      {example.title}
-                    </div>
-                    <div className="text-xs text-gray-500">
-                      點擊複製
-                    </div>
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Tips */}
-            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
-              <h3 className="text-sm font-semibold text-gray-800 mb-2 flex items-center gap-2">
-                💡 專業提示
-              </h3>
-              <ul className="space-y-1.5 text-xs text-gray-600">
-                <li className="flex items-start gap-1.5">
-                  <span className="text-green-500">✓</span>
-                  包含標準答案以提高準確度
-                </li>
-                <li className="flex items-start gap-1.5">
-                  <span className="text-green-500">✓</span>
-                  將 Google 試算表設為公開，或使用 CSV
-                </li>
-                <li className="flex items-start gap-1.5">
-                  <span className="text-green-500">✓</span>
-                  要求以電子郵件發送報告
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          {/* Main Chat Area - Use same structure as SimpleChatPanel */}
-          <div className="lg:col-span-3">
-            <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
-              {/* Chat Header */}
-              <div className="bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-4">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
-                      <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
-                      </svg>
-                    </div>
-                    <div>
-                      <h2 className="text-lg font-semibold text-white">
-                        ClassLens 助手
-                      </h2>
-                      <p className="text-sm text-white/70">
-                        請在下方貼上您的考試資料或 Google 試算表網址
-                      </p>
-                    </div>
-                  </div>
-                  <span className="px-2 py-1 rounded-full bg-white/20 text-white text-xs">
-                    {availableModels[selectedModel]?.name || selectedModel}
-                  </span>
-                </div>
-              </div>
-              
-              {/* ChatKit - Using the EXACT same structure as SimpleChatPanel that works */}
-              <div className="h-[calc(100vh-320px)]">
-                <ChatKit 
-                  control={chatkit.control} 
-                  className="block h-full w-full"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

chatkit/frontend/src/components/Features.tsx

@@ -1,136 +0,0 @@
-export function Features() {
-  const features = [
-    {
-      icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-        </svg>
-      ),
-      title: "自動評分",
-      description: "使用 AI 精準評分選擇題、數值題，甚至開放式問題。",
-      color: "var(--color-primary)",
-    },
-    {
-      icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-        </svg>
-      ),
-      title: "智能解釋",
-      description: "為每個錯誤答案提供個人化解釋，幫助學生理解錯誤。",
-      color: "var(--color-accent)",
-    },
-    {
-      icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-        </svg>
-      ),
-      title: "同儕學習小組",
-      description: "AI 建議的學生分組，將表現優秀的學生與需要特定主題幫助的學生配對。",
-      color: "var(--color-success)",
-    },
-    {
-      icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-        </svg>
-      ),
-      title: "電子郵件報告",
-      description: "直接在收件匣中接收精美的格式化報告，隨時可與學生或家長分享。",
-      color: "var(--color-warning)",
-    },
-    {
-      icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-        </svg>
-      ),
-      title: "隱私優先",
-      description: "學生資料安全處理。我們只存取您分享的內容，絕不儲存敏感資訊。",
-      color: "var(--color-primary-light)",
-    },
-    {
-      icon: (
-        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-        </svg>
-      ),
-      title: "即時分析",
-      description: "幾秒內獲得全面洞察，而非數小時。更多時間教學，更少時間評分。",
-      color: "var(--color-accent-light)",
-    },
-  ];
-
-  return (
-    <section id="features" className="py-20 px-6 bg-gradient-to-b from-transparent to-[var(--color-surface)]/50">
-      <div className="max-w-6xl mx-auto">
-        <div className="text-center mb-16">
-          <h2 className="font-display text-4xl font-bold text-[var(--color-text)] mb-4">
-            了解您的學生所需的一切
-            <span className="text-gradient"> 功能</span>
-          </h2>
-          <p className="text-lg text-[var(--color-text-muted)] max-w-2xl mx-auto">
-            ClassLens 結合 AI 的力量與深思熟慮的教育實踐，為您提供可操作的洞察。
-          </p>
-        </div>
-
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {features.map((feature, i) => (
-            <div
-              key={i}
-              className="card p-6 hover:shadow-lg transition-all hover:-translate-y-1 group"
-            >
-              <div
-                className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 transition-transform group-hover:scale-110"
-                style={{ 
-                  backgroundColor: `color-mix(in srgb, ${feature.color} 15%, transparent)`,
-                  color: feature.color 
-                }}
-              >
-                {feature.icon}
-              </div>
-              <h3 className="font-display text-xl font-semibold text-[var(--color-text)] mb-2">
-                {feature.title}
-              </h3>
-              <p className="text-[var(--color-text-muted)]">
-                {feature.description}
-              </p>
-            </div>
-          ))}
-        </div>
-
-        {/* How it works */}
-        <div className="mt-24">
-          <h3 className="font-display text-3xl font-bold text-center text-[var(--color-text)] mb-12">
-            How It Works
-          </h3>
-          
-          <div className="relative">
-            {/* Connection line */}
-            <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-accent)] to-[var(--color-success)] -translate-y-1/2" />
-            
-            <div className="grid lg:grid-cols-4 gap-8">
-              {[
-                { step: 1, title: "Connect Google", desc: "Link your Google account to access Form responses" },
-                { step: 2, title: "Share URL", desc: "Paste your Google Form or Sheets response URL" },
-                { step: 3, title: "AI Analyzes", desc: "ClassLens grades, explains, and groups students" },
-                { step: 4, title: "Get Report", desc: "Receive a beautiful report via email and dashboard" },
-              ].map((item) => (
-                <div key={item.step} className="relative text-center">
-                  <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)] text-white font-bold text-xl flex items-center justify-center shadow-lg relative z-10">
-                    {item.step}
-                  </div>
-                  <h4 className="font-display text-lg font-semibold text-[var(--color-text)] mb-2">
-                    {item.title}
-                  </h4>
-                  <p className="text-sm text-[var(--color-text-muted)]">{item.desc}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}

chatkit/frontend/src/components/Header.tsx

@@ -1,15 +1,22 @@
+import { clearToken } from "../lib/api";
+
 interface HeaderProps {
-  isAuthenticated: boolean;
-  teacherEmail: string;
+  userEmail: string;
+  onLogout: () => void;
 }
 
-export function Header({ isAuthenticated, teacherEmail }: HeaderProps) {
+export function Header({ userEmail, onLogout }: HeaderProps) {
+  const handleLogout = () => {
+    clearToken();
+    onLogout();
+  };
+
   return (
     <header className="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-[var(--glass-bg)] border-b border-[var(--glass-border)]">
       <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
         <div className="flex items-center gap-3">
           <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)] flex items-center justify-center text-white font-bold text-lg shadow-lg">
-            E
+            C
           </div>
           <div>
             <h1 className="font-display text-xl font-semibold text-[var(--color-text)]">
@@ -20,25 +27,21 @@ export function Header({ isAuthenticated, teacherEmail }: HeaderProps) {
             </p>
           </div>
         </div>
-        
-        <nav className="flex items-center gap-6">
-          {isAuthenticated && (
-            <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-success)]/10 border border-[var(--color-success)]/20">
-              <span className="w-2 h-2 rounded-full bg-[var(--color-success)] animate-pulse"></span>
-              <span className="text-sm font-medium text-[var(--color-success)]">
-                {teacherEmail}
-              </span>
-            </div>
-          )}
-          <a 
-            href="https://platform.openai.com/docs/guides/chatkit" 
-            target="_blank" 
-            rel="noopener noreferrer"
-            className="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-primary)] transition-colors"
+
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-success)]/10 border border-[var(--color-success)]/20">
+            <span className="w-2 h-2 rounded-full bg-[var(--color-success)]"></span>
+            <span className="text-sm font-medium text-[var(--color-success)]">
+              {userEmail}
+            </span>
+          </div>
+          <button
+            onClick={handleLogout}
+            className="text-sm text-[var(--color-text-muted)] hover:text-[var(--color-accent)] transition-colors"
           >
-            Docs
-          </a>
-        </nav>
+            登出
+          </button>
+        </div>
       </div>
     </header>
   );

chatkit/frontend/src/components/Hero.tsx

@@ -1,75 +0,0 @@
-interface HeroProps {
-  isAuthenticated: boolean;
-  onStartAnalysis: () => void;
-}
-
-export function Hero({ isAuthenticated, onStartAnalysis }: HeroProps) {
-  return (
-    <section className="relative pt-32 pb-20 px-6 overflow-hidden">
-      {/* Decorative elements */}
-      <div className="absolute top-20 left-10 w-72 h-72 rounded-full bg-gradient-to-br from-[var(--color-accent)]/20 to-transparent blur-3xl animate-float"></div>
-      <div className="absolute bottom-0 right-10 w-96 h-96 rounded-full bg-gradient-to-br from-[var(--color-success)]/15 to-transparent blur-3xl animate-float" style={{ animationDelay: '2s' }}></div>
-      
-      <div className="max-w-5xl mx-auto text-center relative">
-        <div className="opacity-0 animate-fade-in-up stagger-1">
-          <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-sm font-medium mb-8">
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-            由 OpenAI ChatKit 提供技術支援
-          </span>
-        </div>
-        
-        <h1 className="font-display text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight mb-6 opacity-0 animate-fade-in-up stagger-2">
-          <span className="text-[var(--color-text)]">將考試轉化為</span>
-          <br />
-          <span className="text-gradient">教學洞察</span>
-        </h1>
-        
-        <p className="text-xl text-[var(--color-text-muted)] max-w-2xl mx-auto mb-10 opacity-0 animate-fade-in-up stagger-3">
-          上傳您的 Google 表單回應，讓 AI 分析學生表現、生成個人化解釋並建立同儕學習小組——只需幾秒鐘。
-        </p>
-        
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 opacity-0 animate-fade-in-up stagger-4">
-          {isAuthenticated ? (
-            <button onClick={onStartAnalysis} className="btn btn-accent text-lg px-8 py-4">
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
-              </svg>
-              開始分析
-            </button>
-          ) : (
-            <a href="#connect" className="btn btn-primary text-lg px-8 py-4">
-              <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-              </svg>
-              連接 Google 帳號
-            </a>
-          )}
-          <a href="#features" className="btn btn-outline text-lg px-8 py-4">
-            查看使用方式
-          </a>
-        </div>
-        
-        {/* Stats */}
-        <div className="mt-20 grid grid-cols-3 gap-8 max-w-2xl mx-auto opacity-0 animate-fade-in-up stagger-5">
-          {[
-            { value: "5分鐘", label: "平均分析時間" },
-            { value: "98%", label: "教師滿意度" },
-            { value: "40+", label: "支援的題型" },
-          ].map((stat, i) => (
-            <div key={i} className="text-center">
-              <div className="font-display text-3xl font-bold text-[var(--color-primary)]">
-                {stat.value}
-              </div>
-              <div className="text-sm text-[var(--color-text-muted)]">{stat.label}</div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

chatkit/frontend/src/components/LoginForm.tsx

@@ -0,0 +1,142 @@
+import { useState } from "react";
+import { apiPost, setToken } from "../lib/api";
+import { CLASSLENS_ICON } from "../lib/icon";
+
+interface User {
+  id: number;
+  email: string;
+  display_name: string;
+}
+
+interface AuthResponse {
+  token: string;
+  user: User;
+}
+
+interface LoginFormProps {
+  onLogin: (user: User) => void;
+}
+
+export function LoginForm({ onLogin }: LoginFormProps) {
+  const [mode, setMode] = useState<"login" | "register">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      const endpoint = mode === "login" ? "/api/auth/login" : "/api/auth/register";
+      const result = await apiPost<AuthResponse>(endpoint, { email, password });
+      setToken(result.token);
+      onLogin(result.user);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#0f1419] via-[#1a2332] to-[#0f1419]">
+      <div className="relative">
+        <div className="absolute -top-20 -left-20 w-40 h-40 bg-[var(--color-primary)]/20 rounded-full blur-3xl" />
+        <div className="absolute -bottom-20 -right-20 w-40 h-40 bg-[var(--color-accent)]/20 rounded-full blur-3xl" />
+
+        <div className="relative bg-[var(--color-surface)] border border-[var(--color-border)] rounded-2xl p-8 max-w-md w-full shadow-2xl">
+          <div className="text-center mb-8">
+            <img
+              src={CLASSLENS_ICON}
+              alt="ClassLens"
+              className="w-24 h-24 mx-auto mb-4 rounded-2xl shadow-lg"
+            />
+            <h1 className="text-2xl font-bold text-[var(--color-text)] font-display">
+              ClassLens
+            </h1>
+            <p className="text-[var(--color-text-muted)] mt-2">
+              AI 驅動的考試分析
+            </p>
+          </div>
+
+          {/* Mode toggle */}
+          <div className="flex mb-6 bg-[var(--color-background)] rounded-xl p-1">
+            <button
+              type="button"
+              onClick={() => { setMode("login"); setError(""); }}
+              className={`flex-1 py-2 text-sm font-medium rounded-lg transition-all ${
+                mode === "login"
+                  ? "bg-[var(--color-primary)] text-white shadow"
+                  : "text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+              }`}
+            >
+              登入
+            </button>
+            <button
+              type="button"
+              onClick={() => { setMode("register"); setError(""); }}
+              className={`flex-1 py-2 text-sm font-medium rounded-lg transition-all ${
+                mode === "register"
+                  ? "bg-[var(--color-primary)] text-white shadow"
+                  : "text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+              }`}
+            >
+              註冊
+            </button>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-[var(--color-text-muted)] mb-2">
+                電子郵件
+              </label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="your@email.com"
+                required
+                className="input"
+                autoFocus
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-[var(--color-text-muted)] mb-2">
+                密碼
+              </label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="••••••••"
+                required
+                minLength={4}
+                className="input"
+              />
+            </div>
+
+            {error && (
+              <p className="text-sm text-red-400 flex items-center gap-1">
+                <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                {error}
+              </p>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-3 px-4 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-accent)] text-white font-semibold rounded-xl hover:opacity-90 transition-opacity disabled:opacity-50"
+            >
+              {loading ? "..." : mode === "login" ? "登入" : "建立帳號"}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

chatkit/frontend/src/components/ModelSelector.tsx

@@ -0,0 +1,69 @@
+interface ModelOption {
+  id: string;
+  name: string;
+  desc: string;
+  tag?: string;
+}
+
+const MODELS: ModelOption[] = [
+  {
+    id: "gpt-5.4",
+    name: "GPT-5.4",
+    desc: "最強模型，適合複雜專業分析",
+    tag: "推薦",
+  },
+  {
+    id: "gpt-5.4-pro",
+    name: "GPT-5.4 Pro",
+    desc: "更高算力，回答更精確（較慢）",
+  },
+  {
+    id: "gpt-5.3-chat-latest",
+    name: "GPT-5.3 Instant",
+    desc: "快速回應，適合圖片解析與日常任務",
+  },
+  {
+    id: "gpt-5-mini",
+    name: "GPT-5 Mini",
+    desc: "快速省費，適合簡單任務",
+  },
+  {
+    id: "gpt-4o",
+    name: "GPT-4o",
+    desc: "穩定可靠，速度快成本低",
+  },
+  {
+    id: "gpt-4o-mini",
+    name: "GPT-4o Mini",
+    desc: "最便宜，適合大量資料或測試",
+  },
+];
+
+interface ModelSelectorProps {
+  value: string;
+  onChange: (model: string) => void;
+  label?: string;
+}
+
+export function ModelSelector({ value, onChange, label }: ModelSelectorProps) {
+  const selected = MODELS.find((m) => m.id === value) || MODELS[0];
+
+  return (
+    <div className="flex items-center gap-3">
+      {label && (
+        <span className="text-xs text-[var(--color-text-muted)] whitespace-nowrap">{label}</span>
+      )}
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="input !w-auto !py-1.5 text-sm"
+      >
+        {MODELS.map((m) => (
+          <option key={m.id} value={m.id}>
+            {m.name} — {m.desc}{m.tag ? ` (${m.tag})` : ""}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

chatkit/frontend/src/components/ReasoningPanel.tsx

@@ -1,178 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-
-interface ReasoningStep {
-  id: string;
-  type: "tool" | "result" | "error" | "thinking";
-  content: string;
-  timestamp: Date;
-  status: "running" | "completed";
-}
-
-interface ReasoningPanelProps {
-  sessionId?: string;
-}
-
-export function ReasoningPanel({ sessionId = "default" }: ReasoningPanelProps) {
-  const [steps, setSteps] = useState<ReasoningStep[]>([]);
-  const [isStreaming, setIsStreaming] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // Subscribe to status updates
-  useEffect(() => {
-    let eventSource: EventSource | null = null;
-
-    const connect = () => {
-      // Use relative URL for production, works with both local and HF Spaces
-      const apiBase = import.meta.env.VITE_API_BASE_URL || "";
-      eventSource = new EventSource(`${apiBase}/api/status/${sessionId}/stream`);
-
-      eventSource.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data);
-          
-          // Handle reasoning steps from backend
-          if (data.reasoning && data.reasoning.length > 0) {
-            setIsStreaming(true);
-            
-            const newSteps: ReasoningStep[] = data.reasoning.map((step: any, index: number) => ({
-              id: `step-${index}-${step.timestamp}`,
-              type: step.type as ReasoningStep["type"],
-              content: step.content,
-              timestamp: new Date(step.timestamp),
-              status: step.status === "active" ? "running" : "completed",
-            }));
-            
-            setSteps(newSteps);
-          }
-          
-          if (data.completed_at) {
-            setIsStreaming(false);
-          }
-        } catch (e) {
-          console.error("Error parsing status:", e);
-        }
-      };
-
-      eventSource.onerror = () => {
-        eventSource?.close();
-        // Reconnect after 3 seconds
-        setTimeout(connect, 3000);
-      };
-    };
-
-    connect();
-    return () => eventSource?.close();
-  }, [sessionId]);
-
-  // Auto-scroll to bottom
-  useEffect(() => {
-    if (containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
-    }
-  }, [steps]);
-
-  const getIcon = (type: ReasoningStep["type"], status: string) => {
-    if (status === "running") {
-      return (
-        <div className="w-4 h-4 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" />
-      );
-    }
-    
-    switch (type) {
-      case "tool":
-        return <span className="text-blue-400">🔧</span>;
-      case "result":
-        return <span className="text-green-400">✓</span>;
-      case "error":
-        return <span className="text-red-400">✗</span>;
-      case "thinking":
-        return <span className="text-purple-400">🧠</span>;
-      default:
-        return <span>•</span>;
-    }
-  };
-
-  const getColor = (type: ReasoningStep["type"], status: string) => {
-    if (status === "running") return "text-blue-300 bg-blue-500/10 border-blue-500/30";
-    
-    switch (type) {
-      case "tool":
-        return "text-blue-300 bg-gray-800/50 border-gray-600";
-      case "result":
-        return "text-green-300 bg-green-500/10 border-green-500/30";
-      case "error":
-        return "text-red-300 bg-red-500/10 border-red-500/30";
-      case "thinking":
-        return "text-purple-300 bg-purple-500/10 border-purple-500/30";
-      default:
-        return "text-gray-300 bg-gray-800/50 border-gray-600";
-    }
-  };
-
-  return (
-    <div className="bg-gray-900 rounded-xl border border-gray-700 overflow-hidden h-full flex flex-col">
-      {/* Header */}
-      <div className="px-4 py-3 bg-gray-800 border-b border-gray-700 flex items-center justify-between flex-shrink-0">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold text-white">🤖 Tool Calls</span>
-          {isStreaming && (
-            <span className="flex items-center gap-1 text-xs text-green-400">
-              <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
-              Live
-            </span>
-          )}
-        </div>
-        {steps.length > 0 && (
-          <button
-            onClick={() => setSteps([])}
-            className="text-xs text-gray-500 hover:text-gray-300 transition-colors"
-          >
-            Clear
-          </button>
-        )}
-      </div>
-
-      {/* Tool call log */}
-      <div 
-        ref={containerRef}
-        className="p-3 flex-1 overflow-y-auto font-mono text-sm"
-      >
-        {steps.length === 0 ? (
-          <div className="text-gray-500 text-center py-8">
-            <div className="text-2xl mb-2">🔧</div>
-            <p>Tool calls will appear here</p>
-            <p className="text-xs mt-2">When AI uses tools, you'll see them logged</p>
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {steps.map((step) => (
-              <div 
-                key={step.id} 
-                className={`flex items-start gap-2 p-2 rounded-lg border ${getColor(step.type, step.status)}`}
-              >
-                <span className="flex-shrink-0 mt-0.5">
-                  {getIcon(step.type, step.status)}
-                </span>
-                <div className="flex-1 min-w-0">
-                  <span className="block break-words whitespace-pre-wrap">
-                    {step.content}
-                  </span>
-                  <span className="text-xs opacity-50 mt-1 block">
-                    {step.timestamp.toLocaleTimeString()}
-                  </span>
-                </div>
-              </div>
-            ))}
-            
-            {isStreaming && (
-              <div className="flex items-center gap-2 text-gray-500 mt-2 justify-center py-2">
-                <div className="w-3 h-3 border-2 border-gray-500 border-t-transparent rounded-full animate-spin" />
-                <span className="text-xs">Waiting for next action...</span>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

chatkit/frontend/src/components/SimpleChatPanel.tsx

@@ -1,19 +0,0 @@
-import { ChatKit, useChatKit } from "@openai/chatkit-react";
-
-const CHATKIT_API_URL = "/chatkit";
-const CHATKIT_API_DOMAIN_KEY = "domain_pk_localhost_dev";
-
-export function SimpleChatPanel() {
-  const chatkit = useChatKit({
-    api: { url: CHATKIT_API_URL, domainKey: CHATKIT_API_DOMAIN_KEY },
-    composer: {
-      attachments: { enabled: false },
-    },
-  });
-
-  return (
-    <div className="relative pb-8 flex h-[90vh] w-full rounded-2xl flex-col overflow-hidden bg-white shadow-sm transition-colors dark:bg-slate-900">
-      <ChatKit control={chatkit.control} className="block h-full w-full" />
-    </div>
-  );
-}

chatkit/frontend/src/components/StepIndicator.tsx

@@ -0,0 +1,41 @@
+interface StepIndicatorProps {
+  currentStep: 1 | 2 | 3;
+  onStepClick?: (step: 1 | 2 | 3) => void;
+}
+
+const steps = [
+  { num: 1 as const, label: "上傳資料", icon: "📁" },
+  { num: 2 as const, label: "編輯提示詞", icon: "✏️" },
+  { num: 3 as const, label: "檢視報告", icon: "📊" },
+];
+
+export function StepIndicator({ currentStep, onStepClick }: StepIndicatorProps) {
+  return (
+    <div className="flex items-center justify-center gap-2 py-6 px-4">
+      {steps.map((step, idx) => (
+        <div key={step.num} className="flex items-center">
+          <button
+            onClick={() => onStepClick?.(step.num)}
+            disabled={step.num > currentStep}
+            className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all ${
+              step.num === currentStep
+                ? "bg-[var(--color-primary)] text-white shadow-lg"
+                : step.num < currentStep
+                ? "bg-[var(--color-success)]/20 text-[var(--color-success)] cursor-pointer hover:bg-[var(--color-success)]/30"
+                : "bg-[var(--color-border)]/30 text-[var(--color-text-muted)] cursor-not-allowed"
+            }`}
+          >
+            <span>{step.num < currentStep ? "✓" : step.icon}</span>
+            <span className="hidden sm:inline">{step.label}</span>
+            <span className="sm:hidden">{step.num}</span>
+          </button>
+          {idx < steps.length - 1 && (
+            <div className={`w-8 h-0.5 mx-1 ${
+              step.num < currentStep ? "bg-[var(--color-success)]" : "bg-[var(--color-border)]"
+            }`} />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

chatkit/frontend/src/components/WorkflowStatus.tsx

@@ -1,281 +0,0 @@
-import { useState, useEffect } from "react";
-
-interface StepData {
-  id: string;
-  status: "pending" | "active" | "completed" | "error";
-  detail?: string;
-  timestamp?: string;
-}
-
-interface StatusResponse {
-  current_step: string | null;
-  steps: StepData[];
-  started_at: string | null;
-  completed_at: string | null;
-}
-
-interface WorkflowStep {
-  id: string;
-  label: string;
-  icon: JSX.Element;
-  status: "pending" | "active" | "completed" | "error";
-  detail?: string;
-}
-
-interface WorkflowStatusProps {
-  sessionId?: string;
-}
-
-const STEP_CONFIG: { id: string; label: string; icon: JSX.Element; defaultDetail: string }[] = [
-  {
-    id: "fetch",
-    label: "Fetch Responses",
-    icon: (
-      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-      </svg>
-    ),
-    defaultDetail: "Getting data from Google Sheets",
-  },
-  {
-    id: "normalize",
-    label: "Parse Data",
-    icon: (
-      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
-      </svg>
-    ),
-    defaultDetail: "Organizing questions and answers",
-  },
-  {
-    id: "grade",
-    label: "Grade Answers",
-    icon: (
-      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-    ),
-    defaultDetail: "Comparing with correct answers",
-  },
-  {
-    id: "explain",
-    label: "Generate Explanations",
-    icon: (
-      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-      </svg>
-    ),
-    defaultDetail: "Explaining wrong answers",
-  },
-  {
-    id: "group",
-    label: "Create Peer Groups",
-    icon: (
-      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
-      </svg>
-    ),
-    defaultDetail: "Matching helpers with learners",
-  },
-  {
-    id: "report",
-    label: "Generate Report",
-    icon: (
-      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-      </svg>
-    ),
-    defaultDetail: "Creating comprehensive report",
-  },
-  {
-    id: "email",
-    label: "Send Email",
-    icon: (
-      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-      </svg>
-    ),
-    defaultDetail: "Delivering report to inbox",
-  },
-];
-
-export function WorkflowStatus({ sessionId = "default" }: WorkflowStatusProps) {
-  const [steps, setSteps] = useState<WorkflowStep[]>(
-    STEP_CONFIG.map(s => ({ ...s, status: "pending" as const, detail: s.defaultDetail }))
-  );
-  const [isConnected, setIsConnected] = useState(false);
-  const [isAnalyzing, setIsAnalyzing] = useState(false);
-
-  useEffect(() => {
-    let eventSource: EventSource | null = null;
-    let retryCount = 0;
-    const maxRetries = 3;
-
-    const connect = () => {
-      eventSource = new EventSource(`/api/status/${sessionId}/stream`);
-
-      eventSource.onopen = () => {
-        setIsConnected(true);
-        retryCount = 0;
-      };
-
-      eventSource.onmessage = (event) => {
-        try {
-          const data: StatusResponse = JSON.parse(event.data);
-          
-          // Check if there's any activity
-          const hasActivity = data.steps && data.steps.length > 0;
-          setIsAnalyzing(hasActivity && !data.completed_at);
-          
-          // Update steps based on server data
-          setSteps(prevSteps => {
-            return prevSteps.map(step => {
-              const serverStep = data.steps?.find(s => s.id === step.id);
-              if (serverStep) {
-                return {
-                  ...step,
-                  status: serverStep.status as WorkflowStep["status"],
-                  detail: serverStep.detail || step.detail,
-                };
-              }
-              return step;
-            });
-          });
-        } catch (e) {
-          console.error("Error parsing status:", e);
-        }
-      };
-
-      eventSource.onerror = () => {
-        setIsConnected(false);
-        eventSource?.close();
-        
-        // Retry connection
-        if (retryCount < maxRetries) {
-          retryCount++;
-          setTimeout(connect, 2000 * retryCount);
-        }
-      };
-    };
-
-    connect();
-
-    return () => {
-      eventSource?.close();
-    };
-  }, [sessionId]);
-
-  const getStatusColor = (status: WorkflowStep["status"]) => {
-    switch (status) {
-      case "completed": return "bg-[var(--color-success)] text-white";
-      case "active": return "bg-[var(--color-accent)] text-white animate-pulse";
-      case "error": return "bg-red-500 text-white";
-      default: return "bg-[var(--color-border)] text-[var(--color-text-muted)]";
-    }
-  };
-
-  const getLineColor = (status: WorkflowStep["status"]) => {
-    switch (status) {
-      case "completed": return "bg-[var(--color-success)]";
-      case "active": return "bg-[var(--color-accent)]";
-      default: return "bg-[var(--color-border)]";
-    }
-  };
-
-  const activeStep = steps.find(s => s.status === "active");
-  const completedCount = steps.filter(s => s.status === "completed").length;
-
-  return (
-    <div className="card p-4">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-2">
-          <div className={`w-2 h-2 rounded-full ${isAnalyzing ? 'bg-[var(--color-accent)] animate-pulse' : isConnected ? 'bg-[var(--color-success)]' : 'bg-[var(--color-border)]'}`} />
-          <h3 className="font-display text-sm font-semibold text-[var(--color-text)]">
-            {isAnalyzing ? "AI Agent Working..." : "Agent Status"}
-          </h3>
-        </div>
-        {completedCount > 0 && (
-          <span className="text-xs text-[var(--color-text-muted)]">
-            {completedCount}/{steps.length}
-          </span>
-        )}
-      </div>
-
-      {/* Active step highlight */}
-      {activeStep && (
-        <div className="mb-4 p-3 rounded-lg bg-[var(--color-accent)]/10 border border-[var(--color-accent)]/20">
-          <div className="flex items-center gap-2">
-            <div className="w-5 h-5 rounded-full bg-[var(--color-accent)] flex items-center justify-center animate-pulse">
-              <div className="w-2 h-2 bg-white rounded-full" />
-            </div>
-            <div>
-              <div className="text-sm font-medium text-[var(--color-accent)]">
-                {activeStep.label}
-              </div>
-              <div className="text-xs text-[var(--color-text-muted)]">
-                {activeStep.detail}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-      
-      {/* Steps list */}
-      <div className="space-y-1">
-        {steps.map((step, index) => (
-          <div key={step.id} className="relative">
-            {/* Connector line */}
-            {index < steps.length - 1 && (
-              <div 
-                className={`absolute left-[11px] top-[24px] w-0.5 h-4 transition-colors duration-300 ${getLineColor(step.status)}`}
-              />
-            )}
-            
-            <div className="flex items-center gap-3 py-1">
-              {/* Icon circle */}
-              <div 
-                className={`flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center transition-all duration-300 ${getStatusColor(step.status)}`}
-              >
-                {step.status === "completed" ? (
-                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-                  </svg>
-                ) : step.status === "active" ? (
-                  <div className="w-2 h-2 bg-white rounded-full" />
-                ) : step.status === "error" ? (
-                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                ) : (
-                  <span className="text-[10px]">{index + 1}</span>
-                )}
-              </div>
-              
-              {/* Label */}
-              <div className={`text-sm transition-colors ${
-                step.status === "active" 
-                  ? "font-medium text-[var(--color-accent)]" 
-                  : step.status === "completed"
-                  ? "text-[var(--color-success)]"
-                  : step.status === "error"
-                  ? "text-red-500"
-                  : "text-[var(--color-text-muted)]"
-              }`}>
-                {step.label}
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Connection status */}
-      <div className="mt-4 pt-3 border-t border-[var(--color-border)]">
-        <div className="flex items-center gap-2 text-xs text-[var(--color-text-muted)]">
-          <div className={`w-1.5 h-1.5 rounded-full ${isConnected ? 'bg-green-500' : 'bg-gray-400'}`} />
-          {isConnected ? "Live updates" : "Connecting..."}
-        </div>
-      </div>
-    </div>
-  );
-}

chatkit/frontend/src/components/step1/DataViewer.tsx

@@ -0,0 +1,112 @@
+interface DataViewerProps {
+  parsedData: Record<string, unknown[]>;
+}
+
+export function DataViewer({ parsedData }: DataViewerProps) {
+  const questions = parsedData.questions?.[0] as { structured_data: { questions: Array<{ number: number; text: string; type: string; options: string[] | null; points: number | null }> } } | undefined;
+  const studentAnswers = parsedData.student_answers?.[0] as { structured_data: { students: Array<{ name: string; id: string; answers: Array<{ question_number: number; answer: string }> }> } } | undefined;
+  const teacherAnswers = parsedData.teacher_answers?.[0] as { structured_data: { answers: Array<{ question_number: number; correct_answer: string; explanation: string | null }> } } | undefined;
+
+  return (
+    <div className="space-y-6">
+      {/* Questions */}
+      {questions && (
+        <div className="card p-6">
+          <h3 className="font-display text-lg font-semibold text-[var(--color-text)] mb-4">
+            📝 考試題目 ({questions.structured_data.questions?.length || 0} 題)
+          </h3>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-[var(--color-border)]">
+                  <th className="text-left py-2 px-3 text-[var(--color-text-muted)]">#</th>
+                  <th className="text-left py-2 px-3 text-[var(--color-text-muted)]">題目</th>
+                  <th className="text-left py-2 px-3 text-[var(--color-text-muted)]">類型</th>
+                  <th className="text-left py-2 px-3 text-[var(--color-text-muted)]">分數</th>
+                </tr>
+              </thead>
+              <tbody>
+                {questions.structured_data.questions?.map((q) => (
+                  <tr key={q.number} className="border-b border-[var(--color-border)]/50">
+                    <td className="py-2 px-3 text-[var(--color-primary)] font-bold">{q.number}</td>
+                    <td className="py-2 px-3 text-[var(--color-text)]">
+                      <p>{q.text}</p>
+                      {q.options && (
+                        <div className="mt-1 text-xs text-[var(--color-text-muted)]">
+                          {q.options.join(" | ")}
+                        </div>
+                      )}
+                    </td>
+                    <td className="py-2 px-3">
+                      <span className="badge badge-success">{q.type}</span>
+                    </td>
+                    <td className="py-2 px-3 text-[var(--color-text-muted)]">{q.points ?? "-"}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* Student Answers */}
+      {studentAnswers && (
+        <div className="card p-6">
+          <h3 className="font-display text-lg font-semibold text-[var(--color-text)] mb-4">
+            👨‍🎓 學生答案 ({studentAnswers.structured_data.students?.length || 0} 位學生)
+          </h3>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-[var(--color-border)]">
+                  <th className="text-left py-2 px-3 text-[var(--color-text-muted)]">學生</th>
+                  {questions?.structured_data.questions?.map((q) => (
+                    <th key={q.number} className="text-center py-2 px-3 text-[var(--color-text-muted)]">Q{q.number}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {studentAnswers.structured_data.students?.map((s) => (
+                  <tr key={s.name || s.id} className="border-b border-[var(--color-border)]/50">
+                    <td className="py-2 px-3 text-[var(--color-text)] font-medium">{s.name || s.id}</td>
+                    {(questions?.structured_data.questions || s.answers)?.map((_, i) => {
+                      const ans = s.answers?.find((a) => a.question_number === i + 1);
+                      return (
+                        <td key={i} className="text-center py-2 px-3 text-[var(--color-text-muted)]">
+                          {ans?.answer ?? "-"}
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* Teacher Answers */}
+      {teacherAnswers && (
+        <div className="card p-6">
+          <h3 className="font-display text-lg font-semibold text-[var(--color-text)] mb-4">
+            ✅ 標準答案
+          </h3>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+            {teacherAnswers.structured_data.answers?.map((a) => (
+              <div key={a.question_number} className="bg-[var(--color-background)] rounded-lg p-3">
+                <span className="text-xs text-[var(--color-text-muted)]">Q{a.question_number}</span>
+                <p className="text-[var(--color-success)] font-semibold">{a.correct_answer}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {!questions && !studentAnswers && !teacherAnswers && (
+        <div className="text-center py-12 text-[var(--color-text-muted)]">
+          尚未有解析資料
+        </div>
+      )}
+    </div>
+  );
+}

chatkit/frontend/src/components/step1/FileUploadPanel.tsx

@@ -0,0 +1,400 @@
+import { useState, useRef } from "react";
+import { apiUpload } from "../../lib/api";
+import { ModelSelector } from "../ModelSelector";
+
+interface FileUploadPanelProps {
+  sessionId: number;
+  parsedData: Record<string, unknown>;
+  onParsedDataUpdate: (dataType: string, data: unknown) => void;
+  onGoToStep2: () => void;
+}
+
+interface UploadZone {
+  type: "questions" | "student_answers" | "teacher_answers";
+  label: string;
+  description: string;
+  placeholder: string;
+  icon: string;
+}
+
+const zones: UploadZone[] = [
+  {
+    type: "questions",
+    label: "考試題目",
+    description: "上傳考試試卷（任意格式）",
+    placeholder: "例如：國中三年級數學期中考，共 20 題選擇題和 5 題計算題",
+    icon: "📝",
+  },
+  {
+    type: "student_answers",
+    label: "學生答案",
+    description: "上傳學生作答資料（任意格式）",
+    placeholder: "例如：35 位學生的答案卷，手寫掃描",
+    icon: "👨‍🎓",
+  },
+  {
+    type: "teacher_answers",
+    label: "標準答案",
+    description: "上傳教師答案/解答（任意格式）",
+    placeholder: "例如：教師提供的標準答案與解題步驟",
+    icon: "✅",
+  },
+];
+
+export function FileUploadPanel({
+  sessionId,
+  parsedData,
+  onParsedDataUpdate,
+  onGoToStep2,
+}: FileUploadPanelProps) {
+  const [files, setFiles] = useState<Record<string, File[]>>({
+    questions: [],
+    student_answers: [],
+    teacher_answers: [],
+  });
+  const [descriptions, setDescriptions] = useState<Record<string, string>>({
+    questions: "",
+    student_answers: "",
+    teacher_answers: "",
+  });
+  const [analyzing, setAnalyzing] = useState<Record<string, boolean>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [model, setModel] = useState("gpt-5.4");
+  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});
+
+  const handleFileSelect = (type: string, selected: FileList | null) => {
+    if (!selected) return;
+    setFiles((prev) => ({ ...prev, [type]: Array.from(selected) }));
+    setErrors((prev) => ({ ...prev, [type]: "" }));
+  };
+
+  const handleDrop = (type: string, e: React.DragEvent) => {
+    e.preventDefault();
+    handleFileSelect(type, e.dataTransfer.files);
+  };
+
+  const handleAnalyze = async (type: string) => {
+    const typeFiles = files[type];
+    if (!typeFiles.length) return;
+
+    setAnalyzing((prev) => ({ ...prev, [type]: true }));
+    setErrors((prev) => ({ ...prev, [type]: "" }));
+
+    try {
+      const formData = new FormData();
+      formData.append("data_type", type);
+      formData.append("description", descriptions[type] || "");
+      formData.append("model", model);
+      for (const f of typeFiles) {
+        formData.append("files", f);
+      }
+      const res = await apiUpload<{ data: unknown }>(`/api/sessions/${sessionId}/upload`, formData);
+      onParsedDataUpdate(type, res.data);
+    } catch (err: unknown) {
+      setErrors((prev) => ({
+        ...prev,
+        [type]: err instanceof Error ? err.message : "Analysis failed",
+      }));
+    } finally {
+      setAnalyzing((prev) => ({ ...prev, [type]: false }));
+    }
+  };
+
+  const hasAnyParsedData = Object.keys(parsedData).length > 0;
+  const isAnyAnalyzing = Object.values(analyzing).some(Boolean);
+
+  return (
+    <div className="space-y-6">
+      {/* Model selector */}
+      <div className="flex justify-end">
+        <ModelSelector value={model} onChange={setModel} label="解析模型：" />
+      </div>
+
+      {/* Info note */}
+      <p className="text-xs text-[var(--color-text-muted)] text-center">
+        支援任意格式檔案（PDF、圖片、文字檔等）。若檔案中包含圖片、圖表或示意圖，AI 會自動將其轉換為文字描述，以確保後續分析完整準確。
+      </p>
+
+      {/* Upload zones */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {zones.map((zone) => {
+          const zoneData = parsedData[zone.type] as Record<string, unknown> | undefined;
+          const isAnalyzing = analyzing[zone.type];
+          const hasFiles = files[zone.type].length > 0;
+          const hasParsed = !!zoneData;
+
+          return (
+            <div
+              key={zone.type}
+              className={`card p-6 transition-all ${hasParsed ? "border-[var(--color-success)]/50" : ""}`}
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={(e) => handleDrop(zone.type, e)}
+            >
+              <div className="text-center mb-3">
+                <span className="text-3xl">{zone.icon}</span>
+                <h3 className="font-display text-lg font-semibold text-[var(--color-text)] mt-2">
+                  {zone.label}
+                </h3>
+                <p className="text-sm text-[var(--color-text-muted)]">{zone.description}</p>
+              </div>
+
+              {/* Per-zone description */}
+              <textarea
+                value={descriptions[zone.type] || ""}
+                onChange={(e) =>
+                  setDescriptions((prev) => ({ ...prev, [zone.type]: e.target.value }))
+                }
+                placeholder={zone.placeholder}
+                className="w-full mb-3 px-3 py-2 text-xs bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg text-[var(--color-text)] placeholder-[var(--color-text-muted)] resize-none focus:outline-none focus:border-[var(--color-primary)] transition-colors"
+                rows={2}
+              />
+
+              <input
+                ref={(el) => { fileInputRefs.current[zone.type] = el; }}
+                type="file"
+                multiple
+                className="hidden"
+                onChange={(e) => handleFileSelect(zone.type, e.target.files)}
+              />
+
+              <button
+                onClick={() => fileInputRefs.current[zone.type]?.click()}
+                className={`w-full py-6 border-2 border-dashed rounded-xl transition-all text-sm ${
+                  hasFiles
+                    ? "border-[var(--color-primary)] bg-[var(--color-primary)]/5"
+                    : "border-[var(--color-border)] hover:border-[var(--color-primary)] hover:bg-[var(--color-primary)]/5"
+                }`}
+              >
+                {hasFiles ? (
+                  <div className="space-y-1">
+                    {files[zone.type].map((f, i) => (
+                      <p key={i} className="text-[var(--color-text)] truncate px-2">
+                        {f.name}
+                      </p>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-[var(--color-text-muted)]">
+                    點擊或拖放檔案至此
+                  </p>
+                )}
+              </button>
+
+              {/* Analyze button per zone */}
+              <button
+                onClick={() => handleAnalyze(zone.type)}
+                disabled={!hasFiles || isAnalyzing}
+                className="w-full mt-3 btn btn-primary py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isAnalyzing ? (
+                  <span className="flex items-center justify-center gap-2">
+                    <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                    解析中...
+                  </span>
+                ) : hasParsed ? (
+                  "重新解析"
+                ) : (
+                  "解析資料"
+                )}
+              </button>
+
+              {/* Parsed status + summary */}
+              {hasParsed && (
+                <div className="mt-3 p-3 bg-[var(--color-background)] rounded-lg">
+                  <p className="text-xs text-[var(--color-success)] font-semibold mb-1">✓ 解析完成</p>
+                  <ZoneSummary type={zone.type} data={zoneData} />
+                </div>
+              )}
+
+              {errors[zone.type] && (
+                <p className="text-sm text-red-400 mt-2 text-center">{errors[zone.type]}</p>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Full parsed data display */}
+      {hasAnyParsedData && (
+        <div className="space-y-4">
+          <QuestionsTable data={parsedData.questions as Record<string, unknown> | undefined} />
+          <StudentAnswersTable data={parsedData.student_answers as Record<string, unknown> | undefined} />
+          <TeacherAnswersTable data={parsedData.teacher_answers as Record<string, unknown> | undefined} />
+        </div>
+      )}
+
+      {/* Next step button */}
+      {hasAnyParsedData && !isAnyAnalyzing && (
+        <div className="text-center">
+          <button
+            onClick={onGoToStep2}
+            className="btn btn-primary text-lg px-8 py-4"
+          >
+            確認資料，前往下一步 →
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Compact summary shown inside each zone card */
+function ZoneSummary({ type, data }: { type: string; data: Record<string, unknown> }) {
+  if (type === "questions") {
+    const questions = (data as { questions?: unknown[] }).questions;
+    if (!questions) return null;
+    return (
+      <p className="text-xs text-[var(--color-text-muted)]">
+        共 {questions.length} 題
+      </p>
+    );
+  }
+  if (type === "student_answers") {
+    const students = (data as { students?: unknown[] }).students;
+    if (!students) return null;
+    return (
+      <p className="text-xs text-[var(--color-text-muted)]">
+        共 {students.length} 位學生
+      </p>
+    );
+  }
+  if (type === "teacher_answers") {
+    const answers = (data as { answers?: unknown[] }).answers;
+    if (!answers) return null;
+    return (
+      <p className="text-xs text-[var(--color-text-muted)]">
+        共 {answers.length} 題答案
+      </p>
+    );
+  }
+  return null;
+}
+
+/* ── Parsed data tables ── */
+
+function QuestionsTable({ data }: { data?: Record<string, unknown> }) {
+  if (!data) return null;
+  const questions = (data as { questions?: Array<{ number: number; text: string; type?: string; options?: string[] | null; points?: number | null }> }).questions;
+  if (!questions?.length) return null;
+
+  return (
+    <div className="card p-5">
+      <h3 className="font-display text-base font-semibold text-[var(--color-text)] mb-3">
+        📝 考試題目（{questions.length} 題）
+      </h3>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-[var(--color-border)]">
+              <th className="text-left py-2 px-3 text-[var(--color-text-muted)] w-12">#</th>
+              <th className="text-left py-2 px-3 text-[var(--color-text-muted)]">題目</th>
+              <th className="text-left py-2 px-3 text-[var(--color-text-muted)] w-28">類型</th>
+              <th className="text-left py-2 px-3 text-[var(--color-text-muted)] w-16">分數</th>
+            </tr>
+          </thead>
+          <tbody>
+            {questions.map((q, i) => (
+              <tr key={i} className="border-b border-[var(--color-border)]/50">
+                <td className="py-2 px-3 text-[var(--color-primary)] font-bold">{q.number}</td>
+                <td className="py-2 px-3 text-[var(--color-text)]">
+                  <p>{q.text}</p>
+                  {q.options && (
+                    <div className="mt-1 text-xs text-[var(--color-text-muted)]">
+                      {q.options.join(" | ")}
+                    </div>
+                  )}
+                </td>
+                <td className="py-2 px-3">
+                  {q.type && <span className="badge badge-success text-xs">{q.type}</span>}
+                </td>
+                <td className="py-2 px-3 text-[var(--color-text-muted)]">{q.points ?? "-"}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function StudentAnswersTable({ data }: { data?: Record<string, unknown> }) {
+  if (!data) return null;
+  const students = (data as { students?: Array<{ name: string; id?: string; answers: Array<{ question_number: number; answer: string | null }> }> }).students;
+  if (!students?.length) return null;
+
+  // Collect all question numbers across students
+  const allQNums = Array.from(
+    new Set(students.flatMap((s) => s.answers.map((a) => a.question_number)))
+  ).sort((a, b) => a - b);
+
+  return (
+    <div className="card p-5">
+      <h3 className="font-display text-base font-semibold text-[var(--color-text)] mb-3">
+        👨‍🎓 學生答案（{students.length} 位學生）
+      </h3>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-[var(--color-border)]">
+              <th className="text-left py-2 px-3 text-[var(--color-text-muted)] sticky left-0 bg-[var(--color-surface)]">學生</th>
+              {allQNums.map((n) => (
+                <th key={n} className="text-center py-2 px-3 text-[var(--color-text-muted)] min-w-[60px]">Q{n}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {students.map((s, i) => (
+              <tr key={i} className="border-b border-[var(--color-border)]/50">
+                <td className="py-2 px-3 text-[var(--color-text)] font-medium sticky left-0 bg-[var(--color-surface)]">
+                  {s.name || s.id || `學生 ${i + 1}`}
+                </td>
+                {allQNums.map((n) => {
+                  const ans = s.answers?.find((a) => a.question_number === n);
+                  return (
+                    <td key={n} className="text-center py-2 px-3 text-[var(--color-text-muted)]">
+                      {ans?.answer ?? "-"}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function TeacherAnswersTable({ data }: { data?: Record<string, unknown> }) {
+  if (!data) return null;
+  const answers = (data as { answers?: Array<{ question_number: number; correct_answer: string; explanation?: string | null }> }).answers;
+  if (!answers?.length) return null;
+
+  return (
+    <div className="card p-5">
+      <h3 className="font-display text-base font-semibold text-[var(--color-text)] mb-3">
+        ✅ 標準答案（{answers.length} 題）
+      </h3>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-[var(--color-border)]">
+              <th className="text-left py-2 px-3 text-[var(--color-text-muted)] w-12">#</th>
+              <th className="text-left py-2 px-3 text-[var(--color-text-muted)]">正確答案</th>
+              <th className="text-left py-2 px-3 text-[var(--color-text-muted)]">解釋</th>
+            </tr>
+          </thead>
+          <tbody>
+            {answers.map((a, i) => (
+              <tr key={i} className="border-b border-[var(--color-border)]/50">
+                <td className="py-2 px-3 text-[var(--color-primary)] font-bold">Q{a.question_number}</td>
+                <td className="py-2 px-3 text-[var(--color-success)] font-semibold">{a.correct_answer}</td>
+                <td className="py-2 px-3 text-[var(--color-text-muted)]">{a.explanation || "-"}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

chatkit/frontend/src/components/step2/ParsedDataSummary.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+
+interface ParsedDataSummaryProps {
+  parsedData: Record<string, unknown>;
+}
+
+export function ParsedDataSummary({ parsedData }: ParsedDataSummaryProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  const questions = parsedData.questions as { questions?: unknown[] } | undefined;
+  const students = parsedData.student_answers as { students?: unknown[] } | undefined;
+  const answers = parsedData.teacher_answers as { answers?: unknown[] } | undefined;
+
+  const qCount = questions?.questions?.length ?? 0;
+  const sCount = students?.students?.length ?? 0;
+  const aCount = answers?.answers?.length ?? 0;
+
+  return (
+    <div className="card p-4">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center justify-between text-left"
+      >
+        <div className="flex items-center gap-4">
+          <h3 className="font-display text-sm font-semibold text-[var(--color-text)]">
+            已解析資料
+          </h3>
+          <div className="flex gap-3 text-xs">
+            {qCount > 0 && <span className="badge badge-success">📝 {qCount} 題</span>}
+            {sCount > 0 && <span className="badge badge-success">👨‍🎓 {sCount} 位學生</span>}
+            {aCount > 0 && <span className="badge badge-success">✅ {aCount} 答案</span>}
+          </div>
+        </div>
+        <span className="text-[var(--color-text-muted)] text-lg">
+          {expanded ? "▲" : "▼"}
+        </span>
+      </button>
+
+      {expanded && (
+        <div className="mt-4 pt-4 border-t border-[var(--color-border)] text-sm max-h-64 overflow-y-auto">
+          <pre className="text-[var(--color-text-muted)] whitespace-pre-wrap break-words">
+            {JSON.stringify(parsedData, null, 2)}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}

chatkit/frontend/src/components/step2/PromptEditor.tsx

@@ -0,0 +1,186 @@
+import { useState, useEffect } from "react";
+import { apiGet, apiPost } from "../../lib/api";
+import { ModelSelector } from "../ModelSelector";
+
+interface Prompt {
+  id: number;
+  name: string;
+  content: string;
+  user_id: number;
+  author_email?: string;
+}
+
+interface PromptEditorProps {
+  promptContent: string;
+  onPromptChange: (content: string) => void;
+  sessionId: number;
+  onRunSummary: (model: string) => void;
+  isGenerating: boolean;
+}
+
+export function PromptEditor({
+  promptContent,
+  onPromptChange,
+  sessionId,
+  onRunSummary,
+  isGenerating,
+}: PromptEditorProps) {
+  const [prompts, setPrompts] = useState<Prompt[]>([]);
+  const [allPrompts, setAllPrompts] = useState<Prompt[]>([]);
+  const [saveName, setSaveName] = useState("");
+  const [showSave, setShowSave] = useState(false);
+  const [showOthers, setShowOthers] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [model, setModel] = useState("gpt-5.4");
+
+  useEffect(() => {
+    loadPrompts();
+  }, []);
+
+  const loadPrompts = async () => {
+    try {
+      const [mine, all] = await Promise.all([
+        apiGet<{ prompts: Prompt[] }>("/api/prompts"),
+        apiGet<{ prompts: Prompt[] }>("/api/prompts/all"),
+      ]);
+      setPrompts(mine.prompts);
+      setAllPrompts(all.prompts);
+    } catch {}
+  };
+
+  const handleSave = async () => {
+    if (!saveName.trim()) return;
+    setSaving(true);
+    try {
+      await apiPost("/api/prompts", { name: saveName, content: promptContent });
+      setSaveName("");
+      setShowSave(false);
+      await loadPrompts();
+    } catch {}
+    setSaving(false);
+  };
+
+  const handleLoadPrompt = (prompt: Prompt) => {
+    onPromptChange(prompt.content);
+    setShowOthers(false);
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Toolbar */}
+      <div className="flex flex-wrap items-center gap-3">
+        {/* Load own prompts */}
+        {prompts.length > 0 && (
+          <select
+            onChange={(e) => {
+              const p = prompts.find((p) => p.id === Number(e.target.value));
+              if (p) onPromptChange(p.content);
+            }}
+            defaultValue=""
+            className="input !w-auto !py-2 text-sm"
+          >
+            <option value="" disabled>我的提示詞...</option>
+            {prompts.map((p) => (
+              <option key={p.id} value={p.id}>{p.name}</option>
+            ))}
+          </select>
+        )}
+
+        {/* Load others' prompts */}
+        <button
+          onClick={() => setShowOthers(!showOthers)}
+          className="btn btn-outline text-sm !py-2"
+        >
+          瀏覽其他人的提示詞
+        </button>
+
+        {/* Save button */}
+        <button
+          onClick={() => setShowSave(!showSave)}
+          className="btn btn-outline text-sm !py-2"
+        >
+          儲存提示詞
+        </button>
+
+        {/* Model selector - right aligned */}
+        <div className="ml-auto">
+          <ModelSelector value={model} onChange={setModel} label="報告模型：" />
+        </div>
+      </div>
+
+      {/* Others' prompts dropdown */}
+      {showOthers && (
+        <div className="card p-4 max-h-48 overflow-y-auto">
+          <h4 className="text-sm font-semibold text-[var(--color-text-muted)] mb-2">所有提示詞</h4>
+          {allPrompts.length === 0 ? (
+            <p className="text-sm text-[var(--color-text-muted)]">目前沒有其他人的提示詞</p>
+          ) : (
+            <div className="space-y-2">
+              {allPrompts.map((p) => (
+                <button
+                  key={p.id}
+                  onClick={() => handleLoadPrompt(p)}
+                  className="w-full text-left p-2 rounded-lg hover:bg-[var(--color-primary)]/10 transition-colors"
+                >
+                  <span className="text-sm text-[var(--color-text)]">{p.name}</span>
+                  {p.author_email && (
+                    <span className="text-xs text-[var(--color-text-muted)] ml-2">
+                      by {p.author_email}
+                    </span>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Save prompt form */}
+      {showSave && (
+        <div className="card p-4 flex items-center gap-3">
+          <input
+            type="text"
+            value={saveName}
+            onChange={(e) => setSaveName(e.target.value)}
+            placeholder="提示詞名稱..."
+            className="input !py-2 text-sm flex-1"
+          />
+          <button
+            onClick={handleSave}
+            disabled={saving || !saveName.trim()}
+            className="btn btn-primary text-sm !py-2 disabled:opacity-50"
+          >
+            {saving ? "..." : "儲存"}
+          </button>
+        </div>
+      )}
+
+      {/* Prompt textarea */}
+      <textarea
+        value={promptContent}
+        onChange={(e) => onPromptChange(e.target.value)}
+        rows={12}
+        className="input !rounded-xl font-mono text-sm leading-relaxed resize-y"
+        placeholder="輸入分析提示詞...使用 {questions}, {student_answers}, {teacher_answers} 作為資料佔位符"
+      />
+
+      {/* Run summary button */}
+      <div className="text-center">
+        <button
+          onClick={() => onRunSummary(model)}
+          disabled={isGenerating || !promptContent.trim()}
+          className="btn btn-accent text-lg px-8 py-4 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isGenerating ? (
+            <span className="flex items-center gap-2">
+              <span className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+              生成報告中...
+            </span>
+          ) : (
+            "執行摘要分析 →"
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

chatkit/frontend/src/components/step3/ReportViewer.tsx

@@ -0,0 +1,54 @@
+import { useRef } from "react";
+
+interface ReportViewerProps {
+  reportHtml: string;
+  onBack: () => void;
+  onExportPdf: () => void;
+  onExportPng: () => void;
+}
+
+export function ReportViewer({ reportHtml, onBack, onExportPdf, onExportPng }: ReportViewerProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const handleDownloadHtml = () => {
+    const blob = new Blob([reportHtml], { type: "text/html" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "classlens-report.html";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Action bar */}
+      <div className="flex flex-wrap items-center gap-3">
+        <button onClick={onBack} className="btn btn-outline text-sm">
+          ← 返回修改提示詞
+        </button>
+        <div className="flex-1" />
+        <button onClick={handleDownloadHtml} className="btn btn-outline text-sm">
+          下載 HTML
+        </button>
+        <button onClick={onExportPdf} className="btn btn-outline text-sm">
+          匯出 PDF
+        </button>
+        <button onClick={onExportPng} className="btn btn-outline text-sm">
+          匯出 PNG
+        </button>
+      </div>
+
+      {/* Report iframe */}
+      <div className="card overflow-hidden" style={{ height: "75vh" }}>
+        <iframe
+          ref={iframeRef}
+          srcDoc={reportHtml}
+          title="Report"
+          className="w-full h-full border-0"
+          sandbox="allow-scripts allow-same-origin"
+        />
+      </div>
+    </div>
+  );
+}

chatkit/frontend/src/index.css

@@ -291,39 +291,3 @@ h1, h2, h3, h4, h5, h6 {
   background-clip: text;
 }
 
-/* ChatKit customization - Force Traditional Chinese */
-.chatkit-container,
-[data-chatkit-composer] {
-  /* Force zh-TW locale */
-}
-
-/* Override ChatKit placeholder text to Traditional Chinese */
-[data-chatkit-composer] textarea::placeholder,
-[data-chatkit-composer] input::placeholder,
-.chatkit-composer textarea::placeholder,
-.chatkit-composer input::placeholder {
-  /* This may not work as ChatKit uses iframe */
-}
-
-/* ChatKit customization */
-.chatkit-container {
-  --ck-color-primary: var(--color-primary);
-  --ck-color-background: var(--color-surface);
-  --ck-border-radius: 16px;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Ensure ChatKit elements are visible */
-.chatkit-container > * {
-  min-height: 0;
-  flex: 1;
-}
-
-/* Make sure the input area is always visible */
-[data-chatkit-composer],
-[class*="composer"],
-[class*="Composer"] {
-  position: relative !important;
-  z-index: 10;
-}

chatkit/frontend/src/lib/api.ts

@@ -0,0 +1,88 @@
+import { API_BASE_URL } from "./config";
+
+const TOKEN_KEY = "classlens_token";
+
+export function getToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+export function setToken(token: string) {
+  localStorage.setItem(TOKEN_KEY, token);
+}
+
+export function clearToken() {
+  localStorage.removeItem(TOKEN_KEY);
+}
+
+function authHeaders(): Record<string, string> {
+  const token = getToken();
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
+async function handleResponse<T>(res: Response): Promise<T> {
+  if (res.status === 401) {
+    clearToken();
+    window.location.reload();
+    throw new Error("Unauthorized");
+  }
+  if (!res.ok) {
+    const text = await res.text();
+    let msg = text;
+    try {
+      const j = JSON.parse(text);
+      msg = j.detail || j.message || text;
+    } catch {}
+    throw new Error(msg);
+  }
+  return res.json();
+}
+
+export async function apiGet<T>(path: string): Promise<T> {
+  const res = await fetch(`${API_BASE_URL}${path}`, {
+    headers: { ...authHeaders() },
+  });
+  return handleResponse<T>(res);
+}
+
+export async function apiPost<T>(path: string, body?: unknown): Promise<T> {
+  const res = await fetch(`${API_BASE_URL}${path}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", ...authHeaders() },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  return handleResponse<T>(res);
+}
+
+export async function apiPut<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(`${API_BASE_URL}${path}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json", ...authHeaders() },
+    body: JSON.stringify(body),
+  });
+  return handleResponse<T>(res);
+}
+
+export async function apiDelete(path: string): Promise<void> {
+  const res = await fetch(`${API_BASE_URL}${path}`, {
+    method: "DELETE",
+    headers: { ...authHeaders() },
+  });
+  if (res.status === 401) {
+    clearToken();
+    window.location.reload();
+    throw new Error("Unauthorized");
+  }
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+}
+
+export async function apiUpload<T>(path: string, formData: FormData): Promise<T> {
+  const res = await fetch(`${API_BASE_URL}${path}`, {
+    method: "POST",
+    headers: { ...authHeaders() },
+    body: formData,
+  });
+  return handleResponse<T>(res);
+}

chatkit/frontend/src/lib/config.ts

@@ -3,20 +3,5 @@ const readEnvString = (value: unknown): string | undefined =>
     ? value.trim()
     : undefined;
 
-export const CHATKIT_API_URL =
-  readEnvString(import.meta.env.VITE_CHATKIT_API_URL) ?? "/chatkit";
-
 export const API_BASE_URL =
   readEnvString(import.meta.env.VITE_API_BASE_URL) ?? "";
-
-/**
- * ChatKit requires a domain key at runtime. Use the local fallback while
- * developing, and register a production domain key for deployment:
- * https://platform.openai.com/settings/organization/security/domain-allowlist
- */
-export const CHATKIT_API_DOMAIN_KEY =
-  readEnvString(import.meta.env.VITE_CHATKIT_API_DOMAIN_KEY) ??
-  "domain_pk_localhost_dev";
-
-export const GOOGLE_AUTH_URL = `${API_BASE_URL}/auth/start`;
-export const AUTH_STATUS_URL = `${API_BASE_URL}/auth/status`;

chatkit/frontend/src/types/html2pdf.d.ts

@@ -0,0 +1,18 @@
+declare module "html2pdf.js" {
+  interface Html2PdfOptions {
+    margin?: number | number[];
+    filename?: string;
+    image?: { type?: string; quality?: number };
+    html2canvas?: { scale?: number; useCORS?: boolean };
+    jsPDF?: { unit?: string; format?: string; orientation?: string };
+  }
+  interface Html2PdfInstance {
+    set(options: Html2PdfOptions): Html2PdfInstance;
+    from(element: HTMLElement | string): Html2PdfInstance;
+    save(): Promise<void>;
+    toPdf(): Html2PdfInstance;
+    output(type: string): Promise<unknown>;
+  }
+  function html2pdf(): Html2PdfInstance;
+  export default html2pdf;
+}

chatkit/frontend/vite.config.ts

@@ -2,24 +2,15 @@ import * as path from "node:path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 
-const backendTarget = process.env.CHATKIT_API_BASE ?? "http://127.0.0.1:8000";
+const backendTarget = process.env.BACKEND_URL ?? "http://127.0.0.1:8000";
 
 export default defineConfig({
-  // Allow env files to live one level above the frontend directory
   envDir: path.resolve(__dirname, ".."),
   plugins: [react()],
   server: {
-    port: 3000,
+    port: 3003,
     host: "0.0.0.0",
     proxy: {
-      "/chatkit": {
-        target: backendTarget,
-        changeOrigin: true,
-      },
-      "/auth": {
-        target: backendTarget,
-        changeOrigin: true,
-      },
       "/api": {
         target: backendTarget,
         changeOrigin: true,