{% extends "base.html" %}
{% block title %}My sessions — {{ config.INSTANCE_NAME }}{% endblock %}

{% block content %}
<style>
  .container:has(.sess-page) { max-width: none; padding: 24px 16px; }
  .sess-page { max-width: 1200px; margin: 0 auto; padding: 0; }
  .sess-title { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
  .sess-help { color: var(--text-secondary, #6b7280); font-size: 13px; margin-bottom: 20px; line-height: 1.55; }
  .sess-help code { background: var(--border-light, #f3f4f6); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
  .sess-table-wrap {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow-x: auto;
  }
  .sess-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .sess-table thead th {
    text-align: left; padding: 12px 16px;
    background: var(--border-light, #f9fafb);
    border-bottom: 1px solid var(--border, #e5e7eb);
    font-weight: 600; color: var(--text-secondary, #6b7280);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
    white-space: nowrap;
  }
  .sess-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light, #f3f4f6);
    vertical-align: middle;
  }
  .sess-table tbody tr:last-child td { border-bottom: none; }
  .sess-table tbody tr:hover { background: var(--border-light, #fafafa); }
  .sess-table .name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
  .sess-table .ts { white-space: nowrap; color: var(--text-secondary, #6b7280); font-variant-numeric: tabular-nums; }
  .sess-table .num { text-align: right; font-variant-numeric: tabular-nums; }
  .badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
  }
  .badge-pending { background: #fef3c7; color: #92400e; }
  .badge-processed { background: #dbeafe; color: #1e40af; }
  .badge-extracted { background: #d1fae5; color: #065f46; }
  .dl-link {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    color: inherit; text-decoration: none;
    font-size: 12px; font-weight: 500;
    background: var(--surface, #fff);
    transition: background 0.15s, border-color 0.15s;
  }
  .dl-link:hover {
    background: var(--border-light, #f9fafb);
    border-color: var(--primary, #6366f1);
    color: var(--primary, #4338ca);
  }
  .empty {
    padding: 40px 16px; text-align: center;
    color: var(--text-secondary, #6b7280); font-size: 13px;
  }
</style>

<div class="sess-page">
  <h1 class="sess-title">My sessions</h1>
  <p class="sess-help">
    Sessions you uploaded via <code>agnes push</code> from your Claude Code workspace, with
    extraction status from the verification processor's rows in <code>session_processor_state</code>.
    <br>
    <strong>Items extracted = 0</strong> means the verification detector ran successfully
    but the LLM didn't find anything worth tracking in that session — that's expected for
    sessions that are mostly tool calls or coding without confident factual claims.
    <br>
    <em>Pending</em> means the file is on disk but the scheduler hasn't processed it yet
    (next verification-detector tick: every 15 min by default).
  </p>

  <div class="sess-table-wrap">
    {% if sessions %}
    <table class="sess-table">
      <thead>
        <tr>
          <th>Session file</th>
          <th>Uploaded</th>
          <th class="num">Size</th>
          <th>Status</th>
          <th>Processed</th>
          <th class="num">Items extracted</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for s in sessions %}
        <tr>
          <td class="name">{{ s.name }}</td>
          <td class="ts">{{ s.uploaded_at.strftime("%Y-%m-%d %H:%M:%S UTC") }}</td>
          <td class="num">{{ s.size_kb }} kB</td>
          <td>
            {% if not s.is_processed %}
              <span class="badge badge-pending">pending</span>
            {% elif s.items_extracted and s.items_extracted > 0 %}
              <span class="badge badge-extracted">extracted</span>
            {% else %}
              <span class="badge badge-processed">processed</span>
            {% endif %}
          </td>
          <td class="ts">
            {% if s.processed_at %}{{ s.processed_at.strftime("%Y-%m-%d %H:%M:%S UTC") }}{% endif %}
          </td>
          <td class="num">
            {% if s.items_extracted is not none %}{{ s.items_extracted }}{% endif %}
          </td>
          <td>
            <a class="dl-link" href="/profile/sessions/{{ s.name }}" download>Download</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="empty">
      No session files yet. Run <code>agnes push</code> from a Claude Code workspace
      where <code>agnes init</code> installed the SessionEnd hook.
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}