added api routes, changes to input pages, db creationg + token mapping, history page created, batch support for csv + fasta files

.claude/skills/agent-log.md

@@ -403,6 +403,253 @@ python -m uvicorn webapp.app.main:app --port 8000
 
 ---
 
+## Session 4 - 2026-01-15
+
+### Session Start
+- **Task**: Plan and implement multi-sequence input, file upload, token-based history, enhanced batch results
+- **Status**: COMPLETE
+
+### Requirements Gathered Through Q&A
+
+| Requirement | Decision |
+|-------------|----------|
+| Input text format | Support both FASTA and plain sequences (auto-detect) |
+| User identification | Token-based: auto-generate + allow user edit (NAR compliant) |
+| Auto job title format | `2026-01-15_abc12` (date + 5-char random ID) |
+| Token change behavior | Old jobs keep old token (no migration) |
+| CSV delimiter | Auto-detect (comma, semicolon, tab) |
+| Email notifications | Not for now |
+| History search | Job title + date range filter |
+| Results pagination | 25 per page |
+| Invalid sequences | Mark with "Invalid" badge (no details shown) |
+| Visualizations in dropdown | All (force plot, RNA structure, PSI gauge, sequence logo) |
+| Max batch size | 100 sequences (kept same) |
+
+### NAR Compliance Analysis
+
+User asked about NAR guidelines for user identification without authentication. Researched and confirmed:
+
+**NAR Requirements:**
+- No login/registration required (token is auto-generated)
+- Bookmarkable result URLs (`/result/{job_id}`)
+- User data private (only accessible via token/URL)
+- No tracking cookies (localStorage is allowed)
+
+**Token System Solution:**
+- Token format: `tok_xxxxxxxxxxxx` (12 random alphanumeric)
+- Auto-generated on first visit, stored in localStorage
+- User can edit/update token anytime
+- Old jobs keep old token when user changes it
+- Jobs searchable by token on `/history` page
+
+### Work Completed
+
+#### 1. Database Schema Changes (`webapp/app/models/job.py`)
+- Added `access_token` column (String(64), indexed)
+- Added `job_title` column (String(255))
+- Added new indexes: `idx_jobs_access_token`, `idx_jobs_created_at`
+- Updated `batch_sequences` to store named sequences: `[{name, sequence}, ...]`
+
+#### 2. API Schema Updates (`webapp/app/api/schemas.py`)
+- Added `SequenceItem` schema (name + sequence)
+- Updated `BatchSequenceInput` to accept `List[SequenceItem]`
+- Added `access_token`, `job_title`, `name` to `SequenceInput`
+- Added `JobSummary` and `JobHistoryResponse` for history endpoint
+- Added `PaginatedBatchResultsResponse` with stats (total, successful_count, invalid_count, average_psi)
+- Added `SequenceDetailResponse` for single sequence details
+- Added `BatchResultItem` with `index` field for pagination
+- Added `validate_single_sequence()` function for graceful validation
+
+#### 3. New API Endpoints (`webapp/app/api/routes.py`)
+- `GET /api/history` - Paginated job history by token with search & date filters
+- `DELETE /api/jobs/{job_id}` - Delete job (token verified)
+- `GET /api/batch/{job_id}/results` - Paginated batch results with search
+- `GET /api/batch/{job_id}/sequence/{index}` - Single sequence detail with force plot
+- Added `generate_job_title()` helper for auto job title generation
+- Modified `/api/predict` and `/api/batch` to handle access_token and job_title
+- Batch processing validates each sequence individually, marks invalid ones
+
+#### 4. New JavaScript Files (`webapp/static/js/`)
+
+| File | Purpose | Key Functions |
+|------|---------|---------------|
+| `token.js` | Token management | `generateToken()`, `getOrCreateToken()`, `setToken()`, `copyTokenToClipboard()`, `initTokenDisplay()` |
+| `file-parser.js` | CSV/FASTA parsing | `parseFasta()`, `parseCSV()`, `parseFile()`, `detectDelimiter()`, `detectHeader()`, `validateSequence()` |
+| `history.js` | History page | `loadJobs()`, `renderJobs()`, `renderPagination()`, `deleteJob()`, `applyFilters()` |
+| `batch-result.js` | Batch results | `loadResults()`, `renderResults()`, `showDetail()`, `createForcePlot()`, `updateStats()` |
+
+#### 5. New Templates (`webapp/templates/`)
+
+| File | Description |
+|------|-------------|
+| `history.html` | Job history page with search, date filters, paginated table |
+| `batch_result.html` | Batch results with summary stats, search, pagination, detail modal |
+
+#### 6. Template Updates
+
+- **`index.html`**: Redesigned with token display, job title field, multi-sequence textarea, file upload button, sequence count display
+- **`base.html`**: Added "History" link to desktop and mobile navigation
+
+#### 7. Route Updates (`webapp/app/main.py`)
+- Added `/history` route
+- Updated `/result/{job_id}` to detect batch jobs and render `batch_result.html`
+
+### Files Created/Modified
+
+```
+webapp/
+├── app/
+│   ├── main.py                    # Modified: Added history route, batch detection
+│   ├── api/
+│   │   ├── routes.py              # Modified: New endpoints, batch validation
+│   │   └── schemas.py             # Modified: New schemas for history/batch
+│   └── models/
+│       └── job.py                 # Modified: access_token, job_title fields
+├── static/js/
+│   ├── token.js                   # NEW: Token management
+│   ├── file-parser.js             # NEW: CSV/FASTA parsing
+│   ├── history.js                 # NEW: History page logic
+│   └── batch-result.js            # NEW: Batch results page logic
+└── templates/
+    ├── base.html                  # Modified: Added History nav link
+    ├── index.html                 # Modified: Multi-sequence input, file upload
+    ├── history.html               # NEW: Job history page
+    └── batch_result.html          # NEW: Batch results page
+```
+
+### API Endpoints Summary
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| POST | `/api/predict` | Single sequence (now with token/title) |
+| POST | `/api/batch` | Batch sequences with named items |
+| GET | `/api/history` | Paginated job history by token |
+| DELETE | `/api/jobs/{job_id}` | Delete job (token verified) |
+| GET | `/api/batch/{job_id}/results` | Paginated batch results |
+| GET | `/api/batch/{job_id}/sequence/{index}` | Single sequence detail |
+
+### Plan File
+See: `/Users/sachin/.claude/plans/structured-crafting-mitten.md`
+
+### How to Run
+```bash
+source venv310/bin/activate
+python -m uvicorn webapp.app.main:app --port 8000
+# Open http://localhost:8000
+```
+
+### Testing Checklist
+See testing instructions below in Session Notes.
+
+---
+
+## Session 5 - 2026-01-15
+
+### Session Start
+- **Task**: Implement PyShiny Filter × Position Heatmap Visualization
+- **Status**: COMPLETE
+
+### User Request
+User wanted to understand what "filters/features" mean in the model and implement a heatmap visualization (like the screenshot provided) showing filter activations across sequence positions using PyShiny.
+
+### What "Filters" Mean - Explanation Provided
+
+The CNN model has **56 convolutional filters** that act as pattern detectors:
+
+| Filter Type | Count | Purpose |
+|-------------|-------|---------|
+| `qc_incl` (incl_1 to incl_20) | 20 | Detect sequence patterns promoting **inclusion** |
+| `qc_skip` (skip_1 to skip_20) | 20 | Detect sequence patterns promoting **skipping** |
+| `c_incl_struct` (incl_struct_1-8) | 8 | Detect structure patterns for inclusion |
+| `c_skip_struct` (skip_struct_1-8) | 8 | Detect structure patterns for skipping |
+
+**Heatmap interpretation**:
+- Rows = Filter names
+- Columns = Positions in sequence (1-90)
+- Color intensity = Activation strength (brighter = stronger pattern detection)
+- Bright spots indicate where a filter detected its learned pattern
+
+### Work Completed
+
+#### 1. Added PyShiny Dependency
+**File**: `webapp/requirements.txt`
+```
+shiny>=0.8.0  # PyShiny for interactive visualizations
+```
+
+#### 2. Backend - Heatmap Data Extraction
+**File**: `webapp/app/services/predictor.py`
+
+Added `get_heatmap_data()` method (~65 lines) that:
+- Extracts activations from all 4 convolutional layers
+- Applies ReLU activation
+- Pads activations to align with 90 positions
+- Returns structured data: positions, nucleotides, filter_names, activations (56×90 matrix)
+
+#### 3. API Endpoint
+**File**: `webapp/app/api/routes.py`
+
+Added: `GET /api/heatmap/{job_id}`
+- Returns filter activation data for a completed job
+- Response includes 56 filters × 90 positions
+
+#### 4. PyShiny Heatmap App
+**New file**: `webapp/app/shiny_apps/heatmap_app.py` (~250 lines)
+
+Created interactive PyShiny app with:
+- Left panel: Filter checkboxes (grouped by inclusion/skipping/structure)
+- Main area: Plotly heatmap with viridis colorscale
+- Hover info: Position, nucleotide, filter name, activation value
+- Select All / Deselect All buttons
+
+#### 5. Mount PyShiny in FastAPI
+**File**: `webapp/app/main.py`
+
+- Added PyShiny import with graceful fallback
+- Mounted heatmap app at `/shiny/heatmap/`
+
+#### 6. Embed in Result Page
+**File**: `webapp/templates/result.html`
+
+Added heatmap section below force plot with iframe.
+
+### Files Modified
+
+| File | Changes |
+|------|---------|
+| `webapp/requirements.txt` | Added `shiny>=0.8.0` |
+| `webapp/app/services/predictor.py` | Added `get_heatmap_data()` method |
+| `webapp/app/api/routes.py` | Added `/api/heatmap/{job_id}` endpoint |
+| `webapp/app/main.py` | PyShiny import + mount at `/shiny/heatmap/` |
+| `webapp/templates/result.html` | Added heatmap iframe section |
+
+### Files Created
+
+| File | Description |
+|------|-------------|
+| `webapp/app/shiny_apps/__init__.py` | Package init |
+| `webapp/app/shiny_apps/heatmap_app.py` | PyShiny heatmap application |
+
+### Testing Results
+
+```
+Heatmap API Response:
+  Positions: 90
+  Filter names: 56
+  Activations matrix: 56 filters x 90 positions
+SUCCESS: Heatmap API is working!
+```
+
+### How to Test (See detailed instructions below)
+
+```bash
+source venv310/bin/activate
+python -m uvicorn webapp.app.main:app --port 8000
+# Open http://localhost:8000
+```
+
+---
+
 ## Future Sessions
 
 _Sessions will be logged here as work progresses._

=0.8.0

@@ -0,0 +1,27 @@
+Requirement already satisfied: shiny in ./venv310/lib/python3.10/site-packages (1.5.1)
+Requirement already satisfied: typing-extensions>=4.10.0 in ./venv310/lib/python3.10/site-packages (from shiny) (4.15.0)
+Requirement already satisfied: uvicorn>=0.16.0 in ./venv310/lib/python3.10/site-packages (from shiny) (0.40.0)
+Requirement already satisfied: starlette in ./venv310/lib/python3.10/site-packages (from shiny) (0.50.0)
+Requirement already satisfied: websockets>=13.0 in ./venv310/lib/python3.10/site-packages (from shiny) (16.0)
+Requirement already satisfied: htmltools>=0.6.0 in ./venv310/lib/python3.10/site-packages (from shiny) (0.6.0)
+Requirement already satisfied: click>=8.1.4 in ./venv310/lib/python3.10/site-packages (from shiny) (8.3.1)
+Requirement already satisfied: markdown-it-py>=1.1.0 in ./venv310/lib/python3.10/site-packages (from shiny) (4.0.0)
+Requirement already satisfied: mdit-py-plugins>=0.3.0 in ./venv310/lib/python3.10/site-packages (from shiny) (0.5.0)
+Requirement already satisfied: linkify-it-py>=1.0 in ./venv310/lib/python3.10/site-packages (from shiny) (2.0.3)
+Requirement already satisfied: platformdirs>=2.1.0 in ./venv310/lib/python3.10/site-packages (from shiny) (4.5.1)
+Requirement already satisfied: asgiref>=3.5.2 in ./venv310/lib/python3.10/site-packages (from shiny) (3.11.0)
+Requirement already satisfied: packaging>=20.9 in ./venv310/lib/python3.10/site-packages (from shiny) (25.0)
+Requirement already satisfied: watchfiles>=0.18.0 in ./venv310/lib/python3.10/site-packages (from shiny) (1.1.1)
+Requirement already satisfied: questionary>=2.0.0 in ./venv310/lib/python3.10/site-packages (from shiny) (2.1.1)
+Requirement already satisfied: prompt-toolkit in ./venv310/lib/python3.10/site-packages (from shiny) (3.0.52)
+Requirement already satisfied: python-multipart>=0.0.7 in ./venv310/lib/python3.10/site-packages (from shiny) (0.0.21)
+Requirement already satisfied: narwhals>=1.10.0 in ./venv310/lib/python3.10/site-packages (from shiny) (2.15.0)
+Requirement already satisfied: orjson>=3.10.7 in ./venv310/lib/python3.10/site-packages (from shiny) (3.11.5)
+Requirement already satisfied: shinychat>=0.1.0 in ./venv310/lib/python3.10/site-packages (from shiny) (0.2.8)
+Requirement already satisfied: uc-micro-py in ./venv310/lib/python3.10/site-packages (from linkify-it-py>=1.0->shiny) (1.0.3)
+Requirement already satisfied: mdurl~=0.1 in ./venv310/lib/python3.10/site-packages (from markdown-it-py>=1.1.0->shiny) (0.1.2)
+Requirement already satisfied: wcwidth in ./venv310/lib/python3.10/site-packages (from prompt-toolkit->shiny) (0.2.14)
+Requirement already satisfied: h11>=0.8 in ./venv310/lib/python3.10/site-packages (from uvicorn>=0.16.0->shiny) (0.16.0)
+Requirement already satisfied: anyio>=3.0.0 in ./venv310/lib/python3.10/site-packages (from watchfiles>=0.18.0->shiny) (4.12.1)
+Requirement already satisfied: exceptiongroup>=1.0.2 in ./venv310/lib/python3.10/site-packages (from anyio>=3.0.0->watchfiles>=0.18.0->shiny) (1.3.1)
+Requirement already satisfied: idna>=2.8 in ./venv310/lib/python3.10/site-packages (from anyio>=3.0.0->watchfiles>=0.18.0->shiny) (3.11)

webapp/app/api/routes.py

@@ -2,12 +2,15 @@
 
 import uuid
 import json
+import string
+import random
 from datetime import datetime, timedelta
-from typing import Optional
+from typing import Optional, List
+from math import ceil
 from fastapi import APIRouter, Depends, HTTPException, Query, Path
 from fastapi.responses import Response
 from sqlalchemy.orm import Session
-from sqlalchemy import text
+from sqlalchemy import text, and_, or_
 
 from webapp.app.database import get_db
 from webapp.app.models.job import Job
@@ -16,6 +19,7 @@ from webapp.app.config import settings
 from webapp.app.api.schemas import (
     SequenceInput,
     BatchSequenceInput,
+    SequenceItem,
     PredictionResponse,
     JobStatusResponse,
     SingleResultResponse,
@@ -25,8 +29,20 @@ from webapp.app.api.schemas import (
     ExampleSequencesResponse,
     HealthResponse,
     ErrorResponse,
+    JobSummary,
+    JobHistoryResponse,
+    PaginatedBatchResultsResponse,
+    SequenceDetailResponse,
+    validate_single_sequence,
 )
 
+
+def generate_job_title() -> str:
+    """Generate an auto job title in format: 2026-01-15_abc12"""
+    date_part = datetime.utcnow().strftime("%Y-%m-%d")
+    random_part = ''.join(random.choices(string.ascii_lowercase + string.digits, k=5))
+    return f"{date_part}_{random_part}"
+
 router = APIRouter()
 
 
@@ -67,6 +83,9 @@ async def submit_prediction(
     """
     job_id = str(uuid.uuid4())
 
+    # Generate job title if not provided
+    job_title = request.job_title if request.job_title else generate_job_title()
+
     # Create job in database
     job = Job(
         id=job_id,
@@ -74,6 +93,8 @@ async def submit_prediction(
         sequence=request.sequence,
         email=request.email,
         is_batch=False,
+        access_token=request.access_token,
+        job_title=job_title,
     )
     db.add(job)
     db.commit()
@@ -124,19 +145,31 @@ async def submit_batch_prediction(
     Submit multiple sequences for batch PSI prediction.
 
     Each sequence must be exactly 70 nucleotides long and contain only A, C, G, T.
+    Invalid sequences will be marked in results but won't block processing of valid ones.
     Maximum batch size is 100 sequences.
     """
     job_id = str(uuid.uuid4())
 
+    # Generate job title if not provided
+    job_title = request.job_title if request.job_title else generate_job_title()
+
+    # Convert sequences to dict format for storage
+    sequences_for_storage = [
+        {"name": seq.name, "sequence": seq.sequence}
+        for seq in request.sequences
+    ]
+
     # Create job in database
     job = Job(
         id=job_id,
         status="queued",
-        sequence=request.sequences[0],  # Store first sequence as reference
+        sequence=request.sequences[0].sequence,  # Store first sequence as reference
         email=request.email,
         is_batch=True,
+        access_token=request.access_token,
+        job_title=job_title,
     )
-    job.set_batch_sequences(request.sequences)
+    job.set_batch_sequences(sequences_for_storage)
     db.add(job)
     db.commit()
 
@@ -146,7 +179,51 @@ async def submit_batch_prediction(
         db.commit()
 
         predictor = get_predictor()
-        results = predictor.predict_batch(request.sequences)
+        results = []
+
+        for seq_item in request.sequences:
+            # Validate each sequence
+            is_valid, validation_error = validate_single_sequence(seq_item.sequence)
+
+            if not is_valid:
+                # Mark as invalid, don't process
+                results.append({
+                    "name": seq_item.name,
+                    "sequence": seq_item.sequence,
+                    "status": "invalid",
+                    "validation_error": validation_error,
+                    "psi": None,
+                    "interpretation": None,
+                    "structure": None,
+                    "mfe": None,
+                })
+            else:
+                # Process valid sequence
+                try:
+                    result = predictor.predict_single(seq_item.sequence)
+                    force_plot_data = predictor.get_force_plot_data(seq_item.sequence)
+                    results.append({
+                        "name": seq_item.name,
+                        "sequence": seq_item.sequence,
+                        "status": "success",
+                        "psi": result["psi"],
+                        "interpretation": result["interpretation"],
+                        "structure": result["structure"],
+                        "mfe": result["mfe"],
+                        "force_plot_data": force_plot_data,
+                        "warnings": result.get("warnings"),
+                    })
+                except Exception as e:
+                    results.append({
+                        "name": seq_item.name,
+                        "sequence": seq_item.sequence,
+                        "status": "error",
+                        "error": str(e),
+                        "psi": None,
+                        "interpretation": None,
+                        "structure": None,
+                        "mfe": None,
+                    })
 
         # Update job with results
         job.status = "finished"
@@ -159,12 +236,17 @@ async def submit_batch_prediction(
         db.commit()
         raise HTTPException(status_code=500, detail=str(e))
 
+    # Count results
+    successful = sum(1 for r in results if r.get("status") == "success")
+    invalid = sum(1 for r in results if r.get("status") == "invalid")
+    errored = sum(1 for r in results if r.get("status") == "error")
+
     return PredictionResponse(
         job_id=job_id,
         status=job.status,
         status_url=f"/api/status/{job_id}",
         result_url=f"/result/{job_id}",
-        message=f"Batch prediction completed for {len(request.sequences)} sequences",
+        message=f"Batch completed: {successful} successful, {invalid} invalid, {errored} errors",
     )
 
 
@@ -223,26 +305,32 @@ async def get_job_result(
         # Return batch results
         results = job.get_batch_results()
         successful = sum(1 for r in results if r.get("status") == "success")
-        failed = len(results) - successful
+        invalid = sum(1 for r in results if r.get("status") == "invalid")
+        failed = sum(1 for r in results if r.get("status") == "error")
 
         return BatchResultResponse(
             job_id=job.id,
+            job_title=job.job_title,
             status=job.status,
             total_sequences=len(results),
             successful=successful,
+            invalid=invalid,
             failed=failed,
             results=[
                 BatchResultItem(
+                    name=r.get("name", f"Seq_{i+1}"),
                     sequence=r.get("sequence", ""),
                     status=r.get("status", "unknown"),
                     psi=r.get("psi"),
                     interpretation=r.get("interpretation"),
                     structure=r.get("structure"),
                     mfe=r.get("mfe"),
+                    force_plot_data=r.get("force_plot_data"),
+                    validation_error=r.get("validation_error"),
                     error=r.get("error"),
                     warnings=r.get("warnings"),
                 )
-                for r in results
+                for i, r in enumerate(results)
             ],
             created_at=job.created_at,
             expires_at=job.expires_at,
@@ -267,6 +355,34 @@ async def get_job_result(
         )
 
 
+@router.get("/heatmap/{job_id}", tags=["visualization"])
+async def get_heatmap_data(
+    job_id: str,
+    db: Session = Depends(get_db),
+):
+    """
+    Get filter activation heatmap data for a prediction job.
+
+    Returns position-wise filter activations for heatmap visualization.
+    """
+    job = db.query(Job).filter(Job.id == job_id).first()
+    if not job:
+        raise HTTPException(status_code=404, detail="Job not found")
+
+    if job.status != "finished":
+        raise HTTPException(status_code=400, detail="Job not yet complete")
+
+    # For batch jobs, use the first sequence
+    sequence = job.sequence
+
+    try:
+        predictor = get_predictor()
+        heatmap_data = predictor.get_heatmap_data(sequence)
+        return heatmap_data
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error generating heatmap data: {str(e)}")
+
+
 @router.get("/example", response_model=ExampleSequencesResponse, tags=["examples"])
 async def get_example_sequences():
     """
@@ -349,16 +465,18 @@ async def export_results(
 
         if job.is_batch:
             results = job.get_batch_results()
-            header = ["sequence", "psi", "interpretation", "structure", "mfe", "status", "error"]
+            header = ["name", "sequence", "psi", "interpretation", "structure", "mfe", "status", "validation_error", "error"]
             rows = [delimiter.join(header)]
-            for r in results:
+            for i, r in enumerate(results):
                 row = [
+                    r.get("name", f"Seq_{i+1}"),
                     r.get("sequence", ""),
                     str(r.get("psi", "")),
                     r.get("interpretation", ""),
                     r.get("structure", ""),
                     str(r.get("mfe", "")),
                     r.get("status", ""),
+                    r.get("validation_error", ""),
                     r.get("error", ""),
                 ]
                 rows.append(delimiter.join(row))
@@ -382,3 +500,229 @@ async def export_results(
         )
 
     raise HTTPException(status_code=400, detail=f"Unsupported format: {format}")
+
+
+# ============================================================================
+# History and Job Management Endpoints
+# ============================================================================
+
+
+@router.get("/history", response_model=JobHistoryResponse, tags=["history"])
+async def get_job_history(
+    access_token: str = Query(..., description="User access token"),
+    search: Optional[str] = Query(None, description="Search job titles"),
+    date_from: Optional[datetime] = Query(None, description="Filter by start date"),
+    date_to: Optional[datetime] = Query(None, description="Filter by end date"),
+    page: int = Query(1, ge=1, description="Page number"),
+    page_size: int = Query(25, ge=1, le=100, description="Results per page"),
+    db: Session = Depends(get_db),
+):
+    """
+    Get paginated job history for a user token.
+
+    Jobs are filtered by access_token and optionally by job title search and date range.
+    """
+    # Build query
+    query = db.query(Job).filter(Job.access_token == access_token)
+
+    # Apply search filter
+    if search:
+        query = query.filter(Job.job_title.ilike(f"%{search}%"))
+
+    # Apply date filters
+    if date_from:
+        query = query.filter(Job.created_at >= date_from)
+    if date_to:
+        query = query.filter(Job.created_at <= date_to)
+
+    # Get total count
+    total = query.count()
+
+    # Apply pagination and ordering
+    query = query.order_by(Job.created_at.desc())
+    query = query.offset((page - 1) * page_size).limit(page_size)
+
+    jobs = query.all()
+
+    # Build response
+    job_summaries = [
+        JobSummary(
+            id=job.id,
+            job_title=job.job_title,
+            created_at=job.created_at,
+            status=job.status,
+            is_batch=job.is_batch,
+            sequence_count=job.get_sequence_count(),
+        )
+        for job in jobs
+    ]
+
+    total_pages = ceil(total / page_size) if total > 0 else 1
+
+    return JobHistoryResponse(
+        jobs=job_summaries,
+        total=total,
+        page=page,
+        page_size=page_size,
+        total_pages=total_pages,
+    )
+
+
+@router.delete("/jobs/{job_id}", tags=["history"])
+async def delete_job(
+    job_id: str,
+    access_token: str = Query(..., description="User access token"),
+    db: Session = Depends(get_db),
+):
+    """
+    Delete a job.
+
+    Only the owner (matching access_token) can delete a job.
+    """
+    job = db.query(Job).filter(Job.id == job_id).first()
+    if not job:
+        raise HTTPException(status_code=404, detail="Job not found")
+
+    if job.access_token != access_token:
+        raise HTTPException(status_code=403, detail="Access denied - token does not match")
+
+    db.delete(job)
+    db.commit()
+
+    return {"status": "deleted", "job_id": job_id}
+
+
+@router.get("/batch/{job_id}/results", response_model=PaginatedBatchResultsResponse, tags=["results"])
+async def get_batch_results_paginated(
+    job_id: str,
+    page: int = Query(1, ge=1, description="Page number"),
+    page_size: int = Query(25, ge=1, le=100, description="Results per page"),
+    search: Optional[str] = Query(None, description="Search by name or sequence"),
+    db: Session = Depends(get_db),
+):
+    """
+    Get paginated batch results with optional search.
+
+    Search filters results by sequence name or sequence content.
+    """
+    job = db.query(Job).filter(Job.id == job_id).first()
+    if not job:
+        raise HTTPException(status_code=404, detail="Job not found")
+
+    if not job.is_batch:
+        raise HTTPException(status_code=400, detail="This is not a batch job")
+
+    if job.status != "finished":
+        raise HTTPException(status_code=400, detail="Job not yet complete")
+
+    all_results = job.get_batch_results()
+
+    # Calculate statistics from all results (before filtering)
+    total_sequences = len(all_results)
+    successful_count = sum(1 for r in all_results if r.get("status") == "success")
+    invalid_count = sum(1 for r in all_results if r.get("status") == "invalid")
+    failed_count = sum(1 for r in all_results if r.get("status") == "error")
+
+    # Calculate average PSI from successful sequences
+    successful_psis = [r.get("psi") for r in all_results if r.get("status") == "success" and r.get("psi") is not None]
+    average_psi = sum(successful_psis) / len(successful_psis) if successful_psis else None
+
+    # Add original index to each result for detail lookup
+    indexed_results = [(i, r) for i, r in enumerate(all_results)]
+
+    # Apply search filter
+    if search:
+        search_lower = search.lower()
+        indexed_results = [
+            (i, r) for i, r in indexed_results
+            if search_lower in r.get("name", "").lower()
+            or search_lower in r.get("sequence", "").lower()
+        ]
+
+    # Total after filtering (for pagination)
+    total = len(indexed_results)
+
+    # Apply pagination
+    start_idx = (page - 1) * page_size
+    end_idx = start_idx + page_size
+    paginated_results = indexed_results[start_idx:end_idx]
+
+    total_pages = ceil(total / page_size) if total > 0 else 1
+
+    return PaginatedBatchResultsResponse(
+        job_id=job.id,
+        job_title=job.job_title,
+        status=job.status,
+        total_sequences=total_sequences,
+        successful_count=successful_count,
+        invalid_count=invalid_count,
+        failed_count=failed_count,
+        average_psi=average_psi,
+        results=[
+            BatchResultItem(
+                index=orig_idx,
+                name=r.get("name", f"Seq_{orig_idx+1}"),
+                sequence=r.get("sequence", ""),
+                status=r.get("status", "unknown"),
+                psi=r.get("psi"),
+                interpretation=r.get("interpretation"),
+                structure=r.get("structure"),
+                mfe=r.get("mfe"),
+                force_plot_data=r.get("force_plot_data"),
+                validation_error=r.get("validation_error"),
+                error=r.get("error"),
+                warnings=r.get("warnings"),
+            )
+            for orig_idx, r in paginated_results
+        ],
+        total=total,
+        page=page,
+        page_size=page_size,
+        total_pages=total_pages,
+        created_at=job.created_at,
+        expires_at=job.expires_at,
+    )
+
+
+@router.get("/batch/{job_id}/sequence/{index}", response_model=SequenceDetailResponse, tags=["results"])
+async def get_sequence_detail(
+    job_id: str,
+    index: int = Path(..., ge=0, description="Sequence index (0-based)"),
+    db: Session = Depends(get_db),
+):
+    """
+    Get detailed results for a single sequence in a batch job.
+
+    Returns full details including force plot data for visualization.
+    """
+    job = db.query(Job).filter(Job.id == job_id).first()
+    if not job:
+        raise HTTPException(status_code=404, detail="Job not found")
+
+    if not job.is_batch:
+        raise HTTPException(status_code=400, detail="This is not a batch job")
+
+    if job.status != "finished":
+        raise HTTPException(status_code=400, detail="Job not yet complete")
+
+    results = job.get_batch_results()
+    if index >= len(results):
+        raise HTTPException(status_code=404, detail=f"Sequence index {index} not found")
+
+    r = results[index]
+
+    return SequenceDetailResponse(
+        job_id=job.id,
+        index=index,
+        name=r.get("name", f"Seq_{index+1}"),
+        sequence=r.get("sequence", ""),
+        status=r.get("status", "unknown"),
+        psi=r.get("psi"),
+        interpretation=r.get("interpretation"),
+        structure=r.get("structure"),
+        mfe=r.get("mfe"),
+        force_plot_data=r.get("force_plot_data"),
+        validation_error=r.get("validation_error"),
+        error=r.get("error"),
+        warnings=r.get("warnings"),
+    )

webapp/app/api/schemas.py

@@ -17,10 +17,25 @@ class SequenceInput(BaseModel):
         max_length=settings.exon_length,
         description=f"The {settings.exon_length}-nucleotide exon sequence (A, C, G, T only)",
     )
+    name: Optional[str] = Field(
+        None,
+        max_length=255,
+        description="Optional name for the sequence",
+    )
     email: Optional[EmailStr] = Field(
         None,
         description="Optional email address for job completion notification",
     )
+    access_token: Optional[str] = Field(
+        None,
+        max_length=64,
+        description="User access token for job history tracking",
+    )
+    job_title: Optional[str] = Field(
+        None,
+        max_length=255,
+        description="Optional job title (auto-generated if not provided)",
+    )
 
     @field_validator("sequence")
     @classmethod
@@ -42,49 +57,71 @@ class SequenceInput(BaseModel):
         return v
 
 
+class SequenceItem(BaseModel):
+    """Schema for a named sequence in batch requests."""
+
+    name: str = Field(
+        ...,
+        max_length=255,
+        description="Name/identifier for this sequence",
+    )
+    sequence: str = Field(
+        ...,
+        description=f"The {settings.exon_length}-nucleotide exon sequence",
+    )
+
+
 class BatchSequenceInput(BaseModel):
     """Schema for batch sequence prediction request."""
 
-    sequences: List[str] = Field(
+    sequences: List[SequenceItem] = Field(
         ...,
         min_length=1,
         max_length=settings.max_batch_size,
-        description=f"List of {settings.exon_length}-nucleotide exon sequences",
+        description=f"List of named sequences with {settings.exon_length}-nucleotide exon sequences",
     )
     email: Optional[EmailStr] = Field(
         None,
         description="Optional email address for job completion notification",
     )
+    access_token: Optional[str] = Field(
+        None,
+        max_length=64,
+        description="User access token for job history tracking",
+    )
+    job_title: Optional[str] = Field(
+        None,
+        max_length=255,
+        description="Optional job title (auto-generated if not provided)",
+    )
 
     @field_validator("sequences")
     @classmethod
-    def validate_sequences(cls, v: List[str]) -> List[str]:
-        """Validate all sequences in the batch."""
-        validated = []
-        errors = []
+    def validate_sequences(cls, v: List[SequenceItem]) -> List[SequenceItem]:
+        """Normalize sequences (don't reject invalid ones - they'll be marked in results)."""
+        normalized = []
+        for item in v:
+            # Normalize the sequence (uppercase, U->T)
+            normalized_seq = item.sequence.upper().replace("U", "T").strip()
+            normalized.append(SequenceItem(name=item.name, sequence=normalized_seq))
+        return normalized
 
-        for i, seq in enumerate(v):
-            seq = seq.upper().replace("U", "T").strip()
 
-            if len(seq) != settings.exon_length:
-                errors.append(
-                    f"Sequence {i + 1}: must be exactly {settings.exon_length} nucleotides (got {len(seq)})"
-                )
-                continue
+def validate_single_sequence(sequence: str) -> tuple[bool, str]:
+    """
+    Validate a single sequence and return (is_valid, error_message).
+    Used by batch processing to mark invalid sequences without rejecting.
+    """
+    seq = sequence.upper().replace("U", "T").strip()
 
-            if not re.match(f"^[ACGT]{{{settings.exon_length}}}$", seq):
-                invalid_chars = set(seq) - set("ACGT")
-                errors.append(
-                    f"Sequence {i + 1}: contains invalid characters: {invalid_chars}"
-                )
-                continue
+    if len(seq) != settings.exon_length:
+        return False, f"Must be exactly {settings.exon_length} nucleotides (got {len(seq)})"
 
-            validated.append(seq)
+    if not re.match(f"^[ACGT]{{{settings.exon_length}}}$", seq):
+        invalid_chars = set(seq) - set("ACGT")
+        return False, f"Contains invalid characters: {invalid_chars}"
 
-        if errors:
-            raise ValueError("; ".join(errors))
-
-        return validated
+    return True, ""
 
 
 class PredictionResponse(BaseModel):
@@ -127,13 +164,17 @@ class SingleResultResponse(BaseModel):
 class BatchResultItem(BaseModel):
     """Schema for a single item in batch results."""
 
+    index: Optional[int] = None  # Original index in batch (for detail lookup)
+    name: str
     sequence: str
-    status: str
+    status: str  # "success", "invalid", "error"
     psi: Optional[float] = None
     interpretation: Optional[str] = None
     structure: Optional[str] = None
     mfe: Optional[float] = None
-    error: Optional[str] = None
+    force_plot_data: Optional[Dict[str, Any]] = None
+    validation_error: Optional[str] = None  # For invalid sequences
+    error: Optional[str] = None  # For processing errors
     warnings: Optional[List[str]] = None
 
 
@@ -141,9 +182,11 @@ class BatchResultResponse(BaseModel):
     """Schema for batch prediction results."""
 
     job_id: str
+    job_title: Optional[str] = None
     status: str
     total_sequences: int
     successful: int
+    invalid: int
     failed: int
     results: List[BatchResultItem]
     created_at: datetime
@@ -179,3 +222,67 @@ class HealthResponse(BaseModel):
     version: str
     model_loaded: bool
     database_connected: bool
+
+
+# ============================================================================
+# History and Job Management Schemas
+# ============================================================================
+
+
+class JobSummary(BaseModel):
+    """Schema for job summary in history list."""
+
+    id: str
+    job_title: Optional[str] = None
+    created_at: datetime
+    status: str
+    is_batch: bool
+    sequence_count: int
+
+
+class JobHistoryResponse(BaseModel):
+    """Schema for paginated job history response."""
+
+    jobs: List[JobSummary]
+    total: int
+    page: int
+    page_size: int
+    total_pages: int
+
+
+class PaginatedBatchResultsResponse(BaseModel):
+    """Schema for paginated batch results."""
+
+    job_id: str
+    job_title: Optional[str] = None
+    status: str
+    total_sequences: int
+    successful_count: int
+    invalid_count: int
+    failed_count: int
+    average_psi: Optional[float] = None  # Average PSI of successful sequences
+    results: List[BatchResultItem]
+    total: int  # Total results after filtering (for pagination)
+    page: int
+    page_size: int
+    total_pages: int
+    created_at: datetime
+    expires_at: datetime
+
+
+class SequenceDetailResponse(BaseModel):
+    """Schema for detailed single sequence from batch."""
+
+    job_id: str
+    index: int
+    name: str
+    sequence: str
+    status: str
+    psi: Optional[float] = None
+    interpretation: Optional[str] = None
+    structure: Optional[str] = None
+    mfe: Optional[float] = None
+    force_plot_data: Optional[Dict[str, Any]] = None
+    validation_error: Optional[str] = None
+    error: Optional[str] = None
+    warnings: Optional[List[str]] = None

webapp/app/main.py

@@ -10,8 +10,19 @@ from fastapi.middleware.cors import CORSMiddleware
 from pathlib import Path
 
 from webapp.app.config import settings
-from webapp.app.database import init_db
+from webapp.app.database import init_db, get_db
 from webapp.app.api.routes import router as api_router
+from webapp.app.models.job import Job
+
+# PyShiny imports for heatmap visualization
+try:
+    from shiny import App
+    from webapp.app.shiny_apps.heatmap_app import create_app as create_heatmap_app
+    SHINY_AVAILABLE = True
+except ImportError:
+    SHINY_AVAILABLE = False
+    logger = logging.getLogger(__name__)
+    logger.warning("PyShiny not available - heatmap visualization will be disabled")
 
 # Configure logging
 logging.basicConfig(
@@ -91,6 +102,15 @@ static_path = Path(__file__).parent.parent / "static"
 if static_path.exists():
     app.mount("/static", StaticFiles(directory=str(static_path)), name="static")
 
+# Mount PyShiny heatmap app
+if SHINY_AVAILABLE:
+    try:
+        heatmap_shiny_app = create_heatmap_app(api_base_url="http://localhost:8000")
+        app.mount("/shiny/heatmap", heatmap_shiny_app, name="shiny_heatmap")
+        logger.info("PyShiny heatmap app mounted at /shiny/heatmap")
+    except Exception as e:
+        logger.error(f"Failed to mount PyShiny heatmap app: {e}")
+
 # Set up templates
 templates_path = Path(__file__).parent.parent / "templates"
 templates = Jinja2Templates(directory=str(templates_path)) if templates_path.exists() else None
@@ -108,9 +128,18 @@ async def home(request: Request):
 
 @app.get("/result/{job_id}", response_class=HTMLResponse, include_in_schema=False)
 async def result_page(request: Request, job_id: str):
-    """Render the result page for a job."""
+    """Render the result page for a job. Uses batch_result.html for batch jobs."""
+    # Check if job is a batch job
+    db = next(get_db())
+    try:
+        job = db.query(Job).filter(Job.id == job_id).first()
+        is_batch = job.is_batch if job else False
+    finally:
+        db.close()
+
+    template_name = "batch_result.html" if is_batch else "result.html"
     return templates.TemplateResponse(
-        "result.html",
+        template_name,
         {"request": request, "job_id": job_id, "settings": settings}
     )
 
@@ -139,6 +168,12 @@ async def methodology_page(request: Request):
     return templates.TemplateResponse("methodology.html", {"request": request, "settings": settings})
 
 
+@app.get("/history", response_class=HTMLResponse, include_in_schema=False)
+async def history_page(request: Request):
+    """Render the job history page."""
+    return templates.TemplateResponse("history.html", {"request": request, "settings": settings})
+
+
 if __name__ == "__main__":
     import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=8000)

webapp/app/models/job.py

@@ -29,10 +29,14 @@ class Job(Base):
         default=lambda: datetime.utcnow() + timedelta(days=settings.job_retention_days),
     )
 
+    # User identification (NAR compliant - no login required)
+    access_token = Column(String(64), nullable=True)
+    job_title = Column(String(255), nullable=True)
+
     # Input data
     sequence = Column(Text, nullable=False)
     is_batch = Column(Boolean, default=False)
-    batch_sequences = Column(Text, nullable=True)  # JSON array
+    batch_sequences = Column(Text, nullable=True)  # JSON array: [{name, sequence}, ...]
     email = Column(String(255), nullable=True)
 
     # Results (nullable until job finishes)
@@ -53,6 +57,8 @@ class Job(Base):
     __table_args__ = (
         Index("idx_jobs_status", "status"),
         Index("idx_jobs_expires", "expires_at"),
+        Index("idx_jobs_access_token", "access_token"),
+        Index("idx_jobs_created_at", "created_at"),
     )
 
     def to_dict(self) -> dict:
@@ -63,6 +69,7 @@ class Job(Base):
             "created_at": self.created_at.isoformat() if self.created_at else None,
             "updated_at": self.updated_at.isoformat() if self.updated_at else None,
             "expires_at": self.expires_at.isoformat() if self.expires_at else None,
+            "job_title": self.job_title,
             "sequence": self.sequence,
             "is_batch": self.is_batch,
             "email": self.email,
@@ -89,14 +96,21 @@ class Job(Base):
 
         return result
 
-    def set_batch_sequences(self, sequences: List[str]):
-        """Set batch sequences as JSON."""
+    def set_batch_sequences(self, sequences: List[dict]):
+        """Set batch sequences as JSON. Format: [{name: str, sequence: str}, ...]"""
         self.batch_sequences = json.dumps(sequences)
 
-    def get_batch_sequences(self) -> List[str]:
-        """Get batch sequences from JSON."""
+    def get_batch_sequences(self) -> List[dict]:
+        """Get batch sequences from JSON. Returns [{name: str, sequence: str}, ...]"""
         return json.loads(self.batch_sequences) if self.batch_sequences else []
 
+    def get_sequence_count(self) -> int:
+        """Get the number of sequences in this job."""
+        if not self.is_batch:
+            return 1
+        sequences = self.get_batch_sequences()
+        return len(sequences) if sequences else 1
+
     def set_batch_results(self, results: List[dict]):
         """Set batch results as JSON."""
         self.batch_results = json.dumps(results)

webapp/app/services/predictor.py

@@ -331,6 +331,78 @@ class SplicingPredictor:
             "mfe": mfe,
         }
 
+    def get_heatmap_data(self, exon_sequence: str) -> Dict[str, Any]:
+        """
+        Extract filter activations for heatmap visualization.
+
+        Args:
+            exon_sequence: The 70nt exon sequence
+
+        Returns:
+            Dictionary with heatmap data:
+            - positions: list of position numbers (1-90)
+            - nucleotides: list of nucleotide characters
+            - filter_names: list of filter names
+            - activations: 2D matrix (filters × positions)
+        """
+        # Prepare input
+        inputs, structure, mfe, _ = self.prepare_input(exon_sequence)
+
+        # Get full sequence for nucleotide labels
+        full_sequence = self.add_flanking(exon_sequence.upper())
+
+        # Layer configurations: (layer_name, prefix, num_filters, kernel_width)
+        layer_configs = [
+            ("qc_incl", "incl", 20, 6),
+            ("qc_skip", "skip", 20, 6),
+            ("c_incl_struct", "incl_struct", 8, 30),
+            ("c_skip_struct", "skip_struct", 8, 30),
+        ]
+
+        filter_names = []
+        all_activations = []
+
+        for layer_name, prefix, num_filters, kernel_width in layer_configs:
+            try:
+                layer = self.model.get_layer(layer_name)
+                intermediate_model = tf.keras.Model(
+                    inputs=self.model.inputs,
+                    outputs=layer.output,
+                )
+                # Get activations: shape (1, output_len, num_filters)
+                raw_activations = intermediate_model.predict(inputs, verbose=0)[0]
+                output_len = raw_activations.shape[0]
+
+                for i in range(num_filters):
+                    filter_name = f"{prefix}_{i+1}"
+                    filter_names.append(filter_name)
+
+                    # Get this filter's activations and apply ReLU
+                    filter_activations = np.maximum(0, raw_activations[:, i])
+
+                    # Pad to 90 positions if needed
+                    if output_len < settings.total_length:
+                        # Center the activations with padding
+                        pad_left = (settings.total_length - output_len) // 2
+                        pad_right = settings.total_length - output_len - pad_left
+                        padded = np.pad(filter_activations, (pad_left, pad_right), mode='constant')
+                    else:
+                        # Already correct length
+                        padded = filter_activations
+
+                    all_activations.append(padded.tolist())
+
+            except Exception as e:
+                logger.warning(f"Could not extract layer {layer_name}: {e}")
+
+        return {
+            "positions": list(range(1, settings.total_length + 1)),
+            "nucleotides": list(full_sequence),
+            "filter_names": filter_names,
+            "activations": all_activations,
+            "structure": structure,
+        }
+
     @staticmethod
     def _get_interpretation(psi: float) -> str:
         """Get human-readable interpretation of PSI value."""

webapp/app/shiny_apps/__init__.py

@@ -0,0 +1 @@
+"""PyShiny applications for visualization."""

webapp/app/shiny_apps/heatmap_app.py

@@ -0,0 +1,306 @@
+"""PyShiny app for Filter × Position heatmap visualization."""
+
+from shiny import App, ui, render, reactive
+import plotly.graph_objects as go
+from plotly.subplots import make_subplots
+import httpx
+import numpy as np
+from urllib.parse import parse_qs
+
+
+def create_app(api_base_url: str = "http://localhost:8000"):
+    """Create the PyShiny heatmap app.
+
+    Args:
+        api_base_url: Base URL for the API to fetch heatmap data
+    """
+
+    app_ui = ui.page_fluid(
+        ui.head_content(
+            ui.tags.style("""
+                body {
+                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                    background: #f9fafb;
+                    margin: 0;
+                    padding: 16px;
+                }
+                .filter-panel {
+                    background: white;
+                    border-radius: 8px;
+                    padding: 16px;
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+                    max-height: 600px;
+                    overflow-y: auto;
+                }
+                .filter-section h4 {
+                    margin: 0 0 8px 0;
+                    font-size: 14px;
+                    color: #374151;
+                }
+                .filter-section {
+                    margin-bottom: 16px;
+                }
+                .heatmap-container {
+                    background: white;
+                    border-radius: 8px;
+                    padding: 16px;
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+                }
+                .error-message {
+                    color: #dc2626;
+                    padding: 20px;
+                    text-align: center;
+                }
+                .loading {
+                    padding: 40px;
+                    text-align: center;
+                    color: #6b7280;
+                }
+            """)
+        ),
+        ui.row(
+            ui.column(
+                3,
+                ui.div(
+                    {"class": "filter-panel"},
+                    ui.h4("Filter × Position heatmap"),
+                    ui.div(
+                        {"class": "filter-section"},
+                        ui.h4("Inclusion Filters", style="color: #22c55e;"),
+                        ui.output_ui("inclusion_checkboxes"),
+                    ),
+                    ui.div(
+                        {"class": "filter-section"},
+                        ui.h4("Skipping Filters", style="color: #ef4444;"),
+                        ui.output_ui("skipping_checkboxes"),
+                    ),
+                    ui.div(
+                        {"class": "filter-section"},
+                        ui.h4("Structure Filters"),
+                        ui.output_ui("structure_checkboxes"),
+                    ),
+                    ui.hr(),
+                    ui.input_action_button("select_all", "Select All", class_="btn-sm"),
+                    ui.input_action_button("deselect_all", "Deselect All", class_="btn-sm"),
+                ),
+            ),
+            ui.column(
+                9,
+                ui.div(
+                    {"class": "heatmap-container"},
+                    ui.output_ui("heatmap_plot"),
+                ),
+            ),
+        ),
+    )
+
+    def server(input, output, session):
+        # Reactive value to store heatmap data
+        heatmap_data = reactive.Value(None)
+        error_message = reactive.Value(None)
+        selected_filters = reactive.Value(set())
+
+        def get_job_id_from_url():
+            """Extract job_id from URL query parameters."""
+            try:
+                # Access the ASGI scope to get query string
+                scope = session.http_conn.scope if hasattr(session, 'http_conn') else None
+                if scope and 'query_string' in scope:
+                    query_string = scope['query_string'].decode('utf-8')
+                    params = parse_qs(query_string)
+                    if 'job_id' in params:
+                        return params['job_id'][0]
+            except Exception:
+                pass
+            return None
+
+        @reactive.Effect
+        def fetch_data():
+            """Fetch heatmap data from API on app load."""
+            job_id = get_job_id_from_url()
+
+            if not job_id:
+                error_message.set("No job_id provided in URL. Please access this page from a result page.")
+                return
+
+            try:
+                # Fetch heatmap data from API
+                with httpx.Client(timeout=30.0) as client:
+                    response = client.get(f"{api_base_url}/api/heatmap/{job_id}")
+                    response.raise_for_status()
+                    data = response.json()
+                    heatmap_data.set(data)
+
+                    # Initialize all filters as selected
+                    if data and "filter_names" in data:
+                        selected_filters.set(set(data["filter_names"]))
+
+            except httpx.HTTPError as e:
+                error_message.set(f"Error fetching data: {str(e)}")
+            except Exception as e:
+                error_message.set(f"Unexpected error: {str(e)}")
+
+        @output
+        @render.ui
+        def inclusion_checkboxes():
+            data = heatmap_data.get()
+            if not data or "filter_names" not in data:
+                return ui.p("Loading...")
+
+            incl_filters = [f for f in data["filter_names"] if f.startswith("incl_") and not f.startswith("incl_struct")]
+
+            return ui.input_checkbox_group(
+                "incl_filters",
+                None,
+                choices={f: f for f in incl_filters},
+                selected=incl_filters,
+            )
+
+        @output
+        @render.ui
+        def skipping_checkboxes():
+            data = heatmap_data.get()
+            if not data or "filter_names" not in data:
+                return ui.p("Loading...")
+
+            skip_filters = [f for f in data["filter_names"] if f.startswith("skip_") and not f.startswith("skip_struct")]
+
+            return ui.input_checkbox_group(
+                "skip_filters",
+                None,
+                choices={f: f for f in skip_filters},
+                selected=skip_filters,
+            )
+
+        @output
+        @render.ui
+        def structure_checkboxes():
+            data = heatmap_data.get()
+            if not data or "filter_names" not in data:
+                return ui.p("Loading...")
+
+            struct_filters = [f for f in data["filter_names"] if "struct" in f]
+
+            return ui.input_checkbox_group(
+                "struct_filters",
+                None,
+                choices={f: f for f in struct_filters},
+                selected=struct_filters,
+            )
+
+        @reactive.Effect
+        @reactive.event(input.select_all)
+        def select_all_filters():
+            data = heatmap_data.get()
+            if data and "filter_names" in data:
+                # Update all checkbox groups
+                incl_filters = [f for f in data["filter_names"] if f.startswith("incl_") and not f.startswith("incl_struct")]
+                skip_filters = [f for f in data["filter_names"] if f.startswith("skip_") and not f.startswith("skip_struct")]
+                struct_filters = [f for f in data["filter_names"] if "struct" in f]
+
+                ui.update_checkbox_group("incl_filters", selected=incl_filters)
+                ui.update_checkbox_group("skip_filters", selected=skip_filters)
+                ui.update_checkbox_group("struct_filters", selected=struct_filters)
+
+        @reactive.Effect
+        @reactive.event(input.deselect_all)
+        def deselect_all_filters():
+            ui.update_checkbox_group("incl_filters", selected=[])
+            ui.update_checkbox_group("skip_filters", selected=[])
+            ui.update_checkbox_group("struct_filters", selected=[])
+
+        @output
+        @render.ui
+        def heatmap_plot():
+            err = error_message.get()
+            if err:
+                return ui.div({"class": "error-message"}, err)
+
+            data = heatmap_data.get()
+            if not data:
+                return ui.div({"class": "loading"}, "Loading heatmap data...")
+
+            # Get selected filters from all checkbox groups
+            incl_selected = list(input.incl_filters()) if input.incl_filters() else []
+            skip_selected = list(input.skip_filters()) if input.skip_filters() else []
+            struct_selected = list(input.struct_filters()) if input.struct_filters() else []
+
+            all_selected = incl_selected + skip_selected + struct_selected
+
+            if not all_selected:
+                return ui.div(
+                    {"class": "loading"},
+                    "Select at least one filter to display the heatmap."
+                )
+
+            # Filter data based on selected filters
+            filter_names = data["filter_names"]
+            activations = data["activations"]
+            nucleotides = data["nucleotides"]
+            positions = data["positions"]
+
+            # Get indices of selected filters
+            selected_indices = [i for i, name in enumerate(filter_names) if name in all_selected]
+
+            if not selected_indices:
+                return ui.div({"class": "loading"}, "No filters selected.")
+
+            # Create filtered activation matrix
+            filtered_names = [filter_names[i] for i in selected_indices]
+            filtered_activations = [activations[i] for i in selected_indices]
+
+            # Create x-axis labels (nucleotides)
+            x_labels = [f"{nucleotides[i]}" for i in range(len(nucleotides))]
+
+            # Create heatmap
+            fig = go.Figure(data=go.Heatmap(
+                z=filtered_activations,
+                x=x_labels,
+                y=filtered_names,
+                colorscale="Viridis",
+                colorbar=dict(
+                    title="Strength",
+                    titleside="right",
+                ),
+                hovertemplate=(
+                    "Position: %{x}<br>"
+                    "Filter: %{y}<br>"
+                    "Activation: %{z:.3f}<br>"
+                    "<extra></extra>"
+                ),
+            ))
+
+            fig.update_layout(
+                title=dict(
+                    text="Filter Activations by Position",
+                    x=0.5,
+                    font=dict(size=16),
+                ),
+                xaxis=dict(
+                    title="Sequence Position",
+                    tickangle=0,
+                    tickfont=dict(size=8),
+                    dtick=5,  # Show every 5th tick
+                ),
+                yaxis=dict(
+                    title="Filter",
+                    tickfont=dict(size=10),
+                ),
+                height=max(400, len(filtered_names) * 20 + 100),
+                margin=dict(l=100, r=50, t=50, b=100),
+            )
+
+            # Convert to HTML
+            html_content = fig.to_html(
+                full_html=False,
+                include_plotlyjs="cdn",
+                config={"responsive": True},
+            )
+
+            return ui.HTML(html_content)
+
+    return App(app_ui, server)
+
+
+# Create the app instance
+app = create_app()

webapp/requirements.txt

@@ -18,6 +18,7 @@ scipy  # Required by figutils
 # Visualization
 plotly>=5.18.0
 kaleido>=0.2.1
+shiny>=0.8.0  # PyShiny for interactive visualizations
 
 # API Documentation
 scalar-fastapi>=1.0.0

webapp/static/js/batch-result.js

@@ -0,0 +1,574 @@
+/**
+ * Batch result page JavaScript - Pagination, search, and detail view
+ */
+
+// State
+let currentPage = 1;
+let pageSize = 25;
+let totalResults = 0;
+let totalPages = 1;
+let searchQuery = '';
+let jobInfo = null;
+
+// DOM Elements
+const loadingState = document.getElementById('loading-state');
+const loadingText = document.getElementById('loading-text');
+const resultsContainer = document.getElementById('results-container');
+const errorState = document.getElementById('error-state');
+const errorMessageEl = document.getElementById('error-message');
+const jobTitleEl = document.getElementById('job-title');
+const resultsTableBody = document.getElementById('results-table-body');
+const searchInput = document.getElementById('search-results');
+
+// Stats elements
+const statTotal = document.getElementById('stat-total');
+const statSuccess = document.getElementById('stat-success');
+const statInvalid = document.getElementById('stat-invalid');
+const statAvgPsi = document.getElementById('stat-avg-psi');
+
+// Pagination elements
+const pageStart = document.getElementById('page-start');
+const pageEnd = document.getElementById('page-end');
+const totalResultsEl = document.getElementById('total-results');
+const pageButtons = document.getElementById('page-buttons');
+
+// Export links
+const exportCsv = document.getElementById('export-csv');
+const exportJson = document.getElementById('export-json');
+
+// Polling configuration
+const POLL_INTERVAL = 2000; // 2 seconds
+const MAX_POLLS = 120; // 4 minutes max
+let pollCount = 0;
+
+/**
+ * Initialize the page
+ */
+document.addEventListener('DOMContentLoaded', () => {
+    if (typeof jobId === 'undefined' || !jobId) {
+        showError('No job ID provided');
+        return;
+    }
+
+    // Set export links
+    exportCsv.href = `/api/export/${jobId}/csv`;
+    exportJson.href = `/api/export/${jobId}/json`;
+
+    // Event listeners
+    if (searchInput) {
+        let searchTimeout;
+        searchInput.addEventListener('input', (e) => {
+            clearTimeout(searchTimeout);
+            searchTimeout = setTimeout(() => {
+                searchQuery = e.target.value.trim();
+                currentPage = 1;
+                loadResults();
+            }, 300);
+        });
+    }
+
+    // Start loading
+    fetchJobInfo();
+});
+
+/**
+ * Fetch job information first
+ */
+async function fetchJobInfo() {
+    try {
+        const response = await fetch(`/api/result/${jobId}`);
+
+        if (response.status === 404) {
+            showError('Job not found. It may have expired.');
+            return;
+        }
+
+        if (!response.ok) {
+            throw new Error('Failed to fetch job info');
+        }
+
+        const data = await response.json();
+        jobInfo = data;
+
+        // Check status
+        if (data.status === 'finished' || data.status === 'completed') {
+            // Job is done, load results
+            updateJobHeader();
+            loadResults();
+        } else if (data.status === 'failed') {
+            showError(data.error || 'Batch processing failed');
+        } else if (data.status === 'running' || data.status === 'queued') {
+            // Still processing
+            loadingText.textContent = `Processing batch... (${pollCount * 2}s)`;
+            pollCount++;
+            if (pollCount < MAX_POLLS) {
+                setTimeout(fetchJobInfo, POLL_INTERVAL);
+            } else {
+                showError('Request timed out. Please try again later.');
+            }
+        } else {
+            // Try to show results anyway
+            updateJobHeader();
+            loadResults();
+        }
+
+    } catch (error) {
+        console.error('Error fetching job info:', error);
+        showError('Failed to load job information');
+    }
+}
+
+/**
+ * Update job header with title
+ */
+function updateJobHeader() {
+    if (jobInfo && jobInfo.job_title) {
+        jobTitleEl.textContent = jobInfo.job_title;
+    }
+}
+
+/**
+ * Load paginated results
+ */
+async function loadResults() {
+    try {
+        const params = new URLSearchParams({
+            page: currentPage,
+            page_size: pageSize
+        });
+
+        if (searchQuery) {
+            params.append('search', searchQuery);
+        }
+
+        const response = await fetch(`/api/batch/${jobId}/results?${params.toString()}`);
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to load results');
+        }
+
+        const data = await response.json();
+
+        // Update stats
+        updateStats(data);
+
+        // Update table
+        totalResults = data.total;
+        totalPages = data.total_pages;
+        renderResults(data.results);
+        renderPagination();
+
+        // Show results container
+        loadingState.classList.add('hidden');
+        resultsContainer.classList.remove('hidden');
+
+    } catch (error) {
+        console.error('Error loading results:', error);
+        showError(error.message);
+    }
+}
+
+/**
+ * Update stats display
+ */
+function updateStats(data) {
+    statTotal.textContent = data.total_sequences || 0;
+    statSuccess.textContent = data.successful_count || 0;
+    statInvalid.textContent = data.invalid_count || 0;
+
+    if (data.average_psi !== null && data.average_psi !== undefined) {
+        statAvgPsi.textContent = data.average_psi.toFixed(3);
+    } else {
+        statAvgPsi.textContent = '-';
+    }
+}
+
+/**
+ * Render results table
+ */
+function renderResults(results) {
+    resultsTableBody.innerHTML = '';
+
+    for (const result of results) {
+        const row = document.createElement('tr');
+        row.className = 'hover:bg-gray-50 cursor-pointer';
+        row.onclick = () => showDetail(result.index);
+
+        const statusBadge = getStatusBadge(result.status);
+        const psiDisplay = result.status === 'success' && result.psi !== null
+            ? result.psi.toFixed(3)
+            : '-';
+        const psiClass = result.status === 'success' ? getPsiColorClass(result.psi) : 'text-gray-400';
+
+        // Truncate sequence
+        const truncatedSeq = result.sequence.length > 30
+            ? result.sequence.substring(0, 30) + '...'
+            : result.sequence;
+
+        row.innerHTML = `
+            <td class="px-4 py-3 text-gray-400">
+                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
+                ${escapeHtml(result.name)}
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap text-sm font-mono text-gray-500">
+                ${escapeHtml(truncatedSeq)}
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap text-sm font-bold ${psiClass}">
+                ${psiDisplay}
+            </td>
+            <td class="px-4 py-3 whitespace-nowrap">
+                ${statusBadge}
+            </td>
+        `;
+
+        resultsTableBody.appendChild(row);
+    }
+}
+
+/**
+ * Get status badge HTML
+ */
+function getStatusBadge(status) {
+    if (status === 'success') {
+        return '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Success</span>';
+    } else if (status === 'invalid') {
+        return '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Invalid</span>';
+    } else {
+        return `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">${status}</span>`;
+    }
+}
+
+/**
+ * Get PSI color class
+ */
+function getPsiColorClass(psi) {
+    if (psi >= 0.8) return 'text-green-600';
+    if (psi >= 0.3) return 'text-yellow-600';
+    return 'text-red-600';
+}
+
+/**
+ * Render pagination controls
+ */
+function renderPagination() {
+    const start = (currentPage - 1) * pageSize + 1;
+    const end = Math.min(currentPage * pageSize, totalResults);
+
+    pageStart.textContent = totalResults > 0 ? start : 0;
+    pageEnd.textContent = end;
+    totalResultsEl.textContent = totalResults;
+
+    // Clear existing buttons
+    pageButtons.innerHTML = '';
+
+    if (totalPages <= 1) return;
+
+    // Previous button
+    const prevBtn = document.createElement('button');
+    prevBtn.className = `relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium ${currentPage === 1 ? 'text-gray-300 cursor-not-allowed' : 'text-gray-500 hover:bg-gray-50'}`;
+    prevBtn.innerHTML = '<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>';
+    prevBtn.disabled = currentPage === 1;
+    prevBtn.addEventListener('click', () => {
+        if (currentPage > 1) {
+            currentPage--;
+            loadResults();
+        }
+    });
+    pageButtons.appendChild(prevBtn);
+
+    // Page numbers
+    const maxButtons = 5;
+    let startPage = Math.max(1, currentPage - Math.floor(maxButtons / 2));
+    let endPage = Math.min(totalPages, startPage + maxButtons - 1);
+
+    if (endPage - startPage + 1 < maxButtons) {
+        startPage = Math.max(1, endPage - maxButtons + 1);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+        const btn = document.createElement('button');
+        btn.className = `relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium ${i === currentPage ? 'bg-primary-50 border-primary-500 text-primary-600 z-10' : 'bg-white text-gray-500 hover:bg-gray-50'}`;
+        btn.textContent = i;
+        btn.addEventListener('click', () => {
+            currentPage = i;
+            loadResults();
+        });
+        pageButtons.appendChild(btn);
+    }
+
+    // Next button
+    const nextBtn = document.createElement('button');
+    nextBtn.className = `relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium ${currentPage === totalPages ? 'text-gray-300 cursor-not-allowed' : 'text-gray-500 hover:bg-gray-50'}`;
+    nextBtn.innerHTML = '<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>';
+    nextBtn.disabled = currentPage === totalPages;
+    nextBtn.addEventListener('click', () => {
+        if (currentPage < totalPages) {
+            currentPage++;
+            loadResults();
+        }
+    });
+    pageButtons.appendChild(nextBtn);
+}
+
+/**
+ * Show sequence detail modal
+ */
+async function showDetail(index) {
+    const modal = document.getElementById('detail-modal');
+    const detailTitle = document.getElementById('detail-title');
+    const detailContent = document.getElementById('detail-content');
+    const detailLoading = document.getElementById('detail-loading');
+
+    // Show modal with loading
+    modal.classList.remove('hidden');
+    detailLoading.classList.remove('hidden');
+    detailContent.innerHTML = '';
+    detailContent.appendChild(detailLoading);
+
+    try {
+        const response = await fetch(`/api/batch/${jobId}/sequence/${index}`);
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to load sequence details');
+        }
+
+        const data = await response.json();
+        detailLoading.classList.add('hidden');
+
+        // Update title
+        detailTitle.textContent = data.name || `Sequence ${index + 1}`;
+
+        // Build detail content
+        let html = '';
+
+        if (data.status === 'invalid') {
+            // Show invalid sequence info
+            html = `
+                <div class="bg-red-50 border border-red-200 rounded-lg p-4 text-center">
+                    <svg class="h-12 w-12 text-red-400 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                    <h4 class="mt-4 text-lg font-medium text-red-800">Invalid Sequence</h4>
+                    <p class="mt-2 text-red-700">${escapeHtml(data.validation_error || 'Sequence validation failed')}</p>
+                </div>
+                <div class="bg-gray-50 rounded-lg p-4">
+                    <h4 class="text-sm font-medium text-gray-500 uppercase mb-2">Sequence</h4>
+                    <p class="font-mono text-sm text-gray-900 break-all">${escapeHtml(data.sequence)}</p>
+                </div>
+            `;
+        } else {
+            // Show successful prediction details
+            const psi = data.psi;
+            const interp = interpretPsi(psi);
+
+            html = `
+                <!-- PSI Value -->
+                <div class="rounded-lg p-6 text-center ${interp.colorClass}">
+                    <p class="text-sm font-medium text-gray-500 uppercase tracking-wide">Predicted PSI</p>
+                    <p class="mt-2 text-4xl font-bold ${interp.textClass}">${psi.toFixed(3)}</p>
+                    <p class="mt-2 text-sm ${interp.textClass}">${interp.text}: ${interp.description}</p>
+                </div>
+
+                <!-- Info Grid -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="bg-gray-50 rounded-lg p-4">
+                        <h4 class="text-sm font-medium text-gray-500 uppercase mb-2">RNA Secondary Structure</h4>
+                        <p class="font-mono text-sm text-gray-900 break-all">${escapeHtml(data.structure || 'N/A')}</p>
+                    </div>
+                    <div class="bg-gray-50 rounded-lg p-4">
+                        <h4 class="text-sm font-medium text-gray-500 uppercase mb-2">Minimum Free Energy</h4>
+                        <p class="text-2xl font-bold text-gray-900">${data.mfe ? data.mfe.toFixed(2) : 'N/A'} <span class="text-base font-normal text-gray-500">kcal/mol</span></p>
+                    </div>
+                </div>
+
+                <!-- Sequence -->
+                <div class="bg-gray-50 rounded-lg p-4">
+                    <h4 class="text-sm font-medium text-gray-500 uppercase mb-2">Sequence</h4>
+                    <p class="font-mono text-sm text-gray-900 break-all">${escapeHtml(data.sequence)}</p>
+                </div>
+
+                <!-- Force Plot -->
+                <div class="bg-white rounded-lg border border-gray-200 p-4">
+                    <h4 class="text-sm font-medium text-gray-500 uppercase mb-4">
+                        Position-wise Contribution to PSI
+                        <span class="ml-2 text-gray-400 font-normal normal-case">
+                            (green = promotes inclusion, red = promotes skipping)
+                        </span>
+                    </h4>
+                    <div id="detail-force-plot" class="w-full" style="height: 350px;"></div>
+                </div>
+            `;
+        }
+
+        detailContent.innerHTML = html;
+
+        // Create force plot if we have data
+        if (data.status === 'success' && data.force_plot_data && data.force_plot_data.length > 0) {
+            setTimeout(() => createForcePlot('detail-force-plot', data.force_plot_data), 100);
+        }
+
+    } catch (error) {
+        console.error('Error loading detail:', error);
+        detailLoading.classList.add('hidden');
+        detailContent.innerHTML = `
+            <div class="bg-red-50 border border-red-200 rounded-lg p-4 text-center">
+                <p class="text-red-700">${escapeHtml(error.message)}</p>
+            </div>
+        `;
+    }
+}
+
+/**
+ * Close detail modal
+ */
+function closeDetailModal() {
+    document.getElementById('detail-modal').classList.add('hidden');
+}
+
+// Close modal on escape key
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        closeDetailModal();
+    }
+});
+
+// Close modal on backdrop click
+document.getElementById('detail-modal').addEventListener('click', (e) => {
+    if (e.target === e.currentTarget) {
+        closeDetailModal();
+    }
+});
+
+/**
+ * Interpret PSI value
+ */
+function interpretPsi(psi) {
+    if (psi >= 0.8) {
+        return {
+            text: 'High Inclusion',
+            description: 'This exon is predicted to be included in most transcripts.',
+            colorClass: 'bg-green-50 border border-green-200',
+            textClass: 'text-green-600'
+        };
+    } else if (psi >= 0.3) {
+        return {
+            text: 'Variable/Regulated',
+            description: 'This exon shows intermediate inclusion, suggesting regulation.',
+            colorClass: 'bg-yellow-50 border border-yellow-200',
+            textClass: 'text-yellow-600'
+        };
+    } else {
+        return {
+            text: 'High Skipping',
+            description: 'This exon is predicted to be skipped in most transcripts.',
+            colorClass: 'bg-red-50 border border-red-200',
+            textClass: 'text-red-600'
+        };
+    }
+}
+
+/**
+ * Create force plot using Plotly
+ */
+function createForcePlot(elementId, forceData) {
+    const element = document.getElementById(elementId);
+    if (!element) return;
+
+    const positions = Array.from({ length: forceData.length }, (_, i) => i + 1);
+    const colors = forceData.map(v => v >= 0 ? 'rgba(34, 197, 94, 0.8)' : 'rgba(239, 68, 68, 0.8)');
+
+    const trace = {
+        x: positions,
+        y: forceData,
+        type: 'bar',
+        marker: { color: colors },
+        hovertemplate: 'Position %{x}<br>Contribution: %{y:.4f}<extra></extra>'
+    };
+
+    const layout = {
+        margin: { t: 20, r: 20, b: 50, l: 50 },
+        xaxis: {
+            title: { text: 'Position', font: { size: 11 } },
+            tickmode: 'linear',
+            dtick: 10,
+            range: [0, 91]
+        },
+        yaxis: {
+            title: { text: 'Contribution to PSI', font: { size: 11 } },
+            zeroline: true,
+            zerolinecolor: '#888',
+            zerolinewidth: 1
+        },
+        shapes: [{
+            type: 'rect',
+            xref: 'x',
+            yref: 'paper',
+            x0: 10.5,
+            x1: 80.5,
+            y0: 0,
+            y1: 1,
+            fillcolor: 'rgba(59, 130, 246, 0.05)',
+            line: { width: 0 }
+        }],
+        annotations: [
+            { x: 5, y: 1.05, xref: 'x', yref: 'paper', text: "5' flank", showarrow: false, font: { size: 9, color: '#888' } },
+            { x: 45, y: 1.05, xref: 'x', yref: 'paper', text: 'Exon', showarrow: false, font: { size: 9, color: '#3b82f6' } },
+            { x: 85, y: 1.05, xref: 'x', yref: 'paper', text: "3' flank", showarrow: false, font: { size: 9, color: '#888' } }
+        ],
+        paper_bgcolor: 'rgba(0,0,0,0)',
+        plot_bgcolor: 'rgba(0,0,0,0)',
+        font: { family: 'system-ui, -apple-system, sans-serif' }
+    };
+
+    const config = {
+        responsive: true,
+        displayModeBar: true,
+        modeBarButtonsToRemove: ['lasso2d', 'select2d'],
+        displaylogo: false
+    };
+
+    Plotly.newPlot(element, [trace], layout, config);
+}
+
+/**
+ * Show error state
+ */
+function showError(message) {
+    loadingState.classList.add('hidden');
+    resultsContainer.classList.add('hidden');
+    errorState.classList.remove('hidden');
+    errorMessageEl.textContent = message;
+}
+
+/**
+ * Copy result link to clipboard
+ */
+function copyLink() {
+    const url = window.location.href;
+    navigator.clipboard.writeText(url).then(() => {
+        alert('Link copied to clipboard!');
+    }).catch(err => {
+        console.error('Failed to copy:', err);
+        prompt('Copy this link:', url);
+    });
+}
+
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Make functions available globally
+window.copyLink = copyLink;
+window.closeDetailModal = closeDetailModal;
+window.showDetail = showDetail;

webapp/static/js/file-parser.js

@@ -0,0 +1,327 @@
+/**
+ * File parsing utilities for CSV and FASTA files.
+ * Also handles multi-sequence text input parsing.
+ */
+
+/**
+ * Parse FASTA format text.
+ * Format: >Name\nSEQUENCE\n>Name2\nSEQUENCE2
+ * @param {string} text - FASTA formatted text
+ * @returns {Array<{name: string, sequence: string}>}
+ */
+function parseFasta(text) {
+    const sequences = [];
+    const lines = text.trim().split('\n');
+    let currentName = '';
+    let currentSeq = '';
+    let seqCount = 0;
+
+    for (const line of lines) {
+        const trimmedLine = line.trim();
+        if (trimmedLine.startsWith('>')) {
+            // Save previous sequence if exists
+            if (currentSeq) {
+                sequences.push({
+                    name: currentName || `Seq_${seqCount}`,
+                    sequence: currentSeq.toUpperCase()
+                });
+            }
+            seqCount++;
+            // Extract name from header (remove > and trim)
+            currentName = trimmedLine.substring(1).trim() || `Seq_${seqCount}`;
+            currentSeq = '';
+        } else if (trimmedLine) {
+            // Append to current sequence (remove whitespace)
+            currentSeq += trimmedLine.replace(/\s/g, '');
+        }
+    }
+
+    // Don't forget the last sequence
+    if (currentSeq) {
+        sequences.push({
+            name: currentName || `Seq_${seqCount}`,
+            sequence: currentSeq.toUpperCase()
+        });
+    }
+
+    return sequences;
+}
+
+/**
+ * Parse plain sequences (one per line, no headers).
+ * @param {string} text - Plain text with one sequence per line
+ * @returns {Array<{name: string, sequence: string}>}
+ */
+function parsePlainSequences(text) {
+    const lines = text.trim().split('\n');
+    const sequences = [];
+
+    for (let i = 0; i < lines.length; i++) {
+        const seq = lines[i].trim().toUpperCase().replace(/\s/g, '');
+        if (seq.length > 0) {
+            sequences.push({
+                name: `Seq_${sequences.length + 1}`,
+                sequence: seq
+            });
+        }
+    }
+
+    return sequences;
+}
+
+/**
+ * Auto-detect format and parse multi-sequence text.
+ * If any line starts with '>', treat as FASTA, otherwise plain sequences.
+ * @param {string} text - Text to parse
+ * @returns {Array<{name: string, sequence: string}>}
+ */
+function parseMultiSequenceText(text) {
+    const trimmed = text.trim();
+
+    if (!trimmed) {
+        return [];
+    }
+
+    // Check if it looks like FASTA (any line starts with >)
+    if (trimmed.includes('>')) {
+        return parseFasta(trimmed);
+    }
+
+    // Otherwise treat as plain sequences
+    return parsePlainSequences(trimmed);
+}
+
+/**
+ * Detect the delimiter used in a CSV file.
+ * @param {string} text - CSV text content
+ * @returns {string} Detected delimiter: ',', ';', or '\t'
+ */
+function detectDelimiter(text) {
+    const firstLine = text.split('\n')[0] || '';
+
+    // Count occurrences of each potential delimiter in first line
+    const tabCount = (firstLine.match(/\t/g) || []).length;
+    const semicolonCount = (firstLine.match(/;/g) || []).length;
+    const commaCount = (firstLine.match(/,/g) || []).length;
+
+    // Return the most common delimiter
+    if (tabCount > 0 && tabCount >= semicolonCount && tabCount >= commaCount) {
+        return '\t';
+    }
+    if (semicolonCount > 0 && semicolonCount >= commaCount) {
+        return ';';
+    }
+    return ',';
+}
+
+/**
+ * Detect if the first row is a header row.
+ * @param {Array<string>} row - First row of CSV
+ * @returns {boolean} True if row looks like a header
+ */
+function detectHeader(row) {
+    if (!row || row.length === 0) return false;
+
+    // Common header patterns (case insensitive)
+    const headerPatterns = ['name', 'sequence', 'seq', 'id', 'exon', 'header'];
+
+    // Check if any cell matches header patterns
+    for (const cell of row) {
+        const lowerCell = cell.toLowerCase().trim();
+        if (headerPatterns.some(pattern => lowerCell.includes(pattern))) {
+            return true;
+        }
+    }
+
+    // If first cell looks like a valid sequence (all ACGTU), probably not a header
+    const firstCell = row[0].toUpperCase().trim();
+    if (/^[ACGTU]+$/.test(firstCell) && firstCell.length > 20) {
+        return false;
+    }
+
+    return false;
+}
+
+/**
+ * Parse CSV content.
+ * Supports:
+ * - 2 columns: name, sequence (with or without header)
+ * - 1 column: sequence only (with or without header)
+ * - Auto-detects delimiter (comma, semicolon, tab)
+ * @param {string} text - CSV file content
+ * @returns {Array<{name: string, sequence: string}>}
+ */
+function parseCSV(text) {
+    const delimiter = detectDelimiter(text);
+    const lines = text.trim().split('\n');
+
+    if (lines.length === 0) {
+        return [];
+    }
+
+    // Parse all rows
+    const rows = lines.map(line => {
+        // Handle quoted fields properly
+        const cells = [];
+        let current = '';
+        let inQuotes = false;
+
+        for (let i = 0; i < line.length; i++) {
+            const char = line[i];
+            if (char === '"') {
+                inQuotes = !inQuotes;
+            } else if (char === delimiter && !inQuotes) {
+                cells.push(current.trim());
+                current = '';
+            } else {
+                current += char;
+            }
+        }
+        cells.push(current.trim());
+        return cells;
+    });
+
+    // Detect if first row is header
+    const hasHeader = detectHeader(rows[0]);
+    const dataRows = hasHeader ? rows.slice(1) : rows;
+
+    // Determine format based on number of columns
+    const numCols = rows[0].length;
+
+    const sequences = [];
+    for (let i = 0; i < dataRows.length; i++) {
+        const row = dataRows[i];
+        if (!row || row.length === 0 || (row.length === 1 && !row[0].trim())) {
+            continue; // Skip empty rows
+        }
+
+        if (numCols >= 2 && row.length >= 2) {
+            // Two or more columns: assume name, sequence
+            const name = row[0].trim() || `Seq_${sequences.length + 1}`;
+            const seq = row[1].trim().toUpperCase().replace(/\s/g, '');
+            if (seq) {
+                sequences.push({ name, sequence: seq });
+            }
+        } else {
+            // Single column: sequence only
+            const seq = row[0].trim().toUpperCase().replace(/\s/g, '');
+            if (seq) {
+                sequences.push({
+                    name: `Seq_${sequences.length + 1}`,
+                    sequence: seq
+                });
+            }
+        }
+    }
+
+    return sequences;
+}
+
+/**
+ * Read and parse a file (CSV or FASTA).
+ * @param {File} file - File object to parse
+ * @returns {Promise<Array<{name: string, sequence: string}>>}
+ */
+async function parseFile(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        reader.onload = (event) => {
+            const text = event.target.result;
+            const fileName = file.name.toLowerCase();
+
+            let sequences;
+            if (fileName.endsWith('.fasta') || fileName.endsWith('.fa') || fileName.endsWith('.fna')) {
+                sequences = parseFasta(text);
+            } else if (fileName.endsWith('.csv') || fileName.endsWith('.tsv') || fileName.endsWith('.txt')) {
+                // Try CSV first
+                sequences = parseCSV(text);
+                // If CSV parsing resulted in weird sequences, try FASTA
+                if (sequences.length === 0 || (sequences.length === 1 && text.includes('>'))) {
+                    sequences = parseFasta(text);
+                }
+            } else {
+                // Unknown extension - try to auto-detect
+                if (text.trim().startsWith('>')) {
+                    sequences = parseFasta(text);
+                } else {
+                    sequences = parseCSV(text);
+                }
+            }
+
+            resolve(sequences);
+        };
+
+        reader.onerror = () => {
+            reject(new Error('Failed to read file'));
+        };
+
+        reader.readAsText(file);
+    });
+}
+
+/**
+ * Validate a single sequence.
+ * @param {string} sequence - Sequence to validate
+ * @param {number} expectedLength - Expected length (default 70)
+ * @returns {{valid: boolean, error: string}}
+ */
+function validateSequence(sequence, expectedLength = 70) {
+    const cleaned = sequence.toUpperCase().replace(/U/g, 'T').replace(/\s/g, '');
+
+    if (cleaned.length !== expectedLength) {
+        return {
+            valid: false,
+            error: `Must be exactly ${expectedLength} nucleotides (got ${cleaned.length})`
+        };
+    }
+
+    const invalidChars = cleaned.match(/[^ACGT]/g);
+    if (invalidChars) {
+        const unique = [...new Set(invalidChars)];
+        return {
+            valid: false,
+            error: `Contains invalid characters: ${unique.join(', ')}`
+        };
+    }
+
+    return { valid: true, error: '' };
+}
+
+/**
+ * Parse and validate sequences from text input or file.
+ * @param {string} text - Text input to parse
+ * @param {number} expectedLength - Expected sequence length
+ * @returns {{sequences: Array<{name: string, sequence: string}>, validCount: number, invalidCount: number}}
+ */
+function parseAndValidate(text, expectedLength = 70) {
+    const sequences = parseMultiSequenceText(text);
+    let validCount = 0;
+    let invalidCount = 0;
+
+    for (const seq of sequences) {
+        const validation = validateSequence(seq.sequence, expectedLength);
+        seq.valid = validation.valid;
+        seq.error = validation.error;
+        if (validation.valid) {
+            validCount++;
+        } else {
+            invalidCount++;
+        }
+    }
+
+    return { sequences, validCount, invalidCount };
+}
+
+// Export functions for use in other scripts
+window.FileParser = {
+    parseFasta,
+    parsePlainSequences,
+    parseMultiSequenceText,
+    parseCSV,
+    parseFile,
+    detectDelimiter,
+    detectHeader,
+    validateSequence,
+    parseAndValidate,
+};

webapp/static/js/history.js

@@ -0,0 +1,351 @@
+/**
+ * History page JavaScript
+ */
+
+// State
+let currentPage = 1;
+let pageSize = 25;
+let totalJobs = 0;
+let totalPages = 1;
+let currentFilters = {
+    search: '',
+    dateFrom: null,
+    dateTo: null
+};
+
+// DOM Elements
+const tokenDisplay = document.getElementById('token-display');
+const loadingState = document.getElementById('loading-state');
+const noJobsState = document.getElementById('no-jobs-state');
+const jobsTableContainer = document.getElementById('jobs-table-container');
+const jobsTableBody = document.getElementById('jobs-table-body');
+const pagination = document.getElementById('pagination');
+const pageStart = document.getElementById('page-start');
+const pageEnd = document.getElementById('page-end');
+const totalJobsEl = document.getElementById('total-jobs');
+const pageButtons = document.getElementById('page-buttons');
+const searchInput = document.getElementById('search-title');
+const dateFromInput = document.getElementById('date-from');
+const dateToInput = document.getElementById('date-to');
+const applyFiltersBtn = document.getElementById('apply-filters-btn');
+const clearFiltersBtn = document.getElementById('clear-filters-btn');
+const refreshBtn = document.getElementById('refresh-btn');
+
+/**
+ * Initialize the page
+ */
+document.addEventListener('DOMContentLoaded', () => {
+    TokenManager.initTokenDisplay();
+    loadJobs();
+
+    // Event listeners
+    if (applyFiltersBtn) {
+        applyFiltersBtn.addEventListener('click', applyFilters);
+    }
+
+    if (clearFiltersBtn) {
+        clearFiltersBtn.addEventListener('click', clearFilters);
+    }
+
+    if (refreshBtn) {
+        refreshBtn.addEventListener('click', () => loadJobs());
+    }
+
+    // Search on Enter
+    if (searchInput) {
+        searchInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                applyFilters();
+            }
+        });
+    }
+
+    // Setup custom token save handler for history page
+    const tokenSaveBtn = document.getElementById('token-save-btn');
+    if (tokenSaveBtn) {
+        tokenSaveBtn.addEventListener('click', () => {
+            const editInput = document.getElementById('token-edit-input');
+            const newToken = editInput.value.trim();
+            if (TokenManager.setToken(newToken)) {
+                if (tokenDisplay) {
+                    tokenDisplay.textContent = newToken;
+                }
+                document.getElementById('token-edit-modal').classList.add('hidden');
+                loadJobs(); // Reload jobs with new token
+            } else {
+                alert('Invalid token format. Token must be in format: tok_xxxxxxxxxxxx');
+            }
+        });
+    }
+});
+
+/**
+ * Apply current filters and load jobs
+ */
+function applyFilters() {
+    currentFilters.search = searchInput.value.trim();
+    currentFilters.dateFrom = dateFromInput.value || null;
+    currentFilters.dateTo = dateToInput.value || null;
+    currentPage = 1;
+    loadJobs();
+}
+
+/**
+ * Clear all filters
+ */
+function clearFilters() {
+    searchInput.value = '';
+    dateFromInput.value = '';
+    dateToInput.value = '';
+    currentFilters = {
+        search: '',
+        dateFrom: null,
+        dateTo: null
+    };
+    currentPage = 1;
+    loadJobs();
+}
+
+/**
+ * Load jobs from API
+ */
+async function loadJobs() {
+    const token = TokenManager.getOrCreateToken();
+    if (!token) {
+        showNoJobs();
+        return;
+    }
+
+    showLoading();
+
+    try {
+        // Build query parameters
+        const params = new URLSearchParams({
+            access_token: token,
+            page: currentPage,
+            page_size: pageSize
+        });
+
+        if (currentFilters.search) {
+            params.append('search', currentFilters.search);
+        }
+        if (currentFilters.dateFrom) {
+            params.append('date_from', currentFilters.dateFrom);
+        }
+        if (currentFilters.dateTo) {
+            params.append('date_to', currentFilters.dateTo);
+        }
+
+        const response = await fetch(`/api/history?${params.toString()}`);
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to load jobs');
+        }
+
+        const data = await response.json();
+        totalJobs = data.total;
+        totalPages = data.total_pages;
+
+        if (data.jobs.length === 0) {
+            showNoJobs();
+        } else {
+            renderJobs(data.jobs);
+            renderPagination();
+            showTable();
+        }
+
+    } catch (error) {
+        console.error('Error loading jobs:', error);
+        showNoJobs();
+    }
+}
+
+/**
+ * Render jobs in the table
+ */
+function renderJobs(jobs) {
+    jobsTableBody.innerHTML = '';
+
+    for (const job of jobs) {
+        const row = document.createElement('tr');
+        row.className = 'hover:bg-gray-50';
+
+        const statusBadge = getStatusBadge(job.status);
+        const date = new Date(job.created_at).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+
+        row.innerHTML = `
+            <td class="px-6 py-4 whitespace-nowrap">
+                <a href="/result/${job.id}" class="text-primary-600 hover:text-primary-800 font-medium">
+                    ${escapeHtml(job.job_title || job.id.substring(0, 8))}
+                </a>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${date}</td>
+            <td class="px-6 py-4 whitespace-nowrap">${statusBadge}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                ${job.sequence_count} ${job.is_batch ? 'sequences' : 'sequence'}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm">
+                <a href="/result/${job.id}" class="text-primary-600 hover:text-primary-800 mr-3">View</a>
+                <button onclick="deleteJob('${job.id}')" class="text-red-600 hover:text-red-800">Delete</button>
+            </td>
+        `;
+
+        jobsTableBody.appendChild(row);
+    }
+}
+
+/**
+ * Get status badge HTML
+ */
+function getStatusBadge(status) {
+    const badges = {
+        'finished': '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Completed</span>',
+        'running': '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Running</span>',
+        'queued': '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Queued</span>',
+        'failed': '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Failed</span>'
+    };
+    return badges[status] || `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">${status}</span>`;
+}
+
+/**
+ * Render pagination controls
+ */
+function renderPagination() {
+    const start = (currentPage - 1) * pageSize + 1;
+    const end = Math.min(currentPage * pageSize, totalJobs);
+
+    pageStart.textContent = start;
+    pageEnd.textContent = end;
+    totalJobsEl.textContent = totalJobs;
+
+    // Clear existing buttons
+    pageButtons.innerHTML = '';
+
+    // Previous button
+    const prevBtn = document.createElement('button');
+    prevBtn.className = `relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium ${currentPage === 1 ? 'text-gray-300 cursor-not-allowed' : 'text-gray-500 hover:bg-gray-50'}`;
+    prevBtn.innerHTML = '<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>';
+    prevBtn.disabled = currentPage === 1;
+    prevBtn.addEventListener('click', () => {
+        if (currentPage > 1) {
+            currentPage--;
+            loadJobs();
+        }
+    });
+    pageButtons.appendChild(prevBtn);
+
+    // Page numbers
+    const maxButtons = 5;
+    let startPage = Math.max(1, currentPage - Math.floor(maxButtons / 2));
+    let endPage = Math.min(totalPages, startPage + maxButtons - 1);
+
+    if (endPage - startPage + 1 < maxButtons) {
+        startPage = Math.max(1, endPage - maxButtons + 1);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+        const btn = document.createElement('button');
+        btn.className = `relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium ${i === currentPage ? 'bg-primary-50 border-primary-500 text-primary-600 z-10' : 'bg-white text-gray-500 hover:bg-gray-50'}`;
+        btn.textContent = i;
+        btn.addEventListener('click', () => {
+            currentPage = i;
+            loadJobs();
+        });
+        pageButtons.appendChild(btn);
+    }
+
+    // Next button
+    const nextBtn = document.createElement('button');
+    nextBtn.className = `relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium ${currentPage === totalPages ? 'text-gray-300 cursor-not-allowed' : 'text-gray-500 hover:bg-gray-50'}`;
+    nextBtn.innerHTML = '<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>';
+    nextBtn.disabled = currentPage === totalPages;
+    nextBtn.addEventListener('click', () => {
+        if (currentPage < totalPages) {
+            currentPage++;
+            loadJobs();
+        }
+    });
+    pageButtons.appendChild(nextBtn);
+}
+
+/**
+ * Delete a job
+ */
+async function deleteJob(jobId) {
+    if (!confirm('Are you sure you want to delete this job? This action cannot be undone.')) {
+        return;
+    }
+
+    const token = TokenManager.getToken();
+    if (!token) {
+        alert('No access token found');
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/jobs/${jobId}?access_token=${encodeURIComponent(token)}`, {
+            method: 'DELETE'
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to delete job');
+        }
+
+        // Reload jobs
+        loadJobs();
+
+    } catch (error) {
+        console.error('Error deleting job:', error);
+        alert('Failed to delete job: ' + error.message);
+    }
+}
+
+/**
+ * Show loading state
+ */
+function showLoading() {
+    loadingState.classList.remove('hidden');
+    noJobsState.classList.add('hidden');
+    jobsTableContainer.classList.add('hidden');
+    pagination.classList.add('hidden');
+}
+
+/**
+ * Show no jobs state
+ */
+function showNoJobs() {
+    loadingState.classList.add('hidden');
+    noJobsState.classList.remove('hidden');
+    jobsTableContainer.classList.add('hidden');
+    pagination.classList.add('hidden');
+}
+
+/**
+ * Show table
+ */
+function showTable() {
+    loadingState.classList.add('hidden');
+    noJobsState.classList.add('hidden');
+    jobsTableContainer.classList.remove('hidden');
+    pagination.classList.remove('hidden');
+}
+
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Make deleteJob available globally
+window.deleteJob = deleteJob;

webapp/static/js/token.js

@@ -0,0 +1,216 @@
+/**
+ * Token management utilities for user identification.
+ * Tokens are stored in localStorage and used to track job history.
+ * Format: tok_xxxxxxxxxxxx (12 random alphanumeric characters)
+ */
+
+const TOKEN_KEY = 'splicing_access_token';
+const TOKEN_PREFIX = 'tok_';
+const TOKEN_RANDOM_LENGTH = 12;
+
+/**
+ * Generate a random token.
+ * @returns {string} Token in format tok_xxxxxxxxxxxx
+ */
+function generateToken() {
+    const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    let result = TOKEN_PREFIX;
+    for (let i = 0; i < TOKEN_RANDOM_LENGTH; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}
+
+/**
+ * Validate token format.
+ * @param {string} token - Token to validate
+ * @returns {boolean} True if valid format
+ */
+function isValidToken(token) {
+    const pattern = new RegExp(`^${TOKEN_PREFIX}[a-z0-9]{${TOKEN_RANDOM_LENGTH}}$`);
+    return pattern.test(token);
+}
+
+/**
+ * Get current token from localStorage, or generate new one.
+ * @returns {string} The access token
+ */
+function getOrCreateToken() {
+    let token = localStorage.getItem(TOKEN_KEY);
+    if (!token || !isValidToken(token)) {
+        token = generateToken();
+        localStorage.setItem(TOKEN_KEY, token);
+    }
+    return token;
+}
+
+/**
+ * Get current token from localStorage (may be null).
+ * @returns {string|null} The access token or null
+ */
+function getToken() {
+    return localStorage.getItem(TOKEN_KEY);
+}
+
+/**
+ * Set a new token in localStorage.
+ * @param {string} newToken - The new token to set
+ * @returns {boolean} True if successfully set
+ */
+function setToken(newToken) {
+    if (!isValidToken(newToken)) {
+        return false;
+    }
+    localStorage.setItem(TOKEN_KEY, newToken);
+    return true;
+}
+
+/**
+ * Clear the token from localStorage.
+ */
+function clearToken() {
+    localStorage.removeItem(TOKEN_KEY);
+}
+
+/**
+ * Copy token to clipboard.
+ * @returns {Promise<boolean>} True if successfully copied
+ */
+async function copyTokenToClipboard() {
+    const token = getToken();
+    if (!token) return false;
+
+    try {
+        await navigator.clipboard.writeText(token);
+        return true;
+    } catch (err) {
+        console.error('Failed to copy token:', err);
+        return false;
+    }
+}
+
+/**
+ * Initialize token display in the UI.
+ * Call this on page load to show current token.
+ */
+function initTokenDisplay() {
+    const token = getOrCreateToken();
+
+    // Update token display element if it exists
+    const displayEl = document.getElementById('token-display');
+    if (displayEl) {
+        displayEl.textContent = token;
+        displayEl.title = 'Double-click to edit';
+        displayEl.style.cursor = 'pointer';
+
+        // Double-click to edit inline
+        displayEl.addEventListener('dblclick', () => {
+            startInlineEdit(displayEl);
+        });
+    }
+
+    // Setup copy button
+    const copyBtn = document.getElementById('token-copy-btn');
+    if (copyBtn) {
+        copyBtn.addEventListener('click', async () => {
+            const success = await copyTokenToClipboard();
+            if (success) {
+                const originalText = copyBtn.textContent;
+                copyBtn.textContent = 'Copied!';
+                setTimeout(() => {
+                    copyBtn.textContent = originalText;
+                }, 2000);
+            }
+        });
+    }
+
+    return token;
+}
+
+/**
+ * Start inline editing of the token display.
+ * @param {HTMLElement} displayEl - The token display element
+ */
+function startInlineEdit(displayEl) {
+    const currentToken = displayEl.textContent;
+    const originalBg = displayEl.style.backgroundColor;
+
+    // Make editable
+    displayEl.contentEditable = true;
+    displayEl.style.backgroundColor = '#fff';
+    displayEl.style.outline = '2px solid #3b82f6';
+    displayEl.style.outlineOffset = '1px';
+    displayEl.focus();
+
+    // Select all text
+    const range = document.createRange();
+    range.selectNodeContents(displayEl);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+
+    // Handle blur (save on click away)
+    const handleBlur = () => {
+        finishInlineEdit(displayEl, currentToken, originalBg);
+    };
+
+    // Handle keydown (Enter to save, Escape to cancel)
+    const handleKeydown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            displayEl.blur();
+        } else if (e.key === 'Escape') {
+            displayEl.textContent = currentToken;
+            displayEl.blur();
+        }
+    };
+
+    displayEl.addEventListener('blur', handleBlur, { once: true });
+    displayEl.addEventListener('keydown', handleKeydown);
+
+    // Remove keydown listener after blur
+    displayEl.addEventListener('blur', () => {
+        displayEl.removeEventListener('keydown', handleKeydown);
+    }, { once: true });
+}
+
+/**
+ * Finish inline editing and save if valid.
+ * @param {HTMLElement} displayEl - The token display element
+ * @param {string} originalToken - The original token before editing
+ * @param {string} originalBg - The original background color
+ */
+function finishInlineEdit(displayEl, originalToken, originalBg) {
+    displayEl.contentEditable = false;
+    displayEl.style.backgroundColor = originalBg;
+    displayEl.style.outline = '';
+    displayEl.style.outlineOffset = '';
+
+    const newToken = displayEl.textContent.trim();
+
+    if (newToken === originalToken) {
+        // No change
+        return;
+    }
+
+    if (setToken(newToken)) {
+        displayEl.textContent = newToken;
+    } else {
+        // Invalid token, revert
+        displayEl.textContent = originalToken;
+        alert('Invalid token format. Token must be: tok_ followed by 12 lowercase letters/numbers');
+    }
+}
+
+// Export functions for use in other scripts
+window.TokenManager = {
+    generateToken,
+    isValidToken,
+    getOrCreateToken,
+    getToken,
+    setToken,
+    clearToken,
+    copyTokenToClipboard,
+    initTokenDisplay,
+    TOKEN_KEY,
+};

webapp/templates/about.html

@@ -198,31 +198,6 @@
         </div>
     </section>
 
-    <!-- Citation Section -->
-    <section class="mb-12">
-        <h2 class="text-2xl font-bold text-gray-900 mb-4">Citation</h2>
-        <div class="bg-gray-50 rounded-lg border border-gray-200 p-6">
-            <p class="text-gray-700 mb-4">If you use this tool in your research, please cite:</p>
-            <blockquote class="border-l-4 border-primary-500 pl-4 italic text-gray-600">
-                Liao SE, Sudarshan M, and Regev O. "Machine learning for discovery: deciphering RNA splicing logic." <em>bioRxiv</em> (2022).
-            </blockquote>
-            <div class="mt-4 flex space-x-4">
-                <a href="https://www.biorxiv.org/content/10.1101/2022.10.01.510472v1" target="_blank" class="inline-flex items-center text-primary-600 hover:text-primary-700">
-                    <svg class="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
-                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 2l5 5h-5V4zM6 20V4h6v6h6v10H6z"/>
-                    </svg>
-                    View Paper
-                </a>
-                <a href="https://github.com/Sachin1801/interpretable-splicing-model" target="_blank" class="inline-flex items-center text-primary-600 hover:text-primary-700">
-                    <svg class="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
-                        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
-                    </svg>
-                    View Code
-                </a>
-            </div>
-        </div>
-    </section>
-
     <!-- CTA -->
     <div class="text-center">
         <a href="/" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700">

webapp/templates/base.html

@@ -72,8 +72,8 @@
                         <a href="/tutorial" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md {% if request.url.path == '/tutorial' %}text-primary-600 bg-primary-50{% endif %}">
                             Tutorial
                         </a>
-                        <a href="/docs" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md">
-                            API Docs
+                        <a href="/history" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md {% if request.url.path == '/history' %}text-primary-600 bg-primary-50{% endif %}">
+                            History
                         </a>
                     </div>
 
@@ -99,23 +99,11 @@
                     <a href="/methodology" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md">Methodology</a>
                     <a href="/help" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md">Help</a>
                     <a href="/tutorial" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md">Tutorial</a>
-                    <a href="/docs" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md">API Docs</a>
+                    <a href="/history" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md">History</a>
                 </div>
             </div>
         </nav>
 
-        <!-- Free access banner -->
-        <div class="bg-green-50 border-b border-green-200">
-            <div class="max-w-7xl mx-auto py-2 px-4 sm:px-6 lg:px-8">
-                <p class="text-sm text-center text-green-800">
-                    <svg class="inline h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                    This website is <strong>free and open</strong> to all users. No login required.
-                </p>
-            </div>
-        </div>
-
         <!-- Main content -->
         <main class="flex-grow">
             {% block content %}{% endblock %}
@@ -124,34 +112,18 @@
         <!-- Footer -->
         <footer class="bg-white border-t border-gray-200 mt-auto">
             <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
-                <div class="md:flex md:items-center md:justify-between">
-                    <div class="flex justify-center space-x-6 md:order-2">
-                        <a href="https://www.biorxiv.org/content/10.1101/2022.10.01.510472v1" target="_blank" class="text-gray-400 hover:text-gray-500">
-                            <span class="sr-only">Paper</span>
-                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 2l5 5h-5V4zM6 20V4h6v6h6v10H6z"/>
-                            </svg>
-                        </a>
-                        <a href="https://github.com/Sachin1801/interpretable-splicing-model" target="_blank" class="text-gray-400 hover:text-gray-500">
-                            <span class="sr-only">GitHub</span>
-                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
-                                <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
-                            </svg>
-                        </a>
-                    </div>
-                    <div class="mt-8 md:mt-0 md:order-1">
-                        <p class="text-center text-sm text-gray-500">
-                            <strong>Citation:</strong> Liao SE, Sudarshan M, and Regev O.
-                            "Machine learning for discovery: deciphering RNA splicing logic."
-                            <em>bioRxiv</em> (2022).
-                        </p>
-                    </div>
+                <div class="flex justify-center">
+                    <a href="https://github.com/Sachin1801/interpretable-splicing-model" target="_blank" class="text-gray-400 hover:text-gray-500">
+                        <span class="sr-only">GitHub</span>
+                        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+                            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
+                        </svg>
+                    </a>
                 </div>
-                <div class="mt-4 border-t border-gray-200 pt-4">
+                <div class="mt-4">
                     <p class="text-center text-xs text-gray-400">
                         Version {{ settings.app_version }} |
-                        <a href="/help" class="hover:text-gray-500">Help</a> |
-                        <a href="/docs" class="hover:text-gray-500">API Documentation</a>
+                        <a href="/help" class="hover:text-gray-500">Help</a>
                     </p>
                 </div>
             </div>

webapp/templates/batch_result.html

@@ -0,0 +1,178 @@
+{% extends "base.html" %}
+
+{% block title %}Batch Results - {{ settings.app_name }}{% endblock %}
+
+{% block content %}
+<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+    <!-- Header -->
+    <div class="mb-6">
+        <nav class="flex" aria-label="Breadcrumb">
+            <ol class="flex items-center space-x-2">
+                <li>
+                    <a href="/" class="text-gray-400 hover:text-gray-500">
+                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+                        </svg>
+                    </a>
+                </li>
+                <li>
+                    <svg class="h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                    </svg>
+                </li>
+                <li>
+                    <a href="/history" class="text-sm font-medium text-gray-500 hover:text-gray-700">History</a>
+                </li>
+                <li>
+                    <svg class="h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                    </svg>
+                </li>
+                <li>
+                    <span class="text-sm font-medium text-gray-500">Batch Results</span>
+                </li>
+            </ol>
+        </nav>
+        <h1 class="mt-2 text-2xl font-bold text-gray-900" id="job-title">Batch Results</h1>
+        <p class="text-sm text-gray-500">Job ID: <code class="bg-gray-100 px-2 py-1 rounded text-xs">{{ job_id }}</code></p>
+    </div>
+
+    <!-- Loading State -->
+    <div id="loading-state" class="text-center py-12">
+        <svg class="animate-spin h-10 w-10 text-primary-600 mx-auto" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="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"></path>
+        </svg>
+        <p class="mt-4 text-gray-500" id="loading-text">Loading results...</p>
+    </div>
+
+    <!-- Results Container (hidden initially) -->
+    <div id="results-container" class="hidden space-y-6">
+        <!-- Summary Stats -->
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
+                <p class="text-sm font-medium text-gray-500">Total Sequences</p>
+                <p id="stat-total" class="mt-1 text-2xl font-bold text-gray-900">0</p>
+            </div>
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
+                <p class="text-sm font-medium text-gray-500">Successful</p>
+                <p id="stat-success" class="mt-1 text-2xl font-bold text-green-600">0</p>
+            </div>
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
+                <p class="text-sm font-medium text-gray-500">Invalid</p>
+                <p id="stat-invalid" class="mt-1 text-2xl font-bold text-red-600">0</p>
+            </div>
+            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 text-center">
+                <p class="text-sm font-medium text-gray-500">Average PSI</p>
+                <p id="stat-avg-psi" class="mt-1 text-2xl font-bold text-primary-600">-</p>
+            </div>
+        </div>
+
+        <!-- Search and Export -->
+        <div class="flex flex-wrap gap-4 items-center justify-between">
+            <div class="flex-1 min-w-[200px] max-w-md">
+                <input type="text" id="search-results"
+                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm"
+                       placeholder="Search by name or sequence...">
+            </div>
+            <div class="flex gap-2">
+                <a id="export-csv" href="#" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                    <svg class="mr-1.5 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                    </svg>
+                    CSV
+                </a>
+                <a id="export-json" href="#" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                    <svg class="mr-1.5 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                    </svg>
+                    JSON
+                </a>
+                <button onclick="copyLink()" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                    <svg class="mr-1.5 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+                    </svg>
+                    Copy Link
+                </button>
+            </div>
+        </div>
+
+        <!-- Results Table -->
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th scope="col" class="w-10 px-4 py-3"></th>
+                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sequence</th>
+                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">PSI</th>
+                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                    </tr>
+                </thead>
+                <tbody id="results-table-body" class="bg-white divide-y divide-gray-200">
+                    <!-- Populated by JavaScript -->
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Pagination -->
+        <div id="pagination" class="flex items-center justify-between">
+            <div>
+                <p class="text-sm text-gray-700">
+                    Showing <span id="page-start">1</span> to <span id="page-end">25</span> of <span id="total-results">0</span> results
+                </p>
+            </div>
+            <div>
+                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination" id="page-buttons">
+                    <!-- Populated by JavaScript -->
+                </nav>
+            </div>
+        </div>
+    </div>
+
+    <!-- Error State -->
+    <div id="error-state" class="hidden">
+        <div class="rounded-lg bg-red-50 border border-red-200 p-6 text-center">
+            <svg class="h-12 w-12 text-red-400 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <h3 class="mt-4 text-lg font-medium text-red-800">Error Loading Results</h3>
+            <p id="error-message" class="mt-2 text-red-700"></p>
+            <a href="/" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200">
+                Try Again
+            </a>
+        </div>
+    </div>
+</div>
+
+<!-- Detail Modal -->
+<div id="detail-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+    <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+        <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
+            <h3 id="detail-title" class="text-lg font-medium text-gray-900">Sequence Details</h3>
+            <button onclick="closeDetailModal()" class="text-gray-400 hover:text-gray-500">
+                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        </div>
+        <div id="detail-content" class="p-6 space-y-6">
+            <!-- Loading spinner for detail -->
+            <div id="detail-loading" class="text-center py-8">
+                <svg class="animate-spin h-8 w-8 text-primary-600 mx-auto" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="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"></path>
+                </svg>
+            </div>
+            <!-- Detail will be populated here -->
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    const jobId = "{{ job_id }}";
+</script>
+<script src="/static/js/batch-result.js"></script>
+{% endblock %}

webapp/templates/history.html

@@ -0,0 +1,147 @@
+{% extends "base.html" %}
+
+{% block title %}Job History - {{ settings.app_name }}{% endblock %}
+
+{% block content %}
+<div class="max-w-6xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+    <div class="mb-6">
+        <h1 class="text-2xl font-bold text-gray-900">Job History</h1>
+        <p class="mt-2 text-sm text-gray-600">
+            View and manage your previous prediction jobs. Jobs are identified by your access token.
+        </p>
+    </div>
+
+    <!-- Token Entry Section -->
+    <div id="token-section" class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+        <div class="flex items-center justify-between flex-wrap gap-4">
+            <div class="flex items-center gap-2 flex-wrap">
+                <span class="text-sm font-medium text-blue-900">Access Token:</span>
+                <code id="token-display" class="bg-white px-3 py-1 rounded border border-blue-200 text-sm font-mono text-blue-800"></code>
+                <button type="button" id="token-copy-btn" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
+                    Copy
+                </button>
+                <button type="button" id="token-edit-btn" class="text-gray-600 hover:text-gray-800 text-sm font-medium">
+                    Edit
+                </button>
+            </div>
+            <button type="button" id="refresh-btn" class="inline-flex items-center px-3 py-1.5 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50">
+                <svg class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                Refresh
+            </button>
+        </div>
+    </div>
+
+    <!-- Token Edit Modal -->
+    <div id="token-edit-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <h3 class="text-lg font-medium text-gray-900 mb-4">Edit Access Token</h3>
+            <p class="text-sm text-gray-600 mb-4">
+                Enter a different token to view jobs from another device or session.
+            </p>
+            <input type="text" id="token-edit-input" class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 font-mono text-sm mb-4" placeholder="tok_xxxxxxxxxxxx">
+            <div class="flex justify-end gap-3">
+                <button type="button" id="token-cancel-btn" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900">Cancel</button>
+                <button type="button" id="token-save-btn" class="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-md hover:bg-primary-700">Load Jobs</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Filters -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
+        <div class="flex flex-wrap gap-4 items-end">
+            <div class="flex-1 min-w-[200px]">
+                <label for="search-title" class="block text-sm font-medium text-gray-700 mb-1">Search Job Titles</label>
+                <input type="text" id="search-title"
+                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm"
+                       placeholder="Search...">
+            </div>
+            <div>
+                <label for="date-from" class="block text-sm font-medium text-gray-700 mb-1">From Date</label>
+                <input type="date" id="date-from"
+                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm">
+            </div>
+            <div>
+                <label for="date-to" class="block text-sm font-medium text-gray-700 mb-1">To Date</label>
+                <input type="date" id="date-to"
+                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm">
+            </div>
+            <button type="button" id="apply-filters-btn"
+                    class="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-md hover:bg-primary-700">
+                Apply
+            </button>
+            <button type="button" id="clear-filters-btn"
+                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
+                Clear
+            </button>
+        </div>
+    </div>
+
+    <!-- Loading State -->
+    <div id="loading-state" class="hidden text-center py-8">
+        <svg class="animate-spin h-8 w-8 text-primary-600 mx-auto" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="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"></path>
+        </svg>
+        <p class="mt-2 text-sm text-gray-500">Loading jobs...</p>
+    </div>
+
+    <!-- No Jobs State -->
+    <div id="no-jobs-state" class="hidden text-center py-12">
+        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
+        <h3 class="mt-2 text-sm font-medium text-gray-900">No jobs found</h3>
+        <p class="mt-1 text-sm text-gray-500">No prediction jobs found for this token.</p>
+        <div class="mt-6">
+            <a href="/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700">
+                Create New Prediction
+            </a>
+        </div>
+    </div>
+
+    <!-- Jobs Table -->
+    <div id="jobs-table-container" class="hidden bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Job Title</th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sequences</th>
+                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                </tr>
+            </thead>
+            <tbody id="jobs-table-body" class="bg-white divide-y divide-gray-200">
+                <!-- Populated by JavaScript -->
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Pagination -->
+    <div id="pagination" class="hidden mt-4 flex items-center justify-between">
+        <div class="flex-1 flex justify-between sm:hidden">
+            <button id="prev-page-mobile" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Previous</button>
+            <button id="next-page-mobile" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Next</button>
+        </div>
+        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+            <div>
+                <p class="text-sm text-gray-700">
+                    Showing <span id="page-start">1</span> to <span id="page-end">25</span> of <span id="total-jobs">0</span> jobs
+                </p>
+            </div>
+            <div>
+                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination" id="page-buttons">
+                    <!-- Populated by JavaScript -->
+                </nav>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="/static/js/token.js"></script>
+<script src="/static/js/history.js"></script>
+{% endblock %}

webapp/templates/index.html

@@ -9,106 +9,135 @@
         <h1 class="text-3xl font-bold text-gray-900 sm:text-4xl">
             RNA Splicing Predictor
         </h1>
-        <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
-            Predict alternative splicing outcomes using an interpretable deep learning model.
-            Enter a 70-nucleotide exon sequence to get a PSI (Percent Spliced In) prediction.
-        </p>
     </div>
 
-    <!-- Quick Info Cards -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-            <div class="flex items-center">
-                <div class="flex-shrink-0">
-                    <svg class="h-8 w-8 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
-                </div>
-                <div class="ml-4">
-                    <h3 class="text-sm font-medium text-gray-900">Input</h3>
-                    <p class="text-sm text-gray-500">70nt exon sequence</p>
-                </div>
-            </div>
-        </div>
-        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-            <div class="flex items-center">
-                <div class="flex-shrink-0">
-                    <svg class="h-8 w-8 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
-                </div>
-                <div class="ml-4">
-                    <h3 class="text-sm font-medium text-gray-900">Output</h3>
-                    <p class="text-sm text-gray-500">PSI value (0-1)</p>
-                </div>
-            </div>
-        </div>
-        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-            <div class="flex items-center">
-                <div class="flex-shrink-0">
-                    <svg class="h-8 w-8 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-                    </svg>
-                </div>
-                <div class="ml-4">
-                    <h3 class="text-sm font-medium text-gray-900">Speed</h3>
-                    <p class="text-sm text-gray-500">Results in seconds</p>
+    <!-- Token Display Section -->
+    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+        <div class="flex items-center justify-center gap-2">
+            <span class="relative group text-sm font-medium text-blue-900 cursor-help underline decoration-dotted underline-offset-2">
+                Your Access Token:
+                <div class="absolute left-full top-1/2 -translate-y-1/2 ml-2 hidden group-hover:block w-64 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg z-50 font-normal no-underline">
+                    <p>This unique token identifies your jobs. Save it to access your job history from any device or browser.</p>
+                    <p class="mt-2 text-gray-300">Double-click the token to edit it.</p>
+                    <div class="absolute right-full top-1/2 -translate-y-1/2 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-gray-900"></div>
                 </div>
-            </div>
+            </span>
+            <code id="token-display" class="bg-white px-3 py-1 rounded border border-blue-200 text-sm font-mono text-blue-800"></code>
+            <button type="button" id="token-copy-btn" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
+                Copy
+            </button>
         </div>
     </div>
 
     <!-- Prediction Form -->
     <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
         <form id="predict-form">
+            <!-- Job Title -->
             <div class="mb-4">
-                <label for="sequence" class="block text-sm font-medium text-gray-700 mb-2">
-                    Exon Sequence
-                    <span class="text-gray-400 font-normal">(exactly 70 nucleotides, A/C/G/T only)</span>
+                <label for="job-title" class="block text-sm text-gray-700 mb-2">
+                    <span class="relative group font-medium cursor-help underline decoration-dotted underline-offset-2">
+                        Job Title
+                        <div class="absolute left-full top-1/2 -translate-y-1/2 ml-2 hidden group-hover:block w-64 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg z-50 font-normal no-underline">
+                            <p>Give your prediction job a memorable name to easily find it later in your job history.</p>
+                            <p class="mt-2 text-gray-300">If left empty, a name will be auto-generated (e.g., "2026-01-15_abc12").</p>
+                            <div class="absolute right-full top-1/2 -translate-y-1/2 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-gray-900"></div>
+                        </div>
+                    </span>
+                    <span class="text-gray-400 font-normal">(optional)</span>
                 </label>
-                <textarea
-                    id="sequence"
-                    name="sequence"
-                    rows="3"
-                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 font-mono text-sm p-3 border"
-                    placeholder="Enter your 70-nucleotide exon sequence here...
-
-Example: GGTAGTACGCCAATTCGCCGGTGCCGCGAGCCAGAGGCTACCAAAACTTGACAAGCCTACATATACTACT"
-                    maxlength="70"
-                ></textarea>
+                <input type="text" id="job-title" name="job_title"
+                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 text-sm p-2 border"
+                       placeholder="e.g., BRCA1 Exon Analysis">
+            </div>
+
+            <!-- Sequence Input -->
+            <div class="mb-4">
+                <label for="sequences" class="block text-sm text-gray-700 mb-2">
+                    <span class="relative group font-medium cursor-help underline decoration-dotted underline-offset-2">
+                        Sequence(s)
+                        <div class="absolute left-full top-1/2 -translate-y-1/2 ml-2 hidden group-hover:block w-72 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg z-50 font-normal no-underline">
+                            <p class="font-semibold mb-1">How to enter sequences:</p>
+                            <ul class="list-disc list-inside space-y-1">
+                                <li><strong>Single sequence:</strong> Paste a 70-nucleotide sequence directly</li>
+                                <li><strong>Multiple (FASTA):</strong> Use &gt;name on one line, sequence on next</li>
+                                <li><strong>Multiple (plain):</strong> One sequence per line</li>
+                            </ul>
+                            <p class="mt-2 text-gray-300">Only A, C, G, T, U characters allowed. Each sequence must be exactly 70 nucleotides.</p>
+                            <div class="absolute right-full top-1/2 -translate-y-1/2 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-gray-900"></div>
+                        </div>
+                    </span>
+                    <span class="text-gray-400 font-normal">(70nt each, A/C/G/T/U, max 100)</span>
+                </label>
+                <textarea id="sequences" name="sequences" rows="8"
+                          class="block w-full rounded-md border-gray-300 shadow-sm font-mono text-sm p-3 border focus:border-primary-500 focus:ring-primary-500"
+                          placeholder="Paste one or more sequences:
+
+Single sequence:
+GGTAGTACGCCAATTCGCCGGTGCCGCGAGCCAGAGGCTACCAAAACTTGACAAGCCTACATATACTACT
+
+Multiple sequences (FASTA format):
+>Gene1_Exon5
+GGTAGTACGCCAATTCGCCGGTGCCGCGAGCCAGAGGCTACCAAAACTTGACAAGCCTACATATACTACT
+>Gene2_Exon3
+CTACCACCTCCCAAGCTTACACACTGTTTGATGAAAGGTCGCCACAACGTTCCCTCACCCCTAGTCTCGC
+
+Or plain sequences (one per line):
+GGTAGTACGCCAATTCGCCGGTGCCGCGAGCCAGAGGCTACCAAAACTTGACAAGCCTACATATACTACT
+CTACCACCTCCCAAGCTTACACACTGTTTGATGAAAGGTCGCCACAACGTTCCCTCACCCCTAGTCTCGC"></textarea>
                 <div class="mt-2 flex justify-between items-center">
-                    <span id="char-count" class="text-sm text-gray-500">0/70 nucleotides</span>
+                    <span id="sequence-count" class="text-sm text-gray-500">0 sequences detected</span>
                     <span id="validation-message" class="text-sm text-red-500 hidden"></span>
                 </div>
             </div>
 
+            <!-- File Upload -->
+            <div class="mb-6">
+                <label class="block text-sm text-gray-700 mb-2">
+                    <span class="relative group font-medium cursor-help underline decoration-dotted underline-offset-2">
+                        Or Upload File
+                        <div class="absolute left-full top-1/2 -translate-y-1/2 ml-2 hidden group-hover:block w-72 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg z-50 font-normal no-underline">
+                            <p class="font-semibold mb-1">Supported file formats:</p>
+                            <ul class="list-disc list-inside space-y-1">
+                                <li><strong>CSV:</strong> 1 column (sequences only) or 2 columns (name, sequence)</li>
+                                <li><strong>FASTA:</strong> Standard format with &gt;header lines</li>
+                            </ul>
+                            <p class="mt-2 text-gray-300">Delimiters (comma, semicolon, tab) and headers are auto-detected.</p>
+                            <div class="absolute right-full top-1/2 -translate-y-1/2 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-gray-900"></div>
+                        </div>
+                    </span>
+                    <span class="text-gray-400 font-normal">(CSV or FASTA)</span>
+                </label>
+                <div class="flex items-center gap-4">
+                    <input type="file" id="file-upload" accept=".csv,.fasta,.fa,.fna,.txt,.tsv"
+                           class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 cursor-pointer">
+                    <button type="button" id="clear-file-btn" class="text-gray-400 hover:text-gray-600 hidden">
+                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+                <p id="file-status" class="mt-1 text-sm text-gray-500"></p>
+            </div>
+
+            <!-- Action Buttons -->
             <div class="flex flex-wrap gap-3">
-                <button
-                    type="submit"
-                    id="submit-btn"
-                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
-                >
+                <button type="submit" id="submit-btn"
+                        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed">
                     <svg class="hidden animate-spin -ml-1 mr-2 h-4 w-4 text-white" id="loading-spinner" fill="none" viewBox="0 0 24 24">
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                         <path class="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"></path>
                     </svg>
                     <span id="submit-text">Predict PSI</span>
                 </button>
-                <button
-                    type="button"
-                    id="example-btn"
-                    class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
-                >
+                <button type="button" id="example-btn"
+                        class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                     <svg class="mr-2 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
                     Try Example
                 </button>
-                <button
-                    type="button"
-                    id="clear-btn"
-                    class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
-                >
+                <button type="button" id="clear-btn"
+                        class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                     <svg class="mr-2 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                     </svg>
@@ -128,48 +157,291 @@ Example: GGTAGTACGCCAATTCGCCGGTGCCGCGAGCCAGAGGCTACCAAAACTTGACAAGCCTACATATACTACT"
         </div>
     </div>
 
-    <!-- Example Sequences -->
-    <div class="mt-8">
-        <h2 class="text-lg font-medium text-gray-900 mb-4">Example Sequences</h2>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer hover:border-primary-300 transition-colors" onclick="loadExample(0)">
-                <div class="flex items-center justify-between mb-2">
-                    <span class="text-sm font-medium text-gray-900">High Inclusion</span>
-                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">PSI ~0.98</span>
-                </div>
-                <p class="text-xs text-gray-500 font-mono truncate">GGTAGTACGCCAATTCGCCG...</p>
-            </div>
-            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer hover:border-primary-300 transition-colors" onclick="loadExample(1)">
-                <div class="flex items-center justify-between mb-2">
-                    <span class="text-sm font-medium text-gray-900">Balanced</span>
-                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">PSI ~0.49</span>
-                </div>
-                <p class="text-xs text-gray-500 font-mono truncate">CTACCACCTCCCAAGCTTAC...</p>
-            </div>
-            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer hover:border-primary-300 transition-colors" onclick="loadExample(2)">
-                <div class="flex items-center justify-between mb-2">
-                    <span class="text-sm font-medium text-gray-900">High Skipping</span>
-                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">PSI ~0.00</span>
-                </div>
-                <p class="text-xs text-gray-500 font-mono truncate">ACACTCCGCAGCACACTCGG...</p>
-            </div>
-        </div>
-    </div>
-
-    <!-- Learn More -->
-    <div class="mt-8 text-center">
-        <p class="text-sm text-gray-500">
-            Want to learn more?
-            <a href="/about" class="text-primary-600 hover:text-primary-700 font-medium">About the model</a>
-            <span class="mx-2">|</span>
-            <a href="/methodology" class="text-primary-600 hover:text-primary-700 font-medium">How it works</a>
-            <span class="mx-2">|</span>
-            <a href="/tutorial" class="text-primary-600 hover:text-primary-700 font-medium">Tutorial</a>
-        </p>
-    </div>
 </div>
 {% endblock %}
 
 {% block scripts %}
-<script src="/static/js/app.js"></script>
+<script src="/static/js/token.js"></script>
+<script src="/static/js/file-parser.js"></script>
+<script>
+// Example sequences
+const EXAMPLES = [
+    {
+        name: "High Inclusion",
+        sequence: "GGTAGTACGCCAATTCGCCGGTGCCGCGAGCCAGAGGCTACCAAAACTTGACAAGCCTACATATACTACT",
+        expectedPsi: "~0.98"
+    },
+    {
+        name: "Balanced",
+        sequence: "CTACCACCTCCCAAGCTTACACACTGTTTGATGAAAGGTCGCCACAACGTTCCCTCACCCCTAGTCTCGC",
+        expectedPsi: "~0.49"
+    },
+    {
+        name: "High Skipping",
+        sequence: "ACACTCCGCAGCACACTCGGCAAAGAAGTTAGGCCCCGCTCTTACAAACATCTAGCATTTTGTATGGTCT",
+        expectedPsi: "~0.00"
+    }
+];
+
+// DOM Elements
+const form = document.getElementById('predict-form');
+const sequencesInput = document.getElementById('sequences');
+const jobTitleInput = document.getElementById('job-title');
+const sequenceCount = document.getElementById('sequence-count');
+const validationMessage = document.getElementById('validation-message');
+const submitBtn = document.getElementById('submit-btn');
+const submitText = document.getElementById('submit-text');
+const loadingSpinner = document.getElementById('loading-spinner');
+const errorMessage = document.getElementById('error-message');
+const errorText = document.getElementById('error-text');
+const exampleBtn = document.getElementById('example-btn');
+const clearBtn = document.getElementById('clear-btn');
+const fileUpload = document.getElementById('file-upload');
+const clearFileBtn = document.getElementById('clear-file-btn');
+const fileStatus = document.getElementById('file-status');
+
+let currentExampleIndex = 0;
+let parsedSequences = [];
+
+// Initialize token display
+document.addEventListener('DOMContentLoaded', () => {
+    TokenManager.initTokenDisplay();
+    updateSequenceCount();
+});
+
+/**
+ * Update sequence count and validation
+ */
+function updateSequenceCount() {
+    const text = sequencesInput.value;
+    if (!text.trim()) {
+        sequenceCount.textContent = '0 sequences detected';
+        sequenceCount.className = 'text-sm text-gray-500';
+        parsedSequences = [];
+        updateSubmitButton();
+        return;
+    }
+
+    const result = FileParser.parseAndValidate(text, 70);
+    parsedSequences = result.sequences;
+
+    if (parsedSequences.length === 0) {
+        sequenceCount.textContent = '0 sequences detected';
+        sequenceCount.className = 'text-sm text-gray-500';
+    } else if (parsedSequences.length === 1) {
+        if (result.validCount === 1) {
+            sequenceCount.textContent = '1 valid sequence';
+            sequenceCount.className = 'text-sm text-green-600';
+        } else {
+            sequenceCount.textContent = '1 sequence (invalid)';
+            sequenceCount.className = 'text-sm text-red-600';
+        }
+    } else {
+        if (result.invalidCount === 0) {
+            sequenceCount.textContent = `${parsedSequences.length} valid sequences`;
+            sequenceCount.className = 'text-sm text-green-600';
+        } else {
+            sequenceCount.textContent = `${parsedSequences.length} sequences (${result.validCount} valid, ${result.invalidCount} invalid)`;
+            sequenceCount.className = 'text-sm text-yellow-600';
+        }
+    }
+
+    updateSubmitButton();
+}
+
+/**
+ * Update submit button state
+ */
+function updateSubmitButton() {
+    // Enable if we have at least one sequence (valid or not - backend will handle)
+    submitBtn.disabled = parsedSequences.length === 0;
+}
+
+/**
+ * Show loading state
+ */
+function setLoading(loading) {
+    if (loading) {
+        submitBtn.disabled = true;
+        submitText.textContent = 'Processing...';
+        loadingSpinner.classList.remove('hidden');
+    } else {
+        updateSubmitButton();
+        submitText.textContent = 'Predict PSI';
+        loadingSpinner.classList.add('hidden');
+    }
+}
+
+/**
+ * Show error message
+ */
+function showError(message) {
+    errorText.textContent = message;
+    errorMessage.classList.remove('hidden');
+}
+
+/**
+ * Hide error message
+ */
+function hideError() {
+    errorMessage.classList.add('hidden');
+}
+
+/**
+ * Load an example sequence
+ */
+function loadExample(index) {
+    const example = EXAMPLES[index];
+    sequencesInput.value = `>${example.name}\n${example.sequence}`;
+    updateSequenceCount();
+    hideError();
+}
+
+/**
+ * Handle file upload
+ */
+async function handleFileUpload(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    try {
+        fileStatus.textContent = 'Parsing file...';
+        const sequences = await FileParser.parseFile(file);
+
+        if (sequences.length === 0) {
+            fileStatus.textContent = 'No sequences found in file';
+            fileStatus.className = 'mt-1 text-sm text-red-500';
+            return;
+        }
+
+        // Convert to FASTA format and put in textarea
+        const fastaText = sequences.map(s => `>${s.name}\n${s.sequence}`).join('\n');
+        sequencesInput.value = fastaText;
+        updateSequenceCount();
+
+        fileStatus.textContent = `Loaded ${sequences.length} sequences from ${file.name}`;
+        fileStatus.className = 'mt-1 text-sm text-green-600';
+        clearFileBtn.classList.remove('hidden');
+        hideError();
+
+    } catch (error) {
+        fileStatus.textContent = `Error: ${error.message}`;
+        fileStatus.className = 'mt-1 text-sm text-red-500';
+    }
+}
+
+/**
+ * Clear file input
+ */
+function clearFileInput() {
+    fileUpload.value = '';
+    fileStatus.textContent = '';
+    clearFileBtn.classList.add('hidden');
+}
+
+/**
+ * Submit the prediction
+ */
+async function submitPrediction(event) {
+    event.preventDefault();
+
+    if (parsedSequences.length === 0) {
+        showError('Please enter at least one sequence');
+        return;
+    }
+
+    setLoading(true);
+    hideError();
+
+    const token = TokenManager.getOrCreateToken();
+    const jobTitle = jobTitleInput.value.trim() || null;
+
+    try {
+        let response;
+        let result;
+
+        if (parsedSequences.length === 1) {
+            // Single sequence prediction
+            const seq = parsedSequences[0];
+            response = await fetch('/api/predict', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    sequence: seq.sequence,
+                    name: seq.name,
+                    access_token: token,
+                    job_title: jobTitle
+                })
+            });
+        } else {
+            // Batch prediction
+            const sequences = parsedSequences.map(s => ({
+                name: s.name,
+                sequence: s.sequence
+            }));
+            response = await fetch('/api/batch', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    sequences: sequences,
+                    access_token: token,
+                    job_title: jobTitle
+                })
+            });
+        }
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Prediction failed');
+        }
+
+        result = await response.json();
+
+        // Redirect to result page
+        window.location.href = `/result/${result.job_id}`;
+
+    } catch (error) {
+        console.error('Prediction error:', error);
+        showError(error.message || 'An error occurred. Please try again.');
+        setLoading(false);
+    }
+}
+
+// Event listeners
+if (form) {
+    form.addEventListener('submit', submitPrediction);
+}
+
+if (sequencesInput) {
+    sequencesInput.addEventListener('input', updateSequenceCount);
+}
+
+if (exampleBtn) {
+    exampleBtn.addEventListener('click', () => {
+        loadExample(currentExampleIndex);
+        currentExampleIndex = (currentExampleIndex + 1) % EXAMPLES.length;
+    });
+}
+
+if (clearBtn) {
+    clearBtn.addEventListener('click', () => {
+        sequencesInput.value = '';
+        jobTitleInput.value = '';
+        updateSequenceCount();
+        clearFileInput();
+        hideError();
+    });
+}
+
+if (fileUpload) {
+    fileUpload.addEventListener('change', handleFileUpload);
+}
+
+if (clearFileBtn) {
+    clearFileBtn.addEventListener('click', clearFileInput);
+}
+
+// Make loadExample available globally for onclick handlers
+window.loadExample = loadExample;
+</script>
 {% endblock %}

webapp/templates/result.html

@@ -81,6 +81,26 @@
             <div id="force-plot" class="w-full" style="height: 400px;"></div>
         </div>
 
+        <!-- Filter Activation Heatmap -->
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide mb-4">
+                Filter Activation Heatmap
+                <span class="ml-2 text-gray-400 font-normal normal-case">
+                    (shows where each neural network filter activates across the sequence)
+                </span>
+            </h3>
+            <div id="heatmap-container" class="w-full" style="min-height: 500px;">
+                <iframe
+                    id="heatmap-iframe"
+                    src="/shiny/heatmap/?job_id={{ job_id }}"
+                    class="w-full border-0"
+                    style="height: 600px; min-height: 500px;"
+                    loading="lazy"
+                    title="Filter Activation Heatmap"
+                ></iframe>
+            </div>
+        </div>
+
         <!-- Actions -->
         <div class="flex flex-wrap gap-3">
             <a href="/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700">