Upload folder using huggingface_hub

.env

@@ -0,0 +1,2 @@
+OTREE_CSV_URL=http://otree-lab-games-790d4693d333.herokuapp.com/ExportSessionWide/aqoghhgp?token=6d91a4ad
+ADMIN_PASSWORD=bpel123

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "2", "app:app"]

app.py

@@ -0,0 +1,582 @@
+import io
+import json
+import os
+import time
+from dotenv import load_dotenv
+
+load_dotenv()
+import numpy as np
+import pandas as pd
+import requests
+from flask import Flask, render_template, request, Response, session, redirect, url_for
+
+
+app = Flask(__name__)
+app.secret_key = os.environ.get("FLASK_SECRET", os.urandom(24).hex())
+ADMIN_PASSWORD = os.environ.get("ADMIN_PASSWORD", "bpel123")
+
+
+@app.before_request
+def require_login():
+    if request.endpoint in ("login", "static"):
+        return
+    if not session.get("authenticated"):
+        if request.path.startswith("/api/"):
+            return Response("Unauthorized", status=401)
+        return redirect(url_for("login"))
+
+
+def to_json(obj):
+    """jsonify replacement that handles numpy types."""
+    def default(o):
+        if isinstance(o, (np.integer,)):
+            return int(o)
+        if isinstance(o, (np.floating,)):
+            if np.isnan(o):
+                return None
+            return float(o)
+        if isinstance(o, np.ndarray):
+            return o.tolist()
+        raise TypeError(f"{type(o)} not serializable")
+    data = json.dumps(obj, default=default)
+    return Response(data, mimetype="application/json")
+
+CSV_PATH = os.path.join(os.path.dirname(__file__), "all_apps_wide-2026-03-31.csv")
+OTREE_URL = os.environ.get("OTREE_CSV_URL", "")
+
+# Identifier columns to always include alongside app_collect_results
+ID_COLS = [
+    "participant.id_in_session",
+    "participant.code",
+    "participant.label",
+    "participant._current_app_name",
+    "participant._current_page_name",
+    "participant.treatment",
+    "participant.payoff",
+    "session.code",
+]
+
+COLLECT_PREFIX = "app_collect_results."
+
+# In-memory cache so we don't re-read disk on every request
+_cache = {"df": None, "mtime": 0}
+
+
+def _get_df():
+    """Return the dataframe, re-reading from disk only if the file changed."""
+    try:
+        mtime = os.path.getmtime(CSV_PATH)
+    except OSError:
+        mtime = 0
+    if _cache["df"] is None or mtime != _cache["mtime"]:
+        _cache["df"] = pd.read_csv(CSV_PATH)
+        _cache["mtime"] = mtime
+    return _cache["df"]
+
+
+def load_csv(collect_only=True):
+    df = _get_df().copy()
+    if collect_only:
+        collect_cols = [c for c in df.columns if c.startswith(COLLECT_PREFIX)]
+        keep = [c for c in ID_COLS if c in df.columns] + collect_cols
+        df = df[keep]
+    return df
+
+
+@app.route("/login", methods=["GET", "POST"])
+def login():
+    error = None
+    if request.method == "POST":
+        if request.form.get("password") == ADMIN_PASSWORD:
+            session["authenticated"] = True
+            return redirect(url_for("index"))
+        error = "Incorrect password"
+    return render_template("login.html", error=error)
+
+
+@app.route("/logout")
+def logout():
+    session.clear()
+    return redirect(url_for("login"))
+
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+@app.route("/api/data")
+def api_data():
+    collect_only = request.args.get("collect_only", "1") == "1"
+    df = load_csv(collect_only=collect_only)
+
+    display_cols = []
+    for c in df.columns:
+        if c.startswith(COLLECT_PREFIX):
+            parts = c.split(".")
+            display_cols.append(parts[-1])
+        elif c.startswith("participant."):
+            display_cols.append(c.replace("participant.", "p."))
+        elif c.startswith("session."):
+            display_cols.append(c.replace("session.", "s."))
+        else:
+            display_cols.append(c)
+
+    return to_json({
+        "columns": display_cols,
+        "raw_columns": list(df.columns),
+        "rows": df.fillna("").values.tolist(),
+        "total": len(df),
+    })
+
+
+@app.route("/api/fetch-otree", methods=["POST"])
+def fetch_otree():
+    """Pull fresh CSV from oTree and overwrite the local file."""
+    try:
+        resp = requests.get(OTREE_URL, timeout=30)
+        resp.raise_for_status()
+        # Validate it's actually CSV
+        df = pd.read_csv(io.StringIO(resp.text))
+        # Save to disk
+        df.to_csv(CSV_PATH, index=False)
+        # Bust cache
+        _cache["df"] = df
+        _cache["mtime"] = os.path.getmtime(CSV_PATH)
+        return to_json({"ok": True, "rows": len(df), "cols": len(df.columns)})
+    except Exception as e:
+        return to_json({"ok": False, "error": str(e)}), 502
+
+
+@app.route("/api/upload", methods=["POST"])
+def upload_csv():
+    """Accept an uploaded CSV file to replace the current dataset."""
+    f = request.files.get("file")
+    if not f:
+        return to_json({"ok": False, "error": "No file uploaded"}), 400
+    try:
+        df = pd.read_csv(f.stream)
+        df.to_csv(CSV_PATH, index=False)
+        _cache["df"] = df
+        _cache["mtime"] = os.path.getmtime(CSV_PATH)
+        return to_json({"ok": True, "rows": len(df), "cols": len(df.columns)})
+    except Exception as e:
+        return to_json({"ok": False, "error": str(e)}), 400
+
+
+@app.route("/api/payments")
+def api_payments():
+    """Return just PC_id, total_bonus, participant_session_id for the payments page."""
+    df = _get_df()
+    col_map = {
+        "app_collect_results.1.player.PC_id_manual_input": "PC_id",
+        "app_collect_results.1.player.total_bonus": "total_bonus",
+        "app_collect_results.1.player.participant_session_id": "participant_session_id",
+    }
+    keep = [c for c in col_map if c in df.columns]
+    sub = df[keep].rename(columns=col_map).fillna("")
+
+    # Distinct session ids sorted alphabetically
+    session_ids = sorted(set(str(v) for v in sub["participant_session_id"] if v != ""))
+
+    return to_json({
+        "columns": [col_map[c] for c in keep],
+        "rows": sub.values.tolist(),
+        "session_ids": session_ids,
+    })
+
+
+@app.route("/api/stats")
+def api_stats():
+    """Session-level stats dashboard data."""
+    df = _get_df().copy()
+
+    sid_col = "app_collect_results.1.player.participant_session_id"
+    app_col = "participant._current_app_name"
+    page_col = "participant._current_page_name"
+    bot_col = "participant._is_bot"
+    orphan_col = "app_collect_results.1.player.was_orphan"
+    dropout_col = "participant.midgame_dropout"
+    timeout_col = "participant.timed_out_from_coord_games"
+    duration_col = "participant.completion_duration_time"
+    treatment_col = "participant.treatment"
+
+    # Only rows with a non-empty participant_session_id = "completed"
+    df["_sid"] = df[sid_col].fillna("")
+    completed = df[df["_sid"] != ""]
+    incomplete = df[df["_sid"] == ""]
+
+    # App sequence (derived from column order)
+    app_order = []
+    for c in df.columns:
+        parts = c.split(".")
+        if len(parts) > 1 and parts[0] not in ("participant", "session") and parts[0] not in app_order:
+            app_order.append(parts[0])
+
+    # ---- Global summary ----
+    total = len(df)
+    n_completed = len(completed)
+    n_incomplete = len(incomplete)
+
+    durations = pd.to_numeric(completed[duration_col], errors="coerce").dropna()
+
+    global_summary = {
+        "total_rows": total,
+        "completed": n_completed,
+        "incomplete": n_incomplete,
+        "completion_rate": round(n_completed / total * 100, 1) if total else 0,
+        "orphans": int((df[orphan_col] == 1).sum()) if orphan_col in df.columns else 0,
+        "dropouts": int((pd.to_numeric(df[dropout_col], errors="coerce") == 1).sum()) if dropout_col in df.columns else 0,
+        "timed_out": int((pd.to_numeric(df[timeout_col], errors="coerce") == 1).sum()) if timeout_col in df.columns else 0,
+        "duration_median": round(durations.median(), 1) if len(durations) else None,
+        "duration_mean": round(durations.mean(), 1) if len(durations) else None,
+        "duration_min": round(durations.min(), 1) if len(durations) else None,
+        "duration_max": round(durations.max(), 1) if len(durations) else None,
+    }
+
+    # ---- Per-session breakdown ----
+    session_ids = sorted(completed["_sid"].unique())
+    per_session = []
+    for sid in session_ids:
+        s = completed[completed["_sid"] == sid]
+        s_dur = pd.to_numeric(s[duration_col], errors="coerce").dropna()
+        per_session.append({
+            "session_id": sid,
+            "n": len(s),
+            "orphans": int((s[orphan_col] == 1).sum()) if orphan_col in s.columns else 0,
+            "duration_median": round(s_dur.median(), 1) if len(s_dur) else None,
+            "duration_mean": round(s_dur.mean(), 1) if len(s_dur) else None,
+            "treatments": dict(s[treatment_col].fillna("(none)").value_counts()),
+        })
+
+    # ---- Current app/page funnel (where are people RIGHT NOW) ----
+    app_page = df[[app_col, page_col, "_sid"]].fillna("(empty)")
+    funnel = []
+    for a in app_order:
+        sub = app_page[app_page[app_col] == a]
+        if len(sub) == 0:
+            continue
+        pages = dict(sub[page_col].value_counts())
+        funnel.append({"app": a, "count": len(sub), "pages": pages})
+    # Also count those whose current_app is empty
+    empty_app = app_page[app_page[app_col] == "(empty)"]
+    if len(empty_app):
+        funnel.append({"app": "(no app)", "count": len(empty_app), "pages": {}})
+
+    # ---- Completed players: which app they finished at (current_app) ----
+    completed_funnel = []
+    for a in app_order:
+        n = int((completed[app_col] == a).sum())
+        if n:
+            completed_funnel.append({"app": a, "count": n})
+
+    return to_json({
+        "global": global_summary,
+        "per_session": per_session,
+        "funnel": funnel,
+        "completed_funnel": completed_funnel,
+        "app_order": app_order,
+    })
+
+
+@app.route("/api/signal")
+def api_signal():
+    """Signal game analysis for completed participants."""
+    df = _get_df()
+
+    sid_col = "app_collect_results.1.player.participant_session_id"
+    treat_col = "signal_game.1.group.treatment"
+    buys_col = "signal_game.1.player.buys_signal"
+    color_col = "participant.signal_color_choice"
+    skip_col = "participant.skip_signal_game"
+    intend_col = "signal_game.1.player.intends_to_buy"
+    intend_count_col = "signal_game.1.group.intend_count"
+    group_id_col = "signal_game.1.group.id_in_subsession"
+    success_col = "signal_game.1.group.group_success"
+    beliefs_col = "signal_game.1.player.beliefs_truthful"
+    reason_col = "signal_game.1.player.purchase_reason"
+    guess_col = "signal_game.1.player.guess_correct"
+    psid_col = "app_collect_results.1.player.participant_session_id"
+
+    # Filter: completed participants (non-empty session letter)
+    completed = df[df[sid_col].notna()].copy()
+    total_completed = len(completed)
+
+    # Played signal game = did not skip (skip == 0 or NaN with color present)
+    played = completed[completed[color_col].notna()].copy()
+    skipped = completed[~completed.index.isin(played.index)]
+    total_played = len(played)
+    total_skipped = len(skipped)
+
+    # Treatment labels
+    played["_treat"] = played[treat_col].map({0.0: "Control (0)", 1.0: "Treatment (1)"}).fillna("Unknown")
+
+    # ---- Treatment distribution ----
+    treat_dist = dict(played["_treat"].value_counts())
+
+    # ---- Buy rate by treatment ----
+    buy_by_treat = {}
+    for treat_name, group in played.groupby("_treat"):
+        n = len(group)
+        bought = int((group[buys_col] == 1).sum())
+        buy_by_treat[treat_name] = {
+            "n": n,
+            "bought": bought,
+            "pct": round(bought / n * 100, 1) if n else 0,
+        }
+
+    # ---- Color distribution by treatment ----
+    color_by_treat = {}
+    for treat_name, group in played.groupby("_treat"):
+        colors = dict(group[color_col].value_counts())
+        color_by_treat[treat_name] = colors
+
+    # ---- Overall color distribution ----
+    overall_colors = dict(played[color_col].value_counts())
+
+    # ---- Overall buy rate ----
+    total_bought = int((played[buys_col] == 1).sum())
+    overall_buy_pct = round(total_bought / total_played * 100, 1) if total_played else 0
+
+    # ---- Intend to buy (among those who have the field) ----
+    intend_df = played[played[intend_col].notna()]
+    intend_yes = int((intend_df[intend_col] == 1).sum())
+    intend_no = int((intend_df[intend_col] == 0).sum())
+
+
+
+    # ---- Group success by treatment ----
+    success_by_treat = {}
+    for treat_name, group in played.groupby("_treat"):
+        n = len(group)
+        succ = int((group[success_col] == 1).sum())
+        success_by_treat[treat_name] = {
+            "n": n,
+            "success": succ,
+            "pct": round(succ / n * 100, 1) if n else 0,
+        }
+
+    # ---- Success rate by group intend_count (treatment only) ----
+    treat_played = played[played["_treat"] == "Treatment (1)"]
+    treat_groups = treat_played.drop_duplicates(subset=[group_id_col])
+    treat_groups = treat_groups[treat_groups[intend_count_col].notna()]
+    success_by_intend = {}
+    for ic, g in treat_groups.groupby(intend_count_col):
+        n = len(g)
+        succ = int((g[success_col] == 1).sum())
+        success_by_intend[str(int(ic))] = {
+            "n_groups": n,
+            "success": succ,
+            "pct": round(succ / n * 100, 1) if n else 0,
+        }
+
+    # ---- Buy rate by others' intent count (treatment only) ----
+    tp = treat_played[treat_played[intend_count_col].notna() & treat_played[intend_col].notna()].copy()
+    tp["_others_intend"] = tp[intend_count_col] - tp[intend_col]
+    buy_by_others_intend = {}
+    for oi, g in tp.groupby("_others_intend"):
+        n = len(g)
+        bought = int((g[buys_col] == 1).sum())
+        buy_by_others_intend[str(int(oi))] = {
+            "n": n,
+            "bought": bought,
+            "pct": round(bought / n * 100, 1) if n else 0,
+        }
+
+
+    # ---- Buy rate by group intend_count (treatment only, per player) ----
+    buy_by_group_intend = {}
+    for ic, g in tp.groupby(intend_count_col):
+        n = len(g)
+        bought = int((g[buys_col] == 1).sum())
+        buy_by_group_intend[str(int(ic))] = {
+            "n": n,
+            "bought": bought,
+            "pct": round(bought / n * 100, 1) if n else 0,
+        }
+
+    # ---- Beliefs distribution (among those who answered) ----
+    beliefs_df = played[played[beliefs_col].notna()]
+    beliefs_dist = {str(int(k)): int(v) for k, v in beliefs_df[beliefs_col].value_counts().items()}
+
+    # ---- By session letter ----
+    per_session = []
+    for sid in sorted(played[psid_col].unique()):
+        s = played[played[psid_col] == sid]
+        n = len(s)
+        bought = int((s[buys_col] == 1).sum())
+        treats = dict(s["_treat"].value_counts())
+        colors = dict(s[color_col].value_counts())
+        per_session.append({
+            "session_id": sid,
+            "n": n,
+            "bought": bought,
+            "buy_pct": round(bought / n * 100, 1) if n else 0,
+            "treatments": treats,
+            "colors": colors,
+        })
+
+    return to_json({
+        "total_completed": total_completed,
+        "total_played": total_played,
+        "total_skipped": total_skipped,
+        "treat_dist": treat_dist,
+        "buy_by_treat": buy_by_treat,
+        "color_by_treat": color_by_treat,
+        "overall_colors": overall_colors,
+        "overall_buy_pct": overall_buy_pct,
+        "total_bought": total_bought,
+        "intend_yes": intend_yes,
+        "intend_no": intend_no,
+        "success_by_treat": success_by_treat,
+        "success_by_intend": success_by_intend,
+        "buy_by_others_intend": buy_by_others_intend,
+        "buy_by_group_intend": buy_by_group_intend,
+        "beliefs_dist": beliefs_dist,
+        "per_session": per_session,
+    })
+
+
+@app.route("/api/coop-games")
+def api_coop_games():
+    """Combined Prisoner's Dilemma + Stag Hunt dashboard data."""
+    df = _get_df()
+
+    sid_col = "app_collect_results.1.player.participant_session_id"
+
+    def analyze_game(prefix):
+        treat_col = f"{prefix}.1.player.treatment_cond"
+        coop_col = f"{prefix}.1.player.cooperate"
+        bot_col = f"{prefix}.1.player.is_bot"
+        payoff_col = f"{prefix}.1.player.payoff"
+        msg_col = f"{prefix}.1.player.messages"
+        comp_col = f"{prefix}.1.player.comprehension_passed"
+        gpwait_col = f"{prefix}.1.player.time_spent_gpwait"
+        instr_col = f"{prefix}.1.player.time_spent_game_instr_page"
+        group_col = f"{prefix}.1.player.persistent_group_id"
+
+        # Filter: non-NaN treatment_cond
+        played = df[df[treat_col].notna()].copy()
+        n = len(played)
+
+        # Treatment distribution
+        treat_dist = dict(played[treat_col].value_counts())
+
+        # Overall cooperation
+        n_coop = int((played[coop_col] == 1).sum())
+        n_defect = int((played[coop_col] == 0).sum())
+        coop_rate = round(n_coop / n * 100, 1) if n else 0
+
+        # Cooperation by treatment
+        coop_by_treat = {}
+        for t, g in played.groupby(treat_col):
+            gn = len(g)
+            gc = int((g[coop_col] == 1).sum())
+            coop_by_treat[t] = {"n": gn, "coop": gc, "pct": round(gc / gn * 100, 1) if gn else 0}
+
+        # Human vs bot cooperation by treatment (for bot conditions)
+        human_bot_coop = {}
+        for t, g in played.groupby(treat_col):
+            if bot_col in g.columns and g[bot_col].sum() > 0:
+                humans = g[g[bot_col] == 0]
+                bots = g[g[bot_col] == 1]
+                hc = int((humans[coop_col] == 1).sum())
+                bc = int((bots[coop_col] == 1).sum())
+                human_bot_coop[t] = {
+                    "human_n": len(humans), "human_coop": hc,
+                    "human_pct": round(hc / len(humans) * 100, 1) if len(humans) else 0,
+                    "bot_n": len(bots), "bot_coop": bc,
+                    "bot_pct": round(bc / len(bots) * 100, 1) if len(bots) else 0,
+                }
+
+        # Bots vs humans overall
+        n_bots = int((played[bot_col] == 1).sum()) if bot_col in played.columns else 0
+        n_humans = n - n_bots
+
+        # Payoff distribution
+        payoff_dist = {}
+        for t, g in played.groupby(treat_col):
+            vals = pd.to_numeric(g[payoff_col], errors="coerce").dropna()
+            payoff_dist[t] = {
+                "mean": round(vals.mean(), 2) if len(vals) else None,
+                "values": dict(vals.value_counts().sort_index()),
+            }
+
+        # Messages: how many non-empty per condition
+        msg_by_treat = {}
+        if msg_col in played.columns:
+            for t, g in played.groupby(treat_col):
+                msgs = g[msg_col].fillna("")
+                non_empty = int((msgs.str.len() > 0).sum())
+                msg_by_treat[t] = {"n": len(g), "with_msg": non_empty}
+
+        # Comprehension
+        comp_passed = int((played[comp_col] == 1).sum()) if comp_col in played.columns else n
+        comp_failed = n - comp_passed
+
+        # Per-session
+        per_session = []
+        for sid in sorted(played[sid_col].dropna().unique()):
+            s = played[played[sid_col] == sid]
+            sn = len(s)
+            sc = int((s[coop_col] == 1).sum())
+            treats = {}
+            for t, g in s.groupby(treat_col):
+                gn = len(g)
+                gc = int((g[coop_col] == 1).sum())
+                treats[t] = {"n": gn, "coop": gc, "pct": round(gc / gn * 100, 1) if gn else 0}
+            per_session.append({
+                "session_id": sid,
+                "n": sn,
+                "coop": sc,
+                "coop_pct": round(sc / sn * 100, 1) if sn else 0,
+                "treatments": treats,
+            })
+
+        return {
+            "n": n,
+            "n_humans": n_humans,
+            "n_bots": n_bots,
+            "n_coop": n_coop,
+            "n_defect": n_defect,
+            "coop_rate": coop_rate,
+            "treat_dist": treat_dist,
+            "coop_by_treat": coop_by_treat,
+            "human_bot_coop": human_bot_coop,
+            "payoff_dist": payoff_dist,
+            "msg_by_treat": msg_by_treat,
+            "comp_passed": comp_passed,
+            "comp_failed": comp_failed,
+            "per_session": per_session,
+        }
+
+    prisoner = analyze_game("app_prisoner")
+    stag = analyze_game("app_stag")
+
+    # Condition labels for the frontend
+    cond_labels = {
+        "condition_1": "Human + Chat",
+        "condition_2": "Human + No Chat",
+        "condition_3": "Bot + No Chat",
+        "condition_4": "Bot + Chat",
+    }
+
+    return to_json({
+        "prisoner": prisoner,
+        "stag": stag,
+        "cond_labels": cond_labels,
+    })
+
+
+@app.route("/api/columns")
+def api_columns():
+    df = _get_df()
+    groups = {}
+    for c in df.columns:
+        prefix = c.split(".")[0]
+        groups.setdefault(prefix, []).append(c)
+    return to_json(groups)
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,6 @@
+flask==3.1.3
+numpy==2.4.4
+pandas==3.0.2
+requests==2.33.1
+gunicorn==23.0.0
+python-dotenv==1.1.0

templates/index.html

@@ -0,0 +1,1210 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>oTree CSV Viewer</title>
+<style>
+  :root { --bg: #0f1117; --surface: #1a1d27; --sidebar: #14161e; --border: #2a2d3a; --text: #e0e0e0; --dim: #888; --accent: #6c9bff; --accent2: #4a7adf; --green: #4caf80; --red: #e05555; --orange: #e0a030; --purple: #9b7fdf; }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; display: flex; height: 100vh; overflow: hidden; }
+
+  /* ---- sidebar ---- */
+  .sidebar { width: 200px; min-width: 200px; background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
+  .sidebar .logo { padding: 16px 16px 12px; font-size: 15px; font-weight: 700; color: var(--accent); border-bottom: 1px solid var(--border); }
+  .sidebar nav { flex: 1; padding: 8px 0; }
+  .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--dim); text-decoration: none; font-size: 13px; font-weight: 500; border-left: 3px solid transparent; transition: all .15s; cursor: pointer; }
+  .sidebar nav a:hover { color: var(--text); background: rgba(108,155,255,.05); }
+  .sidebar nav a.active { color: var(--accent); border-left-color: var(--accent); background: rgba(108,155,255,.08); }
+  .sidebar nav a .icon { font-size: 16px; width: 20px; text-align: center; }
+  .sidebar .sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border); }
+  .sidebar .sidebar-footer .btn { width: 100%; font-size: 12px; padding: 7px 10px; }
+
+  /* ---- main ---- */
+  .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+  .page { display: none; flex-direction: column; flex: 1; overflow: hidden; }
+  .page.active { display: flex; }
+
+  /* ---- toolbar ---- */
+  .toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; min-height: 46px; }
+  .toolbar h2 { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
+  .toolbar input[type="text"] { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 5px 10px; border-radius: 4px; font-size: 13px; width: 220px; }
+  .toolbar label { font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
+  .toolbar input[type="checkbox"] { accent-color: var(--accent); }
+  .badge { background: var(--accent2); color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
+  .btn { background: var(--accent2); color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; white-space: nowrap; }
+  .btn:hover { background: var(--accent); }
+  .btn-green { background: var(--green); }
+  .btn-green:hover { background: #5dc090; }
+  .btn-dim { background: var(--border); color: var(--dim); }
+  .btn-dim:hover { background: #3a3d4a; color: var(--text); }
+  .sep { width: 1px; height: 22px; background: var(--border); }
+
+  /* ---- toast ---- */
+  .toast { position: fixed; top: 16px; right: 16px; padding: 10px 18px; border-radius: 6px; font-size: 13px; z-index: 999; color: #fff; opacity: 0; transition: opacity .3s; pointer-events: none; }
+  .toast.show { opacity: 1; }
+  .toast.ok { background: var(--green); }
+  .toast.err { background: var(--red); }
+
+  /* ---- table ---- */
+  .table-wrap { flex: 1; overflow: auto; }
+  table { width: 100%; border-collapse: collapse; }
+  thead { position: sticky; top: 0; z-index: 10; }
+  th { background: var(--surface); padding: 8px 10px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--dim); border-bottom: 2px solid var(--border); cursor: pointer; white-space: nowrap; user-select: none; }
+  th:hover { color: var(--accent); }
+  th .arrow { margin-left: 4px; font-size: 10px; }
+  td { padding: 5px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; }
+  tr:hover td { background: rgba(108,155,255,.07); }
+
+  .filter-row th { padding: 3px 3px 6px; }
+  .filter-row input { width: 100%; min-width: 60px; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 3px 5px; border-radius: 3px; font-size: 11px; }
+
+  td.val-bot { color: var(--red); font-weight: 600; }
+  td.val-orphan { color: var(--orange); font-weight: 600; }
+
+  /* ---- carousel delivery mode ---- */
+  .carousel-wrap { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 20px; gap: 20px; }
+  .carousel-wrap.active { display: flex; }
+  .carousel-progress { font-size: 13px; color: var(--dim); display: flex; align-items: center; gap: 12px; }
+  .carousel-progress .prog-bar { width: 200px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
+  .carousel-progress .prog-fill { height: 100%; background: var(--green); border-radius: 3px; transition: width .3s; }
+  .carousel-track { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; max-width: 1100px; overflow: hidden; }
+  .carousel-track .carousel-inner { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; transition: transform .25s cubic-bezier(.25,.1,.25,1); }
+  .carousel-card { background: var(--surface); border: 2px solid var(--border); border-radius: 16px; padding: 32px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; transition: all .3s; position: relative; }
+  .carousel-card.phantom { opacity: 0.3; filter: blur(1.5px); transform: scale(0.8); width: 200px; min-width: 200px; pointer-events: none; }
+  .carousel-card.phantom .cc-pc { font-size: 28px; }
+  .carousel-card.phantom .cc-amount { font-size: 22px; }
+  .carousel-card.focus { width: 360px; min-width: 360px; border-color: var(--accent); box-shadow: 0 0 30px rgba(108,155,255,.15); }
+  .carousel-card.paid { opacity: 0.25; border-color: var(--green); }
+  .carousel-card.focus.paid { opacity: 0.7; border-color: var(--green); box-shadow: 0 0 30px rgba(76,175,128,.15); }
+  .cc-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); }
+  .cc-pc { font-size: 48px; font-weight: 800; font-family: 'Consolas', 'Courier New', monospace; color: var(--accent); background: var(--bg); padding: 8px 24px; border-radius: 10px; border: 2px solid var(--border); letter-spacing: 2px; }
+  .cc-amount { font-size: 38px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
+  .cc-session { font-size: 12px; color: var(--dim); }
+  .cc-paid-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--green); padding: 4px 16px; border: 2px solid var(--green); border-radius: 20px; }
+  .carousel-nav { display: flex; align-items: center; gap: 16px; }
+  .carousel-nav .btn { font-size: 18px; padding: 10px 20px; }
+  .btn-paid { background: var(--green); font-size: 15px; padding: 10px 28px; font-weight: 700; }
+  .btn-paid:hover { background: #5dc090; }
+  .btn-paid.is-paid { background: var(--border); color: var(--dim); }
+  .carousel-keys { font-size: 11px; color: var(--dim); }
+
+  /* ---- session picker ---- */
+  .session-picker { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); align-items: center; }
+  .session-picker .label { font-size: 12px; color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-right: 4px; }
+  .session-chip { padding: 4px 12px; border-radius: 14px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); background: var(--bg); color: var(--dim); cursor: pointer; transition: all .15s; user-select: none; }
+  .session-chip:hover { border-color: var(--accent); color: var(--text); }
+  .session-chip.active { background: var(--accent2); border-color: var(--accent2); color: #fff; }
+  .session-chip.default-pick { box-shadow: 0 0 0 1px var(--green); }
+
+  /* ---- status bar ---- */
+  .status-bar { background: var(--surface); border-top: 1px solid var(--border); padding: 4px 16px; font-size: 12px; color: var(--dim); display: flex; justify-content: space-between; }
+
+  #fileInput { display: none; }
+
+  /* ======== STATS PAGE ======== */
+  .stats-scroll { flex: 1; overflow: auto; padding: 20px; }
+
+  /* KPI cards row */
+  .kpi-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
+  .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; min-width: 140px; flex: 1; }
+  .kpi .kpi-val { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
+  .kpi .kpi-label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
+  .kpi.green .kpi-val { color: var(--green); }
+  .kpi.red .kpi-val { color: var(--red); }
+  .kpi.orange .kpi-val { color: var(--orange); }
+  .kpi.accent .kpi-val { color: var(--accent); }
+  .kpi.purple .kpi-val { color: var(--purple); }
+
+  /* Section headings */
+  .stats-section { margin-bottom: 24px; }
+  .stats-section h3 { font-size: 13px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
+
+  /* Funnel bar chart */
+  .funnel { display: flex; flex-direction: column; gap: 6px; }
+  .funnel-row { display: flex; align-items: center; gap: 10px; }
+  .funnel-label { width: 220px; min-width: 220px; font-size: 12px; color: var(--dim); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .funnel-bar-bg { flex: 1; background: var(--surface); border-radius: 4px; height: 24px; position: relative; overflow: hidden; border: 1px solid var(--border); }
+  .funnel-bar { height: 100%; border-radius: 3px; transition: width .4s ease; display: flex; align-items: center; padding-left: 8px; font-size: 11px; font-weight: 600; color: #fff; min-width: 28px; }
+  .funnel-bar.completed { background: var(--green); }
+  .funnel-bar.current { background: var(--accent2); }
+  .funnel-count { width: 50px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
+  .funnel-pages { font-size: 11px; color: var(--dim); margin-left: 230px; margin-top: -2px; margin-bottom: 4px; }
+
+  /* Per-session table */
+  .session-table { width: 100%; border-collapse: collapse; }
+  .session-table th { background: var(--surface); padding: 8px 12px; font-size: 11px; text-transform: uppercase; color: var(--dim); border-bottom: 2px solid var(--border); text-align: left; cursor: default; }
+  .session-table td { padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 13px; font-variant-numeric: tabular-nums; }
+  .session-table tr:hover td { background: rgba(108,155,255,.05); }
+  .session-table .treat-chips { display: flex; gap: 4px; flex-wrap: wrap; }
+  .treat-chip { padding: 1px 8px; border-radius: 10px; font-size: 11px; background: rgba(155,127,223,.15); color: var(--purple); border: 1px solid rgba(155,127,223,.3); }
+
+  /* Duration bar */
+  .dur-bar-wrap { display: flex; align-items: center; gap: 8px; }
+  .dur-bar-bg { width: 100px; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
+  .dur-bar { height: 100%; background: var(--accent); border-radius: 4px; }
+
+  /* ---- Signal game ---- */
+  .donut-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
+  .donut-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; min-width: 260px; flex: 1; }
+  #page-coop .donut-card, #page-signal .donut-card { max-width: calc(33.333% - 14px); box-sizing: border-box; }
+  .donut-card h4 { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px; }
+  .hbar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+  .hbar-label { width: 110px; min-width: 110px; font-size: 12px; color: var(--dim); text-align: right; white-space: nowrap; }
+  .hbar-track { flex: 1; height: 22px; background: var(--bg); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); position: relative; }
+  .hbar-fill { height: 100%; border-radius: 3px; display: flex; align-items: center; padding-left: 8px; font-size: 11px; font-weight: 600; color: #fff; min-width: 2px; transition: width .4s; }
+  .hbar-val { min-width: 120px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .color-blue { background: #4a88e5; }
+  .color-red { background: #e05555; }
+  .color-yellow { background: #d4a830; }
+  .color-green { background: var(--green); }
+  .color-unknown { background: var(--dim); }
+  .color-ctrl { background: var(--accent2); }
+  .color-treat { background: var(--purple); }
+  .pct-ring { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
+  .pct-ring.green { background: conic-gradient(var(--green) var(--pct), var(--border) var(--pct)); color: var(--green); }
+  .pct-ring.accent { background: conic-gradient(var(--accent) var(--pct), var(--border) var(--pct)); color: var(--accent); }
+  .pct-inner { background: var(--surface); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
+
+  /* ---- Coop games side-by-side ---- */
+  .game-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
+  .game-col { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; }
+  .game-col h3 { font-size: 14px; font-weight: 700; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
+  .game-col h3.prisoner { color: var(--red); }
+  .game-col h3.stag { color: var(--green); }
+  .game-col h4 { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; margin: 14px 0 8px; }
+  .coop-bar { display: flex; height: 28px; border-radius: 4px; overflow: hidden; margin-bottom: 4px; border: 1px solid var(--border); }
+  .coop-bar .seg { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; transition: width .4s; }
+  .coop-bar .seg.coop { background: var(--green); }
+  .coop-bar .seg.defect { background: var(--red); }
+  .cond-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+  .cond-label { width: 130px; min-width: 130px; font-size: 12px; color: var(--dim); text-align: right; }
+  .cond-bar-wrap { flex: 1; }
+  .cond-stats { font-size: 11px; color: var(--dim); width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
+  .mini-legend { display: flex; gap: 14px; font-size: 11px; color: var(--dim); margin-bottom: 10px; }
+  .mini-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
+  .mini-legend .l-coop::before { background: var(--green); }
+  .mini-legend .l-defect::before { background: var(--red); }
+  .mini-legend .l-human::before { background: var(--accent); }
+  .mini-legend .l-bot::before { background: var(--purple); }
+</style>
+</head>
+<body>
+
+<!-- Sidebar -->
+<div class="sidebar">
+  <div class="logo">oTree Viewer</div>
+  <nav>
+    <a data-page="stats"><span class="icon">&#9671;</span> Session Stats</a>
+    <a class="active" data-page="results"><span class="icon">&#9638;</span> Collect Results</a>
+    <a data-page="signal"><span class="icon">&#9830;</span> Signal Game</a>
+    <a data-page="coop"><span class="icon">&#9876;</span> Prisoner + Stag</a>
+    <a data-page="payments"><span class="icon">&#36;</span> Payments</a>
+  </nav>
+  <div class="sidebar-footer">
+    <button class="btn btn-green" id="fetchBtn" style="width:100%;margin-bottom:6px">Fetch from oTree</button>
+    <button class="btn btn-dim" id="uploadBtn" style="width:100%">Upload CSV</button>
+    <input type="file" id="fileInput" accept=".csv">
+  </div>
+</div>
+
+<!-- Main -->
+<div class="main">
+
+  <!-- PAGE 0: STATS DASHBOARD -->
+  <div class="page" id="page-stats">
+    <div class="toolbar">
+      <h2>Session Stats</h2>
+      <div class="sep"></div>
+      <button class="btn" id="statsRefreshBtn">Reload</button>
+      <span class="badge" id="statsRefreshTime">-</span>
+    </div>
+    <div class="stats-scroll" id="statsBody">
+      <div style="color:var(--dim);padding:40px;text-align:center">Loading...</div>
+    </div>
+  </div>
+
+  <!-- PAGE 1: Collect Results -->
+  <div class="page active" id="page-results">
+    <div class="toolbar">
+      <h2>app_collect_results</h2>
+      <div class="sep"></div>
+      <input type="text" id="globalSearch" placeholder="Search all columns...">
+      <label><input type="checkbox" id="showAllCols"> All columns</label>
+      <label><input type="checkbox" id="hideBots"> Hide bots</label>
+      <button class="btn" id="refreshBtn">Reload</button>
+      <span class="badge" id="rowCount">-</span>
+    </div>
+    <div class="table-wrap">
+      <table>
+        <thead>
+          <tr id="headerRow"></tr>
+          <tr class="filter-row" id="filterRow"></tr>
+        </thead>
+        <tbody id="tbody"></tbody>
+      </table>
+    </div>
+    <div class="status-bar">
+      <span id="fileLabel">all_apps_wide-2026-03-31.csv</span>
+      <span id="lastRefresh"></span>
+    </div>
+  </div>
+
+  <!-- PAGE 3: Signal Game -->
+  <div class="page" id="page-signal">
+    <div class="toolbar">
+      <h2>Signal Game Analysis</h2>
+      <div class="sep"></div>
+      <button class="btn" id="sigRefreshBtn">Reload</button>
+      <span class="badge" id="sigRefreshTime">-</span>
+    </div>
+    <div class="stats-scroll" id="sigBody">
+      <div style="color:var(--dim);padding:40px;text-align:center">Loading...</div>
+    </div>
+  </div>
+
+  <!-- PAGE 4: Prisoner + Stag -->
+  <div class="page" id="page-coop">
+    <div class="toolbar">
+      <h2>Prisoner's Dilemma + Stag Hunt</h2>
+      <div class="sep"></div>
+      <button class="btn" id="coopRefreshBtn">Reload</button>
+      <span class="badge" id="coopRefreshTime">-</span>
+    </div>
+    <div class="stats-scroll" id="coopBody">
+      <div style="color:var(--dim);padding:40px;text-align:center">Loading...</div>
+    </div>
+  </div>
+
+  <!-- PAGE 2: Payments -->
+  <div class="page" id="page-payments">
+    <div class="toolbar">
+      <h2>Payments</h2>
+      <div class="sep"></div>
+      <input type="text" id="paySearch" placeholder="Search...">
+      <button class="btn" id="payRefreshBtn">Reload</button>
+      <button class="btn btn-green" id="carouselToggle">Delivery Mode</button>
+      <span class="badge" id="payRowCount">-</span>
+    </div>
+    <div class="session-picker" id="sessionPicker">
+      <span class="label">Session:</span>
+    </div>
+    <div class="table-wrap">
+      <table>
+        <thead>
+          <tr id="payHeaderRow"></tr>
+          <tr class="filter-row" id="payFilterRow"></tr>
+        </thead>
+        <tbody id="payTbody"></tbody>
+      </table>
+    </div>
+    <!-- Carousel delivery mode -->
+    <div class="carousel-wrap" id="carouselWrap">
+      <div class="carousel-progress">
+        <span id="carouselCount">0 / 0 paid</span>
+        <div class="prog-bar"><div class="prog-fill" id="carouselProgFill"></div></div>
+        <span id="carouselSession"></span>
+      </div>
+      <div class="carousel-track" id="carouselTrack"></div>
+      <div class="carousel-nav">
+        <button class="btn btn-dim" id="carPrev">&#9664; Prev</button>
+        <button class="btn btn-paid" id="carPaidBtn">Mark Paid</button>
+        <button class="btn btn-dim" id="carNext">Next &#9654;</button>
+      </div>
+      <div class="carousel-keys">Arrow keys to navigate &middot; Space to mark paid &middot; Esc to exit</div>
+    </div>
+
+    <div class="status-bar">
+      <span>Payments view</span>
+      <span id="payLastRefresh"></span>
+    </div>
+  </div>
+
+</div>
+
+<div id="toast" class="toast"></div>
+
+<script>
+const $ = s => document.querySelector(s);
+const $$ = s => document.querySelectorAll(s);
+
+// ===================== PAGE NAVIGATION =====================
+$$('.sidebar nav a').forEach(link => {
+  link.addEventListener('click', () => {
+    $$('.sidebar nav a').forEach(a => a.classList.remove('active'));
+    link.classList.add('active');
+    $$('.page').forEach(p => p.classList.remove('active'));
+    $(`#page-${link.dataset.page}`).classList.add('active');
+    if (link.dataset.page === 'payments' && PAY.columns.length === 0) loadPayments();
+    if (link.dataset.page === 'stats' && !statsLoaded) loadStats();
+    if (link.dataset.page === 'signal' && !signalLoaded) loadSignal();
+    if (link.dataset.page === 'coop' && !coopLoaded) loadCoop();
+  });
+});
+
+// ===================== TOAST =====================
+function toast(msg, ok) {
+  const el = $('#toast');
+  el.textContent = msg;
+  el.className = `toast show ${ok ? 'ok' : 'err'}`;
+  setTimeout(() => el.className = 'toast', 3000);
+}
+
+// ===================== FETCH / UPLOAD =====================
+async function fetchFromOtree() {
+  const btn = $('#fetchBtn');
+  btn.disabled = true; btn.textContent = 'Fetching...';
+  try {
+    const res = await fetch('/api/fetch-otree', { method: 'POST' });
+    const data = await res.json();
+    if (data.ok) {
+      toast(`Fetched ${data.rows} rows, ${data.cols} cols`, true);
+      await Promise.all([loadData(), loadPayments(), loadStats(), loadSignal(), loadCoop()]);
+    } else toast(`Fetch failed: ${data.error}`, false);
+  } catch (e) { toast(`Fetch error: ${e.message}`, false); }
+  btn.disabled = false; btn.textContent = 'Fetch from oTree';
+}
+
+async function uploadFile(file) {
+  const form = new FormData(); form.append('file', file);
+  try {
+    const res = await fetch('/api/upload', { method: 'POST', body: form });
+    const data = await res.json();
+    if (data.ok) { toast(`Uploaded ${data.rows} rows`, true); await Promise.all([loadData(), loadPayments(), loadStats()]); }
+    else toast(`Upload failed: ${data.error}`, false);
+  } catch (e) { toast(`Upload error: ${e.message}`, false); }
+}
+
+$('#fetchBtn').addEventListener('click', fetchFromOtree);
+$('#uploadBtn').addEventListener('click', () => $('#fileInput').click());
+$('#fileInput').addEventListener('change', e => { if (e.target.files[0]) uploadFile(e.target.files[0]); e.target.value = ''; });
+
+// ===================== PAGE 0: STATS DASHBOARD =====================
+let statsLoaded = false;
+
+function fmtDur(secs) {
+  if (secs == null) return '-';
+  const m = Math.floor(secs / 60), s = Math.round(secs % 60);
+  return `${m}m ${s < 10 ? '0' : ''}${s}s`;
+}
+
+async function loadStats() {
+  const res = await fetch('/api/stats');
+  const S = await res.json();
+  statsLoaded = true;
+  const g = S.global;
+  const maxFunnel = Math.max(...S.funnel.map(f => f.count), 1);
+  const maxDur = S.per_session.length ? Math.max(...S.per_session.map(s => s.duration_mean || 0)) : 1;
+
+  let html = '';
+
+  // ---- KPI row ----
+  html += `<div class="kpi-row">
+    <div class="kpi accent"><div class="kpi-val">${g.total_rows}</div><div class="kpi-label">Total participants</div></div>
+    <div class="kpi green"><div class="kpi-val">${g.completed}</div><div class="kpi-label">Completed</div></div>
+    <div class="kpi"><div class="kpi-val">${g.incomplete}</div><div class="kpi-label">Incomplete</div></div>
+    <div class="kpi green"><div class="kpi-val">${g.completion_rate}%</div><div class="kpi-label">Completion rate</div></div>
+    <div class="kpi orange"><div class="kpi-val">${g.orphans}</div><div class="kpi-label">Orphans</div></div>
+    <div class="kpi red"><div class="kpi-val">${g.dropouts}</div><div class="kpi-label">Dropouts</div></div>
+    <div class="kpi red"><div class="kpi-val">${g.timed_out}</div><div class="kpi-label">Timed out</div></div>
+  </div>`;
+
+  // ---- Duration KPIs ----
+  html += `<div class="kpi-row">
+    <div class="kpi purple"><div class="kpi-val">${fmtDur(g.duration_median)}</div><div class="kpi-label">Median duration</div></div>
+    <div class="kpi"><div class="kpi-val">${fmtDur(g.duration_mean)}</div><div class="kpi-label">Mean duration</div></div>
+    <div class="kpi"><div class="kpi-val">${fmtDur(g.duration_min)}</div><div class="kpi-label">Fastest</div></div>
+    <div class="kpi"><div class="kpi-val">${fmtDur(g.duration_max)}</div><div class="kpi-label">Slowest</div></div>
+  </div>`;
+
+  // ---- Current position funnel ----
+  html += `<div class="stats-section"><h3>Where are participants right now?</h3><div class="funnel">`;
+  for (const f of S.funnel) {
+    const pct = (f.count / maxFunnel * 100).toFixed(1);
+    const pages = Object.entries(f.pages).sort((a,b) => b[1] - a[1]).map(([p,n]) => `${p} (${n})`).join(', ');
+    html += `<div class="funnel-row">
+      <div class="funnel-label" title="${f.app}">${f.app.replace('app_','')}</div>
+      <div class="funnel-bar-bg"><div class="funnel-bar current" style="width:${pct}%">${f.count}</div></div>
+      <div class="funnel-count">${pct}%</div>
+    </div>`;
+    if (pages) html += `<div class="funnel-pages">${pages}</div>`;
+  }
+  html += `</div></div>`;
+
+  // ---- Per-session breakdown ----
+  html += `<div class="stats-section"><h3>Per-session breakdown (completed only)</h3>
+    <table class="session-table">
+      <thead><tr><th>Session</th><th>Completed</th><th>Orphans</th><th>Mean duration</th><th>Median duration</th><th>Treatments</th></tr></thead><tbody>`;
+  for (const s of S.per_session) {
+    const durPct = maxDur ? ((s.duration_mean || 0) / maxDur * 100).toFixed(0) : 0;
+    const treats = Object.entries(s.treatments).map(([t,n]) => `<span class="treat-chip">${t} (${n})</span>`).join('');
+    html += `<tr>
+      <td><strong>${s.session_id}</strong></td>
+      <td>${s.n}</td>
+      <td>${s.orphans || 0}</td>
+      <td><div class="dur-bar-wrap"><div class="dur-bar-bg"><div class="dur-bar" style="width:${durPct}%"></div></div>${fmtDur(s.duration_mean)}</div></td>
+      <td>${fmtDur(s.duration_median)}</td>
+      <td><div class="treat-chips">${treats}</div></td>
+    </tr>`;
+  }
+  html += `</tbody></table></div>`;
+
+  // ---- App pipeline ----
+  html += `<div class="stats-section"><h3>App pipeline order</h3>
+    <div style="display:flex;gap:4px;flex-wrap:wrap;align-items:center">`;
+  S.app_order.forEach((a, i) => {
+    html += `<span style="background:var(--surface);border:1px solid var(--border);padding:4px 10px;border-radius:4px;font-size:12px;color:var(--text)">${i+1}. ${a.replace('app_','')}</span>`;
+    if (i < S.app_order.length - 1) html += `<span style="color:var(--dim);font-size:10px">&#9654;</span>`;
+  });
+  html += `</div></div>`;
+
+  $('#statsBody').innerHTML = html;
+  $('#statsRefreshTime').textContent = new Date().toLocaleTimeString();
+}
+
+$('#statsRefreshBtn').addEventListener('click', loadStats);
+
+// ===================== PAGE 1: COLLECT RESULTS =====================
+let DATA = { columns: [], rows: [], raw_columns: [] };
+let sortCol = -1, sortAsc = true, colFilters = [];
+
+async function loadData() {
+  const allCols = $('#showAllCols').checked;
+  const res = await fetch(`/api/data?collect_only=${allCols ? '0' : '1'}`);
+  DATA = await res.json();
+  colFilters = DATA.columns.map(() => '');
+  sortCol = -1;
+  buildHeader(); renderResults();
+  $('#lastRefresh').textContent = `Refreshed ${new Date().toLocaleTimeString()}`;
+}
+
+function buildHeader() {
+  const hr = $('#headerRow'), fr = $('#filterRow');
+  hr.innerHTML = DATA.columns.map((c, i) =>
+    `<th data-col="${i}" title="${DATA.raw_columns[i]}">${c}<span class="arrow"></span></th>`
+  ).join('');
+  fr.innerHTML = DATA.columns.map((_, i) =>
+    `<th><input type="text" data-col="${i}" placeholder="filter"></th>`
+  ).join('');
+  hr.querySelectorAll('th').forEach(th =>
+    th.addEventListener('click', () => { const ci = +th.dataset.col; if (sortCol === ci) sortAsc = !sortAsc; else { sortCol = ci; sortAsc = true; } renderResults(); })
+  );
+  fr.querySelectorAll('input').forEach(inp =>
+    inp.addEventListener('input', () => { colFilters[+inp.dataset.col] = inp.value.toLowerCase(); renderResults(); })
+  );
+}
+
+function renderResults() {
+  const globalQ = $('#globalSearch').value.toLowerCase();
+  const hideBots = $('#hideBots').checked;
+  const botIdx = DATA.columns.indexOf('is_bot');
+  let rows = DATA.rows;
+
+  if (hideBots && botIdx !== -1) rows = rows.filter(r => String(r[botIdx]) !== '1' && String(r[botIdx]).toLowerCase() !== 'true');
+  rows = rows.filter(r => colFilters.every((f, i) => !f || String(r[i]).toLowerCase().includes(f)));
+  if (globalQ) rows = rows.filter(r => r.some(v => String(v).toLowerCase().includes(globalQ)));
+
+  if (sortCol >= 0) {
+    rows = [...rows].sort((a, b) => {
+      let va = a[sortCol], vb = b[sortCol];
+      if (va === '' && vb === '') return 0; if (va === '') return 1; if (vb === '') return -1;
+      const na = parseFloat(va), nb = parseFloat(vb);
+      if (!isNaN(na) && !isNaN(nb)) return sortAsc ? na - nb : nb - na;
+      return sortAsc ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va));
+    });
+  }
+
+  $('#headerRow').querySelectorAll('th').forEach(th => {
+    const ci = +th.dataset.col;
+    th.querySelector('.arrow').textContent = ci === sortCol ? (sortAsc ? '\u25B2' : '\u25BC') : '';
+  });
+
+  const orphanIdx = DATA.columns.indexOf('was_orphan');
+  $('#tbody').innerHTML = rows.map(r =>
+    `<tr>${r.map((v, ci) => {
+      let cls = '';
+      if (ci === botIdx && (String(v) === '1' || String(v).toLowerCase() === 'true')) cls = ' class="val-bot"';
+      if (ci === orphanIdx && (String(v) === '1' || String(v).toLowerCase() === 'true')) cls = ' class="val-orphan"';
+      return `<td${cls}>${v}</td>`;
+    }).join('')}</tr>`
+  ).join('');
+
+  $('#rowCount').textContent = `${rows.length} / ${DATA.total} rows`;
+}
+
+$('#globalSearch').addEventListener('input', renderResults);
+$('#hideBots').addEventListener('change', renderResults);
+$('#showAllCols').addEventListener('change', loadData);
+$('#refreshBtn').addEventListener('click', loadData);
+
+// ===================== PAGE 2: PAYMENTS =====================
+let PAY = { columns: [], rows: [], session_ids: [] };
+let paySortCol = -1, paySortAsc = true, payColFilters = [];
+let selectedSessions = new Set();
+
+async function loadPayments() {
+  const res = await fetch('/api/payments');
+  PAY = await res.json();
+  payColFilters = PAY.columns.map(() => '');
+  paySortCol = -1;
+
+  selectedSessions.clear();
+  const saved = localStorage.getItem('selectedSessions');
+  if (saved) {
+    JSON.parse(saved).forEach(id => { if (PAY.session_ids.includes(id)) selectedSessions.add(id); });
+  }
+  if (selectedSessions.size === 0 && PAY.session_ids.length > 0) {
+    selectedSessions.add(PAY.session_ids[PAY.session_ids.length - 1]);
+  }
+
+  buildSessionPicker();
+  buildPayHeader();
+  renderPayments();
+  if (localStorage.getItem('deliveryMode') === '1' && !carouselActive) toggleCarousel();
+  $('#payLastRefresh').textContent = `Refreshed ${new Date().toLocaleTimeString()}`;
+}
+
+function buildSessionPicker() {
+  const picker = $('#sessionPicker');
+  const lastId = PAY.session_ids.length > 0 ? PAY.session_ids[PAY.session_ids.length - 1] : null;
+  picker.innerHTML = '<span class="label">Session:</span>' +
+    PAY.session_ids.map(id => {
+      const active = selectedSessions.has(id) ? ' active' : '';
+      const dflt = id === lastId ? ' default-pick' : '';
+      return `<span class="session-chip${active}${dflt}" data-sid="${id}">${id}</span>`;
+    }).join('');
+
+  picker.querySelectorAll('.session-chip').forEach(chip => {
+    chip.addEventListener('click', () => {
+      const sid = chip.dataset.sid;
+      if (selectedSessions.has(sid)) selectedSessions.delete(sid);
+      else selectedSessions.add(sid);
+      chip.classList.toggle('active');
+      localStorage.setItem('selectedSessions', JSON.stringify([...selectedSessions]));
+      renderPayments();
+    });
+  });
+}
+
+function buildPayHeader() {
+  const hr = $('#payHeaderRow'), fr = $('#payFilterRow');
+  hr.innerHTML = PAY.columns.map((c, i) =>
+    `<th data-col="${i}">${c}<span class="arrow"></span></th>`
+  ).join('');
+  fr.innerHTML = PAY.columns.map((_, i) =>
+    `<th><input type="text" data-col="${i}" placeholder="filter"></th>`
+  ).join('');
+  hr.querySelectorAll('th').forEach(th =>
+    th.addEventListener('click', () => { const ci = +th.dataset.col; if (paySortCol === ci) paySortAsc = !paySortAsc; else { paySortCol = ci; paySortAsc = true; } renderPayments(); })
+  );
+  fr.querySelectorAll('input').forEach(inp =>
+    inp.addEventListener('input', () => { payColFilters[+inp.dataset.col] = inp.value.toLowerCase(); renderPayments(); })
+  );
+}
+
+function renderPayments() {
+  const q = $('#paySearch').value.toLowerCase();
+  const sidIdx = PAY.columns.indexOf('participant_session_id');
+  let rows = PAY.rows;
+
+  if (selectedSessions.size > 0 && sidIdx !== -1) {
+    rows = rows.filter(r => selectedSessions.has(String(r[sidIdx])));
+  }
+
+  rows = rows.filter(r => payColFilters.every((f, i) => !f || String(r[i]).toLowerCase().includes(f)));
+  if (q) rows = rows.filter(r => r.some(v => String(v).toLowerCase().includes(q)));
+
+  if (paySortCol >= 0) {
+    rows = [...rows].sort((a, b) => {
+      let va = a[paySortCol], vb = b[paySortCol];
+      if (va === '' && vb === '') return 0; if (va === '') return 1; if (vb === '') return -1;
+      const na = parseFloat(va), nb = parseFloat(vb);
+      if (!isNaN(na) && !isNaN(nb)) return paySortAsc ? na - nb : nb - na;
+      return paySortAsc ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va));
+    });
+  }
+
+  $('#payHeaderRow').querySelectorAll('th').forEach(th => {
+    const ci = +th.dataset.col;
+    th.querySelector('.arrow').textContent = ci === paySortCol ? (paySortAsc ? '\u25B2' : '\u25BC') : '';
+  });
+
+  $('#payTbody').innerHTML = rows.map(r =>
+    `<tr>${r.map(v => `<td>${v}</td>`).join('')}</tr>`
+  ).join('');
+
+  $('#payRowCount').textContent = `${rows.length} / ${PAY.rows.length} rows`;
+}
+
+$('#paySearch').addEventListener('input', renderPayments);
+$('#payRefreshBtn').addEventListener('click', loadPayments);
+
+// ===================== CAROUSEL DELIVERY MODE =====================
+let carouselActive = false;
+let carouselIdx = 0;
+let carouselRows = [];  // sorted rows for delivery
+let paidSet = new Set(); // keys: "session::pcid"
+
+function paidKey(row) {
+  const pcIdx = PAY.columns.indexOf('PC_id');
+  const sidIdx = PAY.columns.indexOf('participant_session_id');
+  return `${row[sidIdx]}::${row[pcIdx]}`;
+}
+
+function loadPaidState() {
+  try {
+    const saved = localStorage.getItem('paidState');
+    if (saved) paidSet = new Set(JSON.parse(saved));
+  } catch(e) {}
+}
+
+function savePaidState() {
+  localStorage.setItem('paidState', JSON.stringify([...paidSet]));
+}
+
+function toggleCarousel() {
+  carouselActive = !carouselActive;
+  const tableWrap = document.querySelector('#page-payments .table-wrap');
+  const sessionPicker = $('#sessionPicker');
+  const searchInput = $('#paySearch');
+  const wrap = $('#carouselWrap');
+  const btn = $('#carouselToggle');
+
+  if (carouselActive) {
+    tableWrap.style.display = 'none';
+    sessionPicker.style.display = 'none';
+    searchInput.style.display = 'none';
+    wrap.classList.add('active');
+    btn.textContent = 'Table Mode';
+    btn.classList.remove('btn-green');
+    btn.classList.add('btn-dim');
+    localStorage.setItem('deliveryMode', '1');
+    buildCarousel();
+  } else {
+    tableWrap.style.display = '';
+    sessionPicker.style.display = '';
+    searchInput.style.display = '';
+    wrap.classList.remove('active');
+    btn.textContent = 'Delivery Mode';
+    btn.classList.remove('btn-dim');
+    btn.classList.add('btn-green');
+    localStorage.setItem('deliveryMode', '0');
+  }
+}
+
+function buildCarousel() {
+  const pcIdx = PAY.columns.indexOf('PC_id');
+  const sidIdx = PAY.columns.indexOf('participant_session_id');
+  const bonusIdx = PAY.columns.indexOf('total_bonus');
+
+  // Filter by selected sessions
+  let rows = PAY.rows;
+  if (selectedSessions.size > 0 && sidIdx !== -1) {
+    rows = rows.filter(r => selectedSessions.has(String(r[sidIdx])));
+  }
+
+  // Sort by PC_id numerically
+  carouselRows = [...rows].sort((a, b) => {
+    const va = parseFloat(a[pcIdx]) || 0;
+    const vb = parseFloat(b[pcIdx]) || 0;
+    return va - vb;
+  });
+
+  // Skip to first unpaid
+  carouselIdx = 0;
+  for (let i = 0; i < carouselRows.length; i++) {
+    if (!paidSet.has(paidKey(carouselRows[i]))) { carouselIdx = i; break; }
+  }
+
+  renderCarousel();
+}
+
+function renderCarousel() {
+  const pcIdx = PAY.columns.indexOf('PC_id');
+  const bonusIdx = PAY.columns.indexOf('total_bonus');
+  const sidIdx = PAY.columns.indexOf('participant_session_id');
+  const track = $('#carouselTrack');
+  const n = carouselRows.length;
+
+  if (n === 0) {
+    track.innerHTML = '<div style="color:var(--dim)">No participants in selected session(s)</div>';
+    return;
+  }
+
+  // Clamp index
+  if (carouselIdx < 0) carouselIdx = 0;
+  if (carouselIdx >= n) carouselIdx = n - 1;
+
+  function makeCard(row, type) {
+    if (!row) return `<div class="carousel-card phantom" style="visibility:hidden"></div>`;
+    const pc = row[pcIdx] || '?';
+    const amount = row[bonusIdx] !== '' ? `$${parseFloat(row[bonusIdx]).toFixed(2)}` : '$—';
+    const session = row[sidIdx] || '';
+    const isPaid = paidSet.has(paidKey(row));
+    const paidClass = isPaid ? ' paid' : '';
+    return `<div class="carousel-card ${type}${paidClass}">
+      <div class="cc-label">PC Station</div>
+      <div class="cc-pc">${pc}</div>
+      <div class="cc-label">Payment</div>
+      <div class="cc-amount">${amount}</div>
+      <div class="cc-session">Session ${session}</div>
+      ${isPaid ? '<div class="cc-paid-badge">Paid</div>' : ''}
+    </div>`;
+  }
+
+  const prev = carouselIdx > 0 ? carouselRows[carouselIdx - 1] : null;
+  const curr = carouselRows[carouselIdx];
+  const next = carouselIdx < n - 1 ? carouselRows[carouselIdx + 1] : null;
+
+  track.innerHTML = `<div class="carousel-inner">${makeCard(prev, 'phantom') + makeCard(curr, 'focus') + makeCard(next, 'phantom')}</div>`;
+
+  // Update paid button
+  const isPaid = paidSet.has(paidKey(curr));
+  const paidBtn = $('#carPaidBtn');
+  paidBtn.textContent = isPaid ? 'Undo Paid' : 'Mark Paid';
+  paidBtn.classList.toggle('is-paid', isPaid);
+
+  // Update progress
+  const paidCount = carouselRows.filter(r => paidSet.has(paidKey(r))).length;
+  $('#carouselCount').textContent = `${paidCount} / ${n} paid`;
+  $('#carouselProgFill').style.width = `${n ? (paidCount / n * 100) : 0}%`;
+  const sessions = [...new Set(carouselRows.map(r => r[sidIdx]))].filter(Boolean);
+  $('#carouselSession').textContent = sessions.length ? `Session ${sessions.join(', ')}` : '';
+}
+
+function carouselMarkPaid() {
+  if (carouselRows.length === 0 || carouselAnimating) return;
+  const key = paidKey(carouselRows[carouselIdx]);
+  if (paidSet.has(key)) {
+    paidSet.delete(key);
+    savePaidState();
+    renderCarousel();
+  } else {
+    paidSet.add(key);
+    savePaidState();
+    // Auto-advance to next unpaid
+    let nextIdx = -1;
+    for (let i = carouselIdx + 1; i < carouselRows.length; i++) {
+      if (!paidSet.has(paidKey(carouselRows[i]))) { nextIdx = i; break; }
+    }
+    if (nextIdx >= 0) {
+      renderCarousel(); // update paid badge on current
+      setTimeout(() => slideCarousel('left', nextIdx), 200);
+    } else {
+      renderCarousel();
+    }
+  }
+}
+
+let carouselAnimating = false;
+
+function slideCarousel(direction, newIdx) {
+  if (carouselAnimating) return;
+  const n = carouselRows.length;
+  if (newIdx < 0 || newIdx >= n) return;
+  if (newIdx === carouselIdx) return;
+  carouselAnimating = true;
+  const inner = $('#carouselTrack').querySelector('.carousel-inner');
+  if (!inner) { carouselIdx = newIdx; renderCarousel(); carouselAnimating = false; return; }
+  const shift = direction === 'left' ? '-110%' : '110%';
+  inner.style.transform = `translateX(${shift})`;
+  inner.addEventListener('transitionend', function handler() {
+    inner.removeEventListener('transitionend', handler);
+    carouselIdx = newIdx;
+    renderCarousel();
+    const newInner = $('#carouselTrack').querySelector('.carousel-inner');
+    // Start off-screen on the opposite side, no transition
+    newInner.style.transition = 'none';
+    newInner.style.transform = `translateX(${direction === 'left' ? '110%' : '-110%'})`;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        // Slide in
+        newInner.style.transition = '';
+        newInner.style.transform = 'translateX(0)';
+        newInner.addEventListener('transitionend', function done() {
+          newInner.removeEventListener('transitionend', done);
+          carouselAnimating = false;
+        });
+      });
+    });
+  });
+}
+
+$('#carouselToggle').addEventListener('click', toggleCarousel);
+$('#carPrev').addEventListener('click', () => slideCarousel('right', carouselIdx - 1));
+$('#carNext').addEventListener('click', () => slideCarousel('left', carouselIdx + 1));
+$('#carPaidBtn').addEventListener('click', carouselMarkPaid);
+
+document.addEventListener('keydown', (e) => {
+  if (!carouselActive) return;
+  if (e.key === 'ArrowLeft') { e.preventDefault(); slideCarousel('right', carouselIdx - 1); }
+  else if (e.key === 'ArrowRight') { e.preventDefault(); slideCarousel('left', carouselIdx + 1); }
+  else if (e.key === ' ') { e.preventDefault(); carouselMarkPaid(); }
+  else if (e.key === 'Escape') { toggleCarousel(); }
+});
+
+loadPaidState();
+
+// ===================== PAGE 3: SIGNAL GAME =====================
+let signalLoaded = false;
+
+const COLOR_CSS = { Blue: 'color-blue', Red: 'color-red', Yellow: 'color-yellow', Green: 'color-green' };
+
+function hbar(label, value, max, cssClass, suffix) {
+  const pct = max ? (value / max * 100).toFixed(1) : 0;
+  return `<div class="hbar">
+    <div class="hbar-label">${label}</div>
+    <div class="hbar-track"><div class="hbar-fill ${cssClass}" style="width:${pct}%">${value}</div></div>
+    <div class="hbar-val">${suffix || ''}</div>
+  </div>`;
+}
+
+function pctRing(pct, cls) {
+  return `<div class="pct-ring ${cls}" style="--pct:${pct}%"><div class="pct-inner">${pct}%</div></div>`;
+}
+
+async function loadSignal() {
+  const res = await fetch('/api/signal');
+  const S = await res.json();
+  signalLoaded = true;
+
+  const maxTreat = Math.max(...Object.values(S.treat_dist));
+  const maxColor = Math.max(...Object.values(S.overall_colors));
+  let html = '';
+
+  // ---- KPI row ----
+  html += `<div class="kpi-row">
+    <div class="kpi accent"><div class="kpi-val">${S.total_completed}</div><div class="kpi-label">Completed participants</div></div>
+    <div class="kpi green"><div class="kpi-val">${S.total_played}</div><div class="kpi-label">Played signal game</div></div>
+    <div class="kpi orange"><div class="kpi-val">${S.total_skipped}</div><div class="kpi-label">Skipped</div></div>
+    <div class="kpi purple"><div class="kpi-val">${S.overall_buy_pct}%</div><div class="kpi-label">Bought signal (overall)</div></div>
+    <div class="kpi"><div class="kpi-val">${S.total_bought} / ${S.total_played}</div><div class="kpi-label">Buyers / players</div></div>
+  </div>`;
+
+  // ---- Treatment distribution ----
+  html += `<div class="donut-row">`;
+
+  html += `<div class="donut-card"><h4>Treatment distribution</h4>`;
+  for (const [t, n] of Object.entries(S.treat_dist).sort()) {
+    const cls = t.includes('Control') ? 'color-ctrl' : 'color-treat';
+    html += hbar(t, n, maxTreat, cls, `${(n / S.total_played * 100).toFixed(0)}%`);
+  }
+  html += `</div>`;
+
+  // ---- Buy rate by treatment ----
+  html += `<div class="donut-card"><h4>Buy rate by treatment</h4>`;
+  for (const [t, d] of Object.entries(S.buy_by_treat).sort()) {
+    const cls = t.includes('Control') ? 'color-ctrl' : 'color-treat';
+    html += `<div class="hbar">
+      <div class="hbar-label">${t}</div>
+      <div class="hbar-track"><div class="hbar-fill ${cls}" style="width:${d.pct}%">${d.bought}/${d.n}</div></div>
+      <div class="hbar-val">${d.pct}%</div>
+    </div>`;
+  }
+  html += `</div>`;
+
+  // ---- Group success by treatment ----
+  html += `<div class="donut-card"><h4>Group success by treatment</h4>`;
+  for (const [t, d] of Object.entries(S.success_by_treat).sort()) {
+    const cls = t.includes('Control') ? 'color-ctrl' : 'color-treat';
+    html += `<div class="hbar">
+      <div class="hbar-label">${t}</div>
+      <div class="hbar-track"><div class="hbar-fill ${cls}" style="width:${d.pct}%">${d.success}/${d.n}</div></div>
+      <div class="hbar-val">${d.pct}%</div>
+    </div>`;
+  }
+  html += `</div>`;
+
+  html += `</div>`; // close donut-row
+
+  // ---- Color distribution overall ----
+  html += `<div class="donut-row">`;
+  html += `<div class="donut-card"><h4>Color choice (overall)</h4>`;
+  for (const [c, n] of Object.entries(S.overall_colors).sort((a,b) => b[1] - a[1])) {
+    html += hbar(c, n, maxColor, COLOR_CSS[c] || 'color-unknown', `${(n / S.total_played * 100).toFixed(0)}%`);
+  }
+  html += `</div>`;
+
+  // ---- Color by treatment ----
+  for (const [t, colors] of Object.entries(S.color_by_treat).sort()) {
+    const maxC = Math.max(...Object.values(colors));
+    const total = Object.values(colors).reduce((a,b) => a+b, 0);
+    html += `<div class="donut-card"><h4>Colors — ${t}</h4>`;
+    for (const [c, n] of Object.entries(colors).sort((a,b) => b[1] - a[1])) {
+      html += hbar(c, n, maxC, COLOR_CSS[c] || 'color-unknown', `${(n / total * 100).toFixed(0)}%`);
+    }
+    html += `</div>`;
+  }
+  html += `</div>`;
+
+  // ---- Intent ----
+  html += `<div class="donut-row">`;
+  html += `<div class="donut-card"><h4>Intended to buy (pre-decision)</h4>`;
+  const intentTotal = S.intend_yes + S.intend_no;
+  if (intentTotal) {
+    html += hbar('Yes', S.intend_yes, intentTotal, 'color-green', `${(S.intend_yes/intentTotal*100).toFixed(0)}%`);
+    html += hbar('No', S.intend_no, intentTotal, 'color-red', `${(S.intend_no/intentTotal*100).toFixed(0)}%`);
+  } else {
+    html += `<div style="color:var(--dim);font-size:12px">No intent data</div>`;
+  }
+  html += `</div>`;
+
+  // ---- Success by intent count (treatment only) ----
+  html += `<div class="donut-card"><h4>Success rate by group intent count (Treatment)</h4>`;
+  const sbi = S.success_by_intend || {};
+  const sbiKeys = Object.keys(sbi).sort((a,b) => +a - +b);
+  if (sbiKeys.length) {
+    for (const k of sbiKeys) {
+      const d = sbi[k];
+      html += hbar(`${k} intend`, d.pct, 100, 'color-green', `${d.pct}% (${d.success}/${d.n_groups})`);
+    }
+  } else {
+    html += `<div style="color:var(--dim);font-size:12px">No data</div>`;
+  }
+  html += `</div>`;
+
+  html += `</div>`; // close first donut-row
+
+  // ---- Second row ----
+  html += `<div class="donut-row">`;
+
+  // ---- Buy rate by others' intent (treatment only) ----
+  html += `<div class="donut-card"><h4>Buy rate by others' intent count (Treatment)</h4>`;
+  const boi = S.buy_by_others_intend || {};
+  const boiKeys = Object.keys(boi).sort((a,b) => +a - +b);
+  if (boiKeys.length) {
+    for (const k of boiKeys) {
+      const d = boi[k];
+      html += hbar(`${k} others`, d.pct, 100, 'color-treat', `${d.pct}% (${d.bought}/${d.n})`);
+    }
+  } else {
+    html += `<div style="color:var(--dim);font-size:12px">No data</div>`;
+  }
+  html += `</div>`;
+
+
+  // ---- Buy rate by group intend count (treatment only) ----
+  html += `<div class="donut-card"><h4>Buy rate by group intent count (Treatment)</h4>`;
+  const bgi = S.buy_by_group_intend || {};
+  const bgiKeys = Object.keys(bgi).sort((a,b) => +a - +b);
+  if (bgiKeys.length) {
+    for (const k of bgiKeys) {
+      const d = bgi[k];
+      html += hbar(`${k}/7 intend`, d.pct, 100, 'color-treat', `${d.pct}% (${d.bought}/${d.n})`);
+    }
+  } else {
+    html += `<div style="color:var(--dim);font-size:12px">No data</div>`;
+  }
+  html += `</div>`;
+
+  // ---- Beliefs ----
+  html += `<div class="donut-card"><h4>Beliefs truthful (1-6 scale)</h4>`;
+  const maxBelief = Math.max(...Object.values(S.beliefs_dist), 1);
+  for (let i = 0; i <= 6; i++) {
+    const n = S.beliefs_dist[String(i)] || 0;
+    if (n > 0) html += hbar(String(i), n, maxBelief, 'color-ctrl', '');
+  }
+  html += `</div>`;
+  html += `</div>`;
+
+  // ---- Per session table ----
+  html += `<div class="stats-section"><h3>Per-session breakdown</h3>
+    <table class="session-table">
+      <thead><tr><th>Session</th><th>Played</th><th>Bought</th><th>Buy %</th><th>Treatments</th><th>Colors</th></tr></thead><tbody>`;
+  for (const s of S.per_session) {
+    const treats = Object.entries(s.treatments).map(([t,n]) => `<span class="treat-chip">${t} (${n})</span>`).join('');
+    const colors = Object.entries(s.colors).sort((a,b) => b[1]-a[1]).map(([c,n]) =>
+      `<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${c === 'Blue' ? '#4a88e5' : c === 'Red' ? '#e05555' : c === 'Yellow' ? '#d4a830' : c === 'Green' ? '#4caf80' : '#888'};margin-right:2px" title="${c}"></span>${n}`
+    ).join(' &nbsp;');
+    html += `<tr>
+      <td><strong>${s.session_id}</strong></td>
+      <td>${s.n}</td>
+      <td>${s.bought}</td>
+      <td>${s.buy_pct}%</td>
+      <td><div class="treat-chips">${treats}</div></td>
+      <td>${colors}</td>
+    </tr>`;
+  }
+  html += `</tbody></table></div>`;
+
+  $('#sigBody').innerHTML = html;
+  $('#sigRefreshTime').textContent = new Date().toLocaleTimeString();
+}
+
+$('#sigRefreshBtn').addEventListener('click', loadSignal);
+
+// ===================== PAGE 4: PRISONER + STAG =====================
+let coopLoaded = false;
+
+function coopBar(coop, defect) {
+  const total = coop + defect;
+  if (!total) return '';
+  const cPct = (coop / total * 100).toFixed(1);
+  const dPct = (defect / total * 100).toFixed(1);
+  return `<div class="coop-bar">
+    <div class="seg coop" style="width:${cPct}%">${coop > 0 ? coop : ''}</div>
+    <div class="seg defect" style="width:${dPct}%">${defect > 0 ? defect : ''}</div>
+  </div>`;
+}
+
+function renderGameCol(game, label, cssClass, condLabels) {
+  const g = game;
+  let h = `<h3 class="${cssClass}">${label}</h3>`;
+
+  // KPIs
+  h += `<div class="kpi-row" style="margin-bottom:14px">
+    <div class="kpi" style="min-width:80px;padding:10px 14px"><div class="kpi-val" style="font-size:22px">${g.n}</div><div class="kpi-label">Played</div></div>
+    <div class="kpi" style="min-width:80px;padding:10px 14px"><div class="kpi-val" style="font-size:22px">${g.n_humans}</div><div class="kpi-label">Humans</div></div>
+    <div class="kpi" style="min-width:80px;padding:10px 14px"><div class="kpi-val purple" style="font-size:22px">${g.n_bots}</div><div class="kpi-label">Bots</div></div>
+    <div class="kpi ${g.coop_rate > 50 ? 'green' : 'red'}" style="min-width:80px;padding:10px 14px"><div class="kpi-val" style="font-size:22px">${g.coop_rate}%</div><div class="kpi-label">Coop rate</div></div>
+  </div>`;
+
+  // Overall coop bar
+  h += `<div class="mini-legend"><span class="l-coop">Cooperate</span><span class="l-defect">Defect</span></div>`;
+  h += coopBar(g.n_coop, g.n_defect);
+  h += `<div style="font-size:11px;color:var(--dim);margin-bottom:6px">${g.n_coop} cooperate / ${g.n_defect} defect</div>`;
+
+  // By condition
+  h += `<h4>Cooperation by condition</h4>`;
+  const conds = Object.keys(g.coop_by_treat).sort();
+  for (const c of conds) {
+    const d = g.coop_by_treat[c];
+    const lbl = condLabels[c] || c;
+    h += `<div class="cond-row">
+      <div class="cond-label">${lbl}</div>
+      <div class="cond-bar-wrap">${coopBar(d.coop, d.n - d.coop)}</div>
+      <div class="cond-stats">${d.coop}/${d.n} (${d.pct}%)</div>
+    </div>`;
+  }
+
+  // Human vs Bot in bot conditions
+  if (Object.keys(g.human_bot_coop).length) {
+    h += `<h4>Human vs Bot (bot conditions)</h4>`;
+    h += `<div class="mini-legend"><span class="l-human">Human</span><span class="l-bot">Bot</span></div>`;
+    for (const c of Object.keys(g.human_bot_coop).sort()) {
+      const d = g.human_bot_coop[c];
+      const lbl = condLabels[c] || c;
+      h += `<div style="font-size:12px;color:var(--dim);margin-bottom:2px;font-weight:600">${lbl}</div>`;
+      h += `<div class="cond-row">
+        <div class="cond-label" style="width:80px;min-width:80px">Human</div>
+        <div class="cond-bar-wrap">${coopBar(d.human_coop, d.human_n - d.human_coop)}</div>
+        <div class="cond-stats">${d.human_coop}/${d.human_n} (${d.human_pct}%)</div>
+      </div>`;
+      h += `<div class="cond-row">
+        <div class="cond-label" style="width:80px;min-width:80px">Bot</div>
+        <div class="cond-bar-wrap">${coopBar(d.bot_coop, d.bot_n - d.bot_coop)}</div>
+        <div class="cond-stats">${d.bot_coop}/${d.bot_n} (${d.bot_pct}%)</div>
+      </div>`;
+    }
+  }
+
+  // Messages
+  if (Object.keys(g.msg_by_treat).length) {
+    h += `<h4>Chat messages by condition</h4>`;
+    for (const c of Object.keys(g.msg_by_treat).sort()) {
+      const d = g.msg_by_treat[c];
+      const lbl = condLabels[c] || c;
+      const pct = d.n ? (d.with_msg / d.n * 100).toFixed(0) : 0;
+      h += `<div class="hbar">
+        <div class="hbar-label" style="width:130px;min-width:130px">${lbl}</div>
+        <div class="hbar-track"><div class="hbar-fill color-ctrl" style="width:${pct}%">${d.with_msg}</div></div>
+        <div class="hbar-val">${d.with_msg}/${d.n}</div>
+      </div>`;
+    }
+  }
+
+  // Comprehension
+  h += `<h4>Comprehension</h4>`;
+  const compTotal = g.comp_passed + g.comp_failed;
+  const compPct = compTotal ? (g.comp_passed / compTotal * 100).toFixed(1) : 0;
+  h += `<div class="hbar">
+    <div class="hbar-label" style="width:80px;min-width:80px">Passed</div>
+    <div class="hbar-track"><div class="hbar-fill color-green" style="width:${compPct}%">${g.comp_passed}</div></div>
+    <div class="hbar-val">${compPct}%</div>
+  </div>`;
+  if (g.comp_failed > 0) {
+    h += `<div style="font-size:11px;color:var(--red);margin-top:2px">${g.comp_failed} failed comprehension</div>`;
+  }
+
+  // Payoff by condition
+  h += `<h4>Mean payoff by condition</h4>`;
+  const maxPay = Math.max(...Object.values(g.payoff_dist).map(d => d.mean || 0), 1);
+  for (const c of conds) {
+    const d = g.payoff_dist[c];
+    const lbl = condLabels[c] || c;
+    const pct = d.mean != null ? (d.mean / 5 * 100).toFixed(0) : 0; // max payoff is 5
+    h += `<div class="hbar">
+      <div class="hbar-label" style="width:130px;min-width:130px">${lbl}</div>
+      <div class="hbar-track"><div class="hbar-fill ${cssClass === 'prisoner' ? 'color-red' : 'color-green'}" style="width:${pct}%">${d.mean != null ? d.mean : '-'}</div></div>
+      <div class="hbar-val"></div>
+    </div>`;
+  }
+
+  return h;
+}
+
+async function loadCoop() {
+  const res = await fetch('/api/coop-games');
+  const S = await res.json();
+  coopLoaded = true;
+
+  let html = '';
+
+  // ---- Side by side game panels ----
+  html += `<div class="game-cols">`;
+  html += `<div class="game-col">${renderGameCol(S.prisoner, "Prisoner's Dilemma", 'prisoner', S.cond_labels)}</div>`;
+  html += `<div class="game-col">${renderGameCol(S.stag, "Stag Hunt", 'stag', S.cond_labels)}</div>`;
+  html += `</div>`;
+
+  // ---- Per-session comparison table ----
+  html += `<div class="stats-section"><h3>Per-session cooperation rates</h3>`;
+  html += `<table class="session-table"><thead><tr>
+    <th>Session</th>
+    <th>PD Played</th><th>PD Coop %</th>
+    <th>SH Played</th><th>SH Coop %</th>
+    <th>PD by condition</th><th>SH by condition</th>
+  </tr></thead><tbody>`;
+
+  const allSids = new Set([
+    ...S.prisoner.per_session.map(s => s.session_id),
+    ...S.stag.per_session.map(s => s.session_id),
+  ]);
+  const pdMap = Object.fromEntries(S.prisoner.per_session.map(s => [s.session_id, s]));
+  const shMap = Object.fromEntries(S.stag.per_session.map(s => [s.session_id, s]));
+
+  for (const sid of [...allSids].sort()) {
+    const pd = pdMap[sid] || { n: 0, coop_pct: 0, treatments: {} };
+    const sh = shMap[sid] || { n: 0, coop_pct: 0, treatments: {} };
+    const pdTreats = Object.entries(pd.treatments).sort().map(([c, d]) =>
+      `<span class="treat-chip">${S.cond_labels[c] || c}: ${d.pct}%</span>`
+    ).join(' ');
+    const shTreats = Object.entries(sh.treatments).sort().map(([c, d]) =>
+      `<span class="treat-chip">${S.cond_labels[c] || c}: ${d.pct}%</span>`
+    ).join(' ');
+
+    const pdColor = pd.coop_pct >= 50 ? 'var(--green)' : 'var(--red)';
+    const shColor = sh.coop_pct >= 50 ? 'var(--green)' : 'var(--red)';
+
+    html += `<tr>
+      <td><strong>${sid}</strong></td>
+      <td>${pd.n}</td>
+      <td style="color:${pdColor};font-weight:600">${pd.coop_pct}%</td>
+      <td>${sh.n}</td>
+      <td style="color:${shColor};font-weight:600">${sh.coop_pct}%</td>
+      <td><div class="treat-chips">${pdTreats}</div></td>
+      <td><div class="treat-chips">${shTreats}</div></td>
+    </tr>`;
+  }
+  html += `</tbody></table></div>`;
+
+  $('#coopBody').innerHTML = html;
+  $('#coopRefreshTime').textContent = new Date().toLocaleTimeString();
+}
+
+$('#coopRefreshBtn').addEventListener('click', loadCoop);
+
+// ===================== INIT =====================
+loadData();
+</script>
+</body>
+</html>

templates/login.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Login - oTree CSV Viewer</title>
+<style>
+  :root { --bg: #0f1117; --surface: #1a1d27; --border: #2a2d3a; --text: #e0e0e0; --dim: #888; --accent: #6c9bff; --accent2: #4a7adf; --red: #e05555; }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); display: flex; align-items: center; justify-content: center; height: 100vh; }
+  .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 40px 36px; width: 360px; text-align: center; }
+  .login-card h1 { font-size: 18px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
+  .login-card p { font-size: 13px; color: var(--dim); margin-bottom: 24px; }
+  .login-card input[type="password"] { width: 100%; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 14px; margin-bottom: 16px; outline: none; }
+  .login-card input[type="password"]:focus { border-color: var(--accent); }
+  .login-card button { width: 100%; padding: 10px; background: var(--accent2); color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
+  .login-card button:hover { background: var(--accent); }
+  .error { color: var(--red); font-size: 13px; margin-bottom: 12px; }
+</style>
+</head>
+<body>
+  <form class="login-card" method="POST" action="/login">
+    <h1>oTree CSV Viewer</h1>
+    <p>Enter the admin password to continue</p>
+    {% if error %}<div class="error">{{ error }}</div>{% endif %}
+    <input type="password" name="password" placeholder="Password" autofocus>
+    <button type="submit">Sign In</button>
+  </form>
+</body>
+</html>