{% from "_event_macros.html" import badge_for, meta_for, copyable, detail_panel with context %}

<div class="session-head">
  <div>
    <h1>Session
      <span class="muted session-id-text">{{ session_id }}</span>
      <button type="button" class="inline-copy-btn" data-copy-value="{{ session_id }}"
              title="Copy session id">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"
             stroke-linecap="round" stroke-linejoin="round"
             width="13" height="13" aria-hidden="true">
          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
        </svg>
      </button>
    </h1>
    {% if ai_title %}
      <div class="session-ai-title" title="AI-generated session title">{{ ai_title }}</div>
    {% endif %}
    <div class="session-sub muted">
      {% if agent %}<a href="/agents/{{ agent }}/inbox">{{ agent }}</a>{% endif %}
      {% if item %} · item <a href="/agents/{{ agent }}/inbox">#{{ item.id }}</a>
        <span class="badge badge-{{ item.status.value }}">{{ item.status.value }}</span>
      {% endif %}
      {% if item and item.handler %}
        · <span class="meta-chip" title="Decorated method that handled this item"><span class="muted">handler</span> {{ item.handler }}{% if item.handler_kind %} <span class="muted">{{ item.handler_kind }}</span>{% endif %}</span>
      {% endif %}
      {% if run_id and run_session_count and run_session_count > 1 %}
        · part of <a href="/runs/{{ run_id }}">run with {{ run_session_count }} sessions</a>
      {% endif %}
    </div>
  </div>
  <div class="session-stats">
    {% if stats.model %}
      <span title="Model used by Claude during this session"><strong>{{ stats.model }}</strong></span>
    {% endif %}
    <span><strong>{{ stats.turns }}</strong> turns</span>
    <span><strong>{{ stats.wall_ms|fmt_duration or '—' }}</strong></span>
    <span><strong>{{ stats.input_tokens|fmt_tokens or '0' }}</strong> in / <strong>{{ stats.output_tokens|fmt_tokens or '0' }}</strong> out</span>
    {% if stats.estimated_cost_usd is not none %}
      <span title="{% if stats.cost_source == 'reported' %}Cost reported by Claude SDK{% else %}Estimated cost based on {{ stats.model }} list pricing{% endif %}"><strong>{{ stats.estimated_cost_usd|fmt_cost }}</strong></span>
    {% endif %}
    <span><strong>{{ stats.raw_count }}</strong> lines</span>
  </div>
</div>

{# Tools-used chips moved into a filter dropdown next to the Events
   dropdown (see the .tabs row below) for visual consistency with the
   other filter and to keep the area below the session-head clean. #}

{% if invocation %}
  <details class="session-invocation">
    <summary>
      <span class="muted tools-used-label">Invocation</span>
      {% if invocation.permission_mode %}
        <span class="meta-chip"><span class="muted">permissions</span> {{ invocation.permission_mode }}</span>
      {% endif %}
      {% if invocation.sdk_version %}
        <span class="meta-chip"><span class="muted">sdk</span> {{ invocation.sdk_version }}</span>
      {% endif %}
      {% if invocation.entrypoint %}
        <span class="meta-chip"><span class="muted">entrypoint</span> {{ invocation.entrypoint }}</span>
      {% endif %}
      {% if invocation.mcp_servers %}
        <span class="meta-chip" title="MCP servers loaded at session start"><span class="muted">mcp</span> {{ invocation.mcp_servers | length }}</span>
      {% endif %}
    </summary>
    <div class="session-invocation-body">
      {% if invocation.cwd %}
        <div class="invocation-row"><span class="muted">cwd</span><code>{{ invocation.cwd }}</code></div>
      {% endif %}
      {% if invocation.mcp_servers %}
        <div class="invocation-row">
          <span class="muted">mcp servers</span>
          <div style="display: flex; gap: 6px; flex-wrap: wrap;">
            {% for name in invocation.mcp_servers %}
              <span class="meta-chip">{{ name }}</span>
            {% endfor %}
          </div>
        </div>
        {% if invocation.mcp_instructions %}
          <details style="margin-top: 6px;">
            <summary class="muted" style="font-size: 12px; cursor: pointer;">show MCP instructions</summary>
            {% for mcp in invocation.mcp_instructions %}
              <div class="detail-section-title" style="font-size: 10px;">{{ mcp.name }}</div>
              <div class="pre-wrap"><pre>{{ mcp.preview }}</pre></div>
            {% endfor %}
          </details>
        {% endif %}
      {% endif %}
    </div>
  </details>
{% endif %}

<div class="tabs">
  <a href="?tab=conversation" class="{{ 'active' if active_tab == 'conversation' else '' }}">Conversation</a>
  <a href="?tab=debug" class="{{ 'active' if active_tab == 'debug' else '' }}">Debug ({{ debug | length }})</a>
  <a href="?tab=analysis" class="{{ 'active' if active_tab == 'analysis' else '' }}">Analysis{% if session_analysis and not session_analysis.extraction_skipped_reason %} ✓{% endif %}</a>
  {% if active_tab == 'debug' %}
    <span class="tabs-spacer"></span>
    {% if tool_usage %}
      <details class="filter-dropdown" data-filter="tools">
        <summary><span>All tools</span></summary>
        <div class="filter-dropdown-menu">
          {% for t in tool_usage %}
            <label>
              <span>{{ t.name }} <span class="tool-chip-count">×{{ t.count }}</span></span>
              <span class="toggle-pill">
                <input type="checkbox" value="{{ t.name }}">
                <span class="toggle-pill-track"></span>
              </span>
            </label>
          {% endfor %}
          <div class="filter-dropdown-actions">
            <button data-filter-action="tools-all">All</button>
            <button data-filter-action="tools-clear">Clear</button>
          </div>
        </div>
      </details>
    {% endif %}
    {% if event_kinds %}
      <details class="filter-dropdown" data-filter="kinds">
        <summary><span>All events</span></summary>
        <div class="filter-dropdown-menu">
          {% for kind in event_kinds %}
            <label>
              <span class="badge-row badge-row-{{ kind }}">{{ kind }}</span>
              <span class="toggle-pill">
                <input type="checkbox" value="{{ kind }}">
                <span class="toggle-pill-track"></span>
              </span>
            </label>
          {% endfor %}
          <div class="filter-dropdown-actions">
            <button data-filter-action="kinds-all">All</button>
            <button data-filter-action="kinds-clear">Clear</button>
          </div>
        </div>
      </details>
    {% endif %}
  {% endif %}
</div>

{% if active_tab == "conversation" %}
  {% if conversation %}
    <div class="conversation">
      {% for ev in conversation %}
        <div class="bubble bubble-{{ ev.kind }}" aria-label="{{ ev.kind }}">
          {% if ev.kind == 'thinking' %}
            <div class="bubble-thinking-label muted">Thinking</div>
          {% endif %}
          <div class="bubble-text markdown-body">{{ ev.text|markdown }}</div>
          {% if ev.ts and ev.kind != 'thinking' %}<div class="bubble-time muted">{{ ev.ts|fmt_hm }}</div>{% endif %}
        </div>
      {% endfor %}
    </div>
  {% else %}
    <p class="muted">No conversation messages in this session.</p>
  {% endif %}

{% elif active_tab == "analysis" %}
  <div class="session-analysis" data-session-id="{{ session_id }}">
  {% if not session_analysis %}
    {% if analysis_pending %}
      <div class="analysis-placeholder">
        <p class="muted analysis-pending">
          <span class="analysis-pending-dot" aria-hidden="true"></span>
          Analysis in progress…
        </p>
        <p class="muted" style="font-size: 12px;">
          The agent is producing a grounded post-mortem in its own project dir
          (Sonnet typically takes 30–90 s). This page auto-refreshes when the
          analysis lands. If it doesn't show up after a few minutes, the agent
          either skipped (trivial session) or the analyser crashed — check the
          agent logs, or turn <code>auto_analyze</code> off and trigger a manual run.
        </p>
      </div>
    {% else %}
      <div class="analysis-placeholder">
        <p class="muted">No post-mortem analysis for this session yet.</p>
        <p class="muted" style="font-size: 12px;">
          Run the hub-side trace-only analyser (Haiku, no source access) for a quick narrative,
          or trigger from the agent's repo with <code>waffle analyze {{ session_id[:8] }} --agent-source ...</code>
          for a grounded one. Trivial sessions (under 5 turns AND under $0.05) are skipped by default;
          use Force run for those.
        </p>
        <div class="analysis-actions">
          <button class="btn-primary" data-analysis-action="run">Run analysis</button>
          <button class="btn-secondary" data-analysis-action="force">Force run</button>
        </div>
      </div>
    {% endif %}

  {% elif session_analysis.extraction_skipped_reason %}
    <div class="analysis-skipped">
      <p><strong>Skipped:</strong> {{ session_analysis.extraction_skipped_reason }}</p>
      <p class="muted" style="font-size: 12px;">
        The skip-heuristic kicked in because this session is too small to be worth the extraction cost.
        Force-run to override.
      </p>
      <div class="analysis-actions">
        <button class="btn-primary" data-analysis-action="force">Force run</button>
      </div>
    </div>

  {% else %}
    {% set a = session_analysis.analysis or {} %}
    {% set cf = a.get('cost_counterfactual_estimate') %}
    {% set suggestions = a.get('improvement_suggestions') or [] %}

    <div class="analysis-meta-row muted">
      Analysed {{ session_analysis.updated_at | time_span if session_analysis.updated_at else '—' }}
      {% if session_analysis.extraction_model %}
        with <code>{{ session_analysis.extraction_model }}</code>
      {% endif %}
    </div>

    <div class="analysis-grid">
      <div class="analysis-main">

    <section class="analysis-section">
      <div class="analysis-section-title">Chronology</div>
      <p class="analysis-prose">{{ a.get('chronology') or '(no chronology returned)' }}</p>
    </section>

    <section class="analysis-section">
      <div class="analysis-section-title">Cost</div>
      <table class="analysis-cost-table">
        <thead>
          <tr>
            <th></th>
            <th>Actual</th>
            {% if cf %}<th>Optimal</th><th>Δ</th>{% endif %}
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Turns</td>
            <td>{{ session_analysis.turns }}</td>
            {% if cf %}
              <td>{{ cf.get('turns', '—') }}</td>
              <td>
                {% set t_diff = (session_analysis.turns or 0) - (cf.get('turns') or 0) %}
                {% if t_diff > 0 %}-{{ t_diff }}{% else %}—{% endif %}
              </td>
            {% endif %}
          </tr>
          <tr>
            <td>Cost</td>
            <td>
              {% if session_analysis.cost_actual_usd is not none %}${{ '%.4f' % session_analysis.cost_actual_usd }}{% else %}—{% endif %}
            </td>
            {% if cf %}
              <td>
                {% if cf.get('cost_usd') is not none %}${{ '%.4f' % cf.get('cost_usd') }}{% else %}—{% endif %}
              </td>
              <td>
                {% if session_analysis.savings_potential_usd is not none %}${{ '%.4f' % session_analysis.savings_potential_usd }}{% else %}—{% endif %}
              </td>
            {% endif %}
          </tr>
          <tr>
            <td>Tokens in / out</td>
            <td colspan="{{ 3 if cf else 1 }}">{{ session_analysis.input_tokens }} / {{ session_analysis.output_tokens }}</td>
          </tr>
          {% if session_analysis.model %}
            <tr>
              <td>Model</td>
              <td colspan="{{ 3 if cf else 1 }}"><code>{{ session_analysis.model }}</code></td>
            </tr>
          {% endif %}
        </tbody>
      </table>
      {% if cf and cf.get('explanation') %}
        <p class="muted analysis-cf-explain">{{ cf.get('explanation') }}</p>
      {% endif %}
    </section>

    {% if a.get('counterfactual_summary') %}
      <section class="analysis-section">
        <div class="analysis-section-title">Counterfactual</div>
        <p class="analysis-prose">{{ a.get('counterfactual_summary') }}</p>
      </section>
    {% endif %}

    {% if suggestions %}
      <section class="analysis-section">
        <div class="analysis-section-title">Improvement suggestions ({{ suggestions | length }})</div>
        <ol class="analysis-suggestions">
          {% for s in suggestions %}
            <li class="analysis-suggestion impact-{{ s.get('estimated_impact', 'low') }}">
              <div class="analysis-suggestion-head">
                <span class="impact-pill impact-{{ s.get('estimated_impact', 'low') }}">{{ s.get('estimated_impact', '?') }}</span>
                <span class="category-pill">{{ s.get('category', '?') }}</span>
                <span class="analysis-suggestion-title">{{ s.get('title') or '(untitled)' }}</span>
              </div>
              {% if s.get('description') %}
                <p class="analysis-suggestion-desc">{{ s.get('description') }}</p>
              {% endif %}
            </li>
          {% endfor %}
        </ol>
      </section>
    {% endif %}

    <div class="analysis-actions">
      <button class="btn-secondary" data-analysis-action="force">Re-run analysis</button>
    </div>

      </div><!-- /.analysis-main -->

      <aside class="analysis-side">
        <div class="analysis-side-sticky">
          <div class="analysis-section-title">Apply with Claude Code</div>
          <p class="muted" style="font-size: 11.5px; line-height: 1.45;">
            Open Claude Code in the agent's repo and paste this prompt. It contains
            the full analysis context plus a clear instruction to evaluate each
            suggestion and propose diffs.
          </p>
          <div class="pre-wrap analysis-prompt-wrap">
            <button class="copy-btn" type="button">copy</button>
            <pre class="analysis-prompt">{%- include "_analysis_prompt.html" -%}</pre>
          </div>
        </div>
      </aside>
    </div><!-- /.analysis-grid -->
  {% endif %}
  </div>

{% else %}
  {% set events = debug %}
  {% if events %}
    <div class="session-body">
      <div class="event-list">
        {% for ev in events %}
          {% set did = loop.index0 %}
          <div class="row" data-detail-id="detail-{{ did }}" data-event-kind="{{ ev.kind }}"
               {% if ev.tool_label %}data-tool-name="{{ ev.tool_label }}"{% endif %}>
            {{ badge_for(ev, active_tab) }}
            <span class="row-content">{{ ev.label }}</span>
            {{ meta_for(ev) }}
          </div>
          {% if ev.subagent_trace %}
            {% set sub = ev.subagent_trace %}
            {% set sub_events = sub.debug %}
            <div class="subagent-inline" data-subagent-id="{{ sub.agent_id }}">
              <div class="subagent-inline-head muted">
                <span class="subagent-arrow" aria-hidden="true">↳</span>
                <span class="subagent-id">{{ sub.agent_id }}</span>
                <span>· {{ sub.stats.turns }} turn{{ '' if sub.stats.turns == 1 else 's' }}</span>
                <span>· {{ sub.stats.input_tokens|fmt_tokens or '0' }} in / {{ sub.stats.output_tokens|fmt_tokens or '0' }} out</span>
                {% if sub.stats.estimated_cost_usd is not none %}
                  <span>· {{ sub.stats.estimated_cost_usd|fmt_cost }}</span>
                {% endif %}
              </div>
              {% for sev in sub_events %}
                {% set sdid = 'sub-' ~ did ~ '-' ~ loop.index0 %}
                <div class="row row-subagent" data-detail-id="detail-{{ sdid }}" data-event-kind="{{ sev.kind }}"
                     {% if sev.tool_label %}data-tool-name="{{ sev.tool_label }}"{% endif %}>
                  {{ badge_for(sev, active_tab) }}
                  <span class="row-content">{{ sev.label }}</span>
                  {{ meta_for(sev) }}
                </div>
              {% endfor %}
            </div>
          {% endif %}
        {% endfor %}
      </div>
      <div class="event-detail" id="event-detail">
        <div class="detail-empty muted">Select an event to inspect its data. <br><br><span style="font-size: 11px;">Tip: use <kbd>j</kbd> / <kbd>k</kbd> to navigate, <kbd>Esc</kbd> to close.</span></div>
        {% for ev in events %}
          {% set did = loop.index0 %}
          {{ detail_panel(ev, did) }}
          {% if ev.subagent_trace %}
            {% set sub = ev.subagent_trace %}
            {% for sev in sub.debug %}
              {{ detail_panel(sev, 'sub-' ~ did ~ '-' ~ loop.index0, results=sub.results_by_id) }}
            {% endfor %}
          {% endif %}
        {% endfor %}
      </div>
    </div>
  {% else %}
    <p class="muted">No events in this view.</p>
  {% endif %}

  {% if unmapped_subagents %}
    <div class="subagent-traces">
      <h3 class="subagent-section-title">Unmapped subagents ({{ unmapped_subagents | length }})</h3>
      {% for sub in unmapped_subagents %}
        {% set sub_events = sub.debug %}
        <details class="subagent-block">
          <summary>
            <span class="badge-row badge-row-tool_use">SUBAGENT</span>
            <span class="subagent-id muted">{{ sub.agent_id }}</span>
            <span class="muted">· {{ sub.stats.turns }} turn{{ '' if sub.stats.turns == 1 else 's' }}</span>
            <span class="muted">· {{ sub.stats.input_tokens|fmt_tokens or '0' }} in / {{ sub.stats.output_tokens|fmt_tokens or '0' }} out</span>
            {% if sub.stats.estimated_cost_usd is not none %}
              <span class="muted">· {{ sub.stats.estimated_cost_usd|fmt_cost }}</span>
            {% endif %}
            <span class="muted">· {{ sub_events | length }} event{{ '' if sub_events|length == 1 else 's' }}</span>
          </summary>
          <div class="subagent-event-list">
            {% for ev in sub_events %}
              <div class="row" data-event-kind="{{ ev.kind }}"
                   {% if ev.tool_label %}data-tool-name="{{ ev.tool_label }}"{% endif %}>
                {{ badge_for(ev, active_tab) }}
                <span class="row-content">{{ ev.label }}</span>
                {{ meta_for(ev) }}
              </div>
            {% endfor %}
          </div>
        </details>
      {% endfor %}
    </div>
  {% endif %}
{% endif %}

<script>
(function() {
  // Analysis tab — wire up the Run / Force / Re-run buttons.
  // The host body element gets re-rendered on partial refresh, but the
  // outer base.html script already handles event delegation via document
  // listeners — we set ours up the same way with an idempotency flag.
  if (window._analysisWired) return;
  window._analysisWired = true;

  document.addEventListener('click', async (e) => {
    const btn = e.target.closest('button[data-analysis-action]');
    if (!btn) return;
    const wrap = btn.closest('.session-analysis');
    if (!wrap) return;
    const sessionId = wrap.dataset.sessionId;
    if (!sessionId) return;

    const action = btn.dataset.analysisAction;
    const force = action === 'force';
    const url = '/sessions/' + encodeURIComponent(sessionId) + '/analyze' + (force ? '?force=1' : '');

    const original = btn.textContent;
    btn.disabled = true;
    btn.textContent = 'Running analysis…';

    const token = document.querySelector('meta[name="waffle-api-token"]')?.content;
    const headers = token ? { 'Authorization': 'Bearer ' + token } : {};
    // analyze_session() is synchronous on the wire and can take 10–30s+;
    // without a deadline the button stays disabled forever if the call hangs.
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), 90_000);

    try {
      const r = await fetch(url, { method: 'POST', headers, signal: controller.signal });
      if (!r.ok) {
        const text = await r.text();
        alert('Analysis failed (' + r.status + '): ' + text);
        btn.textContent = original;
        btn.disabled = false;
        return;
      }
      // refreshLive() is exposed by base.html and triggers a partial reload.
      if (typeof window.refreshLive === 'function') window.refreshLive();
      else window.location.reload();
    } catch (err) {
      if (err.name === 'AbortError') {
        alert('Analysis timed out after 90s — try again.');
      } else {
        alert('Analysis failed: ' + err);
      }
      btn.textContent = original;
      btn.disabled = false;
    } finally {
      clearTimeout(timer);
    }
  });
})();
</script>