add dashboard

server/app.py

@@ -5,28 +5,18 @@
 # LICENSE file in the root directory of this source tree.
 
 """
-FastAPI application for the Clothing Brand Ctr Env Environment.
+FastAPI application for the Email Campaign Simulation environment.
 
-This module creates an HTTP server that exposes the ClothingBrandCtrEnvironment
-over HTTP and WebSocket endpoints, compatible with EnvClient.
-
-Endpoints:
-    - POST /reset: Reset the environment
-    - POST /step: Execute an action
-    - GET /state: Get current environment state
-    - GET /schema: Get action/observation schemas
-    - WS /ws: WebSocket endpoint for persistent sessions
-
-Usage:
-    # Development (with auto-reload):
-    uvicorn server.app:app --reload --host 0.0.0.0 --port 8000
+This server exposes OpenEnv-compatible endpoints and serves a lightweight
+campaign analytics dashboard at "/" and "/web".
+"""
 
-    # Production:
-    uvicorn server.app:app --host 0.0.0.0 --port 8000 --workers 4
+from __future__ import annotations
 
-    # Or run directly:
-    python -m server.app
-"""
+import csv
+from datetime import UTC, datetime
+from pathlib import Path
+from typing import Any, Dict, List
 
 try:
     from openenv.core.env_server.http_server import create_app
@@ -34,7 +24,8 @@ except Exception as e:  # pragma: no cover
     raise ImportError(
         "openenv is required for the web interface. Install dependencies with '\n    uv sync\n'"
     ) from e
-from fastapi.responses import HTMLResponse
+
+from fastapi.responses import HTMLResponse, JSONResponse
 
 try:
     from ..models import ClothingBrandCtrAction, ClothingBrandCtrObservation
@@ -43,195 +34,183 @@ except ImportError:  # pragma: no cover - supports direct server.app imports
 from .clothing_brand_ctr_env_environment import ClothingBrandCtrEnvironment
 
 
+PROJECT_ROOT = Path(__file__).resolve().parents[1]
+WEB_INDEX_PATH = PROJECT_ROOT / "web" / "index.html"
+EVALS_DIR = PROJECT_ROOT / "outputs" / "evals"
+
+
+def _safe_float(value: object, default: float = 0.0) -> float:
+    """Best-effort float parser."""
+    try:
+        return float(value)  # type: ignore[arg-type]
+    except (TypeError, ValueError):
+        return default
+
+
+def _safe_int(value: object, default: int = 0) -> int:
+    """Best-effort integer parser."""
+    try:
+        return int(float(value))  # type: ignore[arg-type]
+    except (TypeError, ValueError):
+        return default
+
+
+def _read_csv_rows(path: Path, limit: int | None = None) -> List[Dict[str, str]]:
+    """Read CSV rows if file exists."""
+    if not path.exists():
+        return []
+
+    rows: List[Dict[str, str]] = []
+    with path.open("r", newline="", encoding="utf-8") as handle:
+        reader = csv.DictReader(handle)
+        for idx, row in enumerate(reader):
+            rows.append(dict(row))
+            if limit is not None and idx + 1 >= limit:
+                break
+    return rows
+
+
+def _format_file_meta(path: Path) -> Dict[str, object]:
+    """Return file metadata used by dashboard."""
+    if not path.exists():
+        return {"path": str(path.relative_to(PROJECT_ROOT)), "exists": False}
+    stat = path.stat()
+    updated = datetime.fromtimestamp(stat.st_mtime, tz=UTC).isoformat()
+    return {
+        "path": str(path.relative_to(PROJECT_ROOT)),
+        "exists": True,
+        "size_bytes": stat.st_size,
+        "updated_at_utc": updated,
+    }
+
+
+def load_campaign_stats() -> Dict[str, object]:
+    """Aggregate latest simulation output files for dashboard display."""
+    schedule_path = EVALS_DIR / "five_email_schedule_results.csv"
+    step_path = EVALS_DIR / "five_email_best_schedule_steps.csv"
+    arm_path = EVALS_DIR / "brand_campaign_arm_results.csv"
+
+    schedule_rows = _read_csv_rows(schedule_path, limit=25)
+    step_rows = _read_csv_rows(step_path, limit=25)
+    arm_rows = _read_csv_rows(arm_path, limit=25)
+
+    top_schedules = [
+        {
+            "rank": _safe_int(row.get("rank")),
+            "schedule": row.get("schedule", ""),
+            "open_rate": _safe_float(row.get("open_rate")),
+            "ctr": _safe_float(row.get("ctr")),
+            "purchase_rate": _safe_float(row.get("purchase_rate")),
+            "composite_score": _safe_float(row.get("composite_score")),
+            "generation_source": row.get("generation_source", ""),
+            "marketer_score": _safe_float(row.get("marketer_score")),
+            "opens": _safe_int(row.get("opens")),
+            "clicks": _safe_int(row.get("clicks")),
+            "purchases": _safe_int(row.get("purchases")),
+        }
+        for row in schedule_rows[:10]
+    ]
+    best_schedule = top_schedules[0] if top_schedules else {}
+
+    step_breakdown = [
+        {
+            "step_idx": _safe_int(row.get("step_idx")),
+            "step_name": row.get("step_name", ""),
+            "send_day": row.get("send_day", ""),
+            "send_hour": _safe_int(row.get("send_hour")),
+            "open_rate": _safe_float(row.get("open_rate")),
+            "ctr": _safe_float(row.get("ctr")),
+            "purchase_rate": _safe_float(row.get("purchase_rate")),
+            "subject_line": row.get("subject_line", ""),
+        }
+        for row in step_rows
+    ]
+
+    top_arms = [
+        {
+            "rank": _safe_int(row.get("rank")),
+            "arm_id": row.get("arm_id", ""),
+            "variant_name": row.get("variant_name", ""),
+            "brand_voice": row.get("brand_voice", ""),
+            "send_hour": _safe_int(row.get("send_hour")),
+            "open_rate": _safe_float(row.get("open_rate")),
+            "ctr": _safe_float(row.get("ctr")),
+            "purchase_rate": _safe_float(row.get("purchase_rate")),
+            "composite_score": _safe_float(row.get("composite_score")),
+            "marketer_score": _safe_float(row.get("marketer_score")),
+            "subject_line": row.get("subject_line", ""),
+        }
+        for row in arm_rows[:10]
+    ]
+    best_arm = top_arms[0] if top_arms else {}
+
+    return {
+        "status": "ok",
+        "generated_at_utc": datetime.now(tz=UTC).isoformat(),
+        "summary": {
+            "best_schedule": best_schedule,
+            "best_arm": best_arm,
+            "top_schedule_count": len(top_schedules),
+            "step_count": len(step_breakdown),
+            "top_arm_count": len(top_arms),
+        },
+        "top_schedules": top_schedules,
+        "step_breakdown": step_breakdown,
+        "top_arms": top_arms,
+        "files": {
+            "five_email_schedule_results": _format_file_meta(schedule_path),
+            "five_email_best_schedule_steps": _format_file_meta(step_path),
+            "brand_campaign_arm_results": _format_file_meta(arm_path),
+        },
+    }
+
+
+def _load_dashboard_html() -> str:
+    """Load dashboard HTML from disk with safe fallback."""
+    if WEB_INDEX_PATH.exists():
+        return WEB_INDEX_PATH.read_text(encoding="utf-8")
+
+    return (
+        "<!doctype html><html><body><h1>Email Campaign Dashboard Missing</h1>"
+        "<p>Create web/index.html in the project root.</p></body></html>"
+    )
+
+
 # Create the app with web interface and README integration
 app = create_app(
     ClothingBrandCtrEnvironment,
     ClothingBrandCtrAction,
     ClothingBrandCtrObservation,
     env_name="clothing_brand_ctr_env",
-    max_concurrent_envs=1,  # increase this number to allow more concurrent WebSocket sessions
+    max_concurrent_envs=1,  # increase for more concurrent WebSocket sessions
 )
 
-LANDING_HTML = """
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Email Campaign Simulation</title>
-    <style>
-      :root {
-        --bg: #f6f4ef;
-        --card: #ffffff;
-        --ink: #222222;
-        --muted: #6e675e;
-        --accent: #d5632f;
-        --accent-soft: #ffe5d8;
-      }
-      body {
-        margin: 0;
-        font-family: "Avenir Next", "Segoe UI", sans-serif;
-        background: radial-gradient(circle at 15% 10%, #fff7f1 0%, var(--bg) 45%, #efe9df 100%);
-        color: var(--ink);
-      }
-      .wrap {
-        max-width: 980px;
-        margin: 0 auto;
-        padding: 42px 24px 56px;
-      }
-      .hero {
-        background: var(--card);
-        border: 1px solid #ece5dc;
-        border-radius: 18px;
-        padding: 28px;
-        box-shadow: 0 16px 40px rgba(36, 26, 15, 0.08);
-      }
-      h1 {
-        margin: 0 0 10px 0;
-        font-size: clamp(28px, 4vw, 44px);
-        line-height: 1.1;
-      }
-      .sub {
-        margin: 0;
-        color: var(--muted);
-        font-size: 16px;
-      }
-      .badge-row {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-        margin: 18px 0 0 0;
-      }
-      .badge {
-        background: var(--accent-soft);
-        color: #7a3518;
-        border: 1px solid #ffd2bc;
-        border-radius: 999px;
-        padding: 7px 12px;
-        font-size: 13px;
-        font-weight: 600;
-      }
-      .grid {
-        margin-top: 18px;
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-        gap: 12px;
-      }
-      .card {
-        background: var(--card);
-        border: 1px solid #ece5dc;
-        border-radius: 14px;
-        padding: 14px;
-      }
-      .card h3 {
-        margin: 0 0 8px 0;
-        font-size: 15px;
-      }
-      .card p {
-        margin: 0;
-        color: var(--muted);
-        font-size: 14px;
-      }
-      .links {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-        margin-top: 18px;
-      }
-      .links a {
-        text-decoration: none;
-        color: #fff;
-        background: var(--accent);
-        border-radius: 10px;
-        padding: 10px 14px;
-        font-weight: 700;
-        font-size: 14px;
-      }
-      .links a.secondary {
-        background: #2f6ea7;
-      }
-      pre {
-        margin: 16px 0 0 0;
-        background: #1a1f24;
-        color: #d8e6f3;
-        border-radius: 12px;
-        padding: 14px;
-        overflow-x: auto;
-        font-size: 12px;
-      }
-    </style>
-  </head>
-  <body>
-    <main class="wrap">
-      <section class="hero">
-        <h1>Email Marketing Campaign Simulator</h1>
-        <p class="sub">
-          Simulates multi-step brand email campaigns and optimizes opens, click-through rate, and purchases.
-          Uses Hugging Face personas and DeepSeek for generation + marketer judging.
-        </p>
-        <div class="badge-row">
-          <span class="badge">5-email schedule optimization</span>
-          <span class="badge">Day + time simulation</span>
-          <span class="badge">DeepSeek marketer judge</span>
-          <span class="badge">Persona-based outcomes</span>
-        </div>
-        <div class="grid">
-          <article class="card">
-            <h3>Primary metrics</h3>
-            <p>Open rate, CTR, click-to-open rate, purchases, and composite campaign score.</p>
-          </article>
-          <article class="card">
-            <h3>Audience model</h3>
-            <p>Supports Hugging Face Nemotron personas and synthetic fallback for experimentation.</p>
-          </article>
-          <article class="card">
-            <h3>Judging layer</h3>
-            <p>10x marketer judge combines deterministic checks with LLM scoring for subject/body quality.</p>
-          </article>
-          <article class="card">
-            <h3>Optimization output</h3>
-            <p>Top schedule ranking, per-step performance, and top purchasing personas.</p>
-          </article>
-        </div>
-        <div class="links">
-          <a href="/docs">Open API Docs</a>
-          <a class="secondary" href="/health">Health Check</a>
-          <a class="secondary" href="/schema">Schema</a>
-        </div>
-        <pre>python simulate_5_email_campaign.py --persona-source hf --send-days mon,tue,wed,thu,fri --send-hours 8,10,12,15,18</pre>
-      </section>
-    </main>
-  </body>
-</html>
-"""
-
 
 @app.get("/", include_in_schema=False)
 def landing_page() -> HTMLResponse:
-    return HTMLResponse(LANDING_HTML)
+    """Dashboard landing page."""
+    return HTMLResponse(_load_dashboard_html())
 
 
 @app.get("/web", include_in_schema=False)
 def landing_page_web() -> HTMLResponse:
-    return HTMLResponse(LANDING_HTML)
+    """Compatibility route for Space base path."""
+    return HTMLResponse(_load_dashboard_html())
+
+
+@app.get("/campaign/stats")
+def campaign_stats() -> JSONResponse:
+    """Return latest aggregated campaign stats from simulation CSV outputs."""
+    return JSONResponse(load_campaign_stats())
 
 
 def main(host: str = "0.0.0.0", port: int = 8000):
     """
     Entry point for direct execution via uv run or python -m.
 
-    This function enables running the server without Docker:
-        uv run --project . server
-        uv run --project . server --port 8001
-        python -m clothing_brand_ctr_env.server.app
-
     Args:
-        host: Host address to bind to (default: "0.0.0.0")
-        port: Port number to listen on (default: 8000)
-
-    For production deployments, consider using uvicorn directly with
-    multiple workers:
-        uvicorn clothing_brand_ctr_env.server.app:app --workers 4
+        host: Host address to bind to.
+        port: Port number to listen on.
     """
     import uvicorn
 

web/index.html

@@ -0,0 +1,409 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Email Campaign Stats</title>
+    <style>
+      :root {
+        --bg-0: #f1ede6;
+        --bg-1: #f8f5ef;
+        --ink: #1e1d1a;
+        --muted: #6f685f;
+        --accent: #cf5a2e;
+        --accent-2: #1b6f8a;
+        --card: #ffffff;
+        --line: #e7ddd2;
+        --ok: #1f7a4f;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        color: var(--ink);
+        background: radial-gradient(circle at 10% 8%, #fff8ef 0%, var(--bg-1) 42%, var(--bg-0) 100%);
+        font-family: "Avenir Next", "Segoe UI", Tahoma, sans-serif;
+      }
+      .page {
+        max-width: 1180px;
+        margin: 0 auto;
+        padding: 28px 20px 40px;
+      }
+      .hero {
+        border: 1px solid var(--line);
+        background: linear-gradient(145deg, #fff 0%, #fffaf5 100%);
+        border-radius: 20px;
+        padding: 22px;
+        box-shadow: 0 14px 35px rgba(36, 21, 9, 0.08);
+      }
+      .eyebrow {
+        font-size: 12px;
+        letter-spacing: 0.13em;
+        text-transform: uppercase;
+        color: var(--accent);
+        font-weight: 700;
+      }
+      h1 {
+        margin: 6px 0 8px;
+        font-size: clamp(30px, 5vw, 56px);
+        line-height: 1.05;
+      }
+      .subtitle {
+        margin: 0;
+        max-width: 900px;
+        color: var(--muted);
+        font-size: 15px;
+      }
+      .controls {
+        margin-top: 16px;
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+      }
+      .btn {
+        border: 0;
+        border-radius: 10px;
+        padding: 10px 14px;
+        font-weight: 700;
+        font-size: 13px;
+        cursor: pointer;
+        transition: transform 120ms ease;
+      }
+      .btn:active {
+        transform: translateY(1px);
+      }
+      .btn-primary {
+        background: var(--accent);
+        color: #fff;
+      }
+      .btn-secondary {
+        background: var(--accent-2);
+        color: #fff;
+      }
+      .meta {
+        margin-top: 8px;
+        color: var(--muted);
+        font-size: 12px;
+      }
+      .kpis {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+        gap: 12px;
+        margin-top: 16px;
+      }
+      .kpi {
+        background: var(--card);
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        padding: 12px;
+      }
+      .kpi .label {
+        color: var(--muted);
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+      .kpi .value {
+        margin-top: 6px;
+        font-size: 24px;
+        line-height: 1.15;
+        font-weight: 800;
+      }
+      .kpi .sub {
+        margin-top: 5px;
+        font-size: 12px;
+        color: var(--muted);
+      }
+      .section {
+        margin-top: 18px;
+        background: var(--card);
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        overflow: hidden;
+      }
+      .section-head {
+        padding: 12px 14px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: linear-gradient(180deg, #fff 0%, #faf6f0 100%);
+        border-bottom: 1px solid var(--line);
+      }
+      .section-head h2 {
+        margin: 0;
+        font-size: 16px;
+      }
+      .section-head span {
+        font-size: 12px;
+        color: var(--muted);
+      }
+      .table-wrap {
+        overflow-x: auto;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        min-width: 760px;
+      }
+      th,
+      td {
+        padding: 9px 11px;
+        border-bottom: 1px solid #f1ebe4;
+        text-align: left;
+        font-size: 13px;
+        vertical-align: top;
+      }
+      th {
+        position: sticky;
+        top: 0;
+        background: #fff;
+        z-index: 1;
+        color: #4c453e;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+      tr:hover td {
+        background: #fffaf3;
+      }
+      .status-ok {
+        color: var(--ok);
+        font-weight: 700;
+      }
+      .error {
+        margin-top: 12px;
+        color: #a22a2a;
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .foot {
+        margin-top: 14px;
+        font-size: 12px;
+        color: var(--muted);
+      }
+      @media (max-width: 720px) {
+        .page {
+          padding: 16px 12px 26px;
+        }
+        .hero {
+          padding: 16px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="page">
+      <section class="hero">
+        <div class="eyebrow">Email Campaign Intelligence</div>
+        <h1>Campaign Stats Dashboard</h1>
+        <p class="subtitle">
+          Live view of simulation outputs from the 5-email optimizer and arm-level campaign experiments.
+          Data is read from the latest CSV files in <code>outputs/evals/</code>.
+        </p>
+        <div class="controls">
+          <button class="btn btn-primary" id="refreshBtn">Refresh Stats</button>
+          <a class="btn btn-secondary" href="/docs" style="text-decoration:none;">API Docs</a>
+        </div>
+        <div class="meta" id="metaText">Loading latest results...</div>
+        <div class="error" id="errorBox" hidden></div>
+      </section>
+
+      <section class="kpis">
+        <article class="kpi">
+          <div class="label">Best Schedule</div>
+          <div class="value" id="kpiSchedule">-</div>
+          <div class="sub">Winning 5-email send plan</div>
+        </article>
+        <article class="kpi">
+          <div class="label">Open Rate</div>
+          <div class="value" id="kpiOpen">-</div>
+          <div class="sub">Top schedule open rate</div>
+        </article>
+        <article class="kpi">
+          <div class="label">Click-Through Rate</div>
+          <div class="value" id="kpiCtr">-</div>
+          <div class="sub">Top schedule CTR</div>
+        </article>
+        <article class="kpi">
+          <div class="label">Purchase Rate</div>
+          <div class="value" id="kpiPurchase">-</div>
+          <div class="sub">Top schedule conversion</div>
+        </article>
+        <article class="kpi">
+          <div class="label">Top Arm</div>
+          <div class="value" id="kpiArm">-</div>
+          <div class="sub">Best variant/time from arm simulation</div>
+        </article>
+      </section>
+
+      <section class="section">
+        <div class="section-head">
+          <h2>Top Schedules</h2>
+          <span id="scheduleCount">0 rows</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>Rank</th>
+                <th>Schedule</th>
+                <th>Open</th>
+                <th>CTR</th>
+                <th>Purchase</th>
+                <th>Composite</th>
+                <th>Opens</th>
+                <th>Clicks</th>
+                <th>Buys</th>
+              </tr>
+            </thead>
+            <tbody id="scheduleTable"></tbody>
+          </table>
+        </div>
+      </section>
+
+      <section class="section">
+        <div class="section-head">
+          <h2>Best Schedule Step Breakdown</h2>
+          <span id="stepCount">0 rows</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>Step</th>
+                <th>Timing</th>
+                <th>Open</th>
+                <th>CTR</th>
+                <th>Purchase</th>
+                <th>Subject</th>
+              </tr>
+            </thead>
+            <tbody id="stepTable"></tbody>
+          </table>
+        </div>
+      </section>
+
+      <section class="section">
+        <div class="section-head">
+          <h2>Top Campaign Arms</h2>
+          <span id="armCount">0 rows</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>Rank</th>
+                <th>Arm</th>
+                <th>Voice</th>
+                <th>Open</th>
+                <th>CTR</th>
+                <th>Purchase</th>
+                <th>Marketer</th>
+              </tr>
+            </thead>
+            <tbody id="armTable"></tbody>
+          </table>
+        </div>
+      </section>
+
+      <p class="foot" id="fileMeta"></p>
+    </main>
+
+    <script>
+      const percent = (v) => `${(Number(v || 0) * 100).toFixed(1)}%`;
+      const fixed = (v) => Number(v || 0).toFixed(3);
+      const byId = (id) => document.getElementById(id);
+
+      function renderRows(targetId, rows, htmlFn) {
+        const target = byId(targetId);
+        target.innerHTML = rows.map(htmlFn).join("");
+      }
+
+      function maybe(text) {
+        if (text === null || text === undefined || text === "") return "-";
+        return String(text);
+      }
+
+      async function loadStats() {
+        byId("errorBox").hidden = true;
+        byId("metaText").textContent = "Loading latest results...";
+        try {
+          const resp = await fetch("/campaign/stats", { cache: "no-store" });
+          if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+          const data = await resp.json();
+
+          const bestSchedule = (data.summary && data.summary.best_schedule) || {};
+          const bestArm = (data.summary && data.summary.best_arm) || {};
+
+          byId("kpiSchedule").textContent = maybe(bestSchedule.schedule);
+          byId("kpiOpen").textContent = percent(bestSchedule.open_rate);
+          byId("kpiCtr").textContent = percent(bestSchedule.ctr);
+          byId("kpiPurchase").textContent = percent(bestSchedule.purchase_rate);
+          byId("kpiArm").textContent = maybe(bestArm.arm_id || bestArm.variant_name);
+
+          const topSchedules = data.top_schedules || [];
+          byId("scheduleCount").textContent = `${topSchedules.length} rows`;
+          renderRows("scheduleTable", topSchedules, (row) => `
+            <tr>
+              <td>${row.rank}</td>
+              <td>${maybe(row.schedule)}</td>
+              <td>${percent(row.open_rate)}</td>
+              <td>${percent(row.ctr)}</td>
+              <td>${percent(row.purchase_rate)}</td>
+              <td>${fixed(row.composite_score)}</td>
+              <td>${row.opens}</td>
+              <td>${row.clicks}</td>
+              <td>${row.purchases}</td>
+            </tr>
+          `);
+
+          const steps = data.step_breakdown || [];
+          byId("stepCount").textContent = `${steps.length} rows`;
+          renderRows("stepTable", steps, (row) => `
+            <tr>
+              <td>${row.step_idx}. ${maybe(row.step_name)}</td>
+              <td>${maybe(row.send_day)} ${String(row.send_hour).padStart(2, "0")}:00</td>
+              <td>${percent(row.open_rate)}</td>
+              <td>${percent(row.ctr)}</td>
+              <td>${percent(row.purchase_rate)}</td>
+              <td>${maybe(row.subject_line)}</td>
+            </tr>
+          `);
+
+          const arms = data.top_arms || [];
+          byId("armCount").textContent = `${arms.length} rows`;
+          renderRows("armTable", arms, (row) => `
+            <tr>
+              <td>${row.rank}</td>
+              <td>${maybe(row.arm_id)}</td>
+              <td>${maybe(row.brand_voice)}</td>
+              <td>${percent(row.open_rate)}</td>
+              <td>${percent(row.ctr)}</td>
+              <td>${percent(row.purchase_rate)}</td>
+              <td>${Number(row.marketer_score || 0).toFixed(1)}</td>
+            </tr>
+          `);
+
+          const files = data.files || {};
+          const fileSummary = Object.values(files)
+            .map((f) => `${f.path}: ${f.exists ? "present" : "missing"}`)
+            .join(" | ");
+          byId("fileMeta").textContent = fileSummary;
+
+          byId("metaText").innerHTML =
+            `<span class="status-ok">Loaded</span> &middot; ` +
+            `generated at ${maybe(data.generated_at_utc)}`;
+        } catch (err) {
+          byId("metaText").textContent = "Failed to load campaign stats.";
+          const box = byId("errorBox");
+          box.hidden = false;
+          box.textContent = `Error: ${err.message}`;
+        }
+      }
+
+      byId("refreshBtn").addEventListener("click", loadStats);
+      loadStats();
+    </script>
+  </body>
+</html>