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).
53 lines
1.8 KiB
Django/Jinja
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 %}
|