<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hafermilch Report — {{ report.plan_name }}</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --gold: #d4a017;
    --gold-light: #fef3c7;
    --gold-dark: #92400e;
    --bg: #f9fafb;
    --surface: #ffffff;
    --border: #e5e7eb;
    --text: #111827;
    --text-muted: #6b7280;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
  }

  /* ── Header ── */
  header {
    background: linear-gradient(135deg, #1c1917 0%, #292524 100%);
    color: #fff;
    padding: 2rem 2.5rem 1.5rem;
    border-bottom: 3px solid var(--gold);
  }
  header h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
  header h1 span { color: var(--gold); }
  .header-meta { margin-top: .5rem; font-size: .85rem; color: #a8a29e; }
  .header-meta a { color: #d6d3d1; text-decoration: none; }

  /* ── Persona nav tabs ── */
  .persona-nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 2rem;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
  }
  .nav-tab {
    display: inline-block;
    padding: .75rem 1.25rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
  }
  .nav-tab:hover { color: var(--gold-dark); border-color: var(--gold); }

  /* ── Main ── */
  main { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }

  /* ── Persona section ── */
  .persona-section { margin-bottom: 3.5rem; }
  .persona-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .persona-header h2 { font-size: 1.4rem; font-weight: 700; }
  .score-ring {
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700;
    border: 3px solid;
    flex-shrink: 0;
  }

  /* ── Overview grid ── */
  .overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  @media (max-width: 700px) { .overview-grid { grid-template-columns: 1fr; } }

  /* ── Card ── */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
  }
  .card h3 {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: .75rem;
  }
  .summary-text { font-size: .9rem; line-height: 1.7; }

  /* ── Dimension rows ── */
  .dim-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
  }
  .dim-row:last-child { border-bottom: none; }
  .dim-name { min-width: 130px; font-weight: 500; }
  .dim-bar-wrap { flex: 1; background: #f3f4f6; border-radius: 999px; height: 6px; }
  .dim-bar { height: 6px; border-radius: 999px; }
  .dim-score { min-width: 32px; text-align: right; font-weight: 700; font-size: .8rem; }
  .dim-rationale { color: var(--text-muted); font-size: .8rem; flex: 2; }

  /* ── Recommendations ── */
  .rec-list { list-style: none; }
  .rec-list li {
    padding: .4rem 0 .4rem 1.25rem;
    position: relative;
    font-size: .875rem;
    border-bottom: 1px solid var(--border);
  }
  .rec-list li:last-child { border-bottom: none; }
  .rec-list li::before {
    content: "→";
    position: absolute; left: 0;
    color: var(--gold-dark);
    font-weight: 700;
  }

  /* ── Steps heading ── */
  .steps-heading {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.75rem 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--border);
  }

  /* ── Step card ── */
  .step-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 320px 1fr;
  }
  @media (max-width: 800px) { .step-card { grid-template-columns: 1fr; } }

  .step-screenshot {
    border-right: 1px solid var(--border);
    background: #1c1917;
  }
  .step-screenshot img {
    width: 100%;
    height: auto;
    display: block;
  }
  .step-screenshot.no-screenshot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    color: #57534e;
    font-size: .8rem;
  }

  .step-details { padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
  .step-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
  }
  .step-task {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
  }
  .step-timestamp { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
  .step-instruction { font-weight: 600; font-size: .9rem; }
  .step-url { font-size: .75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .step-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-top: .2rem;
  }
  .step-text { font-size: .875rem; line-height: 1.6; }

  .action-badge {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: .2rem;
    align-self: flex-start;
  }
  .step-footer { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
  .usage-badge {
    font-size: .7rem;
    color: var(--text-muted);
    background: #f3f4f6;
    border-radius: 999px;
    padding: .2rem .6rem;
    margin-top: .2rem;
  }
  .usage-summary {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: .35rem;
  }
  .usage-summary strong { color: var(--text); }

  /* ── Divider / footer ── */
  .divider { border: none; border-top: 2px solid var(--border); margin: 2.5rem 0; }
  footer {
    text-align: center;
    padding: 2rem;
    font-size: .8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
  }
</style>
</head>
<body>

<header>
  <h1>hafermilch <span>report</span></h1>
  <div class="header-meta">
    <a href="{{ report.target_url }}">{{ report.target_url }}</a>
    &nbsp;·&nbsp; {{ report.generated_at.strftime("%Y-%m-%d %H:%M UTC") }}
    &nbsp;·&nbsp; {{ report.persona_reports | length }} persona{{ "s" if report.persona_reports | length != 1 else "" }}
    {% if report.total_usage %}
    &nbsp;·&nbsp; {{ report.total_usage.total_tokens | format_tokens }} tokens
    {% if report.total_usage.cost_usd is not none %}&nbsp;·&nbsp; ${{ "%.4f" | format(report.total_usage.cost_usd) }}{% endif %}
    {% endif %}
  </div>
</header>

<nav class="persona-nav">
  {% for pr in report.persona_reports %}
  <a href="#persona-{{ loop.index0 }}" class="nav-tab">{{ pr.persona_display_name }}</a>
  {% endfor %}
</nav>

<main>
  {% for pr in report.persona_reports %}
  {% set score_color = pr.overall_score | score_color %}
  <section class="persona-section" id="persona-{{ loop.index0 }}">

    <div class="persona-header">
      <div class="score-ring" style="color:{{ score_color }};border-color:{{ score_color }}">
        {{ "%.1f" | format(pr.overall_score) }}
      </div>
      <div>
        <h2>{{ pr.persona_display_name }}</h2>
        {% if pr.total_usage %}
        <div class="usage-summary">
          <strong>{{ pr.total_usage.total_tokens | format_tokens }}</strong> tokens
          ({{ pr.total_usage.prompt_tokens | format_tokens }} in / {{ pr.total_usage.completion_tokens | format_tokens }} out)
          {% if pr.total_usage.cost_usd is not none %}&nbsp;·&nbsp; <strong>${{ "%.4f" | format(pr.total_usage.cost_usd) }}</strong>{% endif %}
        </div>
        {% endif %}
      </div>
    </div>

    <div class="overview-grid">
      <div class="card">
        <h3>Summary</h3>
        <p class="summary-text">{{ pr.summary }}</p>
      </div>
      <div class="card">
        <h3>Dimension Scores</h3>
        {% for ds in pr.dimension_scores %}
        {% set ds_color = ds.score | score_color %}
        <div class="dim-row">
          <span class="dim-name">{{ ds.dimension }}</span>
          <div class="dim-bar-wrap">
            <div class="dim-bar" style="width:{{ ds.score * 10 }}%;background:{{ ds_color }}"></div>
          </div>
          <span class="dim-score" style="color:{{ ds_color }}">{{ "%.1f" | format(ds.score) }}</span>
          <span class="dim-rationale">{{ ds.rationale }}</span>
        </div>
        {% endfor %}
      </div>
    </div>

    <div class="card">
      <h3>Recommendations</h3>
      <ul class="rec-list">
        {% for rec in pr.recommendations %}
        <li>{{ rec }}</li>
        {% endfor %}
      </ul>
    </div>

    <div class="steps-heading">Evaluation Log — {{ pr.findings | length }} steps</div>

    {% for f in pr.findings %}
    {% set badge = f.action_taken | action_badge %}
    <div class="step-card">

      {% if f.screenshot %}
      <div class="step-screenshot">
        <img src="data:image/png;base64,{{ f.screenshot | b64png }}" alt="Step {{ loop.index }} screenshot" loading="lazy">
      </div>
      {% else %}
      <div class="step-screenshot no-screenshot">no screenshot</div>
      {% endif %}

      <div class="step-details">
        <div class="step-top">
          <div>
            <div class="step-task">{{ f.task_name }}</div>
            <div class="step-instruction">Step {{ loop.index }} — {{ f.step_instruction }}</div>
          </div>
          <span class="step-timestamp">{{ f.timestamp.strftime("%H:%M:%S") }}</span>
        </div>
        <div class="step-url">{{ f.url }}</div>
        <div>
          <div class="step-label">Observation</div>
          <div class="step-text">{{ f.observation }}</div>
        </div>
        <div>
          <div class="step-label">Reasoning</div>
          <div class="step-text">{{ f.reasoning }}</div>
        </div>
        <div class="step-footer">
          <span class="action-badge" style="background:{{ badge.bg }};color:{{ badge.fg }}">{{ f.action_taken }}</span>
          {% if f.usage %}
          <span class="usage-badge">{{ f.usage.total_tokens | format_tokens }} tok
            {% if f.usage.cost_usd is not none %}&nbsp;· ${{ "%.4f" | format(f.usage.cost_usd) }}{% endif %}
          </span>
          {% endif %}
        </div>
      </div>

    </div>
    {% endfor %}

  </section>
  {% if not loop.last %}<hr class="divider">{% endif %}
  {% endfor %}
</main>

<footer>Generated by <strong>hafermilch</strong></footer>
</body>
</html>
