Initial deploy

.dockerignore

@@ -0,0 +1,7 @@
+__pycache__/
+*.pyc
+*.pyo
+annotation.db
+.git/
+.gitignore
+*.md

Dockerfile

@@ -0,0 +1,46 @@
+FROM python:3.11-slim
+
+# ── System deps ──
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends gcc libffi-dev && \
+    rm -rf /var/lib/apt/lists/*
+
+# ── Create non-root user (HF Spaces requirement) ──
+RUN useradd -m -u 1000 user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# ── App directory ──
+WORKDIR /home/user/app
+
+# ── Install Python deps ──
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+# ── Copy application code ──
+COPY --chown=user app.py models.py csv_utils.py ./
+COPY --chown=user templates/ ./templates/
+COPY --chown=user static/ ./static/
+
+# ── Create data directories (for DB + CSV files) ──
+RUN mkdir -p /home/user/app/csv_data && \
+    chown -R user:user /home/user/app
+
+# ── Copy CSV data into container ──
+# Place your .csv files in a csv_data/ folder next to the Dockerfile
+COPY --chown=user csv_data/ ./csv_data/
+
+# ── Environment variables ──
+ENV CSV_FOLDER=/home/user/app/csv_data \
+    DB_PATH=/home/user/app/annotation.db \
+    SECRET_KEY=esconv-hf-spaces-secret-key-2024
+
+# ── Switch to non-root user ──
+USER user
+
+# ── HF Spaces uses port 7860 ──
+EXPOSE 7860
+
+# ── Start with gunicorn ──
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "2", "--timeout", "120", "app:app"]

README.md

@@ -1,10 +1,24 @@
 ---
-title: Empathy Label
-emoji: 🌍
+title: ESConv Annotation Tool
+emoji: 📝
 colorFrom: blue
-colorTo: red
+colorTo: green
 sdk: docker
+app_port: 7860
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ESConv Annotation Management System
+
+A web-based annotation review tool for the ESConv dataset with cognitive distortion, emotion, and empathy labeling.
+
+## Features
+- 🔐 Admin & Annotator role-based access
+- 📊 Interactive conversation view with evidence highlighting
+- ✏️ Edit mode for annotations (emotion, distortions, empathy)
+- 📌 Text selection for evidence quotes
+- 📥 Export to JSON/CSV
+- 📈 Progress tracking dashboard
+
+## Default Login
+- **Admin**: `admin` / `admin123`

app.js

@@ -0,0 +1,528 @@
+// ===== Global State =====
+let allData = [];
+let filteredData = [];
+let currentIndex = 0;
+let activeHighlights = new Set();
+
+// Color palettes
+const DIST_COLORS = ['#fb923c', '#f87171', '#fbbf24', '#a78bfa', '#34d399'];
+const EMP_COLORS = ['#60a5fa','#a78bfa','#34d399','#fbbf24','#fb923c','#f87171','#818cf8','#2dd4bf','#e879f9'];
+
+// ===== CSV Parser =====
+function parseCSV(text) {
+  const rows = [];
+  let i = 0;
+  const len = text.length;
+
+  function parseField() {
+    if (text[i] === '"') {
+      i++; // skip opening quote
+      let field = '';
+      while (i < len) {
+        if (text[i] === '"' && text[i + 1] === '"') {
+          field += '"';
+          i += 2;
+        } else if (text[i] === '"') {
+          i++; // skip closing quote
+          break;
+        } else {
+          field += text[i++];
+        }
+      }
+      return field;
+    } else {
+      let start = i;
+      while (i < len && text[i] !== ',' && text[i] !== '\n' && text[i] !== '\r') i++;
+      return text.slice(start, i);
+    }
+  }
+
+  while (i < len) {
+    const row = [];
+    while (i < len) {
+      row.push(parseField());
+      if (i < len && text[i] === ',') { i++; continue; }
+      if (i < len && (text[i] === '\n' || text[i] === '\r')) {
+        if (text[i] === '\r' && text[i + 1] === '\n') i++;
+        i++;
+        break;
+      }
+      if (i >= len) break;
+    }
+    if (row.length > 1 || (row.length === 1 && row[0] !== '')) {
+      rows.push(row);
+    }
+  }
+  return rows;
+}
+
+function csvToObjects(rows) {
+  if (rows.length < 2) return [];
+  const headers = rows[0];
+  return rows.slice(1).map(row => {
+    const obj = {};
+    headers.forEach((h, idx) => { obj[h.trim()] = row[idx] || ''; });
+    return obj;
+  });
+}
+
+// ===== JSON Parse helpers =====
+function safeParseJSON(str) {
+  if (!str) return null;
+  try {
+    // The CSV uses "" for escaped quotes inside JSON strings
+    // They've already been unescaped by our parser to single "
+    return JSON.parse(str);
+  } catch (e) {
+    return null;
+  }
+}
+
+// ===== Parse the annotation columns =====
+function parseAnnotations(row) {
+  const emotion = safeParseJSON(row['Emotion']);
+  const distortions = safeParseJSON(row['Distortions']);
+  const empathy = safeParseJSON(row['Empathy_Level']);
+  return { emotion, distortions, empathy };
+}
+
+// ===== Parse conversation_cut =====
+function parseConversation(convStr) {
+  if (!convStr) return [];
+  const lines = convStr.split('\n');
+  const messages = [];
+  lines.forEach(line => {
+    const trimmed = line.trim();
+    if (!trimmed) return;
+    if (trimmed.startsWith('speaker:') || trimmed.startsWith('listener:')) {
+      const isListener = trimmed.startsWith('listener:');
+      const content = trimmed.replace(/^(speaker|listener):\s*/, '');
+      if (content) {
+        messages.push({ role: isListener ? 'listener' : 'speaker', text: content });
+      }
+    } else if (messages.length > 0) {
+      // continuation line
+      messages[messages.length - 1].text += ' ' + trimmed;
+    }
+  });
+  return messages;
+}
+
+// ===== Highlight text in conversation =====
+function highlightTextInMessages(messages, quotes, cssClass) {
+  // returns messages array with highlight markers
+  return messages.map(msg => {
+    let text = msg.text;
+    quotes.forEach(({ quote, cls }) => {
+      if (!quote || quote === 'No evidence present') return;
+      // clean the quote from listener:/speaker: prefix
+      let q = quote.replace(/^(listener|speaker):\s*/i, '').trim();
+      if (!q) return;
+      const idx = text.indexOf(q);
+      if (idx !== -1) {
+        text = text.slice(0, idx)
+          + `<mark class="evidence-hl ${cls}" data-quote="${escapeAttr(q)}">`
+          + text.slice(idx, idx + q.length)
+          + '</mark>'
+          + text.slice(idx + q.length);
+      }
+    });
+    return { ...msg, htmlText: text };
+  });
+}
+
+function escapeAttr(str) {
+  return str.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+function escapeHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+// ===== Emotion color class =====
+function emotionClass(emotion) {
+  if (!emotion) return 'emotion-default';
+  const e = emotion.toLowerCase();
+  if (e.includes('fear')) return 'emotion-fear';
+  if (e.includes('sad')) return 'emotion-sadness';
+  if (e.includes('anger') || e.includes('angry')) return 'emotion-anger';
+  if (e.includes('joy') || e.includes('happy')) return 'emotion-joy';
+  if (e.includes('anxi')) return 'emotion-anxiety';
+  if (e.includes('shame')) return 'emotion-shame';
+  if (e.includes('depress')) return 'emotion-depression';
+  return 'emotion-default';
+}
+
+// ===== Score color =====
+function scoreColor(score, max = 7) {
+  const ratio = score / max;
+  if (ratio >= 0.7) return '#34d399';
+  if (ratio >= 0.4) return '#fbbf24';
+  return '#f87171';
+}
+
+// ===== Render sample list =====
+function renderSampleList() {
+  const list = document.getElementById('sampleList');
+  list.innerHTML = '';
+  filteredData.forEach((row, i) => {
+    const { emotion } = parseAnnotations(row);
+    const eName = emotion?.primary_emotion || row['emotion_type'] || '—';
+    const problem = row['problem_type'] || '';
+
+    const item = document.createElement('div');
+    item.className = 'sample-item' + (i === currentIndex ? ' active' : '');
+    item.dataset.idx = i;
+    item.innerHTML = `
+      <div class="sample-item-idx">#${i + 1}</div>
+      <div class="sample-item-emotion" style="color:var(--emotion-color)">${eName}</div>
+      <div class="sample-item-problem">${problem}</div>
+    `;
+    item.addEventListener('click', () => {
+      currentIndex = i;
+      renderAll();
+    });
+    list.appendChild(item);
+  });
+}
+
+// ===== Render conversation =====
+function renderConversation(row) {
+  const { distortions, empathy } = parseAnnotations(row);
+  const rawMessages = parseConversation(row['conversation_cut']);
+
+  // Build highlight quotes list
+  const allQuotes = [];
+  // Distortion quotes
+  const dists = distortions?.distortions || [];
+  dists.forEach((d, idx) => {
+    if (d.evidence_quote && d.evidence_quote !== 'No evidence present') {
+      allQuotes.push({ quote: d.evidence_quote, cls: `dist-hl-${idx % 3}`, type: 'distortion', idx });
+    }
+  });
+  // Empathy quotes
+  const dims = empathy?.empathy_dimensions || [];
+  dims.forEach((dim, idx) => {
+    if (dim.evidence_quote && dim.evidence_quote !== 'No evidence present') {
+      allQuotes.push({ quote: dim.evidence_quote, cls: `emp-hl-${idx % 9}`, type: 'empathy', idx });
+    }
+  });
+
+  // Apply highlights
+  const highlighted = highlightTextInMessages(rawMessages, allQuotes, '');
+
+  const view = document.getElementById('conversationView');
+  view.innerHTML = highlighted.map(msg => {
+    const htmlContent = msg.htmlText || escapeHtml(msg.text);
+    return `
+      <div class="message-bubble ${msg.role}">
+        <div class="message-label">${msg.role === 'listener' ? 'Listener' : 'Speaker'}</div>
+        <div class="message-text">${htmlContent}</div>
+      </div>`;
+  }).join('');
+
+  // Attach tooltip events to marks
+  view.querySelectorAll('mark.evidence-hl').forEach(mark => {
+    mark.addEventListener('mouseenter', (e) => showMarkTooltip(e, mark, allQuotes));
+    mark.addEventListener('mouseleave', hideTooltip);
+  });
+}
+
+// ===== Render conv header =====
+function renderConvHeader(row) {
+  const { emotion } = parseAnnotations(row);
+  const eName = emotion?.primary_emotion || row['emotion_type'] || '—';
+  const eIntensity = emotion?.intensity || '';
+  const problem = row['problem_type'] || '';
+  const expType = row['experience_type'] || '';
+
+  const intClass = eIntensity.toLowerCase().includes('high') ? 'intensity-high'
+    : eIntensity.toLowerCase().includes('medium') ? 'intensity-medium' : 'intensity-low';
+
+  document.getElementById('convMeta').innerHTML = `
+    <span class="meta-badge ${emotionClass(eName)}">${eName}</span>
+    ${eIntensity ? `<span class="intensity-badge ${intClass}">${eIntensity}</span>` : ''}
+    ${problem ? `<span class="problem-badge">${problem}</span>` : ''}
+    ${expType ? `<span class="experience-badge">${expType}</span>` : ''}
+  `;
+}
+
+// ===== Render Emotion Card =====
+function renderEmotion(row) {
+  const { emotion } = parseAnnotations(row);
+  const el = document.getElementById('emotionContent');
+  if (!emotion) { el.innerHTML = '<p style="color:var(--text-muted);font-size:.8rem">No emotion annotation.</p>'; return; }
+
+  const intClass = (emotion.intensity || '').toLowerCase().includes('high') ? 'intensity-high'
+    : (emotion.intensity || '').toLowerCase().includes('medium') ? 'intensity-medium' : 'intensity-low';
+
+  el.innerHTML = `
+    <div class="emotion-primary">
+      <span class="emotion-badge ${emotionClass(emotion.primary_emotion)}">${emotion.primary_emotion || '—'}</span>
+      <span class="intensity-badge ${intClass}">${emotion.intensity || '—'}</span>
+    </div>
+    ${emotion.specific_emotion_term ? `<p class="specific-term">Specific term: <span>${emotion.specific_emotion_term}</span></p>` : ''}
+    ${emotion.reasoning ? `<p class="emotion-reasoning">${emotion.reasoning}</p>` : ''}
+  `;
+}
+
+/// ===== Scroll to evidence in conversation =====
+function scrollToEvidence(cssClassPrefix, idx) {
+  const targetCls = `${cssClassPrefix}-${idx}`;
+  const mark = document.querySelector(`.conversation-view mark.${targetCls}`);
+  if (!mark) return;
+
+  // Remove previous pulse from all marks
+  document.querySelectorAll('mark.evidence-pulse').forEach(m => m.classList.remove('evidence-pulse'));
+
+  // Scroll into view
+  mark.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+  // Add pulse animation
+  mark.classList.add('evidence-pulse');
+  setTimeout(() => mark.classList.remove('evidence-pulse'), 2000);
+}
+
+// ===== Render Distortions Card =====
+function renderDistortions(row) {
+  const { distortions } = parseAnnotations(row);
+  const el = document.getElementById('distortionsContent');
+  const dists = distortions?.distortions || [];
+
+  if (dists.length === 0) {
+    el.innerHTML = `
+      <div class="no-distortions">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        <span>No cognitive distortions detected</span>
+      </div>`;
+    return;
+  }
+
+  el.innerHTML = dists.map((d, idx) => {
+    const color = DIST_COLORS[idx % DIST_COLORS.length];
+    const quoteClean = (d.evidence_quote || '').replace(/^(listener|speaker):\s*/i, '');
+    return `
+      <div class="distortion-item" data-dist-idx="${idx}">
+        <div class="distortion-name">
+          <span class="dist-color-dot" style="background:${color}"></span>
+          ${d.cognitive_distortion || '—'}
+        </div>
+        ${quoteClean ? `<div class="distortion-quote" style="border-color:${color}">"${quoteClean}"</div>` : ''}
+        ${d.reasoning ? `<div class="distortion-reasoning">${d.reasoning}</div>` : ''}
+      </div>`;
+  }).join('');
+
+  // Click to scroll to evidence
+  el.querySelectorAll('.distortion-item').forEach(item => {
+    item.addEventListener('click', () => {
+      const idx = parseInt(item.dataset.distIdx);
+      scrollToEvidence('dist-hl', idx % 3);
+    });
+  });
+}
+
+// ===== Render Empathy Card =====
+function renderEmpathy(row) {
+  const { empathy } = parseAnnotations(row);
+  const el = document.getElementById('empathyContent');
+  const scoreEl = document.getElementById('overallScore');
+
+  if (!empathy) { el.innerHTML = '<p style="color:var(--text-muted);font-size:.8rem">No empathy annotation.</p>'; scoreEl.textContent = ''; return; }
+
+  const dims = empathy.empathy_dimensions || [];
+  const overall = empathy.overall_score;
+  scoreEl.textContent = overall !== undefined ? `${overall} / ${dims.length * 7}` : '';
+
+  el.innerHTML = dims.map((dim, idx) => {
+    const color = EMP_COLORS[idx % EMP_COLORS.length];
+    const score = dim.score || 0;
+    const pct = Math.min(100, (score / 7) * 100);
+    const sColor = scoreColor(score);
+    const quoteClean = (dim.evidence_quote || '').replace(/^(listener|speaker):\s*/i, '');
+    return `
+      <div class="empathy-item" data-emp-idx="${idx}">
+        <div class="empathy-item-header">
+          <span class="emp-color-dot" style="background:${color}"></span>
+          <span class="empathy-name">${dim.dimension_name || '—'}</span>
+          <div class="score-bar-container">
+            <div class="score-bar">
+              <div class="score-bar-fill" style="width:${pct}%;background:${sColor}"></div>
+            </div>
+            <span class="score-value" style="color:${sColor}">${score}</span>
+          </div>
+        </div>
+        ${quoteClean && quoteClean !== 'No evidence present'
+          ? `<div class="empathy-quote" style="border-color:${color}" title="${escapeAttr(quoteClean)}">"${quoteClean}"</div>`
+          : ''}
+        ${dim.reasoning ? `<div class="empathy-reasoning">${dim.reasoning}</div>` : ''}
+      </div>`;
+  }).join('');
+
+  // Click to expand reasoning + scroll to evidence
+  el.querySelectorAll('.empathy-item').forEach(item => {
+    item.addEventListener('click', () => {
+      item.classList.toggle('active');
+      const idx = parseInt(item.dataset.empIdx);
+      scrollToEvidence('emp-hl', idx % 9);
+    });
+  });
+}
+
+// ===== Tooltip =====
+function showMarkTooltip(event, mark, allQuotes) {
+  const tooltip = document.getElementById('tooltip');
+  const content = document.getElementById('tooltipContent');
+
+  const markQuote = mark.dataset.quote || '';
+  // Find matching annotation
+  const cls = Array.from(mark.classList).find(c => c.startsWith('dist-hl-') || c.startsWith('emp-hl-'));
+
+  const { distortions, empathy } = parseAnnotations(filteredData[currentIndex]);
+  let html = '';
+
+  if (cls && cls.startsWith('dist-hl-')) {
+    const idx = parseInt(cls.split('-').pop());
+    const d = (distortions?.distortions || [])[idx];
+    if (d) {
+      const color = DIST_COLORS[idx % DIST_COLORS.length];
+      html = `
+        <div class="tooltip-title" style="color:${color}">⚠️ ${d.cognitive_distortion || 'Distortion'}</div>
+        <div class="tooltip-label">Type</div>
+        <div class="tooltip-text">Cognitive Distortion</div>
+        <div class="tooltip-label">Reasoning</div>
+        <div class="tooltip-text">${d.reasoning || '—'}</div>
+      `;
+    }
+  } else if (cls && cls.startsWith('emp-hl-')) {
+    const idx = parseInt(cls.split('-').pop());
+    const dim = (empathy?.empathy_dimensions || [])[idx];
+    if (dim) {
+      const color = EMP_COLORS[idx % EMP_COLORS.length];
+      const sColor = scoreColor(dim.score || 0);
+      html = `
+        <div class="tooltip-title" style="color:${color}">💡 ${dim.dimension_name || 'Empathy'}</div>
+        <div class="tooltip-label">Score</div>
+        <span class="tooltip-score" style="background:${sColor}22;color:${sColor};border:1px solid ${sColor}44">${dim.score} / 7</span>
+        <div class="tooltip-label">Reasoning</div>
+        <div class="tooltip-text">${dim.reasoning || '—'}</div>
+      `;
+    }
+  }
+
+  if (!html) return;
+  content.innerHTML = html;
+  tooltip.classList.add('visible');
+
+  // Position tooltip
+  const rect = mark.getBoundingClientRect();
+  const tRect = tooltip.getBoundingClientRect();
+  let top = rect.bottom + 8;
+  let left = rect.left;
+  if (left + 320 > window.innerWidth) left = window.innerWidth - 330;
+  if (top + 200 > window.innerHeight) top = rect.top - 200;
+  tooltip.style.top = top + 'px';
+  tooltip.style.left = left + 'px';
+}
+
+function hideTooltip() {
+  const tooltip = document.getElementById('tooltip');
+  tooltip.classList.remove('visible');
+}
+
+// ===== Navigation =====
+function updateNavButtons() {
+  document.getElementById('prevBtn').disabled = currentIndex <= 0;
+  document.getElementById('nextBtn').disabled = currentIndex >= filteredData.length - 1;
+  document.getElementById('currentIdx').textContent = currentIndex + 1;
+  document.getElementById('totalSamples').textContent = filteredData.length;
+
+  // Update sidebar active
+  document.querySelectorAll('.sample-item').forEach(item => {
+    item.classList.toggle('active', parseInt(item.dataset.idx) === currentIndex);
+  });
+
+  // Scroll active into view
+  const activeItem = document.querySelector('.sample-item.active');
+  if (activeItem) activeItem.scrollIntoView({ block: 'nearest' });
+}
+
+function renderAll() {
+  if (filteredData.length === 0) return;
+  const row = filteredData[currentIndex];
+  renderConvHeader(row);
+  renderConversation(row);
+  renderEmotion(row);
+  renderDistortions(row);
+  renderEmpathy(row);
+  updateNavButtons();
+}
+
+// ===== Filter / Search =====
+function applyFilter(query) {
+  const q = query.toLowerCase().trim();
+  filteredData = q
+    ? allData.filter(row => {
+        const { emotion } = parseAnnotations(row);
+        const eName = (emotion?.primary_emotion || row['emotion_type'] || '').toLowerCase();
+        const prob = (row['problem_type'] || '').toLowerCase();
+        return eName.includes(q) || prob.includes(q);
+      })
+    : [...allData];
+  currentIndex = 0;
+  renderSampleList();
+  renderAll();
+}
+
+// ===== Load CSV =====
+function loadCSV(text) {
+  const rows = parseCSV(text);
+  const data = csvToObjects(rows);
+  allData = data.filter(d => d['conversation_cut']);
+  filteredData = [...allData];
+  currentIndex = 0;
+
+  document.getElementById('welcomeScreen').style.display = 'none';
+  document.getElementById('mainLayout').style.display = 'grid';
+  document.getElementById('sampleCounter').style.display = 'flex';
+  document.getElementById('navArrows').style.display = 'flex';
+  document.getElementById('fileLabel').textContent = `${allData.length} samples`;
+
+  renderSampleList();
+  renderAll();
+}
+
+// ===== Event Listeners =====
+document.addEventListener('DOMContentLoaded', () => {
+  const csvInput = document.getElementById('csvInput');
+  csvInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => loadCSV(ev.target.result);
+    reader.readAsText(file, 'UTF-8');
+  });
+
+  document.getElementById('prevBtn').addEventListener('click', () => {
+    if (currentIndex > 0) { currentIndex--; renderAll(); }
+  });
+  document.getElementById('nextBtn').addEventListener('click', () => {
+    if (currentIndex < filteredData.length - 1) { currentIndex++; renderAll(); }
+  });
+
+  document.getElementById('searchInput').addEventListener('input', (e) => {
+    applyFilter(e.target.value);
+  });
+
+  // Keyboard navigation
+  document.addEventListener('keydown', (e) => {
+    if (e.target.tagName === 'INPUT') return;
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      if (currentIndex > 0) { currentIndex--; renderAll(); }
+    }
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      if (currentIndex < filteredData.length - 1) { currentIndex++; renderAll(); }
+    }
+  });
+});

app.py

@@ -0,0 +1,472 @@
+"""Flask application for the ESConv Annotation Management System."""
+
+import os
+from datetime import datetime, timezone
+from functools import wraps
+
+import bcrypt
+from flask import (
+    Flask, jsonify, redirect, render_template, request, session, url_for
+)
+
+from models import db, User, CsvFile, Assignment, Review
+from csv_utils import parse_csv_file, count_samples, scan_csv_folder
+
+# ── Config ──────────────────────────────────────────────────────────────────
+BASE_DIR = os.path.abspath(os.path.dirname(__file__))
+CSV_FOLDER = os.environ.get('CSV_FOLDER', os.path.join(os.path.dirname(BASE_DIR), 'csv_data'))
+DB_PATH = os.environ.get('DB_PATH', os.path.join(BASE_DIR, 'annotation.db'))
+
+app = Flask(__name__)
+app.secret_key = os.environ.get('SECRET_KEY', 'esconv-annotation-secret-key-2024')
+app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{DB_PATH}'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+db.init_app(app)
+
+
+# ── Helpers ─────────────────────────────────────────────────────────────────
+def hash_password(pw):
+    return bcrypt.hashpw(pw.encode('utf-8'), bcrypt.gensalt()).decode('utf-8')
+
+
+def check_password(pw, hashed):
+    return bcrypt.checkpw(pw.encode('utf-8'), hashed.encode('utf-8'))
+
+
+def login_required(f):
+    @wraps(f)
+    def wrapper(*args, **kwargs):
+        if 'user_id' not in session:
+            if request.path.startswith('/api/'):
+                return jsonify({'error': 'Not authenticated'}), 401
+            return redirect(url_for('login_page'))
+        return f(*args, **kwargs)
+    return wrapper
+
+
+def admin_required(f):
+    @wraps(f)
+    def wrapper(*args, **kwargs):
+        if 'user_id' not in session:
+            if request.path.startswith('/api/'):
+                return jsonify({'error': 'Not authenticated'}), 401
+            return redirect(url_for('login_page'))
+        if session.get('role') != 'admin':
+            if request.path.startswith('/api/'):
+                return jsonify({'error': 'Admin access required'}), 403
+            return redirect(url_for('login_page'))
+        return f(*args, **kwargs)
+    return wrapper
+
+
+def sync_csv_files():
+    """Scan the CSV folder and sync with the database."""
+    os.makedirs(CSV_FOLDER, exist_ok=True)
+    disk_files = scan_csv_folder(CSV_FOLDER)
+    disk_names = {f['filename'] for f in disk_files}
+
+    # Add new files
+    for finfo in disk_files:
+        existing = CsvFile.query.filter_by(filename=finfo['filename']).first()
+        if not existing:
+            total = count_samples(finfo['filepath'])
+            new_file = CsvFile(
+                filename=finfo['filename'],
+                filepath=finfo['filepath'],
+                total_samples=total,
+            )
+            db.session.add(new_file)
+
+    # Remove DB entries for files no longer on disk
+    all_db_files = CsvFile.query.all()
+    for dbf in all_db_files:
+        if dbf.filename not in disk_names:
+            db.session.delete(dbf)
+
+    db.session.commit()
+
+
+# ── Auth Routes ─────────────────────────────────────────────────────────────
+@app.route('/login', methods=['GET'])
+def login_page():
+    if 'user_id' in session:
+        return redirect(url_for('dashboard'))
+    return render_template('login.html')
+
+
+@app.route('/api/login', methods=['POST'])
+def api_login():
+    data = request.get_json()
+    username = data.get('username', '').strip()
+    password = data.get('password', '')
+
+    user = User.query.filter_by(username=username).first()
+    if not user or not check_password(password, user.password_hash):
+        return jsonify({'error': 'Invalid username or password'}), 401
+
+    session['user_id'] = user.id
+    session['username'] = user.username
+    session['role'] = user.role
+    return jsonify({'ok': True, 'role': user.role, 'username': user.username})
+
+
+@app.route('/api/logout', methods=['POST'])
+def api_logout():
+    session.clear()
+    return jsonify({'ok': True})
+
+
+@app.route('/api/me')
+@login_required
+def api_me():
+    return jsonify({
+        'user_id': session['user_id'],
+        'username': session['username'],
+        'role': session['role'],
+    })
+
+
+# ── Page Routes ─────────────────────────────────────────────────────────────
+@app.route('/')
+@login_required
+def dashboard():
+    if session.get('role') == 'admin':
+        return redirect(url_for('admin_page'))
+    return redirect(url_for('annotator_page'))
+
+
+@app.route('/admin')
+@admin_required
+def admin_page():
+    return render_template('admin.html')
+
+
+@app.route('/annotator')
+@login_required
+def annotator_page():
+    return render_template('annotator.html')
+
+
+@app.route('/review/<int:assignment_id>')
+@login_required
+def review_page(assignment_id):
+    assignment = Assignment.query.get_or_404(assignment_id)
+    # Only the assigned user or admin can access
+    if session.get('role') != 'admin' and assignment.user_id != session['user_id']:
+        return redirect(url_for('dashboard'))
+    return render_template('review.html')
+
+
+# ── Admin API: Users ────────────────────────────────────────────────────────
+@app.route('/api/users', methods=['GET'])
+@admin_required
+def api_get_users():
+    users = User.query.order_by(User.created_at).all()
+    return jsonify([u.to_dict() for u in users])
+
+
+@app.route('/api/users', methods=['POST'])
+@admin_required
+def api_create_user():
+    data = request.get_json()
+    username = data.get('username', '').strip()
+    password = data.get('password', '')
+    role = data.get('role', 'annotator')
+
+    if not username or not password:
+        return jsonify({'error': 'Username and password required'}), 400
+    if len(password) < 4:
+        return jsonify({'error': 'Password must be at least 4 characters'}), 400
+    if role not in ('admin', 'annotator'):
+        return jsonify({'error': 'Invalid role'}), 400
+    if User.query.filter_by(username=username).first():
+        return jsonify({'error': 'Username already exists'}), 400
+
+    user = User(username=username, password_hash=hash_password(password), role=role)
+    db.session.add(user)
+    db.session.commit()
+    return jsonify(user.to_dict()), 201
+
+
+@app.route('/api/users/<int:user_id>', methods=['DELETE'])
+@admin_required
+def api_delete_user(user_id):
+    user = User.query.get_or_404(user_id)
+    if user.id == session['user_id']:
+        return jsonify({'error': 'Cannot delete yourself'}), 400
+    db.session.delete(user)
+    db.session.commit()
+    return jsonify({'ok': True})
+
+
+# ── Admin API: Files ────────────────────────────────────────────────────────
+@app.route('/api/files', methods=['GET'])
+@admin_required
+def api_get_files():
+    sync_csv_files()
+    files = CsvFile.query.order_by(CsvFile.filename).all()
+    result = []
+    for f in files:
+        d = f.to_dict()
+        # Count total reviews across all assignments for this file
+        total_reviews = (
+            db.session.query(Review)
+            .join(Assignment)
+            .filter(Assignment.file_id == f.id)
+            .count()
+        )
+        total_assignees = Assignment.query.filter_by(file_id=f.id).count()
+        d['total_reviews'] = total_reviews
+        d['total_assignees'] = total_assignees
+        result.append(d)
+    return jsonify(result)
+
+
+@app.route('/api/files/<int:file_id>/data', methods=['GET'])
+@login_required
+def api_get_file_data(file_id):
+    csv_file = CsvFile.query.get_or_404(file_id)
+    rows = parse_csv_file(csv_file.filepath)
+    return jsonify({'filename': csv_file.filename, 'samples': rows})
+
+
+# ── Admin API: Assignments ──────────────────────────────────────────────────
+@app.route('/api/assignments', methods=['GET'])
+@admin_required
+def api_get_assignments():
+    assignments = Assignment.query.order_by(Assignment.assigned_at.desc()).all()
+    return jsonify([a.to_dict() for a in assignments])
+
+
+@app.route('/api/assignments', methods=['POST'])
+@admin_required
+def api_create_assignment():
+    data = request.get_json()
+    user_id = data.get('user_id')
+    file_id = data.get('file_id')
+
+    if not user_id or not file_id:
+        return jsonify({'error': 'user_id and file_id required'}), 400
+
+    user = User.query.get(user_id)
+    csv_file = CsvFile.query.get(file_id)
+    if not user:
+        return jsonify({'error': 'User not found'}), 404
+    if not csv_file:
+        return jsonify({'error': 'File not found'}), 404
+
+    existing = Assignment.query.filter_by(user_id=user_id, file_id=file_id).first()
+    if existing:
+        return jsonify({'error': 'Assignment already exists'}), 400
+
+    assignment = Assignment(user_id=user_id, file_id=file_id)
+    db.session.add(assignment)
+    db.session.commit()
+    return jsonify(assignment.to_dict()), 201
+
+
+@app.route('/api/assignments/<int:assignment_id>', methods=['DELETE'])
+@admin_required
+def api_delete_assignment(assignment_id):
+    assignment = Assignment.query.get_or_404(assignment_id)
+    db.session.delete(assignment)
+    db.session.commit()
+    return jsonify({'ok': True})
+
+
+# ── Annotator API ───────────────────────────────────────────────────────────
+@app.route('/api/my-assignments', methods=['GET'])
+@login_required
+def api_my_assignments():
+    assignments = Assignment.query.filter_by(user_id=session['user_id']).all()
+    return jsonify([a.to_dict() for a in assignments])
+
+
+@app.route('/api/assignments/<int:assignment_id>/reviews', methods=['GET'])
+@login_required
+def api_get_reviews(assignment_id):
+    assignment = Assignment.query.get_or_404(assignment_id)
+    if session.get('role') != 'admin' and assignment.user_id != session['user_id']:
+        return jsonify({'error': 'Access denied'}), 403
+    reviews = Review.query.filter_by(assignment_id=assignment_id).all()
+    return jsonify({r.sample_index: r.to_dict() for r in reviews})
+
+
+@app.route('/api/reviews', methods=['POST'])
+@login_required
+def api_submit_review():
+    data = request.get_json()
+    assignment_id = data.get('assignment_id')
+    sample_index = data.get('sample_index')
+    status = data.get('status')  # 'accept' or 'reject'
+    comment = data.get('comment', '')
+
+    if not assignment_id or sample_index is None or status not in ('accept', 'reject'):
+        return jsonify({'error': 'assignment_id, sample_index, and valid status required'}), 400
+
+    assignment = Assignment.query.get(assignment_id)
+    if not assignment:
+        return jsonify({'error': 'Assignment not found'}), 404
+    if session.get('role') != 'admin' and assignment.user_id != session['user_id']:
+        return jsonify({'error': 'Access denied'}), 403
+
+    review = Review.query.filter_by(
+        assignment_id=assignment_id, sample_index=sample_index
+    ).first()
+
+    if review:
+        review.status = status
+        review.comment = comment
+        review.reviewed_at = datetime.now(timezone.utc)
+    else:
+        review = Review(
+            assignment_id=assignment_id,
+            sample_index=sample_index,
+            status=status,
+            comment=comment,
+        )
+        db.session.add(review)
+
+    db.session.commit()
+    return jsonify(review.to_dict())
+
+
+@app.route('/api/reviews/annotations', methods=['PATCH'])
+@login_required
+def api_save_annotations():
+    """Save annotator-edited annotations for a specific sample."""
+    import json as _json
+    data = request.get_json()
+    assignment_id = data.get('assignment_id')
+    sample_index = data.get('sample_index')
+    annotations = data.get('annotations')  # dict: {emotion, distortions, empathy}
+
+    if not assignment_id or sample_index is None or annotations is None:
+        return jsonify({'error': 'assignment_id, sample_index, and annotations required'}), 400
+
+    assignment = Assignment.query.get(assignment_id)
+    if not assignment:
+        return jsonify({'error': 'Assignment not found'}), 404
+    if session.get('role') != 'admin' and assignment.user_id != session['user_id']:
+        return jsonify({'error': 'Access denied'}), 403
+
+    # Upsert review — annotations can be saved without status yet (use 'pending' placeholder)
+    review = Review.query.filter_by(
+        assignment_id=assignment_id, sample_index=sample_index
+    ).first()
+
+    if review:
+        review.annotations_edit = _json.dumps(annotations, ensure_ascii=False)
+        review.reviewed_at = datetime.now(timezone.utc)
+    else:
+        # Create a minimal review record to hold the annotation edits
+        review = Review(
+            assignment_id=assignment_id,
+            sample_index=sample_index,
+            status='reject',  # default, annotator must explicitly submit verdict
+            comment='',
+            annotations_edit=_json.dumps(annotations, ensure_ascii=False),
+        )
+        db.session.add(review)
+
+    db.session.commit()
+    return jsonify(review.to_dict())
+
+
+
+# ── Export API ──────────────────────────────────────────────────────────────
+@app.route('/api/assignments/<int:assignment_id>/export', methods=['GET'])
+@login_required
+def api_export(assignment_id):
+    """Export reviewed data as JSON or CSV."""
+    import json as _json
+    import csv
+    import io
+
+    fmt = request.args.get('format', 'json')  # 'json' or 'csv'
+    assignment = Assignment.query.get_or_404(assignment_id)
+    if session.get('role') != 'admin' and assignment.user_id != session['user_id']:
+        return jsonify({'error': 'Access denied'}), 403
+
+    csv_file = assignment.csv_file
+    rows = parse_csv_file(csv_file.filepath)
+    reviews = {r.sample_index: r for r in Review.query.filter_by(assignment_id=assignment_id).all()}
+
+    export_rows = []
+    for i, row in enumerate(rows):
+        review = reviews.get(i)
+        # Get effective annotations (edited or original)
+        if review and review.annotations_edit:
+            anno = _json.loads(review.annotations_edit)
+        else:
+            anno = {
+                'emotion': _json.loads(row.get('Emotion', 'null')) if row.get('Emotion') else None,
+                'distortions': _json.loads(row.get('Distortions', 'null')) if row.get('Distortions') else None,
+                'empathy': _json.loads(row.get('Empathy_Level', 'null')) if row.get('Empathy_Level') else None,
+            }
+
+        export_rows.append({
+            'sample_index': i,
+            'conversation_cut': row.get('conversation_cut', ''),
+            'emotion_type': row.get('emotion_type', ''),
+            'problem_type': row.get('problem_type', ''),
+            'Emotion': anno.get('emotion'),
+            'Distortions': anno.get('distortions'),
+            'Empathy_Level': anno.get('empathy'),
+            'review_status': review.status if review else 'pending',
+            'review_comment': review.comment if review else '',
+            'is_edited': bool(review and review.annotations_edit),
+        })
+
+    if fmt == 'csv':
+        output = io.StringIO()
+        writer = csv.writer(output)
+        writer.writerow([
+            'sample_index', 'conversation_cut', 'emotion_type', 'problem_type',
+            'Emotion', 'Distortions', 'Empathy_Level',
+            'review_status', 'review_comment', 'is_edited'
+        ])
+        for r in export_rows:
+            writer.writerow([
+                r['sample_index'], r['conversation_cut'], r['emotion_type'], r['problem_type'],
+                _json.dumps(r['Emotion'], ensure_ascii=False) if r['Emotion'] else '',
+                _json.dumps(r['Distortions'], ensure_ascii=False) if r['Distortions'] else '',
+                _json.dumps(r['Empathy_Level'], ensure_ascii=False) if r['Empathy_Level'] else '',
+                r['review_status'], r['review_comment'], r['is_edited'],
+            ])
+        resp = app.response_class(
+            output.getvalue(),
+            mimetype='text/csv',
+            headers={'Content-Disposition': f'attachment; filename=export_{csv_file.filename}'}
+        )
+        return resp
+    else:
+        return jsonify(export_rows)
+
+# ── Init DB ─────────────────────────────────────────────────────────────────
+def init_db():
+    """Create tables and seed admin user."""
+    db.create_all()
+    if not User.query.filter_by(username='admin').first():
+        admin = User(
+            username='admin',
+            password_hash=hash_password('admin123'),
+            role='admin',
+        )
+        db.session.add(admin)
+        db.session.commit()
+        print('  ✓ Created default admin user (admin / admin123)')
+
+    # Initial CSV scan
+    os.makedirs(CSV_FOLDER, exist_ok=True)
+    sync_csv_files()
+    file_count = CsvFile.query.count()
+    print(f'  ✓ Found {file_count} CSV file(s) in {CSV_FOLDER}')
+
+
+if __name__ == '__main__':
+    with app.app_context():
+        init_db()
+    print(f'\n  🚀 Server running at http://localhost:5000\n')
+    app.run(debug=True, host='0.0.0.0', port=5000)

csv_utils.py

@@ -0,0 +1,52 @@
+"""CSV parsing utilities for the Annotation Management System."""
+
+import csv
+import json
+import os
+
+
+def parse_csv_file(filepath):
+    """Parse a CSV file and return list of row dicts with only conversation samples."""
+    rows = []
+    with open(filepath, 'r', encoding='utf-8') as f:
+        reader = csv.DictReader(f)
+        for row in reader:
+            # Only include rows that have conversation_cut data
+            if row.get('conversation_cut', '').strip():
+                rows.append(dict(row))
+    return rows
+
+
+def count_samples(filepath):
+    """Count the number of valid conversation samples in a CSV file."""
+    count = 0
+    with open(filepath, 'r', encoding='utf-8') as f:
+        reader = csv.DictReader(f)
+        for row in reader:
+            if row.get('conversation_cut', '').strip():
+                count += 1
+    return count
+
+
+def get_sample(filepath, index):
+    """Get a specific sample by index from a CSV file."""
+    rows = parse_csv_file(filepath)
+    if 0 <= index < len(rows):
+        return rows[index]
+    return None
+
+
+def scan_csv_folder(folder_path):
+    """Scan a folder and return list of CSV file info dicts."""
+    files = []
+    if not os.path.isdir(folder_path):
+        return files
+    for fname in sorted(os.listdir(folder_path)):
+        if fname.lower().endswith('.csv'):
+            fpath = os.path.join(folder_path, fname)
+            files.append({
+                'filename': fname,
+                'filepath': fpath,
+                'size_bytes': os.path.getsize(fpath),
+            })
+    return files

index.html

@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ESConv Annotation Review Tool</title>
+  <meta name="description" content="Review and validate LLM-generated annotations for emotional support conversations including Emotion, Cognitive Distortions, and Empathy Level dimensions." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <!-- Header -->
+  <header class="header">
+    <div class="header-inner">
+      <div class="header-logo">
+        <div class="logo-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        </div>
+        <div>
+          <h1>ESConv Annotation Review</h1>
+          <p>LLM Annotation Quality Assessment</p>
+        </div>
+      </div>
+      <div class="header-controls">
+        <div class="file-upload-area" id="fileUploadArea">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
+          </svg>
+          <span id="fileLabel">Load CSV File</span>
+          <input type="file" id="csvInput" accept=".csv" />
+        </div>
+        <div class="sample-counter" id="sampleCounter" style="display:none">
+          <span id="currentIdx">1</span> / <span id="totalSamples">0</span>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <!-- Main Layout -->
+  <main class="main-layout" id="mainLayout" style="display:none">
+
+    <!-- Left: Navigation Panel -->
+    <aside class="nav-panel">
+      <div class="nav-panel-header">
+        <h2>Samples</h2>
+        <div class="search-box">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
+          </svg>
+          <input type="text" id="searchInput" placeholder="Filter by emotion..." />
+        </div>
+      </div>
+      <div class="sample-list" id="sampleList"></div>
+    </aside>
+
+    <!-- Center: Conversation View -->
+    <section class="conversation-panel">
+      <div class="conv-header">
+        <div class="conv-meta" id="convMeta"></div>
+        <div class="legend">
+          <span class="legend-item"><span class="legend-dot speaker"></span>Speaker</span>
+          <span class="legend-item"><span class="legend-dot listener"></span>Listener</span>
+        </div>
+      </div>
+      <div class="conversation-view" id="conversationView"></div>
+    </section>
+
+    <!-- Right: Annotation Panel -->
+    <aside class="annotation-panel">
+      <!-- Emotion Card -->
+      <div class="anno-card" id="emotionCard">
+        <div class="anno-card-header">
+          <div class="anno-card-icon emotion-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/>
+            </svg>
+          </div>
+          <h3>Emotion Analysis</h3>
+        </div>
+        <div id="emotionContent" class="anno-content"></div>
+      </div>
+
+      <!-- Distortions Card -->
+      <div class="anno-card" id="distortionsCard">
+        <div class="anno-card-header">
+          <div class="anno-card-icon distortion-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
+            </svg>
+          </div>
+          <h3>Cognitive Distortions</h3>
+        </div>
+        <div id="distortionsContent" class="anno-content"></div>
+      </div>
+
+      <!-- Empathy Card -->
+      <div class="anno-card" id="empathyCard">
+        <div class="anno-card-header">
+          <div class="anno-card-icon empathy-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
+            </svg>
+          </div>
+          <h3>Empathy Level</h3>
+          <div class="overall-score" id="overallScore"></div>
+        </div>
+        <div id="empathyContent" class="anno-content"></div>
+      </div>
+    </aside>
+  </main>
+
+  <!-- Welcome Screen -->
+  <div class="welcome-screen" id="welcomeScreen">
+    <div class="welcome-card">
+      <div class="welcome-icon">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+      </div>
+      <h2>Welcome to ESConv Annotation Review</h2>
+      <p>Load your annotated CSV file to begin reviewing LLM-generated labels for emotional support conversations.</p>
+      <div class="welcome-features">
+        <div class="feature-item">
+          <span class="feature-dot" style="background: var(--emotion-color)"></span>
+          <span>Emotion classification with intensity</span>
+        </div>
+        <div class="feature-item">
+          <span class="feature-dot" style="background: var(--distortion-color)"></span>
+          <span>Cognitive distortion detection</span>
+        </div>
+        <div class="feature-item">
+          <span class="feature-dot" style="background: var(--empathy-color)"></span>
+          <span>Multi-dimensional empathy scoring</span>
+        </div>
+        <div class="feature-item">
+          <span class="feature-dot" style="background: var(--highlight-color)"></span>
+          <span>Interactive evidence highlighting</span>
+        </div>
+      </div>
+      <label class="welcome-upload-btn" for="csvInput">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
+        </svg>
+        Load CSV File
+      </label>
+    </div>
+  </div>
+
+  <!-- Tooltip -->
+  <div class="tooltip" id="tooltip">
+    <div class="tooltip-arrow"></div>
+    <div class="tooltip-content" id="tooltipContent"></div>
+  </div>
+
+  <!-- Navigation Arrows -->
+  <div class="nav-arrows" id="navArrows" style="display:none">
+    <button class="nav-btn" id="prevBtn" title="Previous sample">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M15 18l-6-6 6-6"/>
+      </svg>
+    </button>
+    <button class="nav-btn" id="nextBtn" title="Next sample">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M9 18l6-6-6-6"/>
+      </svg>
+    </button>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>

models.py

@@ -0,0 +1,102 @@
+"""SQLAlchemy models for the Annotation Management System."""
+
+from datetime import datetime, timezone
+from flask_sqlalchemy import SQLAlchemy
+
+db = SQLAlchemy()
+
+
+class User(db.Model):
+    __tablename__ = 'users'
+
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(80), unique=True, nullable=False)
+    password_hash = db.Column(db.String(128), nullable=False)
+    role = db.Column(db.String(20), nullable=False, default='annotator')  # 'admin' or 'annotator'
+    created_at = db.Column(db.DateTime, default=lambda: datetime.now(timezone.utc))
+
+    assignments = db.relationship('Assignment', backref='user', lazy=True, cascade='all, delete-orphan')
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'username': self.username,
+            'role': self.role,
+            'created_at': self.created_at.isoformat() if self.created_at else None,
+        }
+
+
+class CsvFile(db.Model):
+    __tablename__ = 'csv_files'
+
+    id = db.Column(db.Integer, primary_key=True)
+    filename = db.Column(db.String(255), unique=True, nullable=False)
+    filepath = db.Column(db.String(512), nullable=False)
+    total_samples = db.Column(db.Integer, default=0)
+    created_at = db.Column(db.DateTime, default=lambda: datetime.now(timezone.utc))
+
+    assignments = db.relationship('Assignment', backref='csv_file', lazy=True, cascade='all, delete-orphan')
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'filename': self.filename,
+            'total_samples': self.total_samples,
+            'created_at': self.created_at.isoformat() if self.created_at else None,
+        }
+
+
+class Assignment(db.Model):
+    __tablename__ = 'assignments'
+
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
+    file_id = db.Column(db.Integer, db.ForeignKey('csv_files.id'), nullable=False)
+    assigned_at = db.Column(db.DateTime, default=lambda: datetime.now(timezone.utc))
+
+    reviews = db.relationship('Review', backref='assignment', lazy=True, cascade='all, delete-orphan')
+
+    # Prevent duplicate assignments
+    __table_args__ = (db.UniqueConstraint('user_id', 'file_id', name='uq_user_file'),)
+
+    def to_dict(self):
+        reviewed_count = Review.query.filter_by(assignment_id=self.id).count()
+        total = self.csv_file.total_samples if self.csv_file else 0
+        return {
+            'id': self.id,
+            'user_id': self.user_id,
+            'username': self.user.username if self.user else None,
+            'file_id': self.file_id,
+            'filename': self.csv_file.filename if self.csv_file else None,
+            'total_samples': total,
+            'reviewed_count': reviewed_count,
+            'progress': round((reviewed_count / total * 100), 1) if total > 0 else 0,
+            'assigned_at': self.assigned_at.isoformat() if self.assigned_at else None,
+        }
+
+
+class Review(db.Model):
+    __tablename__ = 'reviews'
+
+    id = db.Column(db.Integer, primary_key=True)
+    assignment_id = db.Column(db.Integer, db.ForeignKey('assignments.id'), nullable=False)
+    sample_index = db.Column(db.Integer, nullable=False)
+    status = db.Column(db.String(20), nullable=False)  # 'accept' or 'reject'
+    comment = db.Column(db.Text, default='')
+    # JSON string storing annotator-edited annotation data (emotion/distortions/empathy)
+    annotations_edit = db.Column(db.Text, default=None)
+    reviewed_at = db.Column(db.DateTime, default=lambda: datetime.now(timezone.utc))
+
+    # One review per sample per assignment
+    __table_args__ = (db.UniqueConstraint('assignment_id', 'sample_index', name='uq_assignment_sample'),)
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'assignment_id': self.assignment_id,
+            'sample_index': self.sample_index,
+            'status': self.status,
+            'comment': self.comment,
+            'annotations_edit': self.annotations_edit,  # raw JSON string
+            'reviewed_at': self.reviewed_at.isoformat() if self.reviewed_at else None,
+        }

requirements.txt

@@ -0,0 +1,4 @@
+flask
+flask-sqlalchemy
+bcrypt
+gunicorn

static/admin.css

@@ -0,0 +1,516 @@
+/* ===== Admin/Annotator Dashboard Styles ===== */
+.admin-main {
+  margin-top: var(--header-h);
+  padding: 24px 32px;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  min-height: calc(100vh - var(--header-h));
+  overflow-y: auto;
+}
+
+/* User badge in header */
+.user-badge {
+  padding: 4px 12px;
+  background: rgba(88,166,255,.1);
+  border: 1px solid rgba(88,166,255,.25);
+  border-radius: 20px;
+  font-size: .78rem;
+  font-weight: 600;
+  color: var(--accent);
+}
+.logout-btn {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 14px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: .8rem;
+  cursor: pointer;
+  transition: all .2s;
+}
+.logout-btn:hover { border-color: #f87171; color: #f87171; }
+
+/* Tab Navigation */
+.tab-nav {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0;
+}
+.tab-btn {
+  padding: 10px 20px;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-muted);
+  font-size: .85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all .2s;
+  font-family: inherit;
+}
+.tab-btn:hover { color: var(--text-primary); }
+.tab-btn.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+/* Tab Content */
+.tab-content { display: none; }
+.tab-content.active { display: block; }
+
+/* Section Header */
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.section-header h2 {
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+.section-header p {
+  font-size: .8rem;
+  color: var(--text-muted);
+  margin-left: 12px;
+}
+.section-header p code {
+  background: var(--bg-card);
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: .75rem;
+  color: var(--accent);
+}
+
+/* Buttons */
+.primary-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, var(--accent), #388bfd);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: .82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity .2s;
+  font-family: inherit;
+}
+.primary-btn:hover { opacity: .85; }
+.ghost-btn {
+  padding: 8px 16px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: .82rem;
+  cursor: pointer;
+  transition: all .2s;
+  font-family: inherit;
+}
+.ghost-btn:hover { border-color: var(--text-muted); }
+.danger-btn {
+  padding: 4px 10px;
+  background: rgba(248,113,113,.1);
+  border: 1px solid rgba(248,113,113,.25);
+  border-radius: var(--radius-sm);
+  color: #f87171;
+  font-size: .75rem;
+  cursor: pointer;
+  transition: all .2s;
+  font-family: inherit;
+}
+.danger-btn:hover { background: rgba(248,113,113,.2); }
+
+/* Create Forms */
+.create-form {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 18px;
+  margin-bottom: 20px;
+}
+.form-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.form-row input, .form-row select {
+  padding: 8px 12px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: .85rem;
+  outline: none;
+  min-width: 140px;
+  font-family: inherit;
+}
+.form-row input:focus, .form-row select:focus { border-color: var(--accent); }
+.form-error {
+  color: #f87171;
+  font-size: .78rem;
+  margin-top: 8px;
+  min-height: 1em;
+}
+
+/* Data Table */
+.table-container { overflow-x: auto; }
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: .85rem;
+}
+.data-table th {
+  text-align: left;
+  padding: 10px 14px;
+  background: var(--bg-card);
+  color: var(--text-muted);
+  font-size: .72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  border-bottom: 1px solid var(--border);
+}
+.data-table td {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-light);
+  color: var(--text-secondary);
+}
+.data-table tbody tr:hover { background: var(--bg-hover); }
+.role-badge {
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: .72rem;
+  font-weight: 600;
+}
+.role-admin { background: rgba(167,139,250,.12); color: #a78bfa; }
+.role-annotator { background: rgba(52,211,153,.12); color: #34d399; }
+
+/* File Cards */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 14px;
+}
+.file-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px;
+  cursor: pointer;
+  transition: all .2s;
+}
+.file-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
+.file-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+.file-card-name {
+  font-weight: 600;
+  font-size: .85rem;
+  word-break: break-all;
+}
+.file-card-stats {
+  display: flex;
+  justify-content: space-between;
+  font-size: .78rem;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+.progress-bar {
+  height: 5px;
+  background: var(--border);
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+.progress-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width .4s ease;
+}
+.completed-badge {
+  font-size: .75rem;
+  color: #34d399;
+  font-weight: 600;
+  text-align: center;
+}
+.continue-badge {
+  font-size: .75rem;
+  color: var(--accent);
+  font-weight: 600;
+  text-align: center;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--text-muted);
+}
+
+/* Progress in table */
+.progress-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.progress-cell .progress-bar {
+  width: 80px;
+  margin-bottom: 0;
+}
+.progress-text {
+  font-size: .75rem;
+  font-variant-numeric: tabular-nums;
+  min-width: 60px;
+}
+
+/* Review controls on review page */
+.review-card { border-color: rgba(88,166,255,.3); }
+.review-buttons {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.review-btn {
+  flex: 1;
+  padding: 10px;
+  border: 2px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  font-size: .85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all .15s;
+  font-family: inherit;
+}
+.accept-btn { color: var(--text-muted); }
+.accept-btn:hover, .accept-btn.active {
+  border-color: #34d399;
+  background: rgba(52,211,153,.1);
+  color: #34d399;
+}
+.reject-btn { color: var(--text-muted); }
+.reject-btn:hover, .reject-btn.active {
+  border-color: #f87171;
+  background: rgba(248,113,113,.1);
+  color: #f87171;
+}
+.review-comment {
+  width: 100%;
+  padding: 10px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: .8rem;
+  font-family: inherit;
+  resize: vertical;
+  outline: none;
+  margin-bottom: 10px;
+}
+.review-comment:focus { border-color: var(--accent); }
+.submit-review-btn {
+  width: 100%;
+  padding: 10px;
+  background: linear-gradient(135deg, var(--accent), #388bfd);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  font-size: .85rem;
+  cursor: pointer;
+  transition: opacity .2s;
+  font-family: inherit;
+}
+.submit-review-btn:hover { opacity: .85; }
+.submit-review-btn:disabled { opacity: .4; cursor: not-allowed; }
+.review-status-badge {
+  margin-left: auto;
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: .72rem;
+  font-weight: 700;
+}
+.review-status-accept { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.3); }
+.review-status-reject { background: rgba(248,113,113,.12); color: #f87171; border: 1px solid rgba(248,113,113,.3); }
+
+/* Sample list review status dots */
+.sample-review-dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-left: 4px;
+}
+.dot-accept { background: #34d399; }
+.dot-reject { background: #f87171; }
+.dot-pending { background: var(--border); }
+
+/* ===== Edit Mode Styles ===== */
+.edit-toggle-btn {
+  margin-left: auto;
+  padding: 3px 10px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: .72rem;
+  cursor: pointer;
+  transition: all .15s;
+  font-family: inherit;
+  display: flex; align-items: center; gap: 4px;
+}
+.edit-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
+.edit-toggle-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(88,166,255,.1); }
+
+.edited-badge {
+  padding: 2px 8px;
+  background: rgba(251,191,36,.12);
+  border: 1px solid rgba(251,191,36,.3);
+  border-radius: 10px;
+  font-size: .65rem;
+  font-weight: 700;
+  color: #fbbf24;
+}
+
+/* Inline edit inputs */
+.edit-field {
+  width: 100%;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: .82rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color .15s;
+}
+.edit-field:focus { border-color: var(--accent); }
+input.edit-field { padding: 5px 9px; }
+textarea.edit-field { padding: 6px 9px; resize: vertical; }
+select.edit-field { padding: 5px 9px; }
+
+.edit-row {
+  display: flex; align-items: center; gap: 6px;
+  margin-bottom: 6px;
+}
+.edit-label {
+  font-size: .68rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  font-weight: 600;
+  margin-bottom: 3px;
+}
+.edit-group { margin-bottom: 8px; }
+.edit-group:last-child { margin-bottom: 0; }
+
+/* Evidence select mode */
+.select-evidence-btn {
+  padding: 4px 10px;
+  background: rgba(251,191,36,.1);
+  border: 1px solid rgba(251,191,36,.3);
+  border-radius: var(--radius-sm);
+  color: #fbbf24;
+  font-size: .72rem;
+  cursor: pointer;
+  font-family: inherit;
+  white-space: nowrap;
+  transition: all .15s;
+  flex-shrink: 0;
+}
+.select-evidence-btn:hover { background: rgba(251,191,36,.2); }
+.select-evidence-btn.selecting { background: rgba(251,191,36,.25); border-color: #fbbf24; animation: pulse-border .8s infinite; }
+@keyframes pulse-border { 0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,.4); } 50% { box-shadow: 0 0 0 4px rgba(251,191,36,0); } }
+
+/* Conversation selection mode overlay */
+.conversation-panel.selecting-mode .conversation-view {
+  cursor: text;
+  outline: 2px dashed rgba(251,191,36,.5);
+  outline-offset: -4px;
+}
+.selection-hint {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: rgba(251,191,36,.15);
+  border: 1px solid rgba(251,191,36,.4);
+  border-radius: var(--radius-sm);
+  padding: 6px 12px;
+  font-size: .78rem;
+  color: #fbbf24;
+  text-align: center;
+  margin-bottom: 8px;
+  display: none;
+}
+.selection-hint.visible { display: block; }
+
+/* Distortion edit item */
+.distortion-item.editing {
+  border-color: var(--distortion-color);
+  background: var(--distortion-bg);
+}
+.empathy-item.editing {
+  border-color: rgba(52,211,153,.5);
+  background: rgba(52,211,153,.08);
+}
+
+/* Score slider */
+.score-slider { width: 100%; accent-color: var(--empathy-color); }
+.score-display { font-weight: 700; font-size: .85rem; min-width: 20px; }
+
+/* Add/remove item buttons */
+.add-item-btn {
+  width: 100%; padding: 7px;
+  background: transparent;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: .78rem;
+  cursor: pointer; font-family: inherit;
+  transition: all .15s;
+  margin-top: 6px;
+}
+.add-item-btn:hover { border-color: var(--accent); color: var(--accent); }
+.remove-item-btn {
+  padding: 2px 7px;
+  background: rgba(248,113,113,.08);
+  border: 1px solid rgba(248,113,113,.2);
+  border-radius: 4px;
+  color: #f87171;
+  font-size: .7rem;
+  cursor: pointer; font-family: inherit;
+  flex-shrink: 0;
+}
+
+/* Save annotation button */
+.save-anno-btn {
+  width: 100%; padding: 8px;
+  background: linear-gradient(135deg,#fbbf24,#f59e0b);
+  color: #1a1200;
+  border: none; border-radius: var(--radius-sm);
+  font-weight: 700; font-size: .82rem;
+  cursor: pointer; font-family: inherit;
+  margin-top: 8px; transition: opacity .15s;
+}
+.save-anno-btn:hover { opacity: .9; }
+.save-anno-btn.saved { background: linear-gradient(135deg,#34d399,#059669); color: #fff; }
+
+.reset-anno-btn {
+  width: 100%; padding: 6px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: .75rem; cursor: pointer; font-family: inherit;
+  margin-top: 4px; transition: all .15s;
+}
+.reset-anno-btn:hover { border-color: #f87171; color: #f87171; }

static/admin.js

@@ -0,0 +1,190 @@
+// ===== Admin Dashboard JS =====
+
+// ── Tab switching ──
+document.querySelectorAll('.tab-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+    btn.classList.add('active');
+    document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
+  });
+});
+
+// ── Logout ──
+document.getElementById('logoutBtn').addEventListener('click', async () => {
+  await fetch('/api/logout', { method: 'POST' });
+  window.location.href = '/login';
+});
+
+// ── User info ──
+fetch('/api/me').then(r => r.json()).then(u => {
+  document.getElementById('userBadge').textContent = u.username;
+});
+
+// ── State ──
+let allUsers = [];
+let allFiles = [];
+
+// ── Files ──
+async function loadFiles() {
+  const res = await fetch('/api/files');
+  allFiles = await res.json();
+  const grid = document.getElementById('filesList');
+  if (allFiles.length === 0) {
+    grid.innerHTML = '<div class="empty-state"><p>No CSV files found in the data folder.</p></div>';
+    return;
+  }
+  grid.innerHTML = allFiles.map(f => {
+    return `
+      <div class="file-card" style="cursor:default">
+        <div class="file-card-header">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--accent);flex-shrink:0">
+            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+          </svg>
+          <span class="file-card-name">${f.filename}</span>
+        </div>
+        <div class="file-card-stats">
+          <span>${f.total_samples} samples</span>
+          <span>${f.total_assignees} assignee(s)</span>
+        </div>
+        <div class="file-card-stats" style="margin-top:4px">
+          <span>${f.total_reviews} total reviews</span>
+        </div>
+      </div>`;
+  }).join('');
+}
+
+// ── Users ──
+async function loadUsers() {
+  const res = await fetch('/api/users');
+  allUsers = await res.json();
+  const tbody = document.getElementById('usersBody');
+  tbody.innerHTML = allUsers.map(u => {
+    const roleClass = u.role === 'admin' ? 'role-admin' : 'role-annotator';
+    const created = u.created_at ? new Date(u.created_at).toLocaleDateString() : '—';
+    return `<tr>
+      <td>${u.id}</td>
+      <td style="font-weight:600;color:var(--text-primary)">${u.username}</td>
+      <td><span class="role-badge ${roleClass}">${u.role}</span></td>
+      <td>${created}</td>
+      <td>${u.role !== 'admin' ? `<button class="danger-btn" onclick="deleteUser(${u.id})">Delete</button>` : '—'}</td>
+    </tr>`;
+  }).join('');
+}
+
+// ── Create User ──
+document.getElementById('addUserBtn').addEventListener('click', () => {
+  document.getElementById('createUserForm').style.display = 'block';
+  document.getElementById('newUsername').focus();
+});
+document.getElementById('cancelUserBtn').addEventListener('click', () => {
+  document.getElementById('createUserForm').style.display = 'none';
+  document.getElementById('userFormError').textContent = '';
+});
+document.getElementById('submitUserBtn').addEventListener('click', async () => {
+  const username = document.getElementById('newUsername').value.trim();
+  const password = document.getElementById('newPassword').value;
+  const role = document.getElementById('newRole').value;
+  const errEl = document.getElementById('userFormError');
+  errEl.textContent = '';
+  const res = await fetch('/api/users', {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ username, password, role })
+  });
+  const data = await res.json();
+  if (!res.ok) { errEl.textContent = data.error; return; }
+  document.getElementById('createUserForm').style.display = 'none';
+  document.getElementById('newUsername').value = '';
+  document.getElementById('newPassword').value = '';
+  loadUsers();
+  loadAssignDropdowns();
+});
+
+async function deleteUser(id) {
+  if (!confirm('Delete this user?')) return;
+  await fetch(`/api/users/${id}`, { method: 'DELETE' });
+  loadUsers();
+  loadAssignments();
+}
+
+// ── Assignments ──
+async function loadAssignments() {
+  const res = await fetch('/api/assignments');
+  const data = await res.json();
+  const tbody = document.getElementById('assignBody');
+  if (data.length === 0) {
+    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--text-muted)">No assignments yet</td></tr>';
+    return;
+  }
+  tbody.innerHTML = data.map(a => {
+    const pct = a.progress;
+    const barColor = pct >= 100 ? '#34d399' : pct > 50 ? '#fbbf24' : '#60a5fa';
+    const date = a.assigned_at ? new Date(a.assigned_at).toLocaleDateString() : '—';
+    return `<tr>
+      <td style="font-weight:600;color:var(--text-primary)">${a.username}</td>
+      <td>${a.filename}</td>
+      <td>
+        <div class="progress-cell">
+          <div class="progress-bar"><div class="progress-fill" style="width:${pct}%;background:${barColor}"></div></div>
+          <span class="progress-text" style="color:${barColor}">${a.reviewed_count}/${a.total_samples} (${pct}%)</span>
+        </div>
+      </td>
+      <td>${date}</td>
+      <td>
+        <button class="danger-btn" onclick="deleteAssignment(${a.id})">Remove</button>
+      </td>
+    </tr>`;
+  }).join('');
+}
+
+async function loadAssignDropdowns() {
+  // Populate user dropdown
+  const userSel = document.getElementById('assignUser');
+  const fileSel = document.getElementById('assignFile');
+  const usersRes = await fetch('/api/users');
+  const users = await usersRes.json();
+  const filesRes = await fetch('/api/files');
+  const files = await filesRes.json();
+  userSel.innerHTML = '<option value="">Select User...</option>' +
+    users.filter(u => u.role === 'annotator').map(u => `<option value="${u.id}">${u.username}</option>`).join('');
+  fileSel.innerHTML = '<option value="">Select File...</option>' +
+    files.map(f => `<option value="${f.id}">${f.filename} (${f.total_samples} samples)</option>`).join('');
+}
+
+document.getElementById('addAssignBtn').addEventListener('click', () => {
+  document.getElementById('createAssignForm').style.display = 'block';
+  loadAssignDropdowns();
+});
+document.getElementById('cancelAssignBtn').addEventListener('click', () => {
+  document.getElementById('createAssignForm').style.display = 'none';
+  document.getElementById('assignFormError').textContent = '';
+});
+document.getElementById('submitAssignBtn').addEventListener('click', async () => {
+  const user_id = document.getElementById('assignUser').value;
+  const file_id = document.getElementById('assignFile').value;
+  const errEl = document.getElementById('assignFormError');
+  errEl.textContent = '';
+  if (!user_id || !file_id) { errEl.textContent = 'Select both user and file'; return; }
+  const res = await fetch('/api/assignments', {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ user_id: parseInt(user_id), file_id: parseInt(file_id) })
+  });
+  const data = await res.json();
+  if (!res.ok) { errEl.textContent = data.error; return; }
+  document.getElementById('createAssignForm').style.display = 'none';
+  loadAssignments();
+  loadFiles();
+});
+
+async function deleteAssignment(id) {
+  if (!confirm('Remove this assignment?')) return;
+  await fetch(`/api/assignments/${id}`, { method: 'DELETE' });
+  loadAssignments();
+  loadFiles();
+}
+
+// ── Init ──
+loadFiles();
+loadUsers();
+loadAssignments();

static/app.js

@@ -0,0 +1,675 @@
+// ===== State =====
+let allData=[], filteredData=[], currentIndex=0;
+let assignmentId=null, reviewsMap={}, currentReviewStatus=null;
+let editMode={emotion:false, distortions:false, empathy:false};
+let editData={emotion:null, distortions:null, empathy:null}; // working copies
+let selectingEvidence=null; // {card, itemIdx, field}
+
+const DIST_COLORS=['#fb923c','#f87171','#fbbf24','#a78bfa','#34d399'];
+const EMP_COLORS=['#60a5fa','#a78bfa','#34d399','#fbbf24','#fb923c','#f87171','#818cf8','#2dd4bf','#e879f9'];
+const EMOTION_OPTS=['Fear','Sadness','Anger','Joy','Anxiety','Shame','Depression','Disgust','Surprise'];
+const INTENSITY_OPTS=['Low','Medium','High'];
+const DISTORTION_OPTS=[
+  'All-or-Nothing Thinking', 'Overgeneralization', 'Mental Filter', 
+  'Disqualifying the Positive', 'Mind Reading', 'Fortune Telling', 
+  'Catastrophizing', 'Minimization', 'Emotional Reasoning', 
+  'Should Statements', 'Labeling', 'Personalization'
+];
+
+// ===== Helpers =====
+function safeJSON(s){try{return JSON.parse(s);}catch(e){return null;}}
+function escA(s){return (s||'').replace(/"/g,'"').replace(/'/g,''');}
+function escH(s){return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
+function parseAnno(row){
+  return {
+    emotion:safeJSON(row['Emotion']),
+    distortions:safeJSON(row['Distortions']),
+    empathy:safeJSON(row['Empathy_Level'])
+  };
+}
+function getEffectiveAnno(row){
+  const review=reviewsMap[currentIndex];
+  if(review&&review.annotations_edit){
+    const ed=safeJSON(review.annotations_edit);
+    if(ed) return ed;
+  }
+  return parseAnno(row);
+}
+function emotionCls(e){
+  if(!e)return 'emotion-default';
+  const l=e.toLowerCase();
+  if(l.includes('fear'))return 'emotion-fear';
+  if(l.includes('sad'))return 'emotion-sadness';
+  if(l.includes('anger')||l.includes('angry'))return 'emotion-anger';
+  if(l.includes('joy')||l.includes('happy'))return 'emotion-joy';
+  if(l.includes('anxi'))return 'emotion-anxiety';
+  if(l.includes('shame'))return 'emotion-shame';
+  if(l.includes('depress'))return 'emotion-depression';
+  return 'emotion-default';
+}
+function scoreColor(s,m=7){const r=s/m;return r>=.7?'#34d399':r>=.4?'#fbbf24':'#f87171';}
+function deepCopy(o){return JSON.parse(JSON.stringify(o));}
+
+// ===== Conversation parsing & highlights =====
+function parseConv(s){
+  if(!s)return [];
+  const msgs=[];
+  s.split('\n').forEach(line=>{
+    const t=line.trim();
+    if(!t)return;
+    if(t.startsWith('speaker:')||t.startsWith('listener:')){
+      const isL=t.startsWith('listener:');
+      const c=t.replace(/^(speaker|listener):\s*/,'');
+      if(c)msgs.push({role:isL?'listener':'speaker',text:c});
+    } else if(msgs.length>0) msgs[msgs.length-1].text+=' '+t;
+  });
+  return msgs;
+}
+function applyHighlights(msgs,quotes){
+  return msgs.map(msg=>{
+    let text=msg.text;
+    quotes.forEach(({quote,cls})=>{
+      if(!quote||quote==='No evidence present')return;
+      const q=quote.replace(/^(listener|speaker):\s*/i,'').trim();
+      if(!q)return;
+      const i=text.indexOf(q);
+      if(i!==-1)text=text.slice(0,i)+`<mark class="evidence-hl ${cls}" data-quote="${escA(q)}">`+text.slice(i,i+q.length)+'</mark>'+text.slice(i+q.length);
+    });
+    return {...msg,htmlText:text};
+  });
+}
+function buildQuotes(anno){
+  const quotes=[];
+  (anno.distortions?.distortions||[]).forEach((d,i)=>{
+    if(d.evidence_quote&&d.evidence_quote!=='No evidence present')
+      quotes.push({quote:d.evidence_quote,cls:`dist-hl-${i%3}`,type:'dist',idx:i});
+  });
+  (anno.empathy?.empathy_dimensions||[]).forEach((dim,i)=>{
+    if(dim.evidence_quote&&dim.evidence_quote!=='No evidence present')
+      quotes.push({quote:dim.evidence_quote,cls:`emp-hl-${i%9}`,type:'emp',idx:i});
+  });
+  return quotes;
+}
+function scrollToEvidence(prefix,idx){
+  const m=document.querySelector(`.conversation-view mark.${prefix}-${idx}`);
+  if(!m)return;
+  document.querySelectorAll('mark.evidence-pulse').forEach(x=>x.classList.remove('evidence-pulse'));
+  m.scrollIntoView({behavior:'smooth',block:'center'});
+  m.classList.add('evidence-pulse');
+  setTimeout(()=>m.classList.remove('evidence-pulse'),2000);
+}
+
+// ===== Render: Conversation =====
+function renderConversation(row){
+  const anno=getEffectiveAnno(row);
+  const quotes=buildQuotes(anno);
+  const msgs=applyHighlights(parseConv(row['conversation_cut']),quotes);
+  const view=document.getElementById('conversationView');
+  view.innerHTML=msgs.map(m=>`<div class="message-bubble ${m.role}"><div class="message-label">${m.role==='listener'?'Listener':'Speaker'}</div><div class="message-text">${m.htmlText||escH(m.text)}</div></div>`).join('');
+  view.querySelectorAll('mark.evidence-hl').forEach(mk=>{
+    mk.addEventListener('mouseenter',()=>showTooltip(mk,anno));
+    mk.addEventListener('mouseleave',hideTooltip);
+  });
+}
+function renderConvHeader(row){
+  const anno=getEffectiveAnno(row);
+  const e=anno.emotion;
+  const en=e?.primary_emotion||row['emotion_type']||'—';
+  const ei=e?.intensity||'';
+  const intCls=ei.toLowerCase().includes('high')?'intensity-high':ei.toLowerCase().includes('medium')?'intensity-medium':'intensity-low';
+  document.getElementById('convMeta').innerHTML=`
+    <span class="meta-badge ${emotionCls(en)}">${en}</span>
+    ${ei?`<span class="intensity-badge ${intCls}">${ei}</span>`:''}
+    ${row.problem_type?`<span class="problem-badge">${row.problem_type}</span>`:''}
+    ${row.experience_type?`<span class="experience-badge">${row.experience_type}</span>`:''}`;
+}
+
+// ===== Tooltip =====
+function showTooltip(mk,anno){
+  const cls=Array.from(mk.classList).find(c=>c.startsWith('dist-hl-')||c.startsWith('emp-hl-'));
+  let html='';
+  if(cls?.startsWith('dist-hl-')){
+    const i=parseInt(cls.split('-').pop());
+    const d=(anno.distortions?.distortions||[])[i];
+    if(d){const c=DIST_COLORS[i%DIST_COLORS.length];html=`<div class="tooltip-title" style="color:${c}">⚠️ ${d.cognitive_distortion||'Distortion'}</div><div class="tooltip-label">Reasoning</div><div class="tooltip-text">${d.reasoning||'—'}</div>`;}
+  } else if(cls?.startsWith('emp-hl-')){
+    const i=parseInt(cls.split('-').pop());
+    const dim=(anno.empathy?.empathy_dimensions||[])[i];
+    if(dim){const c=EMP_COLORS[i%EMP_COLORS.length],sc=scoreColor(dim.score||0);html=`<div class="tooltip-title" style="color:${c}">💡 ${dim.dimension_name}</div><div class="tooltip-label">Score</div><span class="tooltip-score" style="background:${sc}22;color:${sc};border:1px solid ${sc}44">${dim.score}/7</span><div class="tooltip-label">Reasoning</div><div class="tooltip-text">${dim.reasoning||'—'}</div>`;}
+  }
+  if(!html)return;
+  const tip=document.getElementById('tooltip');
+  document.getElementById('tooltipContent').innerHTML=html;
+  tip.classList.add('visible');
+  const r=mk.getBoundingClientRect();
+  let top=r.bottom+8,left=r.left;
+  if(left+320>window.innerWidth)left=window.innerWidth-330;
+  if(top+200>window.innerHeight)top=r.top-200;
+  tip.style.top=top+'px';tip.style.left=left+'px';
+}
+function hideTooltip(){document.getElementById('tooltip').classList.remove('visible');}
+
+// ===== Render: Emotion (View + Edit) =====
+function renderEmotion(row){
+  const anno=getEffectiveAnno(row);
+  const e=anno.emotion;
+  const el=document.getElementById('emotionContent');
+  const hasEdit=!!(reviewsMap[currentIndex]?.annotations_edit);
+  const btn=document.getElementById('editEmotionBtn');
+  btn.classList.toggle('active',editMode.emotion);
+  btn.textContent=editMode.emotion?'✓ Done':'✏️ Edit';
+
+  if(editMode.emotion){
+    const d=editData.emotion;
+    el.innerHTML=`
+      <div class="edit-group"><div class="edit-label">Primary Emotion</div>
+        <select class="edit-field" id="ee-primary">
+          ${EMOTION_OPTS.map(o=>`<option value="${o}"${d?.primary_emotion===o?' selected':''}>${o}</option>`).join('')}
+          <option value="${d?.primary_emotion||''}"${!EMOTION_OPTS.includes(d?.primary_emotion)?'selected':''} hidden>${d?.primary_emotion||'Custom'}</option>
+        </select></div>
+      <div class="edit-group"><div class="edit-label">Intensity</div>
+        <select class="edit-field" id="ee-intensity">
+          ${INTENSITY_OPTS.map(o=>`<option value="${o}"${d?.intensity===o?' selected':''}>${o}</option>`).join('')}
+        </select></div>
+      <div class="edit-group"><div class="edit-label">Specific Term</div>
+        <input class="edit-field" id="ee-term" value="${escA(d?.specific_emotion_term||'')}"/></div>
+      <div class="edit-group"><div class="edit-label">Reasoning</div>
+        <textarea class="edit-field" id="ee-reason" rows="4">${d?.reasoning||''}</textarea></div>`;
+    ['ee-primary','ee-intensity','ee-term','ee-reason'].forEach(id=>{
+      document.getElementById(id)?.addEventListener('input',()=>{
+        editData.emotion={
+          primary_emotion:document.getElementById('ee-primary').value,
+          intensity:document.getElementById('ee-intensity').value,
+          specific_emotion_term:document.getElementById('ee-term').value,
+          reasoning:document.getElementById('ee-reason').value
+        };
+      });
+    });
+  } else {
+    if(!e){el.innerHTML='<p style="color:var(--text-muted);font-size:.8rem">No annotation.</p>';return;}
+    const intCls=(e.intensity||'').toLowerCase().includes('high')?'intensity-high':(e.intensity||'').toLowerCase().includes('medium')?'intensity-medium':'intensity-low';
+    el.innerHTML=`
+      <div class="emotion-primary">
+        <span class="emotion-badge ${emotionCls(e.primary_emotion)}">${e.primary_emotion||'—'}</span>
+        <span class="intensity-badge ${intCls}">${e.intensity||'—'}</span>
+        ${hasEdit?'<span class="edited-badge">Edited</span>':''}
+      </div>
+      ${e.specific_emotion_term?`<p class="specific-term">Term: <span>${e.specific_emotion_term}</span></p>`:''}
+      ${e.reasoning?`<p class="emotion-reasoning">${e.reasoning}</p>`:''}`;
+  }
+}
+
+// ===== Render: Distortions (View + Edit) =====
+function renderDistortions(row){
+  const anno=getEffectiveAnno(row);
+  const el=document.getElementById('distortionsContent');
+  const dists=editMode.distortions ? editData.distortions : (anno.distortions?.distortions||[]);
+  const hasEdit=!!(reviewsMap[currentIndex]?.annotations_edit);
+  const btn=document.getElementById('editDistBtn');
+  btn.classList.toggle('active',editMode.distortions);
+  btn.textContent=editMode.distortions?'✓ Done':'✏️ Edit';
+
+  if(editMode.distortions){
+    if(!dists.length){
+      el.innerHTML=`<div class="no-distortions"><span>No distortions</span></div>`;
+    } else {
+      el.innerHTML=dists.map((d,i)=>{
+        const c=DIST_COLORS[i%DIST_COLORS.length];
+        return `<div class="distortion-item editing" data-dist-idx="${i}">
+          <div class="edit-row">
+            <span class="dist-color-dot" style="background:${c}"></span>
+            <select class="edit-field" data-d-field="name" data-d-idx="${i}" style="flex:1">
+              <option value="" disabled ${!d.cognitive_distortion?'selected':''}>Select Distortion...</option>
+              ${DISTORTION_OPTS.map(o=>`<option value="${o}" ${d.cognitive_distortion===o?'selected':''}>${o}</option>`).join('')}
+              <option value="${escA(d.cognitive_distortion||'')}" ${!DISTORTION_OPTS.includes(d.cognitive_distortion||'')&&d.cognitive_distortion?'selected':''} hidden>${escA(d.cognitive_distortion||'Custom')}</option>
+            </select>
+            <button class="remove-item-btn" data-remove-dist="${i}">✕</button>
+          </div>
+          <div class="edit-label" style="margin-top:6px">Evidence Quote</div>
+          <div class="edit-row">
+            <input class="edit-field" data-d-field="quote" data-d-idx="${i}" value="${escA(d.evidence_quote||'')}" placeholder="Evidence quote" style="flex:1"/>
+            <button class="select-evidence-btn" data-sel-card="distortions" data-sel-idx="${i}">📌 Select</button>
+          </div>
+          <div class="edit-label" style="margin-top:6px">Reasoning</div>
+          <textarea class="edit-field" data-d-field="reason" data-d-idx="${i}" rows="2" placeholder="Reasoning...">${d.reasoning||''}</textarea>
+        </div>`;
+      }).join('');
+    }
+    el.innerHTML+=`<button class="add-item-btn" id="addDistBtn">+ Add Distortion</button>`;
+    // events
+    el.querySelectorAll('[data-d-field]').forEach(inp=>{
+      inp.addEventListener('input',()=>{
+        const idx=parseInt(inp.dataset.dIdx);
+        const f=inp.dataset.dField;
+        if(f==='name') editData.distortions[idx].cognitive_distortion=inp.value;
+        else if(f==='quote') editData.distortions[idx].evidence_quote=inp.value;
+        else if(f==='reason') editData.distortions[idx].reasoning=inp.value;
+      });
+    });
+    el.querySelectorAll('[data-remove-dist]').forEach(btn=>{
+      btn.addEventListener('click',()=>{
+        editData.distortions.splice(parseInt(btn.dataset.removeDist),1);
+        renderDistortions(row);
+      });
+    });
+    el.querySelectorAll('[data-sel-card]').forEach(btn=>{
+      btn.addEventListener('click',()=>startSelectingEvidence(btn.dataset.selCard,parseInt(btn.dataset.selIdx),btn));
+    });
+    document.getElementById('addDistBtn')?.addEventListener('click',()=>{
+      editData.distortions.push({cognitive_distortion:'',evidence_quote:'',reasoning:''});
+      renderDistortions(row);
+    });
+  } else {
+    if(!dists.length){el.innerHTML=`<div class="no-distortions"><span>No distortions detected</span></div>`;return;}
+    el.innerHTML=dists.map((d,i)=>{
+      const c=DIST_COLORS[i%DIST_COLORS.length];
+      const q=(d.evidence_quote||'').replace(/^(listener|speaker):\s*/i,'');
+      return `<div class="distortion-item" data-dist-idx="${i}">
+        <div class="distortion-name"><span class="dist-color-dot" style="background:${c}"></span>${d.cognitive_distortion||'—'} ${hasEdit&&i===0?'<span class="edited-badge">Edited</span>':''}</div>
+        ${q?`<div class="distortion-quote" style="border-color:${c}">${q}</div>`:''}
+        ${d.reasoning?`<div class="distortion-reasoning">${d.reasoning}</div>`:''}
+      </div>`;
+    }).join('');
+    el.querySelectorAll('.distortion-item').forEach(item=>{
+      item.addEventListener('click',()=>scrollToEvidence('dist-hl',parseInt(item.dataset.distIdx)%3));
+    });
+  }
+}
+
+// ===== Render: Empathy (View + Edit) =====
+function renderEmpathy(row){
+  const anno=getEffectiveAnno(row);
+  const el=document.getElementById('empathyContent');
+  const scoreEl=document.getElementById('overallScore');
+  const dims=editMode.empathy ? editData.empathy : (anno.empathy?.empathy_dimensions||[]);
+  const hasEdit=!!(reviewsMap[currentIndex]?.annotations_edit);
+  const btn=document.getElementById('editEmpBtn');
+  btn.classList.toggle('active',editMode.empathy);
+  btn.textContent=editMode.empathy?'✓ Done':'✏️ Edit';
+
+  if(!anno.empathy&&!editMode.empathy){el.innerHTML='<p style="color:var(--text-muted);font-size:.8rem">No annotation.</p>';scoreEl.textContent='';return;}
+  const total=dims.reduce((s,d)=>s+(d.score||0),0);
+  scoreEl.textContent=dims.length?`${total} / ${dims.length*7}`:'';
+
+  if(editMode.empathy){
+    el.innerHTML=dims.map((dim,i)=>{
+      const c=EMP_COLORS[i%EMP_COLORS.length];
+      const sc=dim.score||0;
+      return `<div class="empathy-item editing" data-emp-idx="${i}">
+        <div class="edit-row">
+          <span class="emp-color-dot" style="background:${c}"></span>
+          <input class="edit-field" data-e-field="name" data-e-idx="${i}" value="${escA(dim.dimension_name||'')}" placeholder="Dimension name" style="flex:1"/>
+          <button class="remove-item-btn" data-remove-emp="${i}">✕</button>
+        </div>
+        <div class="edit-label" style="margin-top:6px">Score (0–7)</div>
+        <div class="edit-row">
+          <input type="range" class="score-slider" data-e-field="score" data-e-idx="${i}" min="0" max="7" value="${sc}"/>
+          <span class="score-display" id="score-disp-${i}" style="color:${scoreColor(sc)}">${sc}</span>
+        </div>
+        <div class="edit-label" style="margin-top:6px">Evidence Quote</div>
+        <div class="edit-row">
+          <input class="edit-field" data-e-field="quote" data-e-idx="${i}" value="${escA(dim.evidence_quote||'')}" placeholder="Evidence quote" style="flex:1"/>
+          <button class="select-evidence-btn" data-sel-card="empathy" data-sel-idx="${i}">📌 Select</button>
+        </div>
+        <div class="edit-label" style="margin-top:6px">Reasoning</div>
+        <textarea class="edit-field" data-e-field="reason" data-e-idx="${i}" rows="2">${dim.reasoning||''}</textarea>
+      </div>`;
+    }).join('');
+    el.innerHTML+=`<button class="add-item-btn" id="addEmpBtn">+ Add Dimension</button>`;
+    // events
+    el.querySelectorAll('[data-e-field]').forEach(inp=>{
+      inp.addEventListener('input',()=>{
+        const idx=parseInt(inp.dataset.eIdx);
+        const f=inp.dataset.eField;
+        if(f==='name') editData.empathy[idx].dimension_name=inp.value;
+        else if(f==='score'){
+          const v=parseInt(inp.value);
+          editData.empathy[idx].score=v;
+          const disp=document.getElementById(`score-disp-${idx}`);
+          if(disp){disp.textContent=v;disp.style.color=scoreColor(v);}
+        }
+        else if(f==='quote') editData.empathy[idx].evidence_quote=inp.value;
+        else if(f==='reason') editData.empathy[idx].reasoning=inp.value;
+      });
+    });
+    el.querySelectorAll('[data-remove-emp]').forEach(btn=>{
+      btn.addEventListener('click',()=>{editData.empathy.splice(parseInt(btn.dataset.removeEmp),1);renderEmpathy(row);});
+    });
+    el.querySelectorAll('[data-sel-card]').forEach(btn=>{
+      btn.addEventListener('click',()=>startSelectingEvidence(btn.dataset.selCard,parseInt(btn.dataset.selIdx),btn));
+    });
+    document.getElementById('addEmpBtn')?.addEventListener('click',()=>{
+      editData.empathy.push({dimension_name:'',score:0,evidence_quote:'',reasoning:''});
+      renderEmpathy(row);
+    });
+  } else {
+    el.innerHTML=dims.map((dim,i)=>{
+      const c=EMP_COLORS[i%EMP_COLORS.length];
+      const sc=dim.score||0;
+      const pct=Math.min(100,(sc/7)*100);
+      const sC=scoreColor(sc);
+      const q=(dim.evidence_quote||'').replace(/^(listener|speaker):\s*/i,'');
+      return `<div class="empathy-item" data-emp-idx="${i}">
+        <div class="empathy-item-header">
+          <span class="emp-color-dot" style="background:${c}"></span>
+          <span class="empathy-name">${dim.dimension_name||'—'}</span>
+          <div class="score-bar-container">
+            <div class="score-bar"><div class="score-bar-fill" style="width:${pct}%;background:${sC}"></div></div>
+            <span class="score-value" style="color:${sC}">${sc}</span>
+          </div>
+        </div>
+        ${q&&q!=='No evidence present'?`<div class="empathy-quote" style="border-color:${c}" title="${escA(q)}">"${q}"</div>`:''}
+        ${dim.reasoning?`<div class="empathy-reasoning">${dim.reasoning}</div>`:''}
+      </div>`;
+    }).join('');
+    el.querySelectorAll('.empathy-item').forEach(item=>{
+      item.addEventListener('click',()=>{
+        item.classList.toggle('active');
+        scrollToEvidence('emp-hl',parseInt(item.dataset.empIdx)%9);
+      });
+    });
+  }
+}
+
+// ===== Evidence Selection Mode =====
+function startSelectingEvidence(card, itemIdx, triggerBtn){
+  selectingEvidence={card, itemIdx};
+  const panel=document.querySelector('.conversation-panel');
+  panel.classList.add('selecting-mode');
+  const hint=document.getElementById('selectionHint');
+  hint.classList.add('visible');
+  // Mark button as active
+  document.querySelectorAll('.select-evidence-btn').forEach(b=>b.classList.remove('selecting'));
+  triggerBtn?.classList.add('selecting');
+}
+function stopSelectingEvidence(){
+  selectingEvidence=null;
+  document.querySelector('.conversation-panel')?.classList.remove('selecting-mode');
+  const hint=document.getElementById('selectionHint');
+  hint?.classList.remove('visible');
+  document.querySelectorAll('.select-evidence-btn').forEach(b=>b.classList.remove('selecting'));
+}
+function captureSelection(){
+  if(!selectingEvidence)return;
+  const sel=window.getSelection();
+  if(!sel||sel.rangeCount===0||sel.isCollapsed)return;
+  const text=sel.toString().trim();
+  if(!text)return;
+  const {card,itemIdx}=selectingEvidence;
+  // Set the value in editData
+  if(card==='distortions'&&editData.distortions[itemIdx]!==undefined){
+    editData.distortions[itemIdx].evidence_quote=text;
+  } else if(card==='empathy'&&editData.empathy[itemIdx]!==undefined){
+    editData.empathy[itemIdx].evidence_quote=text;
+  }
+  sel.removeAllRanges();
+  stopSelectingEvidence();
+  // Re-render the card to update input field
+  const row=filteredData[currentIndex];
+  if(card==='distortions') renderDistortions(row);
+  else if(card==='empathy') renderEmpathy(row);
+}
+
+// ===== Save Annotations =====
+async function saveAnnotations(){
+  const row=filteredData[currentIndex];
+  const anno=getEffectiveAnno(row);
+  // Merge current editData into the annotation structure
+  const toSave={
+    emotion: editData.emotion || anno.emotion,
+    distortions: anno.distortions
+      ? {...anno.distortions, distortions: editData.distortions||anno.distortions?.distortions||[]}
+      : {distortions: editData.distortions||[]},
+    empathy: anno.empathy
+      ? {...anno.empathy, empathy_dimensions: editData.empathy||anno.empathy?.empathy_dimensions||[]}
+      : {empathy_dimensions: editData.empathy||[]}
+  };
+  try {
+    const res=await fetch('/api/reviews/annotations',{
+      method:'PATCH',
+      headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({assignment_id:assignmentId,sample_index:currentIndex,annotations:toSave})
+    });
+    const data=await res.json();
+    if(res.ok){
+      reviewsMap[currentIndex]=data;
+      return true;
+    }
+  } catch(e){}
+  return false;
+}
+
+// ===== Toggle Edit Mode =====
+function toggleEdit(card){
+  const row=filteredData[currentIndex];
+  const anno=getEffectiveAnno(row);
+  if(editMode[card]){
+    // Exiting edit mode — auto-save
+    editMode[card]=false;
+    stopSelectingEvidence();
+    saveAnnotations().then(ok=>{
+      if(ok){
+        // Re-render all to show updated highlights
+        renderAll();
+      }
+    });
+  } else {
+    // Entering edit mode — init editData from effective annotation
+    if(card==='emotion') editData.emotion=deepCopy(anno.emotion||{primary_emotion:'',intensity:'',specific_emotion_term:'',reasoning:''});
+    else if(card==='distortions') editData.distortions=deepCopy(anno.distortions?.distortions||[]);
+    else if(card==='empathy') editData.empathy=deepCopy(anno.empathy?.empathy_dimensions||[]);
+    editMode[card]=true;
+    if(card==='emotion') renderEmotion(row);
+    else if(card==='distortions') renderDistortions(row);
+    else if(card==='empathy') renderEmpathy(row);
+  }
+}
+
+// ===== Review State =====
+function renderReviewState(){
+  const review=reviewsMap[currentIndex];
+  const badge=document.getElementById('reviewStatusBadge');
+  const acceptBtn=document.getElementById('acceptBtn');
+  const rejectBtn=document.getElementById('rejectBtn');
+  const comment=document.getElementById('reviewComment');
+  const submitBtn=document.getElementById('submitReviewBtn');
+  acceptBtn.classList.remove('active');
+  rejectBtn.classList.remove('active');
+  currentReviewStatus=null;
+  if(review&&review.status&&review.status!=='reject'||(review&&review.status==='accept')){
+    // Has a real review decision
+  }
+  if(review){
+    badge.style.display='inline-block';
+    badge.textContent=review.status==='accept'?'✓ Accepted':'✗ Rejected';
+    badge.className='review-status-badge '+(review.status==='accept'?'review-status-accept':'review-status-reject');
+    currentReviewStatus=review.status;
+    if(review.status==='accept') acceptBtn.classList.add('active');
+    else rejectBtn.classList.add('active');
+    comment.value=review.comment||'';
+    submitBtn.textContent='Update Review';
+  } else {
+    badge.style.display='none';
+    comment.value='';
+    submitBtn.textContent='Submit Review';
+  }
+  submitBtn.disabled=false;
+}
+
+// ===== Sample List =====
+function renderSampleList(){
+  const list=document.getElementById('sampleList');
+  list.innerHTML='';
+  filteredData.forEach((row,i)=>{
+    const anno=parseAnno(row);
+    const en=anno.emotion?.primary_emotion||row.emotion_type||'—';
+    const review=reviewsMap[i];
+    const dotCls=review?(review.status==='accept'?'dot-accept':'dot-reject'):'dot-pending';
+    const hasEdit=!!(review?.annotations_edit);
+    const item=document.createElement('div');
+    item.className='sample-item'+(i===currentIndex?' active':'');
+    item.dataset.idx=i;
+    item.innerHTML=`<div class="sample-item-idx">#${i+1} <span class="sample-review-dot ${dotCls}"></span>${hasEdit?'<span style="color:#fbbf24;font-size:.6rem">✏</span>':''}</div>
+      <div class="sample-item-emotion" style="color:var(--emotion-color)">${en}</div>
+      <div class="sample-item-problem">${row.problem_type||''}</div>`;
+    item.addEventListener('click',()=>{currentIndex=i;renderAll();});
+    list.appendChild(item);
+  });
+}
+
+// ===== Navigation =====
+function updateNav(){
+  document.getElementById('prevBtn').disabled=currentIndex<=0;
+  document.getElementById('nextBtn').disabled=currentIndex>=filteredData.length-1;
+  document.getElementById('currentIdx').textContent=currentIndex+1;
+  document.getElementById('totalSamples').textContent=filteredData.length;
+  document.querySelectorAll('.sample-item').forEach(it=>it.classList.toggle('active',parseInt(it.dataset.idx)===currentIndex));
+  document.querySelector('.sample-item.active')?.scrollIntoView({block:'nearest'});
+}
+
+// ===== Render All =====
+function renderAll(){
+  if(!filteredData.length)return;
+  // Exit edit modes on navigation
+  editMode={emotion:false,distortions:false,empathy:false};
+  stopSelectingEvidence();
+  const row=filteredData[currentIndex];
+  renderConvHeader(row);
+  renderConversation(row);
+  renderEmotion(row);
+  renderDistortions(row);
+  renderEmpathy(row);
+  renderReviewState();
+  updateNav();
+}
+
+// ===== Filter =====
+function applyFilter(q){
+  q=q.toLowerCase().trim();
+  filteredData=q?allData.filter(row=>{
+    const a=parseAnno(row);
+    return (a.emotion?.primary_emotion||row.emotion_type||'').toLowerCase().includes(q)||
+           (row.problem_type||'').toLowerCase().includes(q);
+  }):[...allData];
+  currentIndex=0;renderSampleList();renderAll();
+}
+
+// ===== Submit Review =====
+async function submitReview(){
+  if(!currentReviewStatus){alert('Please select Accept or Reject');return;}
+  const comment=document.getElementById('reviewComment').value.trim();
+  const btn=document.getElementById('submitReviewBtn');
+  btn.disabled=true;btn.textContent='Submitting...';
+  try{
+    const res=await fetch('/api/reviews',{
+      method:'POST',headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({assignment_id:assignmentId,sample_index:currentIndex,status:currentReviewStatus,comment})
+    });
+    const data=await res.json();
+    if(res.ok){
+      reviewsMap[currentIndex]=data;
+      renderReviewState();renderSampleList();
+      btn.textContent='✓ Saved!';
+      setTimeout(()=>{
+        btn.textContent='Update Review';btn.disabled=false;
+        const next=filteredData.findIndex((_,i)=>i>currentIndex&&!reviewsMap[i]);
+        if(next!==-1){currentIndex=next;renderAll();}
+      },800);
+    } else {alert(data.error||'Failed');btn.textContent='Submit Review';btn.disabled=false;}
+  } catch(e){alert('Network error');btn.textContent='Submit Review';btn.disabled=false;}
+}
+
+// ===== Load Data =====
+async function loadAssignmentData(){
+  try{
+    let fileId,filename;
+    const r1=await fetch('/api/my-assignments');
+    const myAssign=await r1.json();
+    let a=myAssign.find(x=>x.id===assignmentId);
+    if(!a){
+      const r2=await fetch('/api/assignments');
+      if(r2.ok){const all=await r2.json();a=all.find(x=>x.id===assignmentId);}
+    }
+    if(!a){document.getElementById('reviewSubtitle').textContent='Assignment not found';return;}
+    fileId=a.file_id;filename=a.filename;
+    const r3=await fetch(`/api/files/${fileId}/data`);
+    const fd=await r3.json();
+    allData=fd.samples||[];filteredData=[...allData];
+    const r4=await fetch(`/api/assignments/${assignmentId}/reviews`);
+    reviewsMap=await r4.json();
+    document.getElementById('reviewTitle').textContent='Review';
+    document.getElementById('reviewSubtitle').textContent=filename||'Annotation Review';
+    currentIndex=0;renderSampleList();renderAll();
+  } catch(err){console.error(err);document.getElementById('reviewSubtitle').textContent='Failed to load';}
+}
+
+// ===== DOMContentLoaded =====
+document.addEventListener('DOMContentLoaded',async()=>{
+  const parts=window.location.pathname.split('/');
+  assignmentId=parseInt(parts[parts.length-1]);
+  if(isNaN(assignmentId))return;
+  try{const m=await fetch('/api/me').then(r=>r.json());document.getElementById('userBadge').textContent=m.username;}catch(e){}
+  document.getElementById('logoutBtn').addEventListener('click',async()=>{await fetch('/api/logout',{method:'POST'});window.location.href='/login';});
+  document.getElementById('prevBtn').addEventListener('click',()=>{if(currentIndex>0){currentIndex--;renderAll();}});
+  document.getElementById('nextBtn').addEventListener('click',()=>{if(currentIndex<filteredData.length-1){currentIndex++;renderAll();}});
+  document.getElementById('searchInput').addEventListener('input',e=>applyFilter(e.target.value));
+  document.getElementById('acceptBtn').addEventListener('click',()=>{currentReviewStatus='accept';document.getElementById('acceptBtn').classList.add('active');document.getElementById('rejectBtn').classList.remove('active');});
+  document.getElementById('rejectBtn').addEventListener('click',()=>{currentReviewStatus='reject';document.getElementById('rejectBtn').classList.add('active');document.getElementById('acceptBtn').classList.remove('active');});
+  document.getElementById('submitReviewBtn').addEventListener('click',submitReview);
+  // Edit toggle buttons
+  ['editEmotionBtn','editDistBtn','editEmpBtn'].forEach(id=>{
+    document.getElementById(id)?.addEventListener('click',()=>{
+      const card={'editEmotionBtn':'emotion','editDistBtn':'distortions','editEmpBtn':'empathy'}[id];
+      toggleEdit(card);
+    });
+  });
+  // Capture text selection from conversation
+  document.getElementById('conversationView').addEventListener('mouseup',()=>{
+    if(selectingEvidence) captureSelection();
+  });
+  // Escape key cancels selection
+  document.addEventListener('keydown',e=>{
+    if(e.key==='Escape'){stopSelectingEvidence();return;}
+    if(e.target.tagName==='INPUT'||e.target.tagName==='TEXTAREA'||e.target.tagName==='SELECT')return;
+    if(e.key==='ArrowLeft'&&currentIndex>0){currentIndex--;renderAll();}
+    if(e.key==='ArrowRight'&&currentIndex<filteredData.length-1){currentIndex++;renderAll();}
+  });
+  await loadAssignmentData();
+});
+
+// ===== Export =====
+function doExport(format){
+  if(!assignmentId)return;
+  const url=`/api/assignments/${assignmentId}/export?format=${format}`;
+  if(format==='csv'){
+    // Direct download
+    const a=document.createElement('a');
+    a.href=url;a.download='';a.click();
+  } else {
+    // JSON: fetch and download as file
+    fetch(url).then(r=>r.json()).then(data=>{
+      const blob=new Blob([JSON.stringify(data,null,2)],{type:'application/json'});
+      const a=document.createElement('a');
+      a.href=URL.createObjectURL(blob);
+      a.download=`export_assignment_${assignmentId}.json`;
+      a.click();URL.revokeObjectURL(a.href);
+    }).catch(e=>alert('Export failed'));
+  }
+  document.getElementById('exportMenu').style.display='none';
+}
+
+// Wire up export buttons after DOM ready
+document.addEventListener('DOMContentLoaded',()=>{
+  const exportBtn=document.getElementById('exportBtn');
+  const exportMenu=document.getElementById('exportMenu');
+  if(exportBtn&&exportMenu){
+    exportBtn.addEventListener('click',(e)=>{
+      e.stopPropagation();
+      exportMenu.style.display=exportMenu.style.display==='none'?'block':'none';
+    });
+    document.getElementById('exportJSON')?.addEventListener('click',()=>doExport('json'));
+    document.getElementById('exportCSV')?.addEventListener('click',()=>doExport('csv'));
+    // Close menu on outside click
+    document.addEventListener('click',()=>{exportMenu.style.display='none';});
+  }
+});

static/style.css

@@ -0,0 +1,686 @@
+/* ===== CSS Variables ===== */
+:root {
+  --bg-primary: #0d1117;
+  --bg-secondary: #161b22;
+  --bg-card: #1c2128;
+  --bg-hover: #21262d;
+  --border: #30363d;
+  --border-light: #21262d;
+  --text-primary: #e6edf3;
+  --text-secondary: #8b949e;
+  --text-muted: #6e7681;
+  --accent: #58a6ff;
+  --accent-hover: #79c0ff;
+
+  --emotion-color: #a78bfa;
+  --emotion-bg: rgba(167, 139, 250, 0.12);
+  --distortion-color: #fb923c;
+  --distortion-bg: rgba(251, 146, 60, 0.12);
+  --empathy-color: #34d399;
+  --empathy-bg: rgba(52, 211, 153, 0.12);
+  --highlight-color: #fbbf24;
+
+  --speaker-bg: #1a2332;
+  --speaker-border: #1d4ed8;
+  --listener-bg: #1a2b1f;
+  --listener-border: #16a34a;
+
+  /* Highlight colors for evidence quotes */
+  --hl-distortion-1: rgba(251, 146, 60, 0.25);
+  --hl-distortion-2: rgba(248, 113, 113, 0.25);
+  --hl-distortion-3: rgba(251, 191, 36, 0.25);
+
+  --hl-empathy-concern: rgba(96, 165, 250, 0.22);
+  --hl-empathy-expressiveness: rgba(167, 139, 250, 0.22);
+  --hl-empathy-resonate: rgba(52, 211, 153, 0.22);
+  --hl-empathy-warmth: rgba(251, 191, 36, 0.22);
+  --hl-empathy-attuned: rgba(251, 146, 60, 0.22);
+  --hl-empathy-cognitive: rgba(248, 113, 113, 0.22);
+  --hl-empathy-feelings: rgba(129, 140, 248, 0.22);
+  --hl-empathy-acceptance: rgba(45, 212, 191, 0.22);
+  --hl-empathy-responsiveness: rgba(232, 121, 249, 0.22);
+
+  --radius-sm: 6px;
+  --radius: 10px;
+  --radius-lg: 14px;
+  --shadow: 0 4px 16px rgba(0,0,0,0.4);
+  --shadow-card: 0 2px 8px rgba(0,0,0,0.3);
+
+  --header-h: 60px;
+}
+
+/* ===== Reset & Base ===== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: 16px; scroll-behavior: smooth; }
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+  overflow: hidden;
+}
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* ===== Header ===== */
+.header {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  height: var(--header-h);
+  background: rgba(13, 17, 23, 0.92);
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(12px);
+  z-index: 100;
+}
+.header-inner {
+  max-width: 100%;
+  height: 100%;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.header-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.logo-icon {
+  width: 36px; height: 36px;
+  background: linear-gradient(135deg, var(--accent), var(--empathy-color));
+  border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  color: #fff;
+  flex-shrink: 0;
+}
+.header-logo h1 { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
+.header-logo p { font-size: 0.75rem; color: var(--text-muted); }
+.header-controls { display: flex; align-items: center; gap: 12px; }
+
+.file-upload-area {
+  display: flex; align-items: center; gap: 8px;
+  padding: 7px 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  transition: all 0.2s;
+  position: relative;
+  overflow: hidden;
+}
+.file-upload-area:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }
+.file-upload-area input[type="file"] {
+  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
+}
+.sample-counter {
+  padding: 6px 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+.sample-counter #currentIdx { color: var(--accent); font-weight: 600; }
+
+/* ===== Welcome Screen ===== */
+.welcome-screen {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-primary);
+  z-index: 50;
+  padding: 20px;
+}
+.welcome-card {
+  max-width: 480px;
+  width: 100%;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 40px;
+  text-align: center;
+  box-shadow: var(--shadow);
+}
+.welcome-icon {
+  width: 80px; height: 80px;
+  background: linear-gradient(135deg, rgba(88,166,255,0.15), rgba(52,211,153,0.15));
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  display: flex; align-items: center; justify-content: center;
+  margin: 0 auto 24px;
+  color: var(--accent);
+}
+.welcome-card h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
+.welcome-card p { color: var(--text-secondary); line-height: 1.6; margin-bottom: 28px; }
+.welcome-features {
+  display: flex; flex-direction: column; gap: 10px;
+  margin-bottom: 32px;
+  text-align: left;
+}
+.feature-item {
+  display: flex; align-items: center; gap: 10px;
+  font-size: 0.875rem; color: var(--text-secondary);
+}
+.feature-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.welcome-upload-btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 12px 28px;
+  background: linear-gradient(135deg, var(--accent), #388bfd);
+  color: #fff;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.2s;
+  font-size: 0.9rem;
+}
+.welcome-upload-btn:hover { opacity: 0.9; transform: translateY(-1px); }
+
+/* ===== Main Layout ===== */
+.main-layout {
+  position: fixed;
+  inset: 0;
+  top: var(--header-h);
+  display: grid;
+  grid-template-columns: 200px 1fr 480px;
+  overflow: hidden;
+}
+
+/* ===== Nav Panel ===== */
+.nav-panel {
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.nav-panel-header {
+  padding: 14px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.nav-panel-header h2 {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 10px;
+}
+.search-box {
+  display: flex; align-items: center; gap: 6px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+}
+.search-box svg { color: var(--text-muted); flex-shrink: 0; }
+.search-box input {
+  background: transparent; border: none; outline: none;
+  color: var(--text-primary); font-size: 0.8rem; width: 100%;
+}
+.search-box input::placeholder { color: var(--text-muted); }
+
+.sample-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.sample-item {
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 0.15s;
+  border: 1px solid transparent;
+}
+.sample-item:hover { background: var(--bg-hover); }
+.sample-item.active {
+  background: rgba(88,166,255,0.1);
+  border-color: rgba(88,166,255,0.3);
+}
+.sample-item-idx {
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  margin-bottom: 2px;
+}
+.sample-item-emotion {
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+.sample-item-problem {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ===== Conversation Panel ===== */
+.conversation-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-primary);
+}
+.conv-header {
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  background: var(--bg-secondary);
+}
+.conv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.meta-badge {
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+.legend { display: flex; align-items: center; gap: 14px; }
+.legend-item {
+  display: flex; align-items: center; gap: 5px;
+  font-size: 0.75rem; color: var(--text-muted);
+}
+.legend-dot {
+  width: 8px; height: 8px; border-radius: 2px;
+}
+.legend-dot.speaker { background: var(--speaker-border); }
+.legend-dot.listener { background: var(--listener-border); }
+
+.conversation-view {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.message-bubble {
+  max-width: 85%;
+  padding: 10px 14px;
+  border-radius: var(--radius);
+  border-left: 3px solid transparent;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  position: relative;
+  transition: all 0.2s;
+}
+.message-bubble.speaker {
+  background: var(--speaker-bg);
+  border-color: var(--speaker-border);
+  align-self: flex-end;
+  border-radius: var(--radius) var(--radius) var(--radius-sm) var(--radius);
+}
+.message-bubble.listener {
+  background: var(--listener-bg);
+  border-color: var(--listener-border);
+  align-self: flex-start;
+  border-radius: var(--radius) var(--radius) var(--radius) var(--radius-sm);
+}
+.message-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 4px;
+  opacity: 0.7;
+}
+.message-bubble.speaker .message-label { color: #60a5fa; }
+.message-bubble.listener .message-label { color: #4ade80; }
+
+/* Highlighted evidence text */
+mark.evidence-hl {
+  background: transparent;
+  border-radius: 3px;
+  padding: 1px 0;
+  cursor: pointer;
+  transition: all 0.15s;
+  border-bottom: 2px solid transparent;
+  position: relative;
+}
+mark.evidence-hl:hover { filter: brightness(1.3); }
+mark.evidence-pulse {
+  animation: evidence-glow 0.6s ease-in-out 3;
+  border-radius: 4px;
+}
+@keyframes evidence-glow {
+  0%, 100% { box-shadow: none; filter: brightness(1); }
+  50% { box-shadow: 0 0 12px 4px rgba(251, 191, 36, 0.5); filter: brightness(1.5); }
+}
+
+/* Distortion highlights */
+mark.dist-hl-0 { background: var(--hl-distortion-1); border-bottom-color: #fb923c; color: inherit; }
+mark.dist-hl-1 { background: var(--hl-distortion-2); border-bottom-color: #f87171; color: inherit; }
+mark.dist-hl-2 { background: var(--hl-distortion-3); border-bottom-color: #fbbf24; color: inherit; }
+
+/* Empathy dimension highlights */
+mark.emp-hl-0 { background: var(--hl-empathy-concern); border-bottom-color: #60a5fa; color: inherit; }
+mark.emp-hl-1 { background: var(--hl-empathy-expressiveness); border-bottom-color: #a78bfa; color: inherit; }
+mark.emp-hl-2 { background: var(--hl-empathy-resonate); border-bottom-color: #34d399; color: inherit; }
+mark.emp-hl-3 { background: var(--hl-empathy-warmth); border-bottom-color: #fbbf24; color: inherit; }
+mark.emp-hl-4 { background: var(--hl-empathy-attuned); border-bottom-color: #fb923c; color: inherit; }
+mark.emp-hl-5 { background: var(--hl-empathy-cognitive); border-bottom-color: #f87171; color: inherit; }
+mark.emp-hl-6 { background: var(--hl-empathy-feelings); border-bottom-color: #818cf8; color: inherit; }
+mark.emp-hl-7 { background: var(--hl-empathy-acceptance); border-bottom-color: #2dd4bf; color: inherit; }
+mark.emp-hl-8 { background: var(--hl-empathy-responsiveness); border-bottom-color: #e879f9; color: inherit; }
+
+/* ===== Annotation Panel ===== */
+.annotation-panel {
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border);
+  overflow-y: auto;
+  min-height: 0;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.anno-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: visible;
+  flex-shrink: 0;
+  transition: border-color 0.2s;
+}
+.anno-card:hover { border-color: var(--border-light); }
+.anno-card-header {
+  padding: 13px 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(255,255,255,0.02);
+}
+.anno-card-header h3 {
+  font-size: 0.92rem;
+  font-weight: 600;
+  flex: 1;
+}
+.anno-card-icon {
+  width: 30px; height: 30px;
+  border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.emotion-icon { background: var(--emotion-bg); color: var(--emotion-color); }
+.distortion-icon { background: var(--distortion-bg); color: var(--distortion-color); }
+.empathy-icon { background: var(--empathy-bg); color: var(--empathy-color); }
+
+.anno-content { padding: 14px 16px; }
+
+/* Emotion */
+.emotion-primary {
+  display: flex; align-items: center; gap: 10px;
+  margin-bottom: 10px;
+}
+.emotion-badge {
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 700;
+  background: var(--emotion-bg);
+  color: var(--emotion-color);
+  border: 1px solid rgba(167,139,250,0.3);
+}
+.intensity-badge {
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  font-weight: 600;
+  border: 1px solid;
+}
+.intensity-high { background: rgba(248,113,113,0.15); color: #f87171; border-color: rgba(248,113,113,0.3); }
+.intensity-medium { background: rgba(251,191,36,0.15); color: #fbbf24; border-color: rgba(251,191,36,0.3); }
+.intensity-low { background: rgba(52,211,153,0.15); color: #34d399; border-color: rgba(52,211,153,0.3); }
+.emotion-reasoning {
+  font-size: 0.83rem;
+  color: var(--text-secondary);
+  line-height: 1.7;
+  padding: 10px 12px;
+  background: rgba(255,255,255,0.03);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--emotion-color);
+}
+.specific-term {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+.specific-term span { color: var(--emotion-color); font-weight: 600; }
+
+/* Distortions */
+.distortion-item {
+  padding: 12px 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.02);
+  margin-bottom: 10px;
+  cursor: pointer;
+  transition: all 0.15s;
+  position: relative;
+}
+.distortion-item:last-child { margin-bottom: 0; }
+.distortion-item:hover { border-color: var(--distortion-color); background: var(--distortion-bg); }
+.distortion-item.active { border-color: var(--distortion-color); background: var(--distortion-bg); }
+.distortion-name {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--distortion-color);
+  margin-bottom: 7px;
+  display: flex; align-items: center; gap: 8px;
+}
+.dist-color-dot {
+  width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0;
+}
+.distortion-quote {
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  font-style: italic;
+  margin-bottom: 7px;
+  padding: 6px 10px;
+  background: rgba(255,255,255,0.04);
+  border-radius: 4px;
+  border-left: 3px solid;
+  font-family: 'JetBrains Mono', monospace;
+  line-height: 1.5;
+}
+.distortion-reasoning {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+.no-distortions {
+  text-align: center;
+  padding: 20px;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+}
+.no-distortions svg { margin: 0 auto 6px; display: block; opacity: 0.4; }
+
+/* Empathy */
+.overall-score {
+  margin-left: auto;
+  padding: 3px 10px;
+  background: var(--empathy-bg);
+  color: var(--empathy-color);
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  border: 1px solid rgba(52,211,153,0.3);
+}
+.empathy-item {
+  padding: 12px 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.02);
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.empathy-item:last-child { margin-bottom: 0; }
+.empathy-item:hover { border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.06); }
+.empathy-item.active { border-color: rgba(52,211,153,0.5); background: rgba(52,211,153,0.08); }
+.empathy-item-header {
+  display: flex; align-items: center; gap: 10px;
+  margin-bottom: 8px;
+}
+.emp-color-dot {
+  width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0;
+}
+.empathy-name {
+  font-size: 0.82rem;
+  font-weight: 600;
+  flex: 1;
+  color: var(--text-primary);
+}
+.score-bar-container {
+  display: flex; align-items: center; gap: 10px;
+  flex-shrink: 0;
+}
+.score-bar {
+  width: 80px; height: 6px;
+  background: var(--border);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.score-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.4s ease;
+}
+.score-value {
+  font-size: 0.78rem;
+  font-weight: 700;
+  width: 28px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.empathy-quote {
+  font-size: 0.76rem;
+  color: var(--text-secondary);
+  font-style: italic;
+  padding: 5px 10px;
+  background: rgba(255,255,255,0.03);
+  border-radius: 4px;
+  border-left: 3px solid;
+  font-family: 'JetBrains Mono', monospace;
+  margin-bottom: 6px;
+  line-height: 1.5;
+  white-space: normal;
+  word-break: break-word;
+}
+.empathy-reasoning {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+  display: none;
+}
+.empathy-item.active .empathy-reasoning { display: block; }
+
+/* ===== Tooltip ===== */
+.tooltip {
+  position: fixed;
+  z-index: 999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s;
+  max-width: 320px;
+}
+.tooltip.visible { opacity: 1; pointer-events: auto; }
+.tooltip-content {
+  background: #1c2128;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px 14px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+  font-size: 0.78rem;
+  line-height: 1.6;
+}
+.tooltip-title {
+  font-weight: 700;
+  margin-bottom: 6px;
+  font-size: 0.82rem;
+}
+.tooltip-label {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin-bottom: 3px;
+  margin-top: 8px;
+}
+.tooltip-text { color: var(--text-secondary); }
+.tooltip-score {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 700;
+  font-size: 0.75rem;
+}
+
+/* ===== Nav Arrows ===== */
+.nav-arrows {
+  position: fixed;
+  bottom: 24px;
+  right: 500px;
+  display: flex;
+  gap: 8px;
+  z-index: 200;
+}
+.nav-btn {
+  width: 40px; height: 40px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all 0.2s;
+}
+.nav-btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }
+.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+
+/* ===== Emotion colors by type ===== */
+.emotion-fear { background: rgba(248,113,113,0.15); color: #f87171; border-color: rgba(248,113,113,0.3); }
+.emotion-sadness { background: rgba(96,165,250,0.15); color: #60a5fa; border-color: rgba(96,165,250,0.3); }
+.emotion-anger { background: rgba(251,146,60,0.15); color: #fb923c; border-color: rgba(251,146,60,0.3); }
+.emotion-joy { background: rgba(251,191,36,0.15); color: #fbbf24; border-color: rgba(251,191,36,0.3); }
+.emotion-anxiety { background: rgba(167,139,250,0.15); color: #a78bfa; border-color: rgba(167,139,250,0.3); }
+.emotion-shame { background: rgba(232,121,249,0.15); color: #e879f9; border-color: rgba(232,121,249,0.3); }
+.emotion-depression { background: rgba(99,102,241,0.15); color: #818cf8; border-color: rgba(99,102,241,0.3); }
+.emotion-default { background: var(--emotion-bg); color: var(--emotion-color); border: 1px solid rgba(167,139,250,0.3); }
+
+/* Problem type badge */
+.problem-badge {
+  padding: 3px 8px;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.7rem;
+  color: var(--text-muted);
+}
+.experience-badge {
+  padding: 3px 8px;
+  background: rgba(88,166,255,0.08);
+  border: 1px solid rgba(88,166,255,0.2);
+  border-radius: var(--radius-sm);
+  font-size: 0.7rem;
+  color: var(--accent);
+}

style.css

@@ -0,0 +1,685 @@
+/* ===== CSS Variables ===== */
+:root {
+  --bg-primary: #0d1117;
+  --bg-secondary: #161b22;
+  --bg-card: #1c2128;
+  --bg-hover: #21262d;
+  --border: #30363d;
+  --border-light: #21262d;
+  --text-primary: #e6edf3;
+  --text-secondary: #8b949e;
+  --text-muted: #6e7681;
+  --accent: #58a6ff;
+  --accent-hover: #79c0ff;
+
+  --emotion-color: #a78bfa;
+  --emotion-bg: rgba(167, 139, 250, 0.12);
+  --distortion-color: #fb923c;
+  --distortion-bg: rgba(251, 146, 60, 0.12);
+  --empathy-color: #34d399;
+  --empathy-bg: rgba(52, 211, 153, 0.12);
+  --highlight-color: #fbbf24;
+
+  --speaker-bg: #1a2332;
+  --speaker-border: #1d4ed8;
+  --listener-bg: #1a2b1f;
+  --listener-border: #16a34a;
+
+  /* Highlight colors for evidence quotes */
+  --hl-distortion-1: rgba(251, 146, 60, 0.25);
+  --hl-distortion-2: rgba(248, 113, 113, 0.25);
+  --hl-distortion-3: rgba(251, 191, 36, 0.25);
+
+  --hl-empathy-concern: rgba(96, 165, 250, 0.22);
+  --hl-empathy-expressiveness: rgba(167, 139, 250, 0.22);
+  --hl-empathy-resonate: rgba(52, 211, 153, 0.22);
+  --hl-empathy-warmth: rgba(251, 191, 36, 0.22);
+  --hl-empathy-attuned: rgba(251, 146, 60, 0.22);
+  --hl-empathy-cognitive: rgba(248, 113, 113, 0.22);
+  --hl-empathy-feelings: rgba(129, 140, 248, 0.22);
+  --hl-empathy-acceptance: rgba(45, 212, 191, 0.22);
+  --hl-empathy-responsiveness: rgba(232, 121, 249, 0.22);
+
+  --radius-sm: 6px;
+  --radius: 10px;
+  --radius-lg: 14px;
+  --shadow: 0 4px 16px rgba(0,0,0,0.4);
+  --shadow-card: 0 2px 8px rgba(0,0,0,0.3);
+
+  --header-h: 60px;
+}
+
+/* ===== Reset & Base ===== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: 14px; scroll-behavior: smooth; }
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+  overflow: hidden;
+}
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* ===== Header ===== */
+.header {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  height: var(--header-h);
+  background: rgba(13, 17, 23, 0.92);
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(12px);
+  z-index: 100;
+}
+.header-inner {
+  max-width: 100%;
+  height: 100%;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.header-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.logo-icon {
+  width: 36px; height: 36px;
+  background: linear-gradient(135deg, var(--accent), var(--empathy-color));
+  border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  color: #fff;
+  flex-shrink: 0;
+}
+.header-logo h1 { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
+.header-logo p { font-size: 0.75rem; color: var(--text-muted); }
+.header-controls { display: flex; align-items: center; gap: 12px; }
+
+.file-upload-area {
+  display: flex; align-items: center; gap: 8px;
+  padding: 7px 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  transition: all 0.2s;
+  position: relative;
+  overflow: hidden;
+}
+.file-upload-area:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }
+.file-upload-area input[type="file"] {
+  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
+}
+.sample-counter {
+  padding: 6px 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+.sample-counter #currentIdx { color: var(--accent); font-weight: 600; }
+
+/* ===== Welcome Screen ===== */
+.welcome-screen {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-primary);
+  z-index: 50;
+  padding: 20px;
+}
+.welcome-card {
+  max-width: 480px;
+  width: 100%;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 40px;
+  text-align: center;
+  box-shadow: var(--shadow);
+}
+.welcome-icon {
+  width: 80px; height: 80px;
+  background: linear-gradient(135deg, rgba(88,166,255,0.15), rgba(52,211,153,0.15));
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  display: flex; align-items: center; justify-content: center;
+  margin: 0 auto 24px;
+  color: var(--accent);
+}
+.welcome-card h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
+.welcome-card p { color: var(--text-secondary); line-height: 1.6; margin-bottom: 28px; }
+.welcome-features {
+  display: flex; flex-direction: column; gap: 10px;
+  margin-bottom: 32px;
+  text-align: left;
+}
+.feature-item {
+  display: flex; align-items: center; gap: 10px;
+  font-size: 0.875rem; color: var(--text-secondary);
+}
+.feature-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.welcome-upload-btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 12px 28px;
+  background: linear-gradient(135deg, var(--accent), #388bfd);
+  color: #fff;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.2s;
+  font-size: 0.9rem;
+}
+.welcome-upload-btn:hover { opacity: 0.9; transform: translateY(-1px); }
+
+/* ===== Main Layout ===== */
+.main-layout {
+  position: fixed;
+  inset: 0;
+  top: var(--header-h);
+  display: grid;
+  grid-template-columns: 220px 1fr 340px;
+  overflow: hidden;
+}
+
+/* ===== Nav Panel ===== */
+.nav-panel {
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.nav-panel-header {
+  padding: 14px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.nav-panel-header h2 {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 10px;
+}
+.search-box {
+  display: flex; align-items: center; gap: 6px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+}
+.search-box svg { color: var(--text-muted); flex-shrink: 0; }
+.search-box input {
+  background: transparent; border: none; outline: none;
+  color: var(--text-primary); font-size: 0.8rem; width: 100%;
+}
+.search-box input::placeholder { color: var(--text-muted); }
+
+.sample-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.sample-item {
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 0.15s;
+  border: 1px solid transparent;
+}
+.sample-item:hover { background: var(--bg-hover); }
+.sample-item.active {
+  background: rgba(88,166,255,0.1);
+  border-color: rgba(88,166,255,0.3);
+}
+.sample-item-idx {
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  margin-bottom: 2px;
+}
+.sample-item-emotion {
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+.sample-item-problem {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ===== Conversation Panel ===== */
+.conversation-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-primary);
+}
+.conv-header {
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  background: var(--bg-secondary);
+}
+.conv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.meta-badge {
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+.legend { display: flex; align-items: center; gap: 14px; }
+.legend-item {
+  display: flex; align-items: center; gap: 5px;
+  font-size: 0.75rem; color: var(--text-muted);
+}
+.legend-dot {
+  width: 8px; height: 8px; border-radius: 2px;
+}
+.legend-dot.speaker { background: var(--speaker-border); }
+.legend-dot.listener { background: var(--listener-border); }
+
+.conversation-view {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.message-bubble {
+  max-width: 85%;
+  padding: 10px 14px;
+  border-radius: var(--radius);
+  border-left: 3px solid transparent;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  position: relative;
+  transition: all 0.2s;
+}
+.message-bubble.speaker {
+  background: var(--speaker-bg);
+  border-color: var(--speaker-border);
+  align-self: flex-end;
+  border-radius: var(--radius) var(--radius) var(--radius-sm) var(--radius);
+}
+.message-bubble.listener {
+  background: var(--listener-bg);
+  border-color: var(--listener-border);
+  align-self: flex-start;
+  border-radius: var(--radius) var(--radius) var(--radius) var(--radius-sm);
+}
+.message-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 4px;
+  opacity: 0.7;
+}
+.message-bubble.speaker .message-label { color: #60a5fa; }
+.message-bubble.listener .message-label { color: #4ade80; }
+
+/* Highlighted evidence text */
+mark.evidence-hl {
+  background: transparent;
+  border-radius: 3px;
+  padding: 1px 0;
+  cursor: pointer;
+  transition: all 0.15s;
+  border-bottom: 2px solid transparent;
+  position: relative;
+}
+mark.evidence-hl:hover { filter: brightness(1.3); }
+mark.evidence-pulse {
+  animation: evidence-glow 0.6s ease-in-out 3;
+  border-radius: 4px;
+}
+@keyframes evidence-glow {
+  0%, 100% { box-shadow: none; filter: brightness(1); }
+  50% { box-shadow: 0 0 12px 4px rgba(251, 191, 36, 0.5); filter: brightness(1.5); }
+}
+
+/* Distortion highlights */
+mark.dist-hl-0 { background: var(--hl-distortion-1); border-bottom-color: #fb923c; color: inherit; }
+mark.dist-hl-1 { background: var(--hl-distortion-2); border-bottom-color: #f87171; color: inherit; }
+mark.dist-hl-2 { background: var(--hl-distortion-3); border-bottom-color: #fbbf24; color: inherit; }
+
+/* Empathy dimension highlights */
+mark.emp-hl-0 { background: var(--hl-empathy-concern); border-bottom-color: #60a5fa; color: inherit; }
+mark.emp-hl-1 { background: var(--hl-empathy-expressiveness); border-bottom-color: #a78bfa; color: inherit; }
+mark.emp-hl-2 { background: var(--hl-empathy-resonate); border-bottom-color: #34d399; color: inherit; }
+mark.emp-hl-3 { background: var(--hl-empathy-warmth); border-bottom-color: #fbbf24; color: inherit; }
+mark.emp-hl-4 { background: var(--hl-empathy-attuned); border-bottom-color: #fb923c; color: inherit; }
+mark.emp-hl-5 { background: var(--hl-empathy-cognitive); border-bottom-color: #f87171; color: inherit; }
+mark.emp-hl-6 { background: var(--hl-empathy-feelings); border-bottom-color: #818cf8; color: inherit; }
+mark.emp-hl-7 { background: var(--hl-empathy-acceptance); border-bottom-color: #2dd4bf; color: inherit; }
+mark.emp-hl-8 { background: var(--hl-empathy-responsiveness); border-bottom-color: #e879f9; color: inherit; }
+
+/* ===== Annotation Panel ===== */
+.annotation-panel {
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border);
+  overflow-y: auto;
+  min-height: 0;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.anno-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: visible;
+  flex-shrink: 0;
+  transition: border-color 0.2s;
+}
+.anno-card:hover { border-color: var(--border-light); }
+.anno-card-header {
+  padding: 12px 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(255,255,255,0.02);
+}
+.anno-card-header h3 {
+  font-size: 0.85rem;
+  font-weight: 600;
+  flex: 1;
+}
+.anno-card-icon {
+  width: 28px; height: 28px;
+  border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.emotion-icon { background: var(--emotion-bg); color: var(--emotion-color); }
+.distortion-icon { background: var(--distortion-bg); color: var(--distortion-color); }
+.empathy-icon { background: var(--empathy-bg); color: var(--empathy-color); }
+
+.anno-content { padding: 12px 14px; }
+
+/* Emotion */
+.emotion-primary {
+  display: flex; align-items: center; gap: 10px;
+  margin-bottom: 10px;
+}
+.emotion-badge {
+  padding: 5px 12px;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  font-weight: 700;
+  background: var(--emotion-bg);
+  color: var(--emotion-color);
+  border: 1px solid rgba(167,139,250,0.3);
+}
+.intensity-badge {
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  font-size: 0.7rem;
+  font-weight: 600;
+  border: 1px solid;
+}
+.intensity-high { background: rgba(248,113,113,0.15); color: #f87171; border-color: rgba(248,113,113,0.3); }
+.intensity-medium { background: rgba(251,191,36,0.15); color: #fbbf24; border-color: rgba(251,191,36,0.3); }
+.intensity-low { background: rgba(52,211,153,0.15); color: #34d399; border-color: rgba(52,211,153,0.3); }
+.emotion-reasoning {
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  padding: 8px 10px;
+  background: rgba(255,255,255,0.03);
+  border-radius: var(--radius-sm);
+  border-left: 2px solid var(--emotion-color);
+}
+.specific-term {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+.specific-term span { color: var(--emotion-color); font-weight: 600; }
+
+/* Distortions */
+.distortion-item {
+  padding: 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.02);
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: all 0.15s;
+  position: relative;
+}
+.distortion-item:last-child { margin-bottom: 0; }
+.distortion-item:hover { border-color: var(--distortion-color); background: var(--distortion-bg); }
+.distortion-item.active { border-color: var(--distortion-color); background: var(--distortion-bg); }
+.distortion-name {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: var(--distortion-color);
+  margin-bottom: 5px;
+  display: flex; align-items: center; gap: 6px;
+}
+.dist-color-dot {
+  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
+}
+.distortion-quote {
+  font-size: 0.72rem;
+  color: var(--text-secondary);
+  font-style: italic;
+  margin-bottom: 5px;
+  padding: 4px 8px;
+  background: rgba(255,255,255,0.04);
+  border-radius: 4px;
+  border-left: 2px solid;
+  font-family: 'JetBrains Mono', monospace;
+}
+.distortion-reasoning {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+.no-distortions {
+  text-align: center;
+  padding: 16px;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+}
+.no-distortions svg { margin: 0 auto 6px; display: block; opacity: 0.4; }
+
+/* Empathy */
+.overall-score {
+  margin-left: auto;
+  padding: 3px 10px;
+  background: var(--empathy-bg);
+  color: var(--empathy-color);
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  border: 1px solid rgba(52,211,153,0.3);
+}
+.empathy-item {
+  padding: 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: rgba(255,255,255,0.02);
+  margin-bottom: 6px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.empathy-item:last-child { margin-bottom: 0; }
+.empathy-item:hover { border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.06); }
+.empathy-item.active { border-color: rgba(52,211,153,0.5); background: rgba(52,211,153,0.08); }
+.empathy-item-header {
+  display: flex; align-items: center; gap: 8px;
+  margin-bottom: 6px;
+}
+.emp-color-dot {
+  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
+}
+.empathy-name {
+  font-size: 0.75rem;
+  font-weight: 600;
+  flex: 1;
+  color: var(--text-primary);
+}
+.score-bar-container {
+  display: flex; align-items: center; gap: 8px;
+  flex-shrink: 0;
+}
+.score-bar {
+  width: 60px; height: 5px;
+  background: var(--border);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.score-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.4s ease;
+}
+.score-value {
+  font-size: 0.72rem;
+  font-weight: 700;
+  width: 24px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.empathy-quote {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  font-style: italic;
+  padding: 3px 7px;
+  background: rgba(255,255,255,0.03);
+  border-radius: 3px;
+  border-left: 2px solid;
+  font-family: 'JetBrains Mono', monospace;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.empathy-reasoning {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  line-height: 1.5;
+  display: none;
+}
+.empathy-item.active .empathy-reasoning { display: block; }
+
+/* ===== Tooltip ===== */
+.tooltip {
+  position: fixed;
+  z-index: 999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s;
+  max-width: 320px;
+}
+.tooltip.visible { opacity: 1; pointer-events: auto; }
+.tooltip-content {
+  background: #1c2128;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px 14px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+  font-size: 0.78rem;
+  line-height: 1.6;
+}
+.tooltip-title {
+  font-weight: 700;
+  margin-bottom: 6px;
+  font-size: 0.82rem;
+}
+.tooltip-label {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin-bottom: 3px;
+  margin-top: 8px;
+}
+.tooltip-text { color: var(--text-secondary); }
+.tooltip-score {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 700;
+  font-size: 0.75rem;
+}
+
+/* ===== Nav Arrows ===== */
+.nav-arrows {
+  position: fixed;
+  bottom: 24px;
+  right: 360px;
+  display: flex;
+  gap: 8px;
+  z-index: 200;
+}
+.nav-btn {
+  width: 40px; height: 40px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all 0.2s;
+}
+.nav-btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }
+.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+
+/* ===== Emotion colors by type ===== */
+.emotion-fear { background: rgba(248,113,113,0.15); color: #f87171; border-color: rgba(248,113,113,0.3); }
+.emotion-sadness { background: rgba(96,165,250,0.15); color: #60a5fa; border-color: rgba(96,165,250,0.3); }
+.emotion-anger { background: rgba(251,146,60,0.15); color: #fb923c; border-color: rgba(251,146,60,0.3); }
+.emotion-joy { background: rgba(251,191,36,0.15); color: #fbbf24; border-color: rgba(251,191,36,0.3); }
+.emotion-anxiety { background: rgba(167,139,250,0.15); color: #a78bfa; border-color: rgba(167,139,250,0.3); }
+.emotion-shame { background: rgba(232,121,249,0.15); color: #e879f9; border-color: rgba(232,121,249,0.3); }
+.emotion-depression { background: rgba(99,102,241,0.15); color: #818cf8; border-color: rgba(99,102,241,0.3); }
+.emotion-default { background: var(--emotion-bg); color: var(--emotion-color); border: 1px solid rgba(167,139,250,0.3); }
+
+/* Problem type badge */
+.problem-badge {
+  padding: 3px 8px;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.7rem;
+  color: var(--text-muted);
+}
+.experience-badge {
+  padding: 3px 8px;
+  background: rgba(88,166,255,0.08);
+  border: 1px solid rgba(88,166,255,0.2);
+  border-radius: var(--radius-sm);
+  font-size: 0.7rem;
+  color: var(--accent);
+}

templates/admin.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Admin — ESConv Annotation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/static/style.css"/>
+  <link rel="stylesheet" href="/static/admin.css"/>
+</head>
+<body>
+  <!-- Header -->
+  <header class="header">
+    <div class="header-inner">
+      <div class="header-logo">
+        <div class="logo-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        </div>
+        <div>
+          <h1>Admin Dashboard</h1>
+          <p>Manage files, users & assignments</p>
+        </div>
+      </div>
+      <div class="header-controls">
+        <span class="user-badge" id="userBadge">admin</span>
+        <button class="logout-btn" id="logoutBtn">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>
+          </svg>
+          Logout
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <main class="admin-main">
+    <!-- Tab Navigation -->
+    <div class="tab-nav">
+      <button class="tab-btn active" data-tab="files">📁 CSV Files</button>
+      <button class="tab-btn" data-tab="users">👥 Users</button>
+      <button class="tab-btn" data-tab="assignments">📋 Assignments</button>
+    </div>
+
+    <!-- Files Tab -->
+    <div class="tab-content active" id="tab-files">
+      <div class="section-header">
+        <h2>CSV Files</h2>
+        <p>Files in <code id="csvFolderPath"></code></p>
+      </div>
+      <div class="card-grid" id="filesList"></div>
+    </div>
+
+    <!-- Users Tab -->
+    <div class="tab-content" id="tab-users">
+      <div class="section-header">
+        <h2>Annotator Accounts</h2>
+        <button class="primary-btn" id="addUserBtn">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 5v14M5 12h14"/>
+          </svg>
+          Add User
+        </button>
+      </div>
+      <!-- Create User Form (hidden) -->
+      <div class="create-form" id="createUserForm" style="display:none">
+        <div class="form-row">
+          <input type="text" id="newUsername" placeholder="Username"/>
+          <input type="password" id="newPassword" placeholder="Password"/>
+          <select id="newRole"><option value="annotator">Annotator</option><option value="admin">Admin</option></select>
+          <button class="primary-btn" id="submitUserBtn">Create</button>
+          <button class="ghost-btn" id="cancelUserBtn">Cancel</button>
+        </div>
+        <div class="form-error" id="userFormError"></div>
+      </div>
+      <div class="table-container">
+        <table class="data-table" id="usersTable">
+          <thead><tr><th>ID</th><th>Username</th><th>Role</th><th>Created</th><th>Actions</th></tr></thead>
+          <tbody id="usersBody"></tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Assignments Tab -->
+    <div class="tab-content" id="tab-assignments">
+      <div class="section-header">
+        <h2>File Assignments</h2>
+        <button class="primary-btn" id="addAssignBtn">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 5v14M5 12h14"/>
+          </svg>
+          Assign File
+        </button>
+      </div>
+      <!-- Assign Form (hidden) -->
+      <div class="create-form" id="createAssignForm" style="display:none">
+        <div class="form-row">
+          <select id="assignUser"><option value="">Select User...</option></select>
+          <select id="assignFile"><option value="">Select File...</option></select>
+          <button class="primary-btn" id="submitAssignBtn">Assign</button>
+          <button class="ghost-btn" id="cancelAssignBtn">Cancel</button>
+        </div>
+        <div class="form-error" id="assignFormError"></div>
+      </div>
+      <div class="table-container">
+        <table class="data-table" id="assignTable">
+          <thead><tr><th>Annotator</th><th>File</th><th>Progress</th><th>Assigned</th><th>Actions</th></tr></thead>
+          <tbody id="assignBody"></tbody>
+        </table>
+      </div>
+    </div>
+  </main>
+  <script src="/static/admin.js"></script>
+</body>
+</html>

templates/annotator.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Annotator — ESConv Annotation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/static/style.css"/>
+  <link rel="stylesheet" href="/static/admin.css"/>
+</head>
+<body>
+  <header class="header">
+    <div class="header-inner">
+      <div class="header-logo">
+        <div class="logo-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        </div>
+        <div>
+          <h1>My Assignments</h1>
+          <p>Review LLM annotations</p>
+        </div>
+      </div>
+      <div class="header-controls">
+        <span class="user-badge" id="userBadge">annotator</span>
+        <button class="logout-btn" id="logoutBtn">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>
+          </svg>
+          Logout
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <main class="admin-main">
+    <div class="section-header">
+      <h2>Assigned Files</h2>
+    </div>
+    <div class="card-grid" id="assignmentCards"></div>
+    <div class="empty-state" id="emptyState" style="display:none">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity:.3;margin-bottom:12px">
+        <path 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>
+      <p>No files assigned to you yet.</p>
+      <p style="font-size:.8rem;color:var(--text-muted)">Contact admin to get files assigned.</p>
+    </div>
+  </main>
+
+  <script>
+    // Fetch user info
+    fetch('/api/me').then(r=>r.json()).then(u=>{
+      document.getElementById('userBadge').textContent = u.username;
+    });
+
+    // Logout
+    document.getElementById('logoutBtn').addEventListener('click', async()=>{
+      await fetch('/api/logout',{method:'POST'});
+      window.location.href = '/login';
+    });
+
+    // Load assignments
+    async function loadAssignments() {
+      const res = await fetch('/api/my-assignments');
+      const data = await res.json();
+      const grid = document.getElementById('assignmentCards');
+      const empty = document.getElementById('emptyState');
+
+      if (data.length === 0) { empty.style.display='block'; grid.innerHTML=''; return; }
+      empty.style.display='none';
+
+      grid.innerHTML = data.map(a => {
+        const pct = a.progress || 0;
+        const barColor = pct >= 100 ? '#34d399' : pct > 50 ? '#fbbf24' : '#60a5fa';
+        return `
+          <div class="file-card" onclick="window.location.href='/review/${a.id}'">
+            <div class="file-card-header">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--accent)">
+                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+                <polyline points="14 2 14 8 20 8"/>
+              </svg>
+              <span class="file-card-name">${a.filename}</span>
+            </div>
+            <div class="file-card-stats">
+              <span>${a.reviewed_count} / ${a.total_samples} reviewed</span>
+              <span style="color:${barColor};font-weight:700">${pct}%</span>
+            </div>
+            <div class="progress-bar">
+              <div class="progress-fill" style="width:${pct}%;background:${barColor}"></div>
+            </div>
+            ${pct >= 100 ? '<div class="completed-badge">✓ Completed</div>' : '<div class="continue-badge">Continue Review →</div>'}
+          </div>`;
+      }).join('');
+    }
+    loadAssignments();
+  </script>
+</body>
+</html>

templates/login.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Login — ESConv Annotation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/static/style.css"/>
+  <style>
+    body { display:flex; align-items:center; justify-content:center; min-height:100vh; overflow:auto; }
+    .login-card {
+      max-width:400px; width:100%;
+      background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
+      padding:40px; box-shadow:var(--shadow);
+    }
+    .login-card h1 { text-align:center; font-size:1.5rem; margin-bottom:6px; }
+    .login-card p { text-align:center; color:var(--text-muted); font-size:.85rem; margin-bottom:28px; }
+    .login-icon {
+      width:64px; height:64px; margin:0 auto 20px;
+      background:linear-gradient(135deg,rgba(88,166,255,.15),rgba(52,211,153,.15));
+      border:1px solid var(--border); border-radius:16px;
+      display:flex; align-items:center; justify-content:center; color:var(--accent);
+    }
+    .form-group { margin-bottom:16px; }
+    .form-group label { display:block; font-size:.8rem; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
+    .form-group input {
+      width:100%; padding:10px 14px;
+      background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius-sm);
+      color:var(--text-primary); font-size:.9rem; outline:none; transition:border-color .2s;
+    }
+    .form-group input:focus { border-color:var(--accent); }
+    .login-btn {
+      width:100%; padding:12px;
+      background:linear-gradient(135deg,var(--accent),#388bfd); color:#fff;
+      border:none; border-radius:var(--radius-sm); font-weight:600; font-size:.9rem;
+      cursor:pointer; transition:opacity .2s;
+    }
+    .login-btn:hover { opacity:.9; }
+    .login-error {
+      padding:8px 12px; background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3);
+      border-radius:var(--radius-sm); color:#f87171; font-size:.8rem; margin-bottom:14px;
+      display:none; text-align:center;
+    }
+    .login-error.show { display:block; }
+  </style>
+</head>
+<body>
+  <div class="login-card">
+    <div class="login-icon">
+      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>
+    </div>
+    <h1>ESConv Annotation</h1>
+    <p>Sign in to review annotations</p>
+    <div class="login-error" id="loginError"></div>
+    <form id="loginForm">
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input type="text" id="username" name="username" autocomplete="username" autofocus required/>
+      </div>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password" autocomplete="current-password" required/>
+      </div>
+      <button type="submit" class="login-btn">Sign In</button>
+    </form>
+  </div>
+  <script>
+    document.getElementById('loginForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const errEl = document.getElementById('loginError');
+      errEl.classList.remove('show');
+      const username = document.getElementById('username').value.trim();
+      const password = document.getElementById('password').value;
+      try {
+        const res = await fetch('/api/login', {
+          method:'POST', headers:{'Content-Type':'application/json'},
+          body: JSON.stringify({ username, password })
+        });
+        const data = await res.json();
+        if (res.ok) {
+          window.location.href = '/';
+        } else {
+          errEl.textContent = data.error || 'Login failed';
+          errEl.classList.add('show');
+        }
+      } catch(err) {
+        errEl.textContent = 'Network error';
+        errEl.classList.add('show');
+      }
+    });
+  </script>
+</body>
+</html>

templates/review.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Review — ESConv Annotation</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/static/style.css"/>
+  <link rel="stylesheet" href="/static/admin.css"/>
+</head>
+<body>
+  <!-- Header -->
+  <header class="header">
+    <div class="header-inner">
+      <div class="header-logo">
+        <a href="/" style="display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit">
+          <div class="logo-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+          <div>
+            <h1 id="reviewTitle">ESConv Review</h1>
+            <p id="reviewSubtitle">Loading...</p>
+          </div>
+        </a>
+      </div>
+      <div class="header-controls">
+        <div class="sample-counter" id="sampleCounter">
+          <span id="currentIdx">0</span> / <span id="totalSamples">0</span>
+        </div>
+        <span class="user-badge" id="userBadge"></span>
+        <div class="export-dropdown" style="position:relative">
+          <button class="logout-btn" id="exportBtn" style="padding:6px 12px;font-size:.8rem;border-color:var(--empathy-color);color:var(--empathy-color)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
+            </svg>
+            Export
+          </button>
+          <div class="export-menu" id="exportMenu" style="display:none;position:absolute;top:100%;right:0;margin-top:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);z-index:200;min-width:160px;overflow:hidden">
+            <button class="export-option" id="exportJSON" style="display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;background:none;border:none;color:var(--text-primary);font-size:.82rem;cursor:pointer;font-family:inherit;text-align:left;transition:background .15s" onmouseover="this.style.background='var(--bg-hover)'" onmouseout="this.style.background='none'">📄 Export JSON</button>
+            <button class="export-option" id="exportCSV" style="display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;background:none;border:none;color:var(--text-primary);font-size:.82rem;cursor:pointer;font-family:inherit;text-align:left;border-top:1px solid var(--border);transition:background .15s" onmouseover="this.style.background='var(--bg-hover)'" onmouseout="this.style.background='none'">📊 Export CSV</button>
+          </div>
+        </div>
+        <button class="logout-btn" id="logoutBtn" style="padding:6px 12px;font-size:.8rem">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>
+          </svg>
+          Logout
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <!-- Main Layout -->
+  <main class="main-layout" id="mainLayout">
+    <!-- Left: Navigation Panel -->
+    <aside class="nav-panel">
+      <div class="nav-panel-header">
+        <h2>Samples</h2>
+        <div class="search-box">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
+          </svg>
+          <input type="text" id="searchInput" placeholder="Filter..."/>
+        </div>
+      </div>
+      <div class="sample-list" id="sampleList"></div>
+    </aside>
+
+    <!-- Center: Conversation View -->
+    <section class="conversation-panel">
+      <div class="conv-header">
+        <div class="conv-meta" id="convMeta"></div>
+        <div class="legend">
+          <span class="legend-item"><span class="legend-dot speaker"></span>Speaker</span>
+          <span class="legend-item"><span class="legend-dot listener"></span>Listener</span>
+        </div>
+      </div>
+      <div class="selection-hint" id="selectionHint">✏️ Bôi đen đoạn text trong hội thoại để chọn evidence — nhấn <strong>Esc</strong> để huỷ</div>
+      <div class="conversation-view" id="conversationView"></div>
+    </section>
+
+    <!-- Right: Annotation + Review Panel -->
+    <aside class="annotation-panel">
+      <!-- Emotion Card -->
+      <div class="anno-card">
+        <div class="anno-card-header">
+          <div class="anno-card-icon emotion-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/>
+            </svg>
+          </div>
+          <h3>Emotion</h3>
+          <button class="edit-toggle-btn" id="editEmotionBtn" data-card="emotion">✏️ Edit</button>
+        </div>
+        <div id="emotionContent" class="anno-content"></div>
+      </div>
+      <!-- Distortions Card -->
+      <div class="anno-card">
+        <div class="anno-card-header">
+          <div class="anno-card-icon distortion-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
+            </svg>
+          </div>
+          <h3>Distortions</h3>
+          <button class="edit-toggle-btn" id="editDistBtn" data-card="distortions">✏️ Edit</button>
+        </div>
+        <div id="distortionsContent" class="anno-content"></div>
+      </div>
+      <!-- Empathy Card -->
+      <div class="anno-card">
+        <div class="anno-card-header">
+          <div class="anno-card-icon empathy-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
+            </svg>
+          </div>
+          <h3>Empathy</h3>
+          <div class="overall-score" id="overallScore"></div>
+          <button class="edit-toggle-btn" id="editEmpBtn" data-card="empathy">✏️ Edit</button>
+        </div>
+        <div id="empathyContent" class="anno-content"></div>
+      </div>
+      <!-- Review Card -->
+      <div class="anno-card review-card">
+        <div class="anno-card-header">
+          <div class="anno-card-icon" style="background:rgba(88,166,255,.12);color:var(--accent)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
+            </svg>
+          </div>
+          <h3>Your Review</h3>
+          <div class="review-status-badge" id="reviewStatusBadge" style="display:none"></div>
+        </div>
+        <div class="anno-content">
+          <div class="review-buttons">
+            <button class="review-btn accept-btn" id="acceptBtn">✓ Accept</button>
+            <button class="review-btn reject-btn" id="rejectBtn">✗ Reject</button>
+          </div>
+          <textarea class="review-comment" id="reviewComment" placeholder="Add a comment (optional)..." rows="3"></textarea>
+          <button class="submit-review-btn" id="submitReviewBtn">Submit Review</button>
+        </div>
+      </div>
+    </aside>
+  </main>
+
+  <!-- Tooltip -->
+  <div class="tooltip" id="tooltip">
+    <div class="tooltip-content" id="tooltipContent"></div>
+  </div>
+
+  <!-- Nav Arrows -->
+  <div class="nav-arrows" id="navArrows">
+    <button class="nav-btn" id="prevBtn" title="Previous">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+    </button>
+    <button class="nav-btn" id="nextBtn" title="Next">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+    </button>
+  </div>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>