{% extends "base.html" %}
{% block title %}{{ run.skill_name }} — secfoo{% endblock %}
{% block content %}
<a href="/projects/{{ run.project_id }}" class="ds-caption">&larr; Back to project</a>
<div class="u-d-flex u-items-center u-gap-3 u-flex-wrap u-mt-4">
  <h1 class="u-m-0">{{ run.skill_name }}</h1>
  {% if blocked %}<span class="badge badge--error">Blocked</span>
  {% else %}<span class="badge {{ run.status | status_badge }}">{{ run.status }}</span>{% endif %}
</div>
<p class="ds-body u-color-text-muted u-mb-6">
  {{ run.project_display_name or 'Project' }} &middot; {{ run.agent_id }} &middot; started {{ run.started_at | fmt_time }}
</p>

<div class="run-top">
  <div class="card">
    <div class="u-d-flex u-justify-space-between u-items-baseline u-gap-3">
      <h4 class="card__title">Progress</h4>
      {% if elapsed is not none %}
      <span class="ds-caption run-elapsed" data-elapsed="{{ elapsed | int }}" {% if not is_active %}data-elapsed-frozen="true"{% endif %}>{{ (elapsed // 60) | int }}m {{ '%02d' % ((elapsed % 60) | int) }}s</span>
      {% endif %}
    </div>
    <ol class="run-steps" {% if is_active %}data-live-run="/runs/{{ run.run_uuid }}/status.json"{% endif %}>
      {% for step in steps %}
      <li class="run-steps__item" data-step="{{ loop.index0 }}" data-state="{{ step.state }}">
        <span class="run-steps__dot" aria-hidden="true"></span>
        <span class="run-steps__label">{{ step.label }}</span>
        <span class="run-steps__detail">{% if step.state == 'live' %}in progress{% else %}{{ step.detail }}{% endif %}</span>
      </li>
      {% endfor %}
    </ol>
    {% if is_active %}
    <p class="ds-caption u-color-text-muted u-mt-3">Updates live. The report appears here when the agent finishes.</p>
    {% endif %}
  </div>

  <div class="card">
    <h4 class="card__title">Run receipt</h4>
    <div class="receipt">
      <div class="receipt__line"><span>agent</span><span>{{ run.agent_id }}</span></div>
      <div class="receipt__line"><span>skill</span><span>{{ run.skill_id }}</span></div>
      <div class="receipt__line"><span>confluence pages</span><span>{{ run.confluence_urls | length }}</span></div>
      <div class="receipt__line"><span>duration</span><span>{{ run.duration_seconds | fmt_duration }}</span></div>
      <div class="receipt__line"><span>exit code</span><span>{{ run.exit_code if run.exit_code is not none else '-' }}</span></div>
      <div class="receipt__line"><span>tokens in / out</span><span>{{ run.input_tokens | fmt_tokens }} / {{ run.output_tokens | fmt_tokens }}</span></div>
      <div class="receipt__line"><span>findings C/H/M/L</span><span>{{ run.critical_count }} / {{ run.high_count }} / {{ run.medium_count }} / {{ run.low_count }}</span></div>
      <div class="receipt__line receipt__line--total"><span>AI cost</span><span>{% if run.cost_usd is none and run.status not in ('running', 'pending') %}not reported{% else %}{{ run.cost_usd | fmt_cost }}{% endif %}</span></div>
    </div>
    {% if run.confluence_urls %}
    <ul class="ds-caption u-mt-3 u-pl-4 u-wrap-anywhere">
      {% for url in run.confluence_urls %}<li><a href="{{ url }}" target="_blank" rel="noreferrer">{{ url }}</a></li>{% endfor %}
    </ul>
    {% endif %}
    <div class="receipt__actions">
      {% if run.prompt_path %}<a class="btn btn--outline btn--sm" href="/runs/{{ run.run_uuid }}/prompt.md">Prompt sent to agent</a>{% endif %}
      {% if report_html %}<a class="btn btn--outline btn--sm" href="/runs/{{ run.run_uuid }}/report.md">Raw report</a>{% endif %}
    </div>
  </div>
</div>

{% if blocked %}
<div class="card blocked-card u-mb-6">
  <h3 class="blocked-card__title">{{ blocked.title }}</h3>
  <p class="ds-body u-color-text-muted u-m-0">{{ blocked.explanation }}</p>
  {% if blocked.fix %}
  <div>
    <span class="ds-caption">How to fix</span>
    <div class="blocked-card__fix">{{ blocked.fix }}</div>
  </div>
  {% endif %}
  {% if run.stderr_excerpt %}
  <details>
    <summary class="ds-caption u-cursor-pointer">Error output from the agent</summary>
    <pre class="u-ws-pre-wrap u-m-2-0-0 u-font-body-sm">{{ run.stderr_excerpt }}</pre>
  </details>
  {% endif %}
  {% if run.assessment_id %}
  <a class="btn btn--primary btn--sm u-justify-self-start" href="/assessments/{{ run.assessment_id }}/runs/new">Try again</a>
  {% endif %}
</div>
{% endif %}

{% if report_html %}
<div class="card">
  {{ report_html | safe }}
</div>
{% elif not blocked and not is_active %}
<div class="card">
  <p class="ds-body u-color-text-muted">No report content available.</p>
</div>
{% endif %}

{% if mermaid_available %}
{#
  Vendored locally rather than loaded from a CDN: this is a security tool
  whose reports are often reviewed on airgapped or restricted networks, and
  a report viewer that phones out to a third-party host is its own finding.
  The asset is optional (see web/app.py::mermaid_bundle_available) -- without
  it, diagrams stay readable as Mermaid source instead of breaking.
#}
{# mermaid@11's dist/mermaid.min.js is an IIFE that assigns globalThis.mermaid
   -- NOT an ES module, so it must be loaded as a classic script rather than
   imported. #}
<script src="/static/vendor/mermaid.min.js"></script>
<script src="/static/js/mermaid-init.js"></script>
{% endif %}
{% endblock %}