Add session diagnostic dashboard

app.py

@@ -578,6 +578,99 @@ def api_coop_games():
     })
 
 
+@app.route("/api/session-diagnostic")
+def api_session_diagnostic():
+    """Detect mistyped session letters using time-bucket analysis."""
+    df = _get_df()
+
+    letter_col = "app_consent_consolidated.1.player.session_letter"
+    sid_col = "app_collect_results.1.player.participant_session_id"
+    time_col = "participant.time_started_utc"
+    code_col = "participant.code"
+    color_col = "participant.signal_color_choice"
+    group_col = "signal_game.1.group.id_in_subsession"
+    treat_col = "signal_game.1.group.treatment"
+
+    has_letter = df[df[letter_col].notna()].copy()
+    has_letter["_time"] = pd.to_datetime(has_letter[time_col])
+    has_letter["_bucket"] = has_letter["_time"].dt.floor("10min")
+
+    canonical = {}
+    for letter in sorted(has_letter[letter_col].unique()):
+        s = has_letter[has_letter[letter_col] == letter]
+        mode_bucket = s["_bucket"].mode().iloc[0]
+        canonical[letter] = mode_bucket + pd.Timedelta(minutes=5)
+
+    sessions = []
+    for letter in sorted(has_letter[letter_col].unique()):
+        s = has_letter[has_letter[letter_col] == letter]
+        completed = s[s[sid_col].notna()]
+        played_signal = s[s[color_col].notna()]
+        n_total = len(s)
+        n_completed = len(completed)
+        n_signal = len(played_signal)
+        sessions.append({
+            "letter": letter,
+            "canonical_bucket": canonical[letter].strftime("%Y-%m-%d %H:%M"),
+            "n_total": n_total,
+            "n_completed": n_completed,
+            "n_signal_played": n_signal,
+            "mod7": n_signal % 7,
+            "time_min": s["_time"].min().strftime("%Y-%m-%d %H:%M:%S"),
+            "time_max": s["_time"].max().strftime("%Y-%m-%d %H:%M:%S"),
+        })
+
+    flagged = []
+    letters = sorted(canonical.keys())
+    for _, row in has_letter.iterrows():
+        typed = row[letter_col]
+        t = row["_time"]
+        if pd.isna(t):
+            continue
+        dists = {l: abs((t - canonical[l]).total_seconds()) for l in letters}
+        nearest = min(dists, key=dists.get)
+        if nearest != typed:
+            flagged.append({
+                "code": row[code_col],
+                "typed_letter": typed,
+                "suggested_letter": nearest,
+                "timestamp": t.strftime("%Y-%m-%d %H:%M:%S"),
+                "dist_own_min": round(dists[typed] / 60, 1),
+                "dist_suggested_min": round(dists[nearest] / 60, 1),
+            })
+
+    played = has_letter[has_letter[group_col].notna()].copy()
+    split_groups = []
+    if len(played):
+        for gid, g in played.groupby(group_col):
+            letter_counts = g[letter_col].value_counts().to_dict()
+            if len(letter_counts) > 1:
+                treat_val = g[treat_col].iloc[0]
+                split_groups.append({
+                    "group_id": int(gid),
+                    "treatment": int(treat_val) if pd.notna(treat_val) else None,
+                    "size": len(g),
+                    "letters": {str(k): int(v) for k, v in letter_counts.items()},
+                })
+
+    bucket_detail = {}
+    for letter in sorted(has_letter[letter_col].unique()):
+        s = has_letter[has_letter[letter_col] == letter]
+        counts = s["_bucket"].value_counts().sort_index()
+        bucket_detail[letter] = [
+            {"bucket": b.strftime("%Y-%m-%d %H:%M"), "count": int(c)}
+            for b, c in counts.items()
+        ]
+
+    return to_json({
+        "sessions": sessions,
+        "flagged": flagged,
+        "split_groups": split_groups,
+        "bucket_detail": bucket_detail,
+        "canonical": {l: v.strftime("%Y-%m-%d %H:%M") for l, v in canonical.items()},
+    })
+
+
 @app.route("/api/columns")
 def api_columns():
     df = _get_df()

templates/index.html

@@ -201,6 +201,7 @@
     <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>
+    <a data-page="diagnostic"><span class="icon">&#9888;</span> Session Diagnostic</a>
   </nav>
   <div class="sidebar-footer">
     <button class="btn btn-green" id="fetchBtn" style="width:100%;margin-bottom:6px">Fetch from oTree</button>
@@ -321,6 +322,19 @@
     </div>
   </div>
 
+  <!-- PAGE 5: Session Diagnostic -->
+  <div class="page" id="page-diagnostic">
+    <div class="toolbar">
+      <h2>Session Letter Diagnostic</h2>
+      <div class="sep"></div>
+      <button class="btn" id="diagRefreshBtn">Reload</button>
+      <span class="badge" id="diagRefreshTime">-</span>
+    </div>
+    <div class="stats-scroll" id="diagBody">
+      <div style="color:var(--dim);padding:40px;text-align:center">Loading...</div>
+    </div>
+  </div>
+
 </div>
 
 <div id="toast" class="toast"></div>
@@ -340,6 +354,7 @@ $$('.sidebar nav a').forEach(link => {
     if (link.dataset.page === 'stats' && !statsLoaded) loadStats();
     if (link.dataset.page === 'signal' && !signalLoaded) loadSignal();
     if (link.dataset.page === 'coop' && !coopLoaded) loadCoop();
+    if (link.dataset.page === 'diagnostic' && !diagLoaded) loadDiagnostic();
   });
 });
 
@@ -360,7 +375,7 @@ async function fetchFromOtree() {
     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()]);
+      await Promise.all([loadData(), loadPayments(), loadStats(), loadSignal(), loadCoop(), loadDiagnostic()]);
     } else toast(`Fetch failed: ${data.error}`, false);
   } catch (e) { toast(`Fetch error: ${e.message}`, false); }
   btn.disabled = false; btn.textContent = 'Fetch from oTree';
@@ -371,7 +386,7 @@ async function uploadFile(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()]); }
+    if (data.ok) { toast(`Uploaded ${data.rows} rows`, true); await Promise.all([loadData(), loadPayments(), loadStats(), loadSignal(), loadCoop(), loadDiagnostic()]); }
     else toast(`Upload failed: ${data.error}`, false);
   } catch (e) { toast(`Upload error: ${e.message}`, false); }
 }
@@ -1204,6 +1219,120 @@ async function loadCoop() {
 
 $('#coopRefreshBtn').addEventListener('click', loadCoop);
 
+// ===================== PAGE 5: SESSION DIAGNOSTIC =====================
+let diagLoaded = false;
+
+async function loadDiagnostic() {
+  const res = await fetch('/api/session-diagnostic');
+  const D = await res.json();
+  diagLoaded = true;
+
+  let html = '';
+
+  const nFlagged = D.flagged.length;
+  const nSplit = D.split_groups.length;
+  const nBad = D.sessions.filter(s => s.mod7 !== 0).length;
+  html += `<div class="kpi-row">
+    <div class="kpi accent"><div class="kpi-val">${D.sessions.length}</div><div class="kpi-label">Session letters</div></div>
+    <div class="kpi ${nBad ? 'red' : 'green'}"><div class="kpi-val">${nBad}</div><div class="kpi-label">Non-mod-7 sessions</div></div>
+    <div class="kpi ${nFlagged ? 'orange' : 'green'}"><div class="kpi-val">${nFlagged}</div><div class="kpi-label">Flagged participants</div></div>
+    <div class="kpi ${nSplit ? 'orange' : 'green'}"><div class="kpi-val">${nSplit}</div><div class="kpi-label">Split groups</div></div>
+  </div>`;
+
+  html += `<div class="stats-section"><h3>Session Overview</h3>`;
+  html += `<table class="session-table"><thead><tr>
+    <th>Letter</th><th>Canonical Time</th><th>N Total</th><th>N Completed</th>
+    <th>N Signal Played</th><th>mod 7</th><th>Time Range</th>
+  </tr></thead><tbody>`;
+  for (const s of D.sessions) {
+    const mod7Class = s.mod7 !== 0 ? 'style="color:var(--red);font-weight:700"' : 'style="color:var(--green)"';
+    html += `<tr>
+      <td><strong>${s.letter}</strong></td>
+      <td>${s.canonical_bucket}</td>
+      <td>${s.n_total}</td>
+      <td>${s.n_completed}</td>
+      <td>${s.n_signal_played}</td>
+      <td ${mod7Class}>${s.mod7}</td>
+      <td style="font-size:11px">${s.time_min}<br>${s.time_max}</td>
+    </tr>`;
+  }
+  html += `</tbody></table></div>`;
+
+  html += `<div class="stats-section"><h3>Flagged Participants (likely mistyped letter)</h3>`;
+  if (D.flagged.length === 0) {
+    html += `<div style="color:var(--green);padding:10px">No mistyped letters detected.</div>`;
+  } else {
+    html += `<table class="session-table"><thead><tr>
+      <th>Code</th><th>Typed Letter</th><th>Suggested Letter</th>
+      <th>Timestamp</th><th>Dist to Own (min)</th><th>Dist to Suggested (min)</th>
+    </tr></thead><tbody>`;
+    for (const f of D.flagged) {
+      html += `<tr>
+        <td style="font-family:monospace;font-size:12px">${f.code}</td>
+        <td><strong style="color:var(--red)">${f.typed_letter}</strong></td>
+        <td><strong style="color:var(--green)">${f.suggested_letter}</strong></td>
+        <td style="font-size:12px">${f.timestamp}</td>
+        <td style="color:var(--red)">${f.dist_own_min}</td>
+        <td style="color:var(--green)">${f.dist_suggested_min}</td>
+      </tr>`;
+    }
+    html += `</tbody></table>`;
+  }
+  html += `</div>`;
+
+  html += `<div class="stats-section"><h3>Split Groups (groups spanning multiple letters)</h3>`;
+  if (D.split_groups.length === 0) {
+    html += `<div style="color:var(--green);padding:10px">All signal game groups are within a single session letter.</div>`;
+  } else {
+    html += `<table class="session-table"><thead><tr>
+      <th>Group ID</th><th>Treatment</th><th>Size</th><th>Letter Breakdown</th>
+    </tr></thead><tbody>`;
+    for (const g of D.split_groups) {
+      const breakdown = Object.entries(g.letters).map(([l, c]) =>
+        `<span class="treat-chip">${l}: ${c}</span>`
+      ).join(' ');
+      html += `<tr>
+        <td><strong>g${g.group_id}</strong></td>
+        <td>${g.treatment === 1 ? 'Treatment' : g.treatment === 0 ? 'Control' : '?'}</td>
+        <td>${g.size}</td>
+        <td><div class="treat-chips">${breakdown}</div></td>
+      </tr>`;
+    }
+    html += `</tbody></table>`;
+  }
+  html += `</div>`;
+
+  html += `<div class="stats-section"><h3>Time Bucket Distribution (10-min windows)</h3>`;
+  const allCounts = Object.values(D.bucket_detail).flat().map(b => b.count);
+  const maxCount = Math.max(...allCounts, 1);
+  for (const letter of Object.keys(D.bucket_detail).sort()) {
+    const buckets = D.bucket_detail[letter];
+    const canonicalBucket = D.canonical[letter];
+    html += `<div style="margin-bottom:14px">`;
+    html += `<div style="font-weight:700;font-size:13px;margin-bottom:4px">Session ${letter}
+      <span style="color:var(--dim);font-weight:400;font-size:11px;margin-left:8px">canonical: ${canonicalBucket}</span></div>`;
+    for (const b of buckets) {
+      const pct = (b.count / maxCount * 100).toFixed(0);
+      const isCanonical = canonicalBucket.startsWith(b.bucket.slice(0, 15));
+      const color = isCanonical ? 'var(--accent)' : 'var(--border)';
+      const label = b.bucket.slice(11);
+      const date = b.bucket.slice(0, 10);
+      html += `<div class="hbar" style="margin-bottom:2px">
+        <div class="hbar-label" style="width:130px;min-width:130px;font-size:11px">${date} ${label}</div>
+        <div class="hbar-track"><div class="hbar-fill" style="width:${pct}%;background:${color}">${b.count}</div></div>
+        <div class="hbar-val" style="width:30px">${b.count}</div>
+      </div>`;
+    }
+    html += `</div>`;
+  }
+  html += `</div>`;
+
+  $('#diagBody').innerHTML = html;
+  $('#diagRefreshTime').textContent = new Date().toLocaleTimeString();
+}
+
+$('#diagRefreshBtn').addEventListener('click', loadDiagnostic);
+
 // ===================== INIT =====================
 loadData();
 </script>