{% extends "base.html" %}
{% block title %}/dev — lit-monitor{% endblock %}
{% block content %}
<section class="dashboard">
  <h1>/dev — test surface</h1>
  <p class="field-note">
    Sandbox sink: <code>state_dev.db</code>, <code>dev-*</code> ChromaDB collections,
    <code>Literature/_Dev/</code>. Each panel mirrors one tier of
    <code>scripts/test_everything.sh</code>.
  </p>

  <h2>Panel 1 — Tier 1: code correctness</h2>
  <p class="field-note">
    Full Tier 1 (lint + pytest + leakage grep) lives in the shell:
    <code>./scripts/test_everything.sh --tier 1</code>. Here you can run lint alone.
  </p>
  <button class="button"
          hx-post="/api/dev/ruff"
          hx-target="#panel-1-result"
          hx-swap="innerHTML"
          hx-indicator="#panel-1-spinner">Run ruff in-process</button>
  <span id="panel-1-spinner" class="htmx-indicator">running…</span>
  <div id="panel-1-result"></div>

  <h2>Panel 2 — Tier 2: service health</h2>
  <div class="button-row">
    <button class="button"
            hx-post="/api/dev/diagnose"
            hx-target="#panel-2-result"
            hx-swap="innerHTML">diagnose --config-only</button>
    <button class="button"
            hx-post="/api/dev/check"
            hx-target="#panel-2-result"
            hx-swap="innerHTML">check (full health probe)</button>
    <button class="button"
            hx-get="/api/dev/status"
            hx-target="#panel-2-result"
            hx-swap="innerHTML">status (DB counts)</button>
  </div>
  <div id="panel-2-result"></div>

  <h2>Panel 3 — Tier 3a: sandbox ingestion</h2>
  <p class="field-note">
    Run one paper end-to-end through chunk → extract → state DB → embeddings → Obsidian note.
    All writes go to the sandbox (<code>state_dev.db</code>, <code>dev-*</code> ChromaDB
    collections, <code>Literature/_Dev/</code>).
  </p>

  <details>
    <summary>Mode A — paste markdown</summary>
    <form class="setup-form"
          hx-post="/api/dev/ingest/markdown"
          hx-target="#panel-3-result-A"
          hx-swap="innerHTML">
      <label>DOI <input name="doi" type="text" required></label>
      <label>Markdown
        <textarea name="markdown" rows="8" required></textarea>
      </label>
      <button class="button" type="submit">Process</button>
    </form>
    <div id="panel-3-result-A"></div>
  </details>

  <details>
    <summary>Mode B — Zotero by item key</summary>
    <form class="setup-form"
          hx-post="/api/dev/ingest/zotero-key"
          hx-target="#panel-3-result-B"
          hx-swap="innerHTML">
      <label>Zotero item key <input name="zotero_key" type="text" required></label>
      <button class="button" type="submit">Fetch &amp; ingest</button>
    </form>
    <div id="panel-3-result-B"></div>
  </details>

  <details>
    <summary>Mode C — Zotero by DOI</summary>
    <form class="setup-form"
          hx-post="/api/dev/ingest/doi"
          hx-target="#panel-3-result-C"
          hx-swap="innerHTML">
      <label>DOI <input name="doi" type="text" required></label>
      <button class="button" type="submit">Lookup &amp; ingest</button>
    </form>
    <div id="panel-3-result-C"></div>
  </details>

  <h2>Panel 4 — Tier 3b: Obsidian tooling on a sandbox DOI</h2>
  <p class="field-note">
    Operates on DOIs already in the sandbox state DB. Run Panel 3 first to populate.
    All writes target the sandbox.
  </p>

  <form class="setup-form">
    <label>Pick a sandbox DOI
      <select id="sandbox-doi-picker" name="doi"
              hx-get="/api/dev/sandbox-dois"
              hx-trigger="load, focus"
              hx-swap="innerHTML">
        <option value="">(loading…)</option>
      </select>
    </label>
  </form>

  <div class="button-row">
    <button class="button"
            hx-post="/api/dev/relink"
            hx-include="#sandbox-doi-picker"
            hx-target="#panel-4-result"
            hx-swap="innerHTML">Relink</button>
    <button class="button"
            hx-post="/api/dev/rerender"
            hx-include="#sandbox-doi-picker"
            hx-target="#panel-4-result"
            hx-swap="innerHTML">Re-render</button>
    <form hx-post="/api/dev/re-extract"
          hx-include="#sandbox-doi-picker"
          hx-target="#panel-4-result"
          hx-swap="innerHTML"
          style="display:inline-block;">
      <label class="inline-check"><input type="checkbox" name="phases" value="simple" checked> simple</label>
      <label class="inline-check"><input type="checkbox" name="phases" value="complex" checked> complex</label>
      <button class="button" type="submit">Re-extract</button>
    </form>
  </div>

  <details>
    <summary>Synthesize (topic-based — input a topic, not a DOI)</summary>
    <form class="setup-form"
          hx-post="/api/dev/synthesize"
          hx-target="#panel-4-result"
          hx-swap="innerHTML">
      <label>Topic <input type="text" name="topic" required></label>
      <button class="button" type="submit">Synthesize</button>
    </form>
  </details>

  <div id="panel-4-result"></div>

  <h2>Panel 5 — Tier 3c: discovery dry-run</h2>
  <p class="field-note">
    Runs <code>lit-monitor run --dry-run</code> against the live search APIs but
    writes nothing to <code>state.db</code>. Verifies the discovery side of the
    pipeline is healthy.
  </p>
  <div class="card warning">
    Don't start this while a real <code>discovery</code> run is active — their logs would interleave.
  </div>
  <div class="button-row">
    <button class="button"
            hx-post="/api/dev/dryrun/start"
            hx-target="#panel-5-status"
            hx-swap="innerHTML">Start dry-run</button>
    <button class="button danger"
            hx-post="/api/dev/dryrun/stop"
            hx-target="#panel-5-status"
            hx-swap="innerHTML"
            hx-confirm="Stop the running dry-run? It will receive SIGTERM (graceful) then SIGKILL after 30s.">Stop</button>
    <button class="button"
            hx-get="/api/dev/dryrun/result"
            hx-target="#panel-5-result"
            hx-swap="innerHTML">Show result</button>
  </div>
  <div id="panel-5-status"
       hx-get="/api/dev/dryrun/status"
       hx-trigger="load, every 2s"
       hx-swap="innerHTML">
    <span class="pill">checking…</span>
  </div>
  <div hx-ext="sse" sse-connect="/api/dev/dryrun/stream" class="live-progress">
    <div id="panel-5-stream"
         sse-swap="progress"
         hx-swap="beforeend scroll:bottom"
         class="live-progress-pane">
      <div class="field-note live-progress-hint">
        Streaming from <code>logs/{date}_discovery.jsonl</code>. New lines appear here
        as the dry-run runs.
      </div>
    </div>
  </div>
  <div id="panel-5-result"></div>

  <h2>Panel 6 — Tier 4: quality + safety</h2>
  <p class="field-note">
    Synthetic guard tests + the on-disk Tier-4 release quality report.
    The compare-models button burns LLM tokens — wait up to 10 minutes.
    Comparison output is written to the repo's <code>comparison/</code> folder
    (shared with any production compare-models run).
  </p>
  <div class="button-row">
    <button class="button"
            hx-post="/api/dev/compare-models"
            hx-target="#panel-6-compare"
            hx-swap="innerHTML"
            hx-indicator="#panel-6-compare-spinner">compare-models (1 sandbox paper)</button>
    <span id="panel-6-compare-spinner" class="htmx-indicator">running… up to 10 min</span>
  </div>
  <div id="panel-6-compare"></div>

  <div class="button-row">
    <button class="button"
            hx-post="/api/dev/safety"
            hx-target="#panel-6-safety"
            hx-swap="innerHTML">Prompt-injection guard</button>
    <button class="button"
            hx-post="/api/dev/render-guard"
            hx-target="#panel-6-render"
            hx-swap="innerHTML">{domain_focus} render guard</button>
    <button class="button"
            hx-get="/api/dev/quality-report"
            hx-target="#panel-6-report"
            hx-swap="innerHTML">Quality report</button>
  </div>
  <div id="panel-6-safety"></div>
  <div id="panel-6-render"></div>
  <div id="panel-6-report"></div>

  <h2>Panel 7 — Sandbox status + clear</h2>
  <p class="field-note">Live counts of sandbox state (refreshes every 5s).</p>
  <div id="panel-7-status" hx-get="/api/dev/sandbox/status"
       hx-trigger="load, every 5s" hx-swap="innerHTML">
    <span class="pill">loading…</span>
  </div>

  <div class="card warning">
    Destructive: wipes <code>state_dev.db</code>, drops <code>dev-papers</code> +
    <code>dev-chunks</code> ChromaDB collections, removes <code>Literature/_Dev/</code>.
  </div>
  <form class="setup-form"
        hx-post="/api/dev/sandbox/clear"
        hx-target="#panel-7-clear-result"
        hx-swap="innerHTML">
    <label>Type <code>yes</code> to confirm <input type="text" name="confirm" placeholder="yes"></label>
    <button class="button danger" type="submit">Clear sandbox</button>
  </form>
  <div id="panel-7-clear-result"></div>

  <h2>Panel 8 — Knowledge Graph backfill</h2>
  <p class="field-note">
    Spawns <code>lit-monitor graph backfill</code> against the live
    <code>state.db</code> + KuzuDB graph. Pick the scope and extraction layers,
    then Start. Streams the subprocess output below (this command writes no JSONL
    log, so its stdout is piped directly).
  </p>
  <div class="card warning">
    Graph/LLM backfill can take several minutes and spends LLM tokens when
    <code>--with-llm</code> is set (cloud-Ollama NER + relationship extraction).
    Don't start it casually.
  </div>

  <form hx-post="/api/dev/graph/backfill/start"
        hx-target="#panel-8-status"
        hx-swap="innerHTML"
        class="setup-form">
    <fieldset>
      <legend>Backfill type</legend>
      <label class="inline-check"><input type="radio" name="backfill_kind" value="schema" checked> Schema only</label>
      <label class="inline-check"><input type="radio" name="backfill_kind" value="ner"> + NER (entities)</label>
      <label class="inline-check"><input type="radio" name="backfill_kind" value="relationships"> + Relationships</label>
    </fieldset>
    <div class="button-row">
      <label class="inline-check"><input type="checkbox" name="all" value="on" checked> --all (full corpus)</label>
      <label class="inline-check"><input type="checkbox" name="with_llm" value="on"> with LLM (cloud-Ollama)</label>
    </div>
    <div class="button-row">
      <button class="button" type="submit">Start backfill</button>
      <button class="button danger"
              type="button"
              hx-post="/api/dev/graph/backfill/stop"
              hx-target="#panel-8-status"
              hx-swap="innerHTML"
              hx-confirm="Stop the running graph backfill? It will receive SIGTERM (graceful) then SIGKILL after 30s.">Stop</button>
      <button class="button"
              type="button"
              hx-get="/api/dev/graph/backfill/stats"
              hx-target="#panel-8-stats"
              hx-swap="innerHTML">Refresh stats</button>
    </div>
  </form>

  <div id="panel-8-status"
       hx-get="/api/dev/graph/backfill/status"
       hx-trigger="load, every 2s"
       hx-swap="innerHTML">
    <span class="pill">checking…</span>
  </div>
  <div hx-ext="sse" sse-connect="/api/dev/graph/backfill/stream" class="live-progress">
    <div id="panel-8-stream"
         sse-swap="progress"
         hx-swap="beforeend scroll:bottom"
         class="live-progress-pane">
      <div class="field-note live-progress-hint">
        Streaming <code>graph backfill</code> stdout. New lines appear here as the run progresses.
      </div>
    </div>
  </div>

  <p class="field-note">
    Corpus stats (papers / entities / edges) — reuses
    <code>get_corpus_stats</code>. Full graph view at <a href="/graph">/graph</a>.
  </p>
  <div id="panel-8-stats"
       hx-get="/api/dev/graph/backfill/stats"
       hx-trigger="load"
       hx-swap="innerHTML">
    <span class="pill">loading…</span>
  </div>
</section>
{% endblock %}