{# T55 sandbox diff — terminal-brutalist re-skin.                         #}
{# Two-column compare: original LLM call vs experiment, with a            #}
{# token/cost/latency strip on top.                                       #}
{% extends "admin_layout.html" %}

{% block page_title %}admin :: sandbox :: diff{% endblock %}

{% block breadcrumb %}
  <a href="/admin/dashboard">admin</a><span class="sep">/</span>
  <a href="/admin/sandbox/list">experiments</a><span class="sep">/</span>
  <span class="here">{{ experiment.id[:8] }}</span>
{% endblock %}

{% block head_extra %}
<style>
  /* The chat view markup is shared with the report — keep its inner panel
     readable on top of the dark surface card. */
  .diff-panel .llm-chat-view { background: var(--bg-3); color: var(--ink); padding: 12px; border: 1px solid var(--rule); }
  .diff-panel .llm-chat-view pre { white-space: pre-wrap; word-break: break-word; }
</style>
{% endblock %}

{% block content %}
<div class="t55-eyebrow">08.2 — experiment diff</div>
<h1 class="t55-h1">Compare. <span class="em">{{ experiment.id }}</span></h1>
<p class="t55-lede">Original LLM call on the left, your experiment on the right. The strip below carries delta-friendly stats for cost, tokens, and latency. Hidden empty diff cells render as the chat-view partial's empty state.</p>

{# ===================== Header ===================== #}
<section class="t55-card">
  <div class="t55-card-head">
    <span class="t55-card-title">run metadata</span>
    {% if experiment.error_message %}
      <span class="t55-pill danger">FAILED</span>
    {% else %}
      <span class="t55-pill ok">ok</span>
    {% endif %}
  </div>
  <div style="display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 12px;">
    <div><span class="t55-label" style="display: inline; margin-right: 8px;">prompt</span><code>{{ experiment.prompt_name }}</code></div>
    <div><span class="t55-label" style="display: inline; margin-right: 8px;">created</span><code>{{ experiment.created_at }}</code></div>
    <div><span class="t55-label" style="display: inline; margin-right: 8px;">model</span><code>{{ experiment.model }}</code></div>
  </div>
</section>

{# ===================== Compare strip ===================== #}
<section class="t55-card">
  <div class="t55-card-head"><span class="t55-card-title">deltas</span></div>
  <div class="t55-stats">
    <div class="t55-stat">
      <div class="l">orig cost</div>
      <div class="v" style="font-size: 16px;">${{ '%.4f'|format(original.cost_usd) }}</div>
    </div>
    <div class="t55-stat">
      <div class="l">exp cost</div>
      <div class="v" style="font-size: 16px;">${{ '%.4f'|format(experiment.cost_usd) }}</div>
    </div>
    <div class="t55-stat">
      <div class="l">orig tokens i/o</div>
      <div class="v" style="font-size: 16px;">{{ original.tokens_in }} / {{ original.tokens_out }}</div>
    </div>
    <div class="t55-stat">
      <div class="l">exp tokens i/o</div>
      <div class="v" style="font-size: 16px;">{{ experiment.tokens_in }} / {{ experiment.tokens_out }}</div>
    </div>
    <div class="t55-stat">
      <div class="l">orig latency</div>
      <div class="v" style="font-size: 16px;">{{ original.latency_ms }}ms</div>
    </div>
    <div class="t55-stat">
      <div class="l">exp latency</div>
      <div class="v" style="font-size: 16px;">{{ experiment.latency_ms }}ms</div>
    </div>
  </div>
</section>

{# ===================== Diff grid ===================== #}
<div class="t55-grid-2">
  <section class="t55-card diff-panel" id="panel-original">
    <div class="t55-card-head">
      <span class="t55-card-title">original</span>
      {% if original.call_id %}<code style="font-size: 10px; color: var(--ink-3);">{{ original.call_id }}</code>{% endif %}
    </div>
    {% if not original.exists %}
      <p style="font-size: 12px; color: var(--ink-3); font-style: italic;">No source LLM call (from-scratch experiment, or source row was deleted).</p>
    {% else %}
      <p style="font-size: 11px; color: var(--ink-3); margin-bottom: 12px;">
        {% if original.scan_id %}scan <code>{{ original.scan_id }}</code> &middot; {% endif %}
        model <code>{{ original.model }}</code>
      </p>
      {% set _orig_dump = {
        'system': original.system or '',
        'user': original.user or '',
        'response': original.response,
        'error': None,
        'metadata': {
          'prompt_name': original.prompt_name,
          'model': original.model,
        }
      } %}
      {% with chat_view_id='diff-original', inline_dump=_orig_dump %}
        {% include 'partials/llm_chat_view.html' %}
      {% endwith %}
    {% endif %}
  </section>

  <section class="t55-card diff-panel" id="panel-experiment">
    <div class="t55-card-head">
      <span class="t55-card-title">experiment</span>
      <code style="font-size: 10px; color: var(--ink-3);">{{ experiment.id }}</code>
    </div>
    <p style="font-size: 11px; color: var(--ink-3); margin-bottom: 12px;">model <code>{{ experiment.model }}</code></p>
    {% set _exp_dump = {
      'system': experiment.system or '',
      'user': experiment.user or '',
      'response': experiment.response,
      'error': experiment.error_message,
      'metadata': {
        'prompt_name': experiment.prompt_name,
        'model': experiment.model,
      }
    } %}
    {% with chat_view_id='diff-experiment', inline_dump=_exp_dump %}
      {% include 'partials/llm_chat_view.html' %}
    {% endwith %}
  </section>
</div>

<div style="font-size: 11px; color: var(--ink-3); margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap;">
  <a href="/admin/sandbox/list" style="color: var(--accent);">all experiments</a>
  {% if original.call_id %}
    <span style="color: var(--ink-4);">&middot;</span>
    <a href="/admin/sandbox/from-call/{{ original.call_id }}" style="color: var(--accent);">re-edit from source</a>
  {% endif %}
  <span style="color: var(--ink-4);">&middot;</span>
  <a href="/admin/dashboard" style="color: var(--accent);">admin dashboard</a>
</div>
{% endblock %}