{% extends "base.html" %}
{% block title %}The Mirror - LLM Lab{% endblock %}

{% block content %}
<h1 class="balance">The Mirror</h1>
<p class="lede">
  This searches the lab's own {{ stats.chunks }} lesson sections using a retriever
  you choose &mdash; including <strong>your own</strong>, once you have written it.
  Every tutorial makes you search a corpus you do not care about. Here a bad
  result is obvious, which is what makes the difference between retrievers
  visible.
</p>

<section class="card mirror" id="mirror">
  <div class="searchrow">
    <input id="mq" type="search" placeholder="Why does reranking need two stages?"
           autocomplete="off" spellcheck="false">
    <button id="mgo">Search</button>
  </div>

  <div class="controls">
    <label>Retriever
      <select id="mret">
        {% for r in retrievers %}
        <option value="{{ r.key }}" {% if not r.available %}disabled{% endif %}
                {% if r.key == "reference-bm25" %}selected{% endif %}>
          {{ r.label }}{% if not r.available %} - not written yet{% endif %}
        </option>
        {% endfor %}
      </select>
    </label>
    <label>Top k <input id="mk" type="number" value="6" min="1" max="20"></label>
    <label class="check"><input id="mcmp" type="checkbox"> Compare against</label>
    <label><select id="mret2">
      {% for r in retrievers %}
      <option value="{{ r.key }}" {% if not r.available %}disabled{% endif %}
              {% if r.key == "substring" %}selected{% endif %}>{{ r.label }}</option>
      {% endfor %}
    </select></label>
    <label class="check"><input id="mans" type="checkbox" checked> Stream an answer</label>
  </div>

  <details class="hint">
    <summary>What the retrievers are</summary>
    <dl>
      {% for r in retrievers %}
      <dt>{{ r.label }}{% if not r.available %} <em>(not written yet)</em>{% endif %}</dt>
      <dd>{{ r.note }}</dd>
      {% endfor %}
    </dl>
    <p>
      Corpus: {{ stats.chunks }} chunks from {{ stats.lessons }} authored lessons
      plus {{ stats.glossary_terms }} glossary terms.
      Average {{ stats.avg_tokens }} tokens per chunk, longest {{ stats.max_tokens }}.
    </p>
  </details>
</section>

<section id="answerbox" class="card answer" hidden>
  <h2>Answer <span class="tag">grounded in the sections below</span></h2>
  <div id="answertext" class="streamed"></div>
  <p id="answernote" class="hint" hidden></p>
</section>

<section id="tracebox" class="card trace" hidden>
  <h2>Trace <span class="tag">shaped like the spans you emit in Stage 4</span></h2>
  <div id="tracebars"></div>
</section>

<section id="cmpbox" class="card cmp" hidden>
  <h2>Agreement</h2>
  <div class="cmpstats" id="cmpstats"></div>
  <p class="hint">
    High overlap with a large rank shift is the interesting case: both retrievers
    found the same candidates but disagreed on order. That is precisely the failure
    reranking exists to fix.
  </p>
</section>

<div class="results-grid" id="grid"></div>
{% endblock %}