{% extends "base.html" %} {% from "partials/status_badge.html" import
status_badge %} {% from "partials/event_pill.html" import event_pill %} {% macro
short_id(value) -%} {% set text = value|string %} {% if text|length > 37 %}{{
text[:22] }}...{{ text[-12:] }}{% else %}{{ text }}{% endif %} {%- endmacro %}
{% block page_title %}{% endblock %} {% block content %}
<div class="pynmon-container invocation-detail-page">
  <header class="invocation-hero">
    <div class="invocation-hero-main">
      <div class="detail-kicker">Invocation</div>
      <h1>{{ task.task_id.func_name }}</h1>
      <div class="invocation-hero-meta">
        {{ status_badge(invocation.status.name) }}
        <code>{{ invocation.invocation_id }}</code>
        {% if duration %}<span>{{ duration }}</span>{% endif %}
      </div>
    </div>
    <div class="invocation-action-bar">
      <a
        href="/invocations"
        class="btn btn-sm btn-outline-secondary pynmon-action-btn"
      >
        Back to Invocations
      </a>
      <a
        href="#"
        id="view-in-timeline-btn"
        class="btn btn-sm btn-outline-success pynmon-action-btn view-in-timeline-link"
        data-invocation-id="{{ invocation.invocation_id }}"
        title="Zoom to this invocation in the timeline"
      >
        <span
          class="material-icons"
          style="font-size: 16px; vertical-align: middle"
          >zoom_in</span
        >
        Zoom to Timeline
      </a>
      <a
        href="/calls?call_id={{ call.call_id|urlencode }}"
        class="btn btn-sm btn-outline-info pynmon-action-btn"
      >
        View Call
      </a>
      <a
        href="/tasks/{{ task.task_id }}"
        class="btn btn-sm btn-outline-primary pynmon-action-btn"
      >
        View Task
      </a>
      <button
        id="rerun-call-btn"
        class="btn btn-sm btn-outline-warning pynmon-action-btn"
        title="Register a new identical call (new independent invocation)"
      >
        <span
          class="material-icons"
          style="font-size: 16px; vertical-align: middle"
          >replay</span
        >
        Re-run Call
      </button>
    </div>
  </header>

  <div class="invocation-detail-content">
    <div class="row pynmon-row-compact pynmon-responsive-detail-grid">
      <div class="col-md-6">
        <div class="detail-panel">
          <div class="detail-panel-header">Invocation information</div>
          <div class="detail-panel-body">
            <table class="table pynmon-table">
              <tbody>
                <tr>
                  <th>Invocation ID:</th>
                  <td>
                    <code style="font-size: 11px; word-break: break-all"
                      >{{ invocation.invocation_id }}</code
                    >
                  </td>
                </tr>
                <tr>
                  <th>Status:</th>
                  <td>{{ status_badge(invocation.status.name) }}</td>
                </tr>
                <tr>
                  <th>Retries:</th>
                  <td>{{ invocation.num_retries }}</td>
                </tr>
                <tr>
                  <th>Parent Invocation:</th>
                  <td>
                    {% if invocation.parent_invocation_id %}
                    <a
                      href="/invocations/{{ invocation.parent_invocation_id }}"
                      class="text-decoration-none"
                      style="color: #0d6efd"
                    >
                      <code
                        style="
                          font-size: 11px;
                          word-break: break-all;
                          color: inherit;
                        "
                        >{{ invocation.parent_invocation_id }}</code
                      >
                    </a>
                    {% else %}
                    <span class="text-muted">None</span>
                    {% endif %}
                  </td>
                </tr>
                <tr>
                  <th>Parent Event:</th>
                  <td>
                    {% if invocation.parent_event_id %}
                    <a href="/events/{{ invocation.parent_event_id }}">
                      <code style="font-size: 11px; word-break: break-all"
                        >{{ invocation.parent_event_id }}</code
                      >
                    </a>
                    {% else %}
                    <span class="text-muted">None</span>
                    {% endif %}
                  </td>
                </tr>
                <tr>
                  <th>Created At:</th>
                  <td>{{ created_at }}</td>
                </tr>
                {% if completed_at %}
                <tr>
                  <th>Completed At:</th>
                  <td>{{ completed_at }}</td>
                </tr>
                {% endif %} {% if duration %}
                <tr>
                  <th>Duration:</th>
                  <td>{{ duration }}</td>
                </tr>
                {% endif %}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="detail-panel">
          <div class="detail-panel-header">Call & task information</div>
          <div class="detail-panel-body">
            <table class="table pynmon-table">
              <tbody>
                <tr>
                  <th>Call ID:</th>
                  <td>
                    <a
                      href="/calls/?call_id_key={{ call.call_id.key|urlencode }}"
                    >
                      <code style="font-size: 11px; word-break: break-all"
                        >{{ call.call_id }}</code
                      >
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>Task ID:</th>
                  <td>
                    <a href="/tasks/{{ task.task_id }}"> {{ task.task_id }} </a>
                  </td>
                </tr>
                <tr>
                  <th>Task Module:</th>
                  <td>{{ task.task_id.module }}</td>
                </tr>
                <tr>
                  <th>Task Function:</th>
                  <td>{{ task.task_id.func_name }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    {% if workflow %}
    <div class="row pynmon-row-compact">
      <div class="col-12">
        <div class="detail-panel">
          <div class="detail-panel-header">Workflow information</div>
          <div class="detail-panel-body">
            <table class="table pynmon-table">
              <tbody>
                <tr>
                  <th>Workflow Type:</th>
                  <td>
                    <a
                      href="/workflows/{{ workflow.workflow_type | urlencode }}"
                    >
                      {{ workflow.workflow_type }}
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>Workflow ID:</th>
                  <td>
                    <a href="/invocations/{{ workflow.workflow_id }}">
                      <code style="font-size: 11px; word-break: break-all"
                        >{{ workflow.workflow_id }}</code
                      >
                    </a>
                  </td>
                </tr>
                {% if workflow.parent_workflow_id %}
                <tr>
                  <th>Parent Workflow:</th>
                  <td>
                    <a href="/invocations/{{ workflow.parent_workflow_id }}">
                      <code style="font-size: 11px; word-break: break-all"
                        >{{ workflow.parent_workflow_id }}</code
                      >
                    </a>
                  </td>
                </tr>
                {% endif %}
                <tr>
                  <th>Sub-workflow:</th>
                  <td>{{ 'Yes' if workflow.is_subworkflow else 'No' }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    {% endif %} {# Determine which columns have visible content #} {% set
    has_left = triggered_by or emitted_events or invocation.parent_event_id %}
    {% set has_right = triggered_runs_caused %} {% if has_left or has_right %}
    <div class="row pynmon-row-compact">
      <div class="col-12">
        <div class="detail-panel event-context-panel">
          <div class="detail-panel-header">Triggering information</div>
          <div
            class="detail-panel-body {% if has_left and has_right %}event-context-grid{% endif %}"
          >
            {# ── Left column: Run due to events + Events emitted ── #} {% if
            has_left %}
            <div class="event-context-left-col">
              {% if triggered_by or invocation.parent_event_id %}
              <section class="event-context-section">
                <div class="event-context-heading">
                  <span>Trigger origin</span>
                  {% if triggered_by %}<span class="badge bg-secondary"
                    >{{ triggered_by.logic_value }}</span
                  >{% endif %}
                </div>
                {% if triggered_by %}
                <dl class="event-context-list">
                  <dt>Trigger run</dt>
                  <dd>
                    <a
                      href="/trigger-runs/{{ triggered_by.trigger_run_id }}"
                      title="Open trigger run details"
                    >
                      <code>{{ triggered_by.trigger_run_id }}</code>
                    </a>
                    {% set run_timeline_url =
                    trigger_run_timeline_urls.get(triggered_by.trigger_run_id)
                    %} {% if run_timeline_url %}
                    <a
                      href="{{ run_timeline_url }}"
                      class="ms-1 text-decoration-none"
                      title="Open trigger run in timeline"
                    >
                      <span
                        class="material-icons"
                        style="
                          font-size: 14px;
                          vertical-align: middle;
                          color: #28a745;
                        "
                        >timeline</span
                      >
                    </a>
                    {% endif %}
                  </dd>
                  <dt>Trigger ID</dt>
                  <dd>
                    <a href="/triggers/{{ triggered_by.trigger_id|urlencode }}"
                      ><code>{{ triggered_by.trigger_id }}</code></a
                    >
                  </dd>
                  {% if triggered_by.event_ids %}
                  <dt>Source events</dt>
                  <dd class="event-pill-row">
                    {% for eid in triggered_by.event_ids %} {{ event_pill(eid,
                    source_event_summaries.get(eid)) }} {% endfor %}
                  </dd>
                  {% endif %} {% if triggered_by_source_invocation_ids %}
                  <dt>Source invocations</dt>
                  <dd class="inv-summary-card-row">
                    {% for sid in triggered_by_source_invocation_ids %} {% set s
                    = source_inv_summaries.get(sid, {}) %}
                    <a href="/invocations/{{ sid }}" class="inv-summary-card">
                      <div class="inv-summary-id">{{ sid }}</div>
                      {% if s.get("func_name") %}
                      <div class="inv-summary-task">{{ s.func_name }}</div>
                      {% endif %}
                      <div class="inv-summary-meta">
                        {% if s.get("status") %}
                        <span
                          class="badge {% if s.status == 'SUCCESS' %}bg-success{% elif s.status == 'FAILED' %}bg-danger{% elif s.status == 'RUNNING' %}bg-primary{% else %}bg-secondary{% endif %}"
                          style="font-size: 9px"
                          >{{ s.status }}</span
                        >
                        {% endif %} {% if s.get("duration_seconds") is not none
                        %}
                        <span class="inv-summary-duration"
                          >{{ "%.2f"|format(s.duration_seconds) }}s</span
                        >
                        {% endif %}
                      </div>
                    </a>
                    {% endfor %}
                  </dd>
                  {% endif %} {% if triggered_by.executed_at %}
                  <dt>Triggered at</dt>
                  <dd>
                    <code
                      >{{
                      triggered_by.executed_at.isoformat(timespec="microseconds")
                      }}</code
                    >
                  </dd>
                  {% endif %}
                </dl>
                {% if triggered_by_participants %}
                <div
                  class="trigger-caused-list mt-2"
                  data-trigger-run-id="{{ triggered_by.trigger_run_id }}"
                >
                  {% for p in triggered_by_participants %}
                  <div
                    class="trigger-caused-item"
                    data-context-type="{{ p.context_type }}"
                    {%
                    if
                    p.source_invocation_id
                    %}data-source-invocation-id="{{ p.source_invocation_id }}"
                    {%
                    endif
                    %}
                    {%
                    if
                    p.event_id
                    %}data-event-id="{{ p.event_id }}"
                    {%
                    endif
                    %}
                  >
                    <dl class="event-context-list mb-0">
                      <dt>Context</dt>
                      <dd>
                        <span class="badge bg-info">{{ p.context_type }}</span>
                      </dd>
                      <dt>Condition</dt>
                      <dd>
                        {% if p.condition_id %}<code
                          title="{{ p.condition_id }}"
                          >{{ short_id(p.condition_id) }}</code
                        >{% else %}<span class="text-muted">—</span>{% endif %}
                      </dd>
                      <dt>Source</dt>
                      <dd>
                        {% if p.source_invocation_id %} {% set s =
                        source_inv_summaries.get(p.source_invocation_id, {}) %}
                        <a
                          href="/invocations/{{ p.source_invocation_id }}"
                          class="inv-summary-card"
                        >
                          <div class="inv-summary-id">
                            {{ p.source_invocation_id }}
                          </div>
                          {% if s.get("func_name") %}
                          <div class="inv-summary-task">{{ s.func_name }}</div>
                          {% endif %}
                          <div class="inv-summary-meta">
                            {% if s.get("status") %}
                            <span
                              class="badge {% if s.status == 'SUCCESS' %}bg-success{% elif s.status == 'FAILED' %}bg-danger{% elif s.status == 'RUNNING' %}bg-primary{% else %}bg-secondary{% endif %}"
                              style="font-size: 9px"
                              >{{ s.status }}</span
                            >
                            {% endif %} {% if s.get("duration_seconds") is not
                            none %}
                            <span class="inv-summary-duration"
                              >{{ "%.2f"|format(s.duration_seconds) }}s</span
                            >
                            {% endif %}
                          </div>
                        </a>
                        {% elif p.event_id %} {{ event_pill(p.event_id,
                        source_event_summaries.get(p.event_id)) }} {% else
                        %}<span class="text-muted">—</span>{% endif %}
                      </dd>
                      <dt>Timestamp</dt>
                      <dd>
                        {% if p.context_timestamp %}<code
                          >{{
                          p.context_timestamp.isoformat(timespec="microseconds")
                          }}</code
                        >{% else %}<span class="text-muted">—</span>{% endif %}
                      </dd>
                      <dt>Summary</dt>
                      <dd>
                        {% if p.context_summary %}<code
                          >{{ p.context_summary }}</code
                        >{% else %}<span class="text-muted">—</span>{% endif %}
                      </dd>
                    </dl>
                  </div>
                  {% endfor %}
                </div>
                {% endif %} {% elif invocation.parent_event_id %}
                <dl class="event-context-list">
                  <dt>Parent event</dt>
                  <dd>
                    <a href="/events/{{ invocation.parent_event_id }}"
                      ><code>{{ invocation.parent_event_id }}</code></a
                    >
                  </dd>
                </dl>
                {% endif %}
              </section>
              {% endif %}{# /triggered_by or parent_event_id #} {% if
              emitted_events %}
              <section class="event-context-section">
                <div class="event-context-heading">
                  <span>Events emitted by this invocation</span>
                  <span class="badge bg-secondary"
                    >{{ emitted_events|length }}</span
                  >
                </div>
                <div class="emitted-events-list">
                  {% for ev in emitted_events %}
                  <div
                    class="emitted-event-item event-reference"
                    data-event-id="{{ ev.event_id }}"
                  >
                    <div class="emitted-event-head">
                      <code class="emitted-event-code"
                        >{{ ev.event_code }}</code
                      >
                      {% if ev.triggered %}<span class="badge bg-success"
                        >triggered</span
                      >{% elif ev.matched %}<span class="badge bg-primary"
                        >matched</span
                      >{% else %}<span class="badge bg-secondary">recorded</span
                      >{% endif %}
                      <span class="emitted-event-ts"
                        ><code
                          >{{ ev.timestamp.isoformat(timespec="microseconds")
                          }}</code
                        ></span
                      >
                      <a
                        href="/events/{{ ev.event_id }}"
                        class="emitted-event-link ms-auto text-decoration-none"
                        title="{{ ev.event_id }}"
                        ><code>{{ ev.event_id[:8] }}…</code></a
                      >
                    </div>
                    {% set triggered_ids = ev.triggered_invocation_ids or [] %}
                    {% if triggered_ids %}
                    <div class="emitted-event-triggered">
                      <span class="emitted-event-triggered-label"
                        >Triggered invocations ({{ triggered_ids|length
                        }})</span
                      >
                      <div class="inv-summary-card-row">
                        {% for inv_id in triggered_ids %} {% set s =
                        emitted_event_inv_summaries.get(inv_id, {}) %}
                        <a
                          href="/invocations/{{ inv_id }}"
                          class="inv-summary-card invocation-reference"
                          data-invocation-id="{{ inv_id }}"
                        >
                          <div class="inv-summary-id">{{ inv_id }}</div>
                          {% if s.func_name %}
                          <div class="inv-summary-task">{{ s.func_name }}</div>
                          {% endif %}
                          <div class="inv-summary-meta">
                            {% if s.status %} {% set status_class = { 'SUCCESS':
                            'bg-success', 'FAILED': 'bg-danger', 'RUNNING':
                            'bg-primary', 'PENDING': 'bg-secondary', 'RETRYING':
                            'bg-warning text-dark', }.get(s.status,
                            'bg-secondary') %}
                            <span
                              class="badge {{ status_class }}"
                              style="font-size: 9px"
                              >{{ s.status }}</span
                            >
                            {% endif %} {% if s.duration_seconds is not none %}
                            <span class="inv-summary-duration"
                              >{{ "%.2f"|format(s.duration_seconds) }}s</span
                            >
                            {% endif %}
                          </div>
                        </a>
                        {% endfor %}
                      </div>
                    </div>
                    {% endif %}
                  </div>
                  {% endfor %}
                </div>
              </section>
              {% endif %}{# /emitted_events #}
            </div>
            {# /event-context-left-col #} {% endif %}{# /has_left #} {# ── Right
            column: Triggers caused by this invocation ── #} {% if has_right %}
            <section class="event-context-section">
              <div class="event-context-heading">
                <span>Triggers caused by this invocation</span>
                <span class="badge bg-secondary"
                  >{{ triggered_runs_caused|length }}</span
                >
              </div>
              <div class="trigger-caused-list">
                {% for run in triggered_runs_caused %}
                <div
                  class="trigger-caused-item"
                  data-trigger-run-id="{{ run.trigger_run_id }}"
                  data-trigger-id="{{ run.trigger_id }}"
                >
                  <dl class="event-context-list mb-0">
                    <dt>Trigger run</dt>
                    <dd>
                      <a
                        href="/trigger-runs/{{ run.trigger_run_id }}"
                        title="{{ run.trigger_run_id }}"
                      >
                        <code>{{ short_id(run.trigger_run_id) }}</code>
                      </a>
                      {% set run_timeline_url =
                      trigger_run_timeline_urls.get(run.trigger_run_id) %} {% if
                      run_timeline_url %}
                      <a
                        href="{{ run_timeline_url }}"
                        class="ms-1 text-decoration-none"
                        title="Open trigger run in timeline"
                      >
                        <span
                          class="material-icons"
                          style="
                            font-size: 14px;
                            vertical-align: middle;
                            color: #28a745;
                          "
                          >timeline</span
                        >
                      </a>
                      {% endif %}
                    </dd>
                    <dt>Logic</dt>
                    <dd>
                      <span class="badge bg-secondary"
                        >{{ run.logic_value }}</span
                      >
                    </dd>
                    <dt>Task</dt>
                    <dd><code>{{ run.task_id_key }}</code></dd>
                    <dt>Triggered invocation</dt>
                    <dd>
                      {% if run.triggered_invocation_id %} {% set s =
                      source_inv_summaries.get(run.triggered_invocation_id, {})
                      %}
                      <a
                        href="/invocations/{{ run.triggered_invocation_id }}"
                        class="inv-summary-card"
                      >
                        <div class="inv-summary-id">
                          {{ run.triggered_invocation_id }}
                        </div>
                        {% if s.get("func_name") %}
                        <div class="inv-summary-task">{{ s.func_name }}</div>
                        {% endif %}
                        <div class="inv-summary-meta">
                          {% if s.get("status") %}
                          <span
                            class="badge {% if s.status == 'SUCCESS' %}bg-success{% elif s.status == 'FAILED' %}bg-danger{% elif s.status == 'RUNNING' %}bg-primary{% else %}bg-secondary{% endif %}"
                            style="font-size: 9px"
                            >{{ s.status }}</span
                          >
                          {% endif %} {% if s.get("duration_seconds") is not
                          none %}
                          <span class="inv-summary-duration"
                            >{{ "%.2f"|format(s.duration_seconds) }}s</span
                          >
                          {% endif %}
                        </div>
                      </a>
                      {% else %}<span class="text-muted">—</span>{% endif %}
                    </dd>
                    {% if run.executed_at %}
                    <dt>Executed at</dt>
                    <dd>
                      <code
                        >{{ run.executed_at.isoformat(timespec="microseconds")
                        }}</code
                      >
                    </dd>
                    {% endif %}
                  </dl>
                  {% set run_participants =
                  triggered_runs_caused_participants.get(run.trigger_run_id, [])
                  %} {% if run_participants %}
                  <div class="trigger-participants-heading">
                    Matched conditions
                  </div>
                  <div class="trigger-participant-list">
                    {% for p in run_participants %}
                    <div
                      class="trigger-participant-item"
                      data-context-type="{{ p.context_type }}"
                      {%
                      if
                      p.source_invocation_id
                      %}data-source-invocation-id="{{ p.source_invocation_id }}"
                      {%
                      endif
                      %}
                      {%
                      if
                      p.event_id
                      %}data-event-id="{{ p.event_id }}"
                      {%
                      endif
                      %}
                    >
                      <dl class="event-context-list mb-0">
                        <dt>Context</dt>
                        <dd>
                          <span class="badge bg-info"
                            >{{ p.context_type }}</span
                          >
                        </dd>
                        <dt>Condition</dt>
                        <dd>
                          {% if p.condition_id %}
                          <a
                            href="/trigger-runs/condition?condition_id={{ p.condition_id|urlencode }}"
                            title="{{ p.condition_id }}"
                            ><code>{{ short_id(p.condition_id) }}</code></a
                          >
                          {% else %}<span class="text-muted">—</span>{% endif %}
                        </dd>
                        <dt>Source</dt>
                        <dd>
                          {% if p.source_invocation_id %} {% set s =
                          source_inv_summaries.get(p.source_invocation_id, {})
                          %}
                          <a
                            href="/invocations/{{ p.source_invocation_id }}"
                            class="inv-summary-card"
                          >
                            <div class="inv-summary-id">
                              {{ p.source_invocation_id }}
                            </div>
                            {% if s.get("func_name") %}
                            <div class="inv-summary-task">
                              {{ s.func_name }}
                            </div>
                            {% endif %}
                            <div class="inv-summary-meta">
                              {% if s.get("status") %}
                              <span
                                class="badge {% if s.status == 'SUCCESS' %}bg-success{% elif s.status == 'FAILED' %}bg-danger{% elif s.status == 'RUNNING' %}bg-primary{% else %}bg-secondary{% endif %}"
                                style="font-size: 9px"
                                >{{ s.status }}</span
                              >
                              {% endif %} {% if s.get("duration_seconds") is not
                              none %}
                              <span class="inv-summary-duration"
                                >{{ "%.2f"|format(s.duration_seconds) }}s</span
                              >
                              {% endif %}
                            </div>
                          </a>
                          {% elif p.event_id %} {{ event_pill(p.event_id,
                          source_event_summaries.get(p.event_id)) }} {% else
                          %}<span class="text-muted">—</span>{% endif %}
                        </dd>
                        <dt>Timestamp</dt>
                        <dd>
                          {% if p.context_timestamp %}<code
                            >{{
                            p.context_timestamp.isoformat(timespec="microseconds")
                            }}</code
                          >{% else %}<span class="text-muted">—</span>{% endif
                          %}
                        </dd>
                        <dt>Summary</dt>
                        <dd>
                          {% if p.context_summary %}<code
                            >{{ p.context_summary }}</code
                          >{% else %}<span class="text-muted">—</span>{% endif
                          %}
                        </dd>
                      </dl>
                    </div>
                    {% endfor %}
                  </div>
                  {% endif %}
                </div>
                {% endfor %}
              </div>
            </section>
            {% endif %}{# /has_right #}
          </div>
          {# /event-context-grid #}
        </div>
      </div>
    </div>
    {% endif %}

    <div class="row pynmon-row-compact pynmon-responsive-detail-grid">
      <div class="col-md-6">
        <div class="detail-panel">
          <div class="detail-panel-header">Arguments</div>
          <div class="detail-panel-body">
            {% if arguments %} {% with args=arguments,
            id_prefix='invocation-args' %} {% include
            "partials/formatted_arguments.html" %} {% endwith%} {% else %}
            <p class="text-muted data-text">No arguments provided</p>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="detail-panel">
          <div class="detail-panel-header">Result / exception</div>
          <div class="detail-panel-body">
            {% if result is not none %}
            <h6 class="text-success">Result:</h6>
            <div class="result-container">
              <pre class="result-content"><code>{{ result }}</code></pre>
            </div>
            {% elif exception is not none %}
            <h6 class="text-danger">Exception:</h6>
            <div class="result-container">
              <pre class="result-content"><code>{{ exception }}</code></pre>
            </div>
            {% else %}
            <p class="text-muted">No result or exception available.</p>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <!-- New section for history timeline -->
    <div class="row pynmon-row-compact">
      <div class="col-12">
        <div class="detail-panel">
          <div class="detail-panel-header">Status timeline</div>
          <div class="detail-panel-body">
            {% if history %}
            <div class="timeline compact-timeline">
              {% for entry in history %}
              <div class="timeline-item compact-timeline-item">
                <div
                  class="timeline-marker {% if entry.status == 'SUCCESS' %}bg-success{% elif entry.status == 'FAILED' %}bg-danger{% elif entry.status == 'RUNNING' %}bg-info{% elif entry.status == 'PENDING' %}bg-warning{% elif entry.status == 'PAUSED' %}bg-primary{% elif entry.status == 'RETRY' %}bg-secondary{% else %}bg-dark{% endif %}"
                ></div>
                <div class="timeline-content compact-timeline-content">
                  <div class="timeline-title compact-timeline-title">
                    {{ status_badge(entry.status) }}
                  </div>
                  <div class="timeline-date metadata-text">
                    {{ entry.timestamp }}
                  </div>
                  {% if entry.runner_context_summary %}
                  <div
                    class="timeline-runner-info"
                    data-runner-id="{{ entry.runner_id }}"
                    style="
                      font-size: 11px;
                      margin-top: 6px;
                      background: #f8f9fa;
                      padding: 8px;
                      border-radius: 4px;
                      border-left: 3px solid #6c757d;
                    "
                  >
                    <!-- Current Runner Context -->
                    <div style="margin-bottom: 4px">
                      <strong style="color: #495057">Runner:</strong>
                      <span class="badge bg-primary" style="font-size: 10px"
                        >{{ entry.runner_cls or 'Unknown' }}</span
                      >
                      <a
                        href="/runners/{{ entry.runner_id }}"
                        class="text-decoration-none"
                        title="View runner details"
                      >
                        <code
                          style="
                            font-size: 10px;
                            background: #e9ecef;
                            padding: 1px 4px;
                            border-radius: 2px;
                            color: #0d6efd;
                          "
                          >{{ entry.runner_id }}</code
                        >
                      </a>
                    </div>
                    <div
                      style="color: #6c757d; font-size: 10px; margin-left: 8px"
                    >
                      {% if entry.hostname %}<span
                        >host: <strong>{{ entry.hostname }}</strong></span
                      >{% endif %} {% if entry.pid %}<span
                        style="margin-left: 8px"
                        >pid: <strong>{{ entry.pid }}</strong></span
                      >{% endif %} {% if entry.thread_id %}<span
                        style="margin-left: 8px"
                        >thread: <strong>{{ entry.thread_id }}</strong></span
                      >{% endif %}
                    </div>

                    <!-- Parent Runner Context (if available) -->
                    {% if entry.parent_runner_id %}
                    <div
                      style="
                        margin-top: 6px;
                        padding-top: 6px;
                        border-top: 1px dashed #dee2e6;
                      "
                    >
                      <strong style="color: #6c757d; font-size: 10px"
                        >↳ Parent:</strong
                      >
                      <span class="badge bg-secondary" style="font-size: 10px"
                        >{{ entry.parent_runner_cls or 'Unknown' }}</span
                      >
                      <a
                        href="/runners/{{ entry.parent_runner_id }}"
                        class="text-decoration-none"
                        title="View parent runner details"
                      >
                        <code
                          style="
                            font-size: 10px;
                            background: #e9ecef;
                            padding: 1px 4px;
                            border-radius: 2px;
                            color: #0d6efd;
                          "
                          >{{ entry.parent_runner_id }}</code
                        >
                      </a>
                      <div
                        style="
                          color: #6c757d;
                          font-size: 10px;
                          margin-left: 16px;
                          margin-top: 2px;
                        "
                      >
                        {% if entry.parent_hostname %}<span
                          >host:
                          <strong>{{ entry.parent_hostname }}</strong></span
                        >{% endif %} {% if entry.parent_pid %}<span
                          style="margin-left: 8px"
                          >pid: <strong>{{ entry.parent_pid }}</strong></span
                        >{% endif %} {% if entry.parent_thread_id %}<span
                          style="margin-left: 8px"
                          >thread:
                          <strong>{{ entry.parent_thread_id }}</strong></span
                        >{% endif %}
                      </div>
                    </div>
                    {% endif %}
                  </div>
                  {% endif %} {% if entry.execution_context %}
                  <div class="timeline-text data-text">
                    {{ entry.execution_context }}
                  </div>
                  {% endif %}
                </div>
              </div>
              {% endfor %}
            </div>
            {% else %}
            <p class="text-muted data-text">No history available.</p>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    <div
      id="ft-tree-loader"
      data-focus-id="{{ invocation.invocation_id }}"
    ></div>
  </div>

  {% include "partials/ft_float_panel.html" %}
  <script>
    document.getElementById("ft-float-panel").style.display = "flex";
    // Restore FT panel state if navigating between detail pages
    if (window._ftRestoreState) window._ftRestoreState();
    // Load the family tree (restored expandedIds are preserved by restoreFtState)
    if (window._ftLoadTree) {
      window._ftLoadTree("{{ invocation.invocation_id }}");
    }
  </script>
</div>

{% endblock %} {% block extra_js %} {% include
"invocations/partials/timeline_zoom_scripts.html" %}
<script>
  // Re-run call functionality
  document
    .getElementById("rerun-call-btn")
    ?.addEventListener("click", function () {
      if (
        !confirm(
          "This will register a brand-new invocation with the same call arguments. " +
            "The new invocation will be completely independent. Continue?"
        )
      )
        return;

      const btn = this;
      btn.disabled = true;
      btn.innerHTML =
        '<span class="spinner-border spinner-border-sm" role="status"></span> Re-running…';

      fetch("/invocations/{{ invocation.invocation_id }}/rerun", {
        method: "POST",
      })
        .then((r) => r.json())
        .then((data) => {
          if (data.success) {
            // Navigate to the new invocation
            window.location.href = "/invocations/" + data.new_invocation_id;
          } else {
            alert("Failed to re-run: " + data.message);
            btn.disabled = false;
            btn.innerHTML =
              '<span class="material-icons" style="font-size:16px;vertical-align:middle">replay</span> Re-run Call';
          }
        })
        .catch((err) => {
          alert("Error: " + err);
          btn.disabled = false;
          btn.innerHTML =
            '<span class="material-icons" style="font-size:16px;vertical-align:middle">replay</span> Re-run Call';
        });
    });
</script>
{% endblock %}