arborist-viz/arborist_viz/templates/audit.jinja2
russell@unturf.com 0cd96ab1d7
Initial commit: arborist VIZ — Merkle command center
Pyramid web app for inspecting arborist Merkle trees over sharded SQLite:
document roots, inclusion proofs, an interactive 3D Merkle lattice
(six.js / WebGL with graceful fallback), audit-chain linkage, and a live
SSE event stream.

Generated artifacts (env/, vendored static/six/ bundles, demo databases)
are gitignored and rebuilt via the Makefile (venv, six, init-db, serve).
2026-05-28 09:22:59 -04:00

53 lines
1.8 KiB
Django/Jinja

{% extends "base.jinja2" %}
{% block body %}
<div class="audit-page" data-event-hash="{{ event_hash }}">
<aside class="dash-side">
<h2 class="dash-h2">Event</h2>
<pre class="root-hash-block" id="event-hash">{{ event_hash | hex_chunk }}</pre>
<h2 class="dash-h2">Live stream</h2>
<div class="dash-stream" id="sse-status">
<span class="dot dot-off"></span>
<span class="lbl">disconnected</span>
</div>
<pre class="dash-events" id="sse-events" aria-live="polite"></pre>
</aside>
<section class="audit-stage">
<article class="widget">
<header class="widget-head">
<span class="widget-type">[audit-event]</span>
<span class="widget-title">Event detail</span>
</header>
<div class="widget-body">
<pre id="audit-body" class="audit-detail">loading…</pre>
</div>
</article>
<article class="widget">
<header class="widget-head">
<span class="widget-type">[audit-chain]</span>
<span class="widget-title">Walk backwards from this event</span>
</header>
<div class="widget-body">
<ol id="audit-chain-list" class="audit-chain"></ol>
</div>
</article>
</section>
</div>
{% endblock %}
{% block scripts %}
<script type="module">
import { mountAuditPage } from "{{ request.static_url('arborist_viz:static/viz/audit-page.js') }}?v={{ request.static_version }}";
import { connectSSE } from "{{ request.static_url('arborist_viz:static/viz/sse-client.js') }}?v={{ request.static_version }}";
const evHash = document.querySelector(".audit-page").dataset.eventHash;
mountAuditPage(evHash);
connectSSE("/sse/audit/live", {
statusEl: document.getElementById("sse-status"),
eventsEl: document.getElementById("sse-events"),
});
</script>
{% endblock %}