feat(trace): improve session workbench review
This commit is contained in:
zhuyongxin
@@ -1,67 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<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">
|
||||
<title>诊断链路检查台 - SuperBizAgent</title>
|
||||
<link rel="icon" href="data:,">
|
||||
<link rel="stylesheet" href="trace.css?v=20260707-outcome">
|
||||
</head>
|
||||
<body>
|
||||
<main class="trace-app">
|
||||
<header class="trace-header">
|
||||
<div>
|
||||
<a class="trace-back-link" href="index.html" aria-label="Back to chat">
|
||||
<a class="trace-back-link" href="index.html" aria-label="返回聊天">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M19 12H5M12 19L5 12L12 5" />
|
||||
</svg>
|
||||
<span>Chat</span>
|
||||
<span>返回聊天</span>
|
||||
</a>
|
||||
<h1>Trace workbench</h1>
|
||||
<h1>诊断链路检查台</h1>
|
||||
</div>
|
||||
|
||||
<form class="session-form" id="sessionForm">
|
||||
<label for="sessionIdInput">Session id</label>
|
||||
<label for="sessionIdInput">会话 ID</label>
|
||||
<div class="session-control">
|
||||
<input id="sessionIdInput" name="sessionId" autocomplete="off" spellcheck="false" placeholder="e2e-mysql-skill-rag-20260706-2355">
|
||||
<div class="session-picker">
|
||||
<input id="sessionIdInput" name="sessionId" autocomplete="off" spellcheck="false" placeholder="e2e-mysql-skill-rag-20260706-2355" aria-controls="sessionOptions" aria-expanded="false">
|
||||
<button class="session-picker-button" id="sessionPickerButton" type="button" aria-label="选择最近会话">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M6 9L12 15L18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="session-options" id="sessionOptions" role="listbox" aria-label="最近会话" hidden></div>
|
||||
</div>
|
||||
<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>
|
||||
<span>加载</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="state-line" id="stateLine" role="status">输入会话 ID，加载已持久化的诊断链路。</section>
|
||||
|
||||
<section class="summary-strip" id="summaryStrip" aria-label="Trace summary">
|
||||
<section class="outcome-panel" id="outcomePanel" aria-label="会话结果">
|
||||
<div class="outcome-main">
|
||||
<p class="outcome-eyebrow">本次会话结果</p>
|
||||
<h2 id="outcomeTitle">尚未加载会话</h2>
|
||||
<p id="outcomeSubtitle">选择一个会话后，这里会先展示最终结论和证据状态。</p>
|
||||
<div class="outcome-answer" id="outcomeAnswerSummary">-</div>
|
||||
</div>
|
||||
<div class="outcome-side">
|
||||
<div class="outcome-verdict">
|
||||
<span>校验判断</span>
|
||||
<strong id="outcomeVerdict">-</strong>
|
||||
<p id="outcomeEvidenceState">-</p>
|
||||
</div>
|
||||
<div class="outcome-insights">
|
||||
<div>
|
||||
<h3>已确认</h3>
|
||||
<ul id="outcomeConfirmed"></ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3>仍需关注</h3>
|
||||
<ul id="outcomeGaps"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="summary-strip" id="summaryStrip" aria-label="诊断链路汇总">
|
||||
<div class="summary-cell">
|
||||
<span>Status</span>
|
||||
<span>状态</span>
|
||||
<strong id="summaryStatus">-</strong>
|
||||
</div>
|
||||
<div class="summary-cell">
|
||||
<span>Verdict</span>
|
||||
<span>校验结论</span>
|
||||
<strong id="summaryVerdict">-</strong>
|
||||
</div>
|
||||
<div class="summary-cell">
|
||||
<span>Groundedness</span>
|
||||
<span>证据分</span>
|
||||
<strong id="summaryScore">-</strong>
|
||||
</div>
|
||||
<div class="summary-cell">
|
||||
<span>Steps</span>
|
||||
<span>步骤</span>
|
||||
<strong id="summarySteps">-</strong>
|
||||
</div>
|
||||
<div class="summary-cell">
|
||||
<span>Tools</span>
|
||||
<span>工具</span>
|
||||
<strong id="summaryTools">-</strong>
|
||||
</div>
|
||||
<div class="summary-cell">
|
||||
<span>Duration</span>
|
||||
<span>耗时</span>
|
||||
<strong id="summaryDuration">-</strong>
|
||||
</div>
|
||||
<div class="summary-cell">
|
||||
<span>Tokens</span>
|
||||
<span>令牌</span>
|
||||
<strong id="summaryTokens">-</strong>
|
||||
</div>
|
||||
</section>
|
||||
@@ -70,8 +105,8 @@
|
||||
<section class="trace-pane agent-pane" aria-labelledby="agentPaneTitle">
|
||||
<div class="pane-heading">
|
||||
<div>
|
||||
<p>Agent rail</p>
|
||||
<h2 id="agentPaneTitle">Persisted steps</h2>
|
||||
<p>智能体轨迹</p>
|
||||
<h2 id="agentPaneTitle">持久化步骤</h2>
|
||||
</div>
|
||||
<span class="pane-count" id="stepCount">0</span>
|
||||
</div>
|
||||
@@ -81,8 +116,8 @@
|
||||
<section class="trace-pane evidence-pane" aria-labelledby="evidencePaneTitle">
|
||||
<div class="pane-heading">
|
||||
<div>
|
||||
<p>Evidence ledger</p>
|
||||
<h2 id="evidencePaneTitle">Tool invocations</h2>
|
||||
<p>证据账本</p>
|
||||
<h2 id="evidencePaneTitle">工具调用</h2>
|
||||
</div>
|
||||
<span class="pane-count" id="toolCount">0</span>
|
||||
</div>
|
||||
@@ -93,30 +128,30 @@
|
||||
<section class="trace-pane inspector-pane" aria-labelledby="inspectorPaneTitle">
|
||||
<div class="pane-heading">
|
||||
<div>
|
||||
<p>Inspector</p>
|
||||
<h2 id="inspectorPaneTitle">Verifier and RAG</h2>
|
||||
<p>检查器</p>
|
||||
<h2 id="inspectorPaneTitle">校验与检索增强</h2>
|
||||
</div>
|
||||
<span class="pane-count" id="inspectorMode">idle</span>
|
||||
<span class="pane-count" id="inspectorMode">空闲</span>
|
||||
</div>
|
||||
|
||||
<div class="inspector-stack">
|
||||
<section class="inspector-section" aria-labelledby="skillBoundaryTitle">
|
||||
<h3 id="skillBoundaryTitle">Skill boundary</h3>
|
||||
<h3 id="skillBoundaryTitle">技能边界</h3>
|
||||
<div class="boundary-grid" id="skillBoundary"></div>
|
||||
</section>
|
||||
|
||||
<section class="inspector-section" aria-labelledby="verifierTitle">
|
||||
<h3 id="verifierTitle">Verifier facts</h3>
|
||||
<h3 id="verifierTitle">校验事实</h3>
|
||||
<div id="verifierFacts"></div>
|
||||
</section>
|
||||
|
||||
<section class="inspector-section" aria-labelledby="toolInspectorTitle">
|
||||
<h3 id="toolInspectorTitle">Selected tool</h3>
|
||||
<h3 id="toolInspectorTitle">选中工具</h3>
|
||||
<div id="toolInspector"></div>
|
||||
</section>
|
||||
|
||||
<section class="inspector-section" aria-labelledby="answerTitle">
|
||||
<h3 id="answerTitle">Final answer</h3>
|
||||
<h3 id="answerTitle">最终回答</h3>
|
||||
<div class="answer-box" id="finalAnswer">-</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -124,6 +159,6 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="trace.js"></script>
|
||||
<script src="trace.js?v=20260707-outcome"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user