feat(trace): add diagnosis trace workbench
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user