{% extends "base.html" %}
{% block title %}Processing Pipeline — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Processing Pipeline</h1>
    <p class="subtitle">How memories flow from raw text to stored knowledge</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('pipeline')" title="Help">? Help</button>
</div>

<!-- Summary counters -->
<div class="pipe-summary-row" id="pipe-summary-row">
  <div class="pipe-summary-card">
    <div class="pipe-summary-value" id="sum-total">—</div>
    <div class="pipe-summary-label">Total memories stored</div>
  </div>
  <div class="pipe-summary-card">
    <div class="pipe-summary-value" id="sum-sessions">—</div>
    <div class="pipe-summary-label">Total sessions</div>
  </div>
  <div class="pipe-summary-card">
    <div class="pipe-summary-value" id="sum-waiting">—</div>
    <div class="pipe-summary-label">Waiting room queued</div>
  </div>
  <div class="pipe-summary-card">
    <div class="pipe-summary-value" id="sum-gate">—</div>
    <div class="pipe-summary-label">Gate mode</div>
  </div>
</div>

<!-- Gate callout -->
<div class="pipe-gate-callout" id="pipe-gate-callout">
  <span class="pipe-gate-icon">🚪</span>
  <div id="gate-explanation">Loading gate status…</div>
</div>

<!-- Pipeline diagram -->
<div class="pipeline-diagram">
  <div class="pipe-stage">
    <div class="stage-icon">📥</div>
    <div class="stage-name">Input</div>
    <div class="stage-desc">memory_store(text) called</div>
  </div>
  <div class="pipe-arrow">→</div>
  <div class="pipe-stage" id="stage-gate">
    <div class="stage-icon">🚪</div>
    <div class="stage-name">Coincidence Gate</div>
    <div class="stage-desc" id="gate-desc">—</div>
  </div>
  <div class="pipe-arrow">→</div>
  <div class="pipe-stage" id="stage-waiting">
    <div class="stage-icon">⏳</div>
    <div class="stage-name">Waiting Room</div>
    <div class="stage-desc" id="waiting-desc">—</div>
  </div>
  <div class="pipe-arrow">→</div>
  <div class="pipe-stage">
    <div class="stage-icon">🔭</div>
    <div class="stage-name">Zoom Levels</div>
    <div class="stage-desc">LLM generates L0→L3 labels</div>
  </div>
  <div class="pipe-arrow">→</div>
  <div class="pipe-stage">
    <div class="stage-icon">🧮</div>
    <div class="stage-name">Embedding</div>
    <div class="stage-desc">384-dim vector computed</div>
  </div>
  <div class="pipe-arrow">→</div>
  <div class="pipe-stage">
    <div class="stage-icon">🧬</div>
    <div class="stage-name">Storage</div>
    <div class="stage-desc">Indexed → Probation lifecycle</div>
  </div>
</div>

<!-- Retrieval capacity -->
<div class="pipe-section-header">Retrieval window — how many memories Claude sees per query</div>
<div class="pipe-capacity-row" id="pipe-capacity-row">
  <div class="pipe-cap-card pipe-cap-l1">
    <div class="pipe-cap-label">L1 — Tags only</div>
    <div class="pipe-cap-value" id="cap-l1">—</div>
    <div class="pipe-cap-sub">labels returned (wide scan)</div>
  </div>
  <div class="pipe-cap-card pipe-cap-l2">
    <div class="pipe-cap-label">L2 — Summaries</div>
    <div class="pipe-cap-value" id="cap-l2">—</div>
    <div class="pipe-cap-sub">one-sentence previews</div>
  </div>
  <div class="pipe-cap-card pipe-cap-l3">
    <div class="pipe-cap-label">L3 — Full context</div>
    <div class="pipe-cap-value" id="cap-l3">—</div>
    <div class="pipe-cap-sub">injected into Claude's context</div>
  </div>
</div>

<!-- Waiting room contents -->
<div id="waiting-room-section" style="display:none;">
  <div class="pipe-section-header">Waiting Room — pending memories <span id="waiting-count-badge" class="waiting-badge">0</span></div>
  <div class="pipe-hint">These texts arrived once but need another signal to pass the gate. They will expire after <span id="waiting-expiry">—</span> sessions.</div>
  <table class="data-table" id="waiting-table">
    <thead>
      <tr><th>Preview</th><th>Domain</th><th>Sessions elapsed</th><th>Queued at</th></tr>
    </thead>
    <tbody id="waiting-tbody"></tbody>
  </table>
</div>

<!-- Recent memories -->
<div class="pipe-section-header">Recently stored memories</div>
<div class="pipe-hint">The last 10 memories that successfully passed through the full pipeline.</div>
<table class="data-table" id="recent-table">
  <thead>
    <tr><th>Label / Summary</th><th>Domain</th><th>Lifecycle</th><th>Intensity</th><th>Stored at</th></tr>
  </thead>
  <tbody id="recent-tbody">
    <tr><td colspan="5" style="color:var(--text-dim);text-align:center;padding:1.5rem;">Loading…</td></tr>
  </tbody>
</table>

{% endblock %}


{% block scripts %}
<script>
function escHtml(s) {
  return String(s || "").replace(/[&<>"']/g, function(c) {
    return {"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c];
  });
}

function lcClass(lc) {
  return "lc-badge lc-" + (lc || "probation");
}

function renderPipeline(data) {
  // Summary cards
  const setEl = (id, v) => { const el = document.getElementById(id); if (el) el.textContent = v; };
  setEl("sum-total", data.total_memories ?? "—");
  setEl("sum-sessions", data.total_sessions ?? "—");
  setEl("sum-waiting", data.waiting_room_size ?? 0);
  const isPioneer = data.gate_signal_count === 1;
  setEl("sum-gate", isPioneer ? "Pioneer (open)" : "Shrub (filtered)");

  // Gate callout
  const callout = document.getElementById("pipe-gate-callout");
  const gateExp = document.getElementById("gate-explanation");
  if (callout && gateExp) {
    if (isPioneer) {
      callout.className = "pipe-gate-callout pipe-gate-pioneer";
      gateExp.innerHTML = "<strong>Pioneer mode (gate = 1):</strong> Every store passes immediately — nothing is filtered. " +
        "The gate will automatically tighten to Shrub mode once you have 50+ memories and 5+ sessions.";
    } else {
      callout.className = "pipe-gate-callout pipe-gate-shrub";
      gateExp.innerHTML = "<strong>Shrub mode (gate = " + data.gate_signal_count + "):</strong> A memory must arrive at least " +
        data.gate_signal_count + " times (or carry a strong signal like explicit emphasis) before being stored. " +
        "One-off noise is held in the Waiting Room. If a memory seems missing, check the Waiting Room below or store it again.";
    }
  }

  // Diagram stage labels
  setEl("gate-desc", "requires " + data.gate_signal_count + " signal" + (data.gate_signal_count > 1 ? "s" : ""));
  setEl("waiting-desc", (data.waiting_room_size || 0) + " queued");

  // Highlight waiting room stage if non-empty (only relevant in Shrub mode)
  const stageWaiting = document.getElementById("stage-waiting");
  if (stageWaiting) {
    stageWaiting.classList.toggle("pipe-stage-active", !isPioneer && (data.waiting_room_size || 0) > 0);
  }

  // Capacity cards
  setEl("cap-l1", data.top_l1 ?? "—");
  setEl("cap-l2", data.top_l2 ?? "—");
  setEl("cap-l3", data.top_l3 ?? "—");

  // Waiting room table
  const waitSection = document.getElementById("waiting-room-section");
  const waitTbody = document.getElementById("waiting-tbody");
  const waitBadge = document.getElementById("waiting-count-badge");
  if (waitBadge) waitBadge.textContent = data.waiting_room_size || 0;
  if (waitSection) waitSection.style.display = (data.waiting_room_size > 0) ? "" : "none";
  if (waitTbody && data.waiting_room_entries) {
    waitTbody.innerHTML = data.waiting_room_entries.map(function(e) {
      return "<tr><td class='mem-label'>" + escHtml(e.preview) + (e.preview && e.preview.length >= 120 ? "…" : "") + "</td>" +
        "<td>" + escHtml(e.domain) + "</td>" +
        "<td>" + escHtml(e.sessions_elapsed) + "</td>" +
        "<td class='ts'>" + escHtml(e.created_at || "—") + "</td></tr>";
    }).join("");
  }

  // Recent memories table
  const recentTbody = document.getElementById("recent-tbody");
  if (recentTbody) {
    if (!data.recent_memories || !data.recent_memories.length) {
      recentTbody.innerHTML = "<tr><td colspan='5' style='color:var(--text-dim);text-align:center;padding:1.5rem;'>No memories stored yet.</td></tr>";
    } else {
      recentTbody.innerHTML = data.recent_memories.map(function(m) {
        return "<tr class='memory-row' onclick=\"window.location='/memory/" + escHtml(m.id) + "'\">" +
          "<td class='mem-label-cell'><div class='mem-label'>" + escHtml(m.l1_label) + "</div><div class='mem-summary'>" + escHtml(m.l2_summary) + "</div></td>" +
          "<td>" + escHtml(m.domain) + "</td>" +
          "<td><span class='" + lcClass(m.lifecycle) + "'>" + escHtml(m.lifecycle) + "</span></td>" +
          "<td>" + m.intensity + "</td>" +
          "<td class='ts'>" + escHtml(m.created_at) + "</td>" +
          "</tr>";
      }).join("");
    }
  }
}

function refresh() {
  fetch("/api/pipeline-stats").then(r => r.json()).then(renderPipeline).catch(function() {});
}

refresh();
setInterval(refresh, 8000);
</script>
{% endblock %}