{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block content %}
<section class="hero">
  <h1>attune ops</h1>
  <p class="hero-sub">Operations dashboard for the workflow OS — workflows, telemetry, health.</p>
</section>

<section class="kpi-grid">
  <a class="kpi" href="/telemetry">
    <div class="kpi-label">Today's events</div>
    <div class="kpi-value">{{ '{:,}'.format(kpis.today_events) }}</div>
    <div class="kpi-foot">{% if kpis.today_events == 0 %}no activity yet today{% else %}${{ '%.4f'|format(kpis.today_cost) }} spent{% endif %}</div>
  </a>

  <a class="kpi" href="/telemetry">
    <div class="kpi-label">7-day spend</div>
    <div class="kpi-value">${{ '%.2f'|format(kpis.seven_day_cost) }}</div>
    <div class="kpi-foot">
      {% if sparkline %}
        <svg class="sparkline" viewBox="0 0 240 40" preserveAspectRatio="none" aria-hidden="true">
          <polyline points="{{ sparkline }}" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
        </svg>
      {% else %}
        <span class="kpi-sub">no spend in last 7 days</span>
      {% endif %}
    </div>
  </a>

  <a class="kpi" href="/workflows">
    <div class="kpi-label">Workflows</div>
    <div class="kpi-value">{{ workflow_count }}</div>
    <div class="kpi-foot">{% if workflow_count == 0 %}attune package not importable{% else %}runnable from CLI / MCP / dashboard{% endif %}</div>
  </a>

  <a class="kpi" href="#family-snapshot">
    <div class="kpi-label">attune-ai</div>
    <div class="kpi-value">{% if attune_ai and attune_ai.version %}v{{ attune_ai.version }}{% else %}—{% endif %}</div>
    <div class="kpi-foot">{{ versions|length }} family packages tracked</div>
  </a>
</section>

{# Account-spend cluster (Phase 2 of anthropic-cost-integration).
   Visually distinguished from the workflow-telemetry cluster above
   via the .kpi-cluster-account class — these numbers come from the
   Anthropic admin API, not local usage.jsonl. Gated on cost_summary
   availability; CTA when no admin key; friendly notice on auth fail;
   silent fall-through on transient errors so the dashboard stays
   functional. #}
{% if cost_summary is not none %}
  <section class="kpi-grid kpi-cluster-account">
    <a class="kpi" href="/telemetry">
      <div class="kpi-label">Today (account)</div>
      <div class="kpi-value">${{ '%.2f'|format(cost_summary.today_usd) }}</div>
      <div class="kpi-foot">Anthropic billing &middot; {{ cost_summary.source }}</div>
    </a>
    <a class="kpi" href="/telemetry">
      <div class="kpi-label">7d (account)</div>
      <div class="kpi-value">${{ '%.2f'|format(cost_summary.seven_day_usd) }}</div>
      <div class="kpi-foot">last 7 days, all workspaces</div>
    </a>
    <a class="kpi" href="/telemetry">
      <div class="kpi-label">MTD (account)</div>
      <div class="kpi-value">${{ '%.2f'|format(cost_summary.month_to_date_usd) }}</div>
      <div class="kpi-foot">month-to-date</div>
    </a>
  </section>
{% elif cost_error is not none and cost_error.kind == "no_key" %}
  <section class="kpi-grid kpi-cluster-account">
    <a class="kpi kpi-cta" href="https://github.com/Smart-AI-Memory/attune-ai/blob/main/docs/reference/" rel="noopener">
      <div class="kpi-label">Set up cost reporting</div>
      <div class="kpi-value kpi-value-small">Connect billing</div>
      <div class="kpi-foot">Add an Anthropic admin API key to see account-wide spend here.</div>
    </a>
  </section>
{% elif cost_error is not none and cost_error.kind == "auth_failed" %}
  <section class="kpi-grid kpi-cluster-account">
    <a class="kpi kpi-notice" href="/telemetry">
      <div class="kpi-label">Account billing</div>
      <div class="kpi-value kpi-value-small">Key rejected</div>
      <div class="kpi-foot">Anthropic admin key was rejected. Refresh the key to see account-wide spend.</div>
    </a>
  </section>
{% endif %}

{# Spend alarm (R6 of usage-signals). Daily API-spend anomaly + approach
   to the monthly ceiling. ``spend.source`` is "account" (admin
   cost-report — sees CI) or "local" (usage.jsonl, CI-blind). The panel's
   accent follows ``spend.level``: ok / alarm / insufficient_data. #}
{% if spend is not none %}
  <section class="panel spend-alarm spend-alarm-{{ spend.level }}">
    <div class="spend-alarm-head">
      <h2>API spend watch</h2>
      {% if spend.level == "alarm" %}
        <span class="chip chip-danger">⚠ anomaly</span>
      {% elif spend.level == "insufficient_data" %}
        <span class="chip chip-muted">building baseline</span>
      {% else %}
        <span class="chip chip-ok">normal</span>
      {% endif %}
    </div>
    <p class="spend-alarm-detail">{{ spend.detail }}</p>
    <div class="spend-gauge" role="img"
         aria-label="Month-to-date ${{ '%.0f'|format(spend.month_to_date) }} of ${{ '%.0f'|format(spend.monthly_ceiling) }} monthly ceiling ({{ '%.0f'|format(spend.ceiling_pct) }}%)">
      <div class="spend-gauge-track">
        {# Cap the visual fill at 100% so an over-ceiling month doesn't
           overflow the bar; the numeric % below still shows the truth. #}
        <div class="spend-gauge-fill{% if 'ceiling' in spend.triggered_by %} spend-gauge-fill-hot{% endif %}"
             style="width: {{ [spend.ceiling_pct, 100]|min }}%;"></div>
      </div>
      <div class="spend-gauge-foot">
        <span>${{ '%.2f'|format(spend.month_to_date) }} MTD</span>
        <span>{{ '%.0f'|format(spend.ceiling_pct) }}% of ${{ '%.0f'|format(spend.monthly_ceiling) }}</span>
      </div>
    </div>
    <p class="spend-alarm-source">
      Source: {{ "Anthropic account billing (includes CI)" if spend.source == "account" else "local telemetry only — CI spend not counted" }}
    </p>
  </section>
{% endif %}

<section class="panel">
  <h2>Recent runs</h2>
  {% if recent_runs %}
    {# Each cell wraps its content in an ``<a class="row-link">``
       linking to ``/runs/<id>/view`` so the entire row is clickable —
       not just the workflow-name and run-id cells. Per-cell ``<a>``
       (rather than an absolutely-positioned overlay or a JS click
       handler) keeps the row keyboard-accessible without scripts and
       avoids the table-row ``position: relative`` quirks on older
       browsers. CSS in main.css makes ``.row-link`` display:block +
       color:inherit + text-decoration:none so the existing chip /
       monospace styling stays visible. #}
    <table class="data-table recent-runs-table">
      <thead><tr><th>Workflow</th><th>Run</th><th>Status</th><th class="num">Duration</th><th>Started</th><th class="num">Lines</th></tr></thead>
      <tbody>
        {% for r in recent_runs %}
          <tr class="recent-run-row">
            <td><a href="/runs/{{ r.id }}/view" class="row-link" aria-label="Open run {{ r.id[:8] }} for {{ r.workflow }}"><code>{{ r.workflow }}</code></a></td>
            <td><a href="/runs/{{ r.id }}/view" class="row-link" tabindex="-1"><code>{{ r.id[:8] }}</code></a></td>
            <td><a href="/runs/{{ r.id }}/view" class="row-link" tabindex="-1"><span class="chip chip-{{ r.status }}">{{ r.status }}</span></a></td>
            <td class="num"><a href="/runs/{{ r.id }}/view" class="row-link" tabindex="-1">{% if r.duration_seconds is not none %}{{ '%.1fs'|format(r.duration_seconds) }}{% else %}—{% endif %}</a></td>
            <td><a href="/runs/{{ r.id }}/view" class="row-link" tabindex="-1"><code class="started">{{ r.started_at[:19] if r.started_at else '—' }}</code></a></td>
            <td class="num"><a href="/runs/{{ r.id }}/view" class="row-link" tabindex="-1">{{ r.line_count }}</a></td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p class="empty">No runs yet this session. Trigger one from <a href="/workflows">Workflows</a>.</p>
  {% endif %}
</section>

<section class="panel">
  <h2>Daily activity (7 days)</h2>
  {% if telemetry.by_day %}
    <table class="data-table">
      <thead><tr><th>Day</th><th class="num">Events</th><th class="num">Cost</th></tr></thead>
      <tbody>
        {% for d in kpis.sparkline %}
          <tr><td><code>{{ d.day }}</code></td><td class="num">{{ d.events }}</td><td class="num">${{ '%.4f'|format(d.cost) }}</td></tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p class="empty">No telemetry recorded yet. Run a workflow to start seeing data here.</p>
  {% endif %}
</section>

<section class="panel" id="family-snapshot">
  <h2>Family snapshot</h2>
  <ul class="version-list">
    {% for v in versions %}
      <li>
        <span class="pkg">{{ v.package }}</span>
        {% if v.version %}
          <span class="ver">v{{ v.version }}</span>
        {% else %}
          <span class="ver missing">not installed</span>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</section>
{% endblock %}