{% extends "base.html" %}
{% block title %}Recall Pipeline · Attestor{% endblock %}
{% block content %}

<section class="page-head">
  <h1 class="page-head__title">Recall<br><em>Pipeline.</em></h1>
  <div class="page-head__meta">
    <div>semantic-first pipeline</div>
    <div>deterministic · no LLM</div>
    <div>replay · debug</div>
  </div>
</section>

<section class="workspace">
  <aside class="rail">
    <form id="recall-form" onsubmit="return false;">
      <div class="rail__section">
        <div class="rail__label">Query</div>
        <input class="field" type="search" id="recall-query"
               placeholder="// what do you remember about…" autocomplete="off">
      </div>

      <div class="rail__section">
        <div class="rail__label">Namespace</div>
        <input class="field" type="text" id="recall-ns" placeholder="any">
      </div>

      <div class="rail__section">
        <div class="rail__label">Token Budget</div>
        <input class="field" type="number" id="recall-budget" value="2000" min="100" max="50000">
      </div>

      <div class="rail__section">
        <button class="btn btn--primary" type="submit" id="recall-go">Execute Recall</button>
      </div>
    </form>

    <div class="rail__section">
      <button class="btn btn--secondary" type="button" id="budget-explore-btn">Budget Explorer</button>
    </div>

    <div class="rail__section" id="recall-config"></div>
  </aside>

  <section class="recall-area" id="recall-area">
    <div class="recall-empty">Enter a query and execute to replay the semantic-first retrieval pipeline.</div>
  </section>

  <section class="budget-explore-area" id="budget-explore-area"></section>
</section>

<script src="/ui/static/recall.js"></script>

{% endblock %}