`;
+ if (promptText) {{
+ card += `
Prompt:
${{DOMPurify.sanitize(marked.parse(String(promptText)))}}
`;
+ }}
+ if (promptJson && promptJson !== '""' && promptJson !== 'null' && promptJson !== '{{}}') {{
+ card += `
View Raw Prompt JSON
${{DOMPurify.sanitize(promptJson)}}`;
+ }}
- const hasMainContent = promptText || responseText || reference;
+ if (responseText) {{
+ const responseTitle = isAgentEval ? 'Final Response' : 'Candidate Response';
+ card += `
${{responseTitle}}
${{DOMPurify.sanitize(marked.parse(String(responseText)))}}`;
+ }}
+ if (responseJson && responseJson !== '""' && responseJson !== 'null' && responseJson !== '{{}}') {{
+ card += `
View Raw Response JSON
${{DOMPurify.sanitize(responseJson)}}`;
+ }}
- if (hasMainContent) {{
- card += `
`;
- if (promptText) {{
- card += `
Prompt:
${{DOMPurify.sanitize(marked.parse(String(promptText)))}}
`;
- }}
- if (promptJson && promptJson !== '""' && promptJson !== 'null' && promptJson !== '{{}}') {{
- card += `
View Raw Prompt JSON
${{DOMPurify.sanitize(promptJson)}}`;
- }}
+ let hasTrace = isAgentEval && agentData.turns;
+ let hasRef = !!reference;
- if (reference) {{
- card += `
Reference:
${{DOMPurify.sanitize(marked.parse(String(reference)))}}
`;
- }}
+ if (hasTrace || hasRef) {{
+ card += `
`;
- if (responseText) {{
- const responseTitle = isAgentEval ? 'Final Response' : 'Candidate Response';
- card += `
${{responseTitle}}
${{DOMPurify.sanitize(marked.parse(String(responseText)))}}`;
+ if (hasTrace) {{
+ let traceContent = formatAgentData(agentData);
+ card += `
+
+ Conversation Trace
+ Sequence of multi-agent events across turns
+ ${{traceContent}}
+
+
`;
}}
- if (responseJson && responseJson !== '""' && responseJson !== 'null' && responseJson !== '{{}}') {{
- card += `
View Raw Response JSON
${{DOMPurify.sanitize(responseJson)}}`;
+
+ if (hasRef) {{
+ card += `
`;
+ if (isRefAgentData) {{
+ let refTraceContent = formatAgentData(refAgentDataObj);
+ card += `
+ Reference
+ Sequence of multi-agent events across turns
+ ${{refTraceContent}}
+ `;
+ }} else {{
+ card += `
Reference
${{DOMPurify.sanitize(marked.parse(String(reference)))}}
`;
+ }}
+ card += `
`;
}}
card += `
`;
}}
- if (isAgentEval && agentData.turns) {{
- let traceContent = formatAgentData(agentData);
- const sidebarStyle = hasMainContent ? '' : 'flex: 1 1 100%;';
-
- card += ``;
- }}
-
- card += `
`;
-
let metricTable = '
Evaluation Metrics
';
const candidateMetrics = (caseResult.response_candidate_results && caseResult.response_candidate_results[0] && caseResult.response_candidate_results[0].metric_results) || {{}};
Object.entries(candidateMetrics).forEach(([name, val]) => {{
@@ -785,6 +812,7 @@ def _get_comparison_html(eval_result_json: str) -> str:
details {{ border: 1px solid #dadce0; border-radius: 8px; padding: 24px; margin-bottom: 24px; background: #fff; }}
summary {{ font-weight: 500; font-size: 1.2em; cursor: pointer; }}
.prompt-container {{ background-color: #e8f0fe; padding: 16px; margin-bottom: 16px; border-radius: 8px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }}
+ .reference-container {{ background-color: #fff; border: 1px solid #dadce0; padding: 16px; margin-bottom: 16px; border-radius: 8px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }}
.responses-grid {{ display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin-top: 16px;}}
.response-column {{ border: 1px solid #e0e0e0; padding: 16px; border-radius: 8px; background: #f9f9f9; }}
.response-text-container {{ background-color: #fff; padding: 12px; margin-top: 8px; border-radius: 4px; border: 1px solid #eee; white-space: pre-wrap; word-wrap: break-word; max-height: 400px; overflow-y: auto; overflow-wrap: break-word; }}
@@ -1102,10 +1130,34 @@ def _get_comparison_html(eval_result_json: str) -> str:
const promptText = isValEmpty(original_case.prompt_display_text) ? '' : original_case.prompt_display_text;
const promptJson = original_case.prompt_raw_json;
- const agentData = original_case.agent_data;
+ const reference = isValEmpty(original_case.reference) ? '' : original_case.reference;
+
+ let agentData = original_case.agent_data;
+ if (typeof agentData === 'string') {{
+ try {{ agentData = JSON.parse(agentData); }} catch(e) {{}}
+ }}
+
+ let isRefAgentData = false;
+ let refAgentDataObj = null;
+ if (reference) {{
+ try {{
+ let parsed = typeof reference === 'string' ? JSON.parse(reference) : reference;
+ if (parsed && parsed.turns) {{
+ isRefAgentData = true;
+ refAgentDataObj = parsed;
+ }}
+ }} catch(e) {{}}
+ }}
let card = `
Case #${{caseResult.eval_case_index}}
`;
+ if (agentData && agentData.agents && Object.keys(agentData.agents).length > 0) {{
+ card += `
+ System Topology
+ ${{formatSystemTopology(agentData.agents)}}
+ `;
+ }}
+
if (promptText) {{
card += `Prompt:
${{DOMPurify.sanitize(marked.parse(String(promptText)))}}
`;
}}
@@ -1114,25 +1166,39 @@ def _get_comparison_html(eval_result_json: str) -> str:
card += `View Raw Prompt JSON
${{DOMPurify.sanitize(promptJson)}}`;
- if (agentData.agents && Object.keys(agentData.agents).length > 0) {{
- card += `
- System Topology
- ${{formatSystemTopology(agentData.agents)}}
- `;
+ if (hasTrace) {{
+ let traceContent = formatAgentData(agentData);
+ card += `
+
+ Conversation Trace
+ Sequence of multi-agent events across turns
+ ${{traceContent}}
+
+
`;
}}
- if (agentData.turns) {{
- card += `
- Conversation Trace
- Sequence of multi-agent events across turns
- ${{formatAgentData(agentData)}}
- `;
+ if (hasRef) {{
+ card += `
`;
+ if (isRefAgentData) {{
+ let refTraceContent = formatAgentData(refAgentDataObj);
+ card += `
+ Reference
+ Sequence of multi-agent events across turns
+ ${{refTraceContent}}
+ `;
+ }} else {{
+ card += `
Reference
${{DOMPurify.sanitize(marked.parse(String(reference)))}}
`;
+ }}
+ card += `
`;
}}
+
+ card += `
`;