feat(trace): add diagnosis trace workbench

This commit is contained in:
aruo
2026-07-07 01:24:56 +08:00
parent b3315ead52
commit aa035b828c
9 changed files with 1505 additions and 2 deletions
+129
View File
@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trace Workbench - SuperBizAgent</title>
<link rel="stylesheet" href="trace.css">
</head>
<body>
<main class="trace-app">
<header class="trace-header">
<div>
<a class="trace-back-link" href="index.html" aria-label="Back to chat">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 12H5M12 19L5 12L12 5" />
</svg>
<span>Chat</span>
</a>
<h1>Trace workbench</h1>
</div>
<form class="session-form" id="sessionForm">
<label for="sessionIdInput">Session id</label>
<div class="session-control">
<input id="sessionIdInput" name="sessionId" autocomplete="off" spellcheck="false" placeholder="e2e-mysql-skill-rag-20260706-2355">
<button type="submit" id="loadButton">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M5 12H19M13 6L19 12L13 18" />
</svg>
<span>Load</span>
</button>
</div>
</form>
</header>
<section class="state-line" id="stateLine" role="status">Enter a session id to load a persisted diagnosis trace.</section>
<section class="summary-strip" id="summaryStrip" aria-label="Trace summary">
<div class="summary-cell">
<span>Status</span>
<strong id="summaryStatus">-</strong>
</div>
<div class="summary-cell">
<span>Verdict</span>
<strong id="summaryVerdict">-</strong>
</div>
<div class="summary-cell">
<span>Groundedness</span>
<strong id="summaryScore">-</strong>
</div>
<div class="summary-cell">
<span>Steps</span>
<strong id="summarySteps">-</strong>
</div>
<div class="summary-cell">
<span>Tools</span>
<strong id="summaryTools">-</strong>
</div>
<div class="summary-cell">
<span>Duration</span>
<strong id="summaryDuration">-</strong>
</div>
<div class="summary-cell">
<span>Tokens</span>
<strong id="summaryTokens">-</strong>
</div>
</section>
<section class="trace-grid">
<section class="trace-pane agent-pane" aria-labelledby="agentPaneTitle">
<div class="pane-heading">
<div>
<p>Agent rail</p>
<h2 id="agentPaneTitle">Persisted steps</h2>
</div>
<span class="pane-count" id="stepCount">0</span>
</div>
<div class="trace-rail" id="stepsRail"></div>
</section>
<section class="trace-pane evidence-pane" aria-labelledby="evidencePaneTitle">
<div class="pane-heading">
<div>
<p>Evidence ledger</p>
<h2 id="evidencePaneTitle">Tool invocations</h2>
</div>
<span class="pane-count" id="toolCount">0</span>
</div>
<div class="tool-filters" id="toolFilters"></div>
<div class="tool-ledger" id="toolLedger"></div>
</section>
<section class="trace-pane inspector-pane" aria-labelledby="inspectorPaneTitle">
<div class="pane-heading">
<div>
<p>Inspector</p>
<h2 id="inspectorPaneTitle">Verifier and RAG</h2>
</div>
<span class="pane-count" id="inspectorMode">idle</span>
</div>
<div class="inspector-stack">
<section class="inspector-section" aria-labelledby="skillBoundaryTitle">
<h3 id="skillBoundaryTitle">Skill boundary</h3>
<div class="boundary-grid" id="skillBoundary"></div>
</section>
<section class="inspector-section" aria-labelledby="verifierTitle">
<h3 id="verifierTitle">Verifier facts</h3>
<div id="verifierFacts"></div>
</section>
<section class="inspector-section" aria-labelledby="toolInspectorTitle">
<h3 id="toolInspectorTitle">Selected tool</h3>
<div id="toolInspector"></div>
</section>
<section class="inspector-section" aria-labelledby="answerTitle">
<h3 id="answerTitle">Final answer</h3>
<div class="answer-box" id="finalAnswer">-</div>
</section>
</div>
</section>
</section>
</main>
<script src="trace.js"></script>
</body>
</html>