122 lines
4.2 KiB
HTML
122 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Synaptopus Trace Viewer</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<header class="hero">
|
|
<p class="kicker">Synaptopus</p>
|
|
<h1>Trace Viewer</h1>
|
|
<p class="lede">
|
|
Load exported <code>graph.json</code>, <code>trace.json</code>, and
|
|
<code>report.json</code> artifacts to inspect a run without any build
|
|
tooling.
|
|
</p>
|
|
</header>
|
|
|
|
<section class="panel controls">
|
|
<div class="control-block">
|
|
<label for="manifest-url">Manifest URL</label>
|
|
<div class="inline-control">
|
|
<input
|
|
id="manifest-url"
|
|
type="url"
|
|
placeholder="http://127.0.0.1:8000/artifacts/manifest.json"
|
|
/>
|
|
<button id="manifest-url-load" type="button">Load</button>
|
|
</div>
|
|
</div>
|
|
<div class="control-block">
|
|
<label for="manifest-file">Manifest</label>
|
|
<input id="manifest-file" type="file" accept=".json,application/json" />
|
|
</div>
|
|
<div class="control-block">
|
|
<label for="graph-file">Graph Schema</label>
|
|
<input id="graph-file" type="file" accept=".json,application/json" />
|
|
</div>
|
|
<div class="control-block">
|
|
<label for="trace-file">Execution Trace</label>
|
|
<input id="trace-file" type="file" accept=".json,application/json" />
|
|
</div>
|
|
<div class="control-block">
|
|
<label for="report-file">Run Report</label>
|
|
<input id="report-file" type="file" accept=".json,application/json" />
|
|
</div>
|
|
<div class="control-block command">
|
|
<span>Suggested Flow</span>
|
|
<code>python -m http.server 8000</code>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid">
|
|
<section class="panel" id="summary-panel">
|
|
<div class="panel-header">
|
|
<h2>Run Summary</h2>
|
|
<p id="summary-status">Load a report to populate metrics.</p>
|
|
</div>
|
|
<div class="stats" id="stats"></div>
|
|
<div class="subpanel">
|
|
<h3>Sequence Analysis</h3>
|
|
<dl class="metric-list" id="analysis-metrics"></dl>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" id="graph-panel">
|
|
<div class="panel-header">
|
|
<h2>Graph</h2>
|
|
<p id="graph-status">Load a graph schema to inspect node wiring.</p>
|
|
</div>
|
|
<div class="subpanel">
|
|
<h3>Nodes</h3>
|
|
<div class="chips" id="node-chips"></div>
|
|
</div>
|
|
<div class="subpanel">
|
|
<h3>Edges</h3>
|
|
<ol class="edge-list" id="edge-list"></ol>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="panel" id="trace-panel">
|
|
<div class="panel-header">
|
|
<h2>Attempts</h2>
|
|
<div class="trace-controls">
|
|
<button class="filter is-active" data-filter="all" type="button">All</button>
|
|
<button class="filter" data-filter="accepted" type="button">Accepted</button>
|
|
<button class="filter" data-filter="rejected" type="button">Rejected</button>
|
|
</div>
|
|
</div>
|
|
<p id="trace-status">Load a trace to inspect candidate-by-candidate behavior.</p>
|
|
<div class="trace-list" id="trace-list"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<template id="trace-card-template">
|
|
<article class="trace-card">
|
|
<header class="trace-head">
|
|
<div>
|
|
<p class="trace-label"></p>
|
|
<h3 class="trace-title"></h3>
|
|
</div>
|
|
<span class="badge"></span>
|
|
</header>
|
|
<dl class="metric-list compact"></dl>
|
|
<details class="detail-block">
|
|
<summary>Metadata</summary>
|
|
<pre class="json-block"></pre>
|
|
</details>
|
|
<details class="detail-block">
|
|
<summary>State Transition</summary>
|
|
<pre class="json-block transition-block"></pre>
|
|
</details>
|
|
</article>
|
|
</template>
|
|
|
|
<script type="module" src="./app.js"></script>
|
|
</body>
|
|
</html>
|