google-cloud-agentplatform 1.165.1.dev0__py3-none-any.whl

agentplatform/_genai/_evals_visualization.py

@@ -0,0 +1,2070 @@
+# Copyright 2025 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+"""Visualization utilities for GenAI Evaluation SDK."""
+
+import base64
+import datetime
+import html
+import json
+import logging
+import textwrap
+from typing import Any, Optional
+
+import pandas as pd
+from pydantic import errors
+
+from . import _evals_common
+from . import types
+
+
+logger = logging.getLogger(__name__)
+
+
+def _is_ipython_env() -> bool:
+    """Checks if the code is running in an IPython environment."""
+    try:
+        from IPython import get_ipython
+
+        return get_ipython() is not None
+    except ImportError:
+        return False
+
+
+def _pydantic_serializer(obj: Any) -> Any:
+    """Custom serializer for Pydantic models."""
+    if hasattr(obj, "model_dump"):
+        return obj.model_dump(mode="json")
+    if isinstance(obj, datetime.datetime):
+        return obj.isoformat()
+    if isinstance(obj, bytes):
+        return base64.b64encode(obj).decode("utf-8")
+    raise TypeError(f"Object of type {obj.__class__.__name__} is not JSON serializable")
+
+
+def _preprocess_df_for_json(df: Optional[pd.DataFrame]) -> Optional[pd.DataFrame]:
+    """Prepares a DataFrame for JSON serialization by converting complex objects to strings."""
+    if df is None:
+        return None
+    df_copy = df.copy()
+
+    for col in df_copy.columns:
+        if (
+            df_copy[col].dtype == "object"
+            or df_copy[col].apply(lambda x: isinstance(x, (dict, list))).any()
+        ):
+
+            def stringify_cell(cell: Any) -> Optional[str]:
+                if isinstance(cell, (dict, list)):
+                    try:
+                        return json.dumps(
+                            cell, ensure_ascii=False, default=_pydantic_serializer
+                        )
+                    except TypeError:
+                        return str(cell)
+                elif pd.isna(cell):
+                    return None
+                elif not isinstance(cell, (str, int, float, bool)):
+                    if hasattr(cell, "model_dump"):
+                        return json.dumps(
+                            cell.model_dump(mode="json"), ensure_ascii=False
+                        )
+                    return str(cell)
+                return str(cell)
+
+            df_copy[col] = df_copy[col].apply(stringify_cell)
+    return df_copy
+
+
+def _encode_to_base64(data: str) -> str:
+    """Encodes a string to a web-safe Base64 string."""
+    return base64.b64encode(data.encode("utf-8")).decode("utf-8")
+
+
+def _extract_text_and_raw_json(content: Any) -> dict[str, str]:
+    """Extracts display text and raw JSON from a content object."""
+    if hasattr(content, "model_dump"):
+        content = content.model_dump(mode="json", exclude_none=True)
+
+    if not isinstance(content, (str, dict)):
+        return {"display_text": str(content or ""), "raw_json": ""}
+
+    try:
+        data = json.loads(content) if isinstance(content, str) else content
+
+        if not isinstance(data, dict):
+            return {"display_text": str(content), "raw_json": ""}
+
+        pretty_json = json.dumps(data, indent=2, ensure_ascii=False)
+
+        # Gemini format check (API Wrapper format).
+        if (
+            "contents" in data
+            and isinstance(data.get("contents"), list)
+            and data["contents"]
+        ):
+            first_part = data["contents"][0].get("parts", [{}])[0]
+            display_text = first_part.get("text", str(data))
+            return {"display_text": display_text, "raw_json": pretty_json}
+
+        # Direct Gemini Content Object Check
+        elif "parts" in data and isinstance(data.get("parts"), list) and data["parts"]:
+            text_parts = [p.get("text", "") for p in data["parts"] if "text" in p]
+            display_text = "\n".join(text_parts) if text_parts else str(data)
+            return {"display_text": display_text, "raw_json": pretty_json}
+
+        # OpenAI response format check.
+        elif (
+            "choices" in data
+            and isinstance(data.get("choices"), list)
+            and data["choices"]
+        ):
+            message = data["choices"][0].get("message", {})
+            display_text = message.get("content", str(data))
+            return {"display_text": display_text, "raw_json": pretty_json}
+
+        # OpenAI request format check.
+        elif (
+            "messages" in data
+            and isinstance(data.get("messages"), list)
+            and data["messages"]
+        ):
+            user_messages = [
+                message.get("content", "")
+                for message in data["messages"]
+                if message.get("role") == "user"
+            ]
+            display_text = user_messages[-1] if user_messages else str(data)
+            return {"display_text": display_text, "raw_json": pretty_json}
+        else:
+            # Not a recognized format.
+            return {"display_text": str(content), "raw_json": pretty_json}
+
+    except (json.JSONDecodeError, TypeError, IndexError):
+        return {"display_text": str(content), "raw_json": ""}
+
+
+def _extract_dataset_rows(dataset: types.EvaluationDataset) -> list[dict[str, Any]]:
+    """Helper to consistently extract rows from either a dataframe or raw eval_cases list."""
+    processed_rows = []
+
+    # Process from DataFrame if available
+    if getattr(dataset, "eval_dataset_df", None) is not None:
+        processed_df = _preprocess_df_for_json(dataset.eval_dataset_df)
+        if processed_df is not None:
+            for _, row in processed_df.iterrows():
+                prompt_key = "request" if "request" in row else "prompt"
+                prompt_info = _extract_text_and_raw_json(row.get(prompt_key))
+                response_info = _extract_text_and_raw_json(row.get("response"))
+                ref_info = _extract_text_and_raw_json(row.get("reference"))
+                processed_row = {
+                    "prompt_display_text": prompt_info["display_text"],
+                    "prompt_raw_json": prompt_info["raw_json"],
+                    "reference": ref_info["display_text"],
+                    "reference_raw_json": ref_info["raw_json"],
+                    "response_display_text": response_info["display_text"],
+                    "response_raw_json": response_info["raw_json"],
+                    "intermediate_events": row.get("intermediate_events", None),
+                    "agent_data": row.get("agent_data", None),
+                }
+                processed_rows.append(processed_row)
+
+    # Fallback to pure eval_cases extraction
+    elif dataset.eval_cases:
+        for case in dataset.eval_cases:
+            prompt_info = (
+                _extract_text_and_raw_json(case.prompt)
+                if case.prompt
+                else {"display_text": "", "raw_json": ""}
+            )
+
+            response_info = {"display_text": "", "raw_json": ""}
+            if case.responses and case.responses[0].response:
+                response_info = _extract_text_and_raw_json(case.responses[0].response)
+
+            reference_text = ""
+            reference_raw_json = ""
+            if case.reference and case.reference.response:
+                ref_info = _extract_text_and_raw_json(case.reference.response)
+                reference_text = ref_info["display_text"]
+                reference_raw_json = ref_info["raw_json"]
+
+            agent_data_json = None
+            if case.agent_data:
+                agent_data_json = json.dumps(
+                    case.agent_data.model_dump(mode="json", exclude_none=True),
+                    ensure_ascii=False,
+                )
+
+            intermediate_events_json = None
+            if case.intermediate_events:
+                intermediate_events_json = json.dumps(
+                    [
+                        e.model_dump(mode="json", exclude_none=True)
+                        for e in case.intermediate_events
+                    ],
+                    ensure_ascii=False,
+                )
+
+            processed_row = {
+                "prompt_display_text": prompt_info["display_text"],
+                "prompt_raw_json": prompt_info["raw_json"],
+                "reference": reference_text,
+                "reference_raw_json": reference_raw_json,
+                "response_display_text": response_info["display_text"],
+                "response_raw_json": response_info["raw_json"],
+                "intermediate_events": intermediate_events_json,
+                "agent_data": agent_data_json,
+            }
+            processed_rows.append(processed_row)
+
+    return processed_rows
+
+
+def get_evaluation_html(eval_result_json: str) -> str:
+    """Returns a self-contained HTML for single evaluation visualization."""
+    payload_b64 = _encode_to_base64(eval_result_json)
+    return textwrap.dedent(
+        f"""
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Evaluation Report</title>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+    <style>
+        body {{ font-family: 'Roboto', 'Helvetica', sans-serif; margin: 2em; background-color: #f8f9fa; color: #202124; }}
+        .container {{ max-width: 1200px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }}
+        h1, h2, h3 {{ color: #3c4043; }}
+        h1 {{ border-bottom: 2px solid #4285F4; padding-bottom: 8px; }}
+        h2 {{ border-bottom: 1px solid #dadce0; padding-bottom: 8px; }}
+        table {{ border-collapse: collapse; width: 100%; margin: 1em 0; }}
+        th, td {{ border: 1px solid #dadce0; padding: 12px; text-align: left; vertical-align: top; }}
+        th {{ background-color: #f2f2f2; font-weight: 500; }}
+        details {{ border: 1px solid #dadce0; border-radius: 8px; padding: 16px; margin-bottom: 16px; background: #fff; }}
+        summary {{ font-weight: 500; font-size: 1.1em; cursor: pointer; }}
+        .prompt-container {{ background-color: #e8f0fe; padding: 16px; margin: 12px 0; 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: 12px 0; border-radius: 8px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }}
+        .agent-info-container {{ background-color: #f1f3f4; padding: 16px; margin: 12px 0; border-radius: 8px; word-wrap: break-word; overflow-wrap: break-word; font-size: 14px; }}
+        .agent-info-grid {{ display: grid; grid-template-columns: 120px 1fr; gap: 8px; margin-bottom: 12px; }}
+        .agent-info-grid dt {{ font-weight: 500; color: #3c4043; }}
+        .agent-info-grid dd {{ margin: 0; white-space: pre-wrap; word-wrap: break-word; }}
+        .intermediate-events-container {{ background-color: #f1f3f4; padding: 16px; margin: 12px 0; border-radius: 8px; word-wrap: break-word; overflow-wrap: break-word; max-height: 400px; overflow-y: auto; overflow-x: auto; }}
+        .response-container {{ background-color: #f9f9f9; padding: 12px; margin-top: 8px; border-radius: 8px; border: 1px solid #eee; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }}
+        .explanation {{ color: #5f6368; font-style: italic; font-size: 0.9em; padding-top: 6px; }}
+        .raw-json-details summary {{ font-size: 0.9em; cursor: pointer; color: #5f6368;}}
+        .raw-json-container {{ white-space: pre-wrap; word-wrap: break-word; max-height: 300px; overflow-y: auto; background-color: #f1f1f1; padding: 10px; border-radius: 4px; margin-top: 8px; }}
+
+        .rubric-bubble-container {{ display: flex; flex-wrap: wrap; gap: 8px; }}
+        .rubric-details {{ border: none; padding: 0; margin: 0; }}
+        .rubric-bubble {{ display: inline-flex; align-items: center; background-color: #e8f0fe; color: #1967d2; border-radius: 16px; padding: 8px 12px; font-size: 0.9em; cursor: pointer; list-style: none; }}
+        .rubric-bubble::-webkit-details-marker {{ display: none; }}
+        .rubric-bubble::before {{ content: '►'; margin-right: 8px; font-size: 0.8em; transition: transform 0.2s; }}
+        .rubric-details[open] > .rubric-bubble::before {{ transform: rotate(90deg); }}
+        .pass {{ color: green; font-weight: bold; }}
+        .fail {{ color: red; font-weight: bold; }}
+
+        .case-content-wrapper {{ display: flex; gap: 1rem; }}
+        .case-content-main {{ flex: 1; }}
+        .case-content-sidebar {{ flex: 1; min-width: 0; }}
+
+        /* Tool Declarations */
+        .tool-declarations-container {{ background-color: #f1f1f1; padding: 10px; border-radius: 4px; margin-top: 8px; max-height: 300px; overflow-y: auto; }}
+        .tool-declaration {{ margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ddd; }}
+        .tool-declaration:last-child {{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }}
+
+        /* Agent Topology UI */
+        .system-topology-details {{ background: #fff; border: 1px solid #dadce0; border-radius: 8px; padding: 16px; margin-top: 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }}
+        .system-topology-details > summary {{ font-size: 1.1em; font-weight: 500; cursor: pointer; outline: none; margin-bottom: 12px; list-style: none; display: flex; align-items: center; color: #3c4043; }}
+        .system-topology-details > summary::-webkit-details-marker {{ display: none; }}
+        .system-topology-details > summary::before {{ content: '▼'; font-size: 0.8em; margin-right: 8px; transition: transform 0.2s; }}
+        .system-topology-details:not([open]) > summary::before {{ transform: rotate(-90deg); }}
+
+        .topology-container {{ background: #f8f9fa; border-radius: 8px; padding: 16px; margin-top: 8px; border: 1px solid #dadce0; overflow-x: auto; }}
+        .agent-node {{ background: #fff; border: 1px solid #dadce0; border-radius: 8px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); min-width: 300px; max-width: 600px; }}
+        .agent-node-header {{ padding: 10px 16px; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 8px; background: #f1f3f4; border-top-left-radius: 8px; border-top-right-radius: 8px; }}
+        .agent-name {{ font-weight: 600; color: #1a73e8; }}
+        .agent-type {{ font-size: 11px; background: #e8eaed; padding: 2px 8px; border-radius: 12px; color: #5f6368; font-family: monospace; }}
+        .agent-node-body {{ padding: 12px 16px; font-size: 13px; color: #3c4043; }}
+        .agent-desc {{ margin-bottom: 8px; }}
+        .agent-inst details, .agent-tools details {{ margin-bottom: 8px; padding: 8px; }}
+        .agent-inst summary, .agent-tools summary {{ cursor: pointer; font-weight: 500; color: #5f6368; font-size: 12px; outline: none; margin-bottom: 0; }}
+        .inst-content, .tools-content {{ margin-top: 8px; padding: 8px; background: #f8f9fa; border-radius: 4px; border: 1px solid #eee; white-space: pre-wrap; word-wrap: break-word; font-family: monospace; font-size: 12px; max-height: 200px; overflow-y: auto; }}
+        .sub-agents-container {{ margin-top: 16px; padding-left: 24px; border-left: 2px solid #dadce0; position: relative; }}
+        .sub-agents-container::before {{ content: ''; position: absolute; top: -16px; left: -2px; width: 2px; height: 16px; background: #dadce0; }}
+
+        /* Multi-turn Agent Trace UI */
+        .conversation-trace-details {{ background: #fff; border: 1px solid #dadce0; border-radius: 8px; padding: 16px; margin-top: 0; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }}
+        .conversation-trace-details > summary {{ font-size: 1.1em; font-weight: 500; cursor: pointer; outline: none; margin-bottom: 8px; list-style: none; display: flex; align-items: center; color: #3c4043; }}
+        .conversation-trace-details > summary::-webkit-details-marker {{ display: none; }}
+        .conversation-trace-details > summary::before {{ content: '▼'; font-size: 0.8em; margin-right: 8px; transition: transform 0.2s; }}
+        .conversation-trace-details:not([open]) > summary::before {{ transform: rotate(-90deg); }}
+
+        .agent-timeline {{ position: relative; padding-left: 32px; margin-top: 16px; font-family: 'Roboto', sans-serif; }}
+        .agent-timeline::before {{ content: ''; position: absolute; top: 0; bottom: 0; left: 11px; width: 2px; background: #e8eaed; }}
+
+        .turn-details {{ margin-bottom: 16px; padding: 0; border: none; }}
+        .turn-summary {{ list-style: none; outline: none; cursor: pointer; display: block; margin-left: -32px; padding-left: 32px; }}
+        .turn-summary::-webkit-details-marker {{ display: none; }}
+        .turn-header {{ margin: 16px 0 16px -32px; position: relative; z-index: 1; display: inline-flex; align-items: center; }}
+
+        .turn-badge {{ display: inline-flex; align-items: center; background: #f8f9fa; color: #5f6368; padding: 4px 12px; border-radius: 16px; font-size: 11px; font-weight: 600; border: 1px solid #dadce0; letter-spacing: 0.5px; }}
+        .turn-divider {{ color: #dadce0; margin: 0 6px; font-weight: normal; }}
+        .turn-badge::before {{ content: '▼'; margin-right: 6px; font-size: 0.8em; display: inline-block; transition: transform 0.2s; }}
+        .turn-details:not([open]) .turn-badge::before {{ transform: rotate(-90deg); }}
+
+        .timeline-item {{ position: relative; margin-bottom: 16px; }}
+        .timeline-icon {{ position: absolute; left: -32px; top: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e8f0fe; border: 2px solid #fff; color: #1a73e8; z-index: 1; box-sizing: border-box; margin-left: 0; }}
+        .timeline-icon.user {{ background: #f3e8fd; color: #9334e6; }}
+        .timeline-icon.tool {{ background: #e6f4ea; color: #1e8e3e; }}
+        .timeline-content {{ background: #fff; border: 1px solid #dadce0; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden; }}
+        .event-header {{ padding: 12px 16px 8px; font-size: 12px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; }}
+        .event-author {{ color: #1a73e8; letter-spacing: 0.5px; text-transform: uppercase; }}
+        .event-author.user {{ color: #9334e6; }}
+        .event-author.tool {{ color: #1e8e3e; }}
+        .event-role {{ color: #80868b; font-weight: normal; font-size: 11px; font-family: monospace;}}
+        .event-body {{ padding: 0 16px 12px; font-size: 14px; color: #202124; line-height: 1.5; }}
+        .dark-code-block {{ background: #0e111a; color: #d4d4d4; padding: 12px; border-radius: 6px; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; margin: 8px 0 0 0; overflow-x: auto; border: 1px solid #3c4043; }}
+        .function-call-title {{ color: #e37400; font-weight: 600; font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 4px; }}
+        .function-response-title {{ color: #0f9d58; font-weight: 600; font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 4px; }}
+        .agent-trace-container {{ max-height: 600px; overflow-x: auto; overflow-y: auto; padding-right: 8px; border: 1px solid #eee; padding: 12px; border-radius: 8px; background: #fafafa; }}
+
+        /* Collapsible Metrics */
+        .metric-details {{ background: #fff; border: 1px solid #dadce0; border-radius: 8px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden; }}
+        .metric-summary {{ list-style: none; cursor: pointer; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; background: #f8f9fa; margin: 0; outline: none; }}
+        .metric-summary::-webkit-details-marker {{ display: none; }}
+        .metric-details[open] .metric-summary {{ border-bottom: 1px solid #dadce0; }}
+        .metric-name-wrapper {{ display: flex; align-items: center; font-weight: 600; color: #3c4043; font-size: 14px; }}
+        .metric-name-wrapper::before {{ content: '►'; font-size: 0.8em; margin-right: 8px; transition: transform 0.2s; color: #5f6368; }}
+        .metric-details[open] .metric-name-wrapper::before {{ transform: rotate(90deg); }}
+        .metric-score {{ font-weight: bold; font-size: 16px; color: #1a73e8; }}
+        .metric-body {{ padding: 16px; }}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Evaluation Report</h1>
+        <div id="summary-section"></div>
+        <div id="details-section"></div>
+    </div>
+    <script>
+        var vizData_vertex_eval_sdk = JSON.parse(new TextDecoder().decode(Uint8Array.from(atob("{payload_b64}"), c => c.charCodeAt(0))));
+
+        function formatDictVals(obj) {{
+            if (typeof obj === 'string') return obj;
+            if (obj === undefined || obj === null) return '';
+            if (typeof obj !== 'object') return String(obj);
+            if (Array.isArray(obj)) return JSON.stringify(obj);
+            return Object.entries(obj).map(([k,v]) => `${{k}}=${{formatDictVals(v)}}`).join(', ');
+        }}
+
+        function formatToolDeclarations(toolDeclarations) {{
+            if (!toolDeclarations) return '';
+            let functions = [];
+            const builtins = [];
+
+            function collectFromTool(tool) {{
+                if (!tool || typeof tool !== 'object') return;
+                if (Array.isArray(tool.function_declarations) && tool.function_declarations.length > 0) {{
+                    functions = functions.concat(tool.function_declarations);
+                    return;
+                }}
+                if (tool.name && tool.parameters) {{
+                    functions.push(tool);
+                    return;
+                }}
+                Object.keys(tool).forEach(k => {{
+                    if (k === 'function_declarations') return;
+                    if (tool[k] === null || tool[k] === undefined) return;
+                    builtins.push(k);
+                }});
+            }}
+
+            if (Array.isArray(toolDeclarations)) {{
+                toolDeclarations.forEach(collectFromTool);
+            }} else if (typeof toolDeclarations === 'object') {{
+                if (toolDeclarations.function_declarations) {{
+                    functions = functions.concat(toolDeclarations.function_declarations);
+                }} else {{
+                    collectFromTool(toolDeclarations);
+                }}
+            }}
+
+            if (functions.length === 0 && builtins.length === 0) {{
+                 return `<pre class="raw-json-container">${{DOMPurify.sanitize(JSON.stringify(toolDeclarations, null, 2))}}</pre>`;
+            }}
+
+            let html = '<div class="tool-declarations-container">';
+            functions.forEach(func => {{
+                html += '<div class="tool-declaration">';
+                const params = func.parameters && func.parameters.properties ? func.parameters.properties : {{}};
+                const requiredParams = func.parameters && func.parameters.required ? new Set(func.parameters.required) : new Set();
+                const paramStrings = Object.keys(params).map(p => `${{DOMPurify.sanitize(p)}}: ${{DOMPurify.sanitize(params[p].type)}}`).join(', ');
+                html += `<strong>${{DOMPurify.sanitize(func.name)}}</strong>(${{paramStrings}})<br>`;
+                if(func.description) html += `<em>${{DOMPurify.sanitize(func.description)}}</em><br>`;
+                if(Object.keys(params).length > 0) html += 'Parameters:<br>';
+                Object.keys(params).forEach(p => {{
+                    html += `&nbsp;&nbsp;- ${{DOMPurify.sanitize(p)}}: ${{DOMPurify.sanitize(params[p].description || '')}} ${{requiredParams.has(p) ? '<strong>(required)</strong>' : ''}}<br>`;
+                }});
+                html += '</div>';
+            }});
+            builtins.forEach(name => {{
+                html += `<div class="tool-declaration"><strong>${{DOMPurify.sanitize(name)}}</strong> <em>(built-in tool)</em></div>`;
+            }});
+            html += '</div>';
+            return html;
+        }}
+
+        function formatSystemTopology(agents) {{
+            if (!agents || Object.keys(agents).length === 0) return '<p>No agent configurations provided.</p>';
+
+            const allSubAgents = new Set();
+            Object.values(agents).forEach(agent => {{
+                if (agent.sub_agents) {{
+                    agent.sub_agents.forEach(sa => allSubAgents.add(sa));
+                }}
+            }});
+
+            const roots = Object.keys(agents).filter(id => !allSubAgents.has(id));
+            if (roots.length === 0) {{
+                roots.push(Object.keys(agents)[0]);
+            }}
+
+            let html = '<div class="topology-container">';
+
+            const renderAgent = (agentId, visited) => {{
+                if (visited.has(agentId)) return '';
+                visited.add(agentId);
+
+                const agent = agents[agentId];
+                if (!agent) return '';
+
+                let nodeHtml = `<div class="agent-node">`;
+                nodeHtml += `<div class="agent-node-header">
+                               <span style="font-size:16px;">🤖</span>
+                               <span class="agent-name">${{DOMPurify.sanitize(agentId)}}</span>
+                               ${{agent.agent_type ? `<span class="agent-type">${{DOMPurify.sanitize(agent.agent_type)}}</span>` : ''}}
+                             </div>`;
+
+                nodeHtml += `<div class="agent-node-body">`;
+                if (agent.description) {{
+                    nodeHtml += `<div class="agent-desc"><strong>Role:</strong> ${{DOMPurify.sanitize(agent.description)}}</div>`;
+                }}
+                if (agent.instruction) {{
+                    nodeHtml += `<div class="agent-inst">
+                                    <details>
+                                        <summary>System Instructions</summary>
+                                        <div class="inst-content">${{DOMPurify.sanitize(agent.instruction)}}</div>
+                                    </details>
+                                 </div>`;
+                }}
+                if (agent.tools && agent.tools.length > 0) {{
+                    nodeHtml += `<div class="agent-tools">
+                                    <details>
+                                        <summary>Tools (${{agent.tools.length}})</summary>
+                                        <div class="tools-content" style="padding:0; border:none; background:transparent;">
+                                            ${{formatToolDeclarations(agent.tools)}}
+                                        </div>
+                                    </details>
+                                 </div>`;
+                }}
+
+                if (agent.sub_agents && agent.sub_agents.length > 0) {{
+                    nodeHtml += `<div class="sub-agents-container">`;
+                    agent.sub_agents.forEach(sa => {{
+                        nodeHtml += renderAgent(sa, new Set(visited));
+                    }});
+                    nodeHtml += `</div>`;
+                }}
+
+                nodeHtml += `</div></div>`;
+                return nodeHtml;
+            }};
+
+            roots.forEach(rootId => {{
+                html += renderAgent(rootId, new Set());
+            }});
+
+            html += '</div>';
+            return html;
+        }}
+
+        function formatAgentData(agentData) {{
+            let data = agentData;
+            if (typeof data === 'string') {{
+                try {{ data = JSON.parse(data); }} catch(e) {{ return ''; }}
+            }}
+            if (!data || !data.turns) return '';
+
+            let html = '<div class="agent-timeline">';
+            data.turns.forEach((turn, idx) => {{
+                const tIndex = turn.turn_index !== undefined ? turn.turn_index : (idx + 1);
+                const tId = turn.turn_id ? DOMPurify.sanitize(String(turn.turn_id)) : `turn-${{String(tIndex).padStart(3, '0')}}`;
+
+                html += `<details open class="turn-details">`;
+                html += `<summary class="turn-summary"><div class="turn-header"><span class="turn-badge">TURN ${{tIndex}} <span class="turn-divider">|</span> ID: ${{tId}}</span></div></summary>`;
+
+                if (turn.events) {{
+                    turn.events.forEach(event => {{
+                        const role = (event.content && event.content.role) ? event.content.role.toLowerCase() : 'model';
+                        const author = event.author ? event.author : role;
+
+                        let iconClass = 'model';
+                        if (role === 'user') iconClass = 'user';
+                        if (role === 'tool') iconClass = 'tool';
+
+                        let svgIcon = '';
+                        if (iconClass === 'user') {{
+                            svgIcon = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`;
+                        }} else if (iconClass === 'tool') {{
+                            svgIcon = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>`;
+                        }} else {{
+                            svgIcon = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"></rect><circle cx="12" cy="5" r="2"></circle><path d="M12 7v4"></path><line x1="8" y1="16" x2="8" y2="16"></line><line x1="16" y1="16" x2="16" y2="16"></line></svg>`;
+                        }}
+
+                        html += `<div class="timeline-item">
+                                    <div class="timeline-icon ${{iconClass}}">${{svgIcon}}</div>
+                                    <div class="timeline-content">
+                                        <div class="event-header">
+                                            <span class="event-author ${{iconClass}}">${{DOMPurify.sanitize(author)}}</span>
+                                            <span class="event-role">${{DOMPurify.sanitize(role)}}</span>
+                                        </div>
+                                        <div class="event-body">`;
+
+                        if (event.content && event.content.parts) {{
+                            event.content.parts.forEach(part => {{
+                                if (part.text) {{
+                                    html += `<div>${{DOMPurify.sanitize(marked.parse(String(part.text)))}}</div>`;
+                                }} else if (part.function_call) {{
+                                    const fnName = part.function_call.name;
+                                    const fnArgs = JSON.stringify(part.function_call.args, null, 2);
+                                    html += `<div class="function-call-title">&gt;_ Function Call: ${{DOMPurify.sanitize(fnName)}}</div>
+                                             <pre class="dark-code-block">${{DOMPurify.sanitize(fnArgs)}}</pre>`;
+                                }} else if (part.function_response) {{
+                                    const fnName = part.function_response.name;
+                                    let fnRes = part.function_response.response;
+                                    if(typeof fnRes === 'object' && fnRes !== null && fnRes.result !== undefined) {{
+                                        fnRes = fnRes.result;
+                                    }}
+                                    const fnResStr = JSON.stringify(fnRes, null, 2);
+                                    html += `<div class="function-response-title">
+                                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
+                                                Tool Output: ${{DOMPurify.sanitize(fnName)}}
+                                             </div>
+                                             <pre class="dark-code-block">${{DOMPurify.sanitize(fnResStr)}}</pre>`;
+                                }}
+                            }});
+                        }} else {{
+                             html += `<div><pre class="raw-json-container">${{DOMPurify.sanitize(JSON.stringify(event.content, null, 2))}}</pre></div>`;
+                        }}
+
+                        html += `</div></div></div>`;
+                    }});
+                }}
+                html += `</details>`;
+            }});
+            html += '</div>';
+            return html;
+        }}
+
+        function renderSummary(summaryMetrics) {{
+            const container = document.getElementById('summary-section');
+            let content = '<h2>Summary Metrics</h2>';
+            if (!summaryMetrics || summaryMetrics.length === 0) {{ container.innerHTML = content + '<p>No summary metrics.</p>'; return; }}
+            let table = '<table><thead><tr><th>Metric</th><th>Mean Score</th><th>Std. Dev.</th></tr></thead><tbody>';
+            summaryMetrics.forEach(m => {{
+                table += `<tr><td>${{m.metric_name || 'N/A'}}</td><td>${{m.mean_score != null ? m.mean_score.toFixed(4) : 'N/A'}}</td><td>${{m.stdev_score != null ? m.stdev_score.toFixed(4) : 'N/A'}}</td></tr>`;
+            }});
+            container.innerHTML = content + table + '</tbody></table>';
+        }}
+
+        function renderDetails(caseResults, metadata) {{
+            const container = document.getElementById('details-section');
+            container.innerHTML = '<h2>Detailed Results</h2>';
+            if (!caseResults || caseResults.length === 0) {{ container.innerHTML += '<p>No detailed results.</p>'; return; }}
+
+            const datasetRows = metadata && metadata.dataset ? metadata.dataset : [];
+
+            caseResults.forEach((caseResult, i) => {{
+                const original_case = datasetRows[caseResult.eval_case_index] || {{}};
+
+                const isValEmpty = (val) => !val || val === 'None' || val === 'nan' || String(val).trim() === '';
+
+                const promptText = isValEmpty(original_case.prompt_display_text) ? '' : original_case.prompt_display_text;
+                const promptJson = original_case.prompt_raw_json;
+                const reference = isValEmpty(original_case.reference) ? '' : original_case.reference;
+                const referenceJson = original_case.reference_raw_json;
+                const responseText = isValEmpty(original_case.response_display_text) ? '' : original_case.response_display_text;
+                const responseJson = original_case.response_raw_json;
+
+                let agentData = original_case.agent_data;
+                if (typeof agentData === 'string') {{
+                    try {{ agentData = JSON.parse(agentData); }} catch(e) {{}}
+                }}
+                const isAgentEval = !!agentData;
+
+                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 = `<details open><summary style="font-size: 1.2em;">Case #${{caseResult.eval_case_index != null ? caseResult.eval_case_index : i}}</summary>`;
+
+                if (isAgentEval && agentData.agents && Object.keys(agentData.agents).length > 0) {{
+                    card += `<details open class="system-topology-details">
+                                <summary>System Topology</summary>
+                                ${{formatSystemTopology(agentData.agents)}}
+                             </details>`;
+                }}
+
+                if (promptText) {{
+                    card += `<div class="prompt-container"><strong>Prompt:</strong><br>${{DOMPurify.sanitize(marked.parse(String(promptText)))}}</div>`;
+                }}
+                if (promptJson && promptJson !== '""' && promptJson !== 'null' && promptJson !== '{{}}') {{
+                    card += `<details class="raw-json-details"><summary>View Raw Prompt JSON</summary><pre class="raw-json-container">${{DOMPurify.sanitize(promptJson)}}</pre></details>`;
+                }}
+
+                if (responseText) {{
+                    const responseTitle = isAgentEval ? 'Final Response' : 'Candidate Response';
+                    card += `<div class="response-container"><h4>${{responseTitle}}</h4>${{DOMPurify.sanitize(marked.parse(String(responseText)))}}</div>`;
+                }}
+                if (responseJson && responseJson !== '""' && responseJson !== 'null' && responseJson !== '{{}}') {{
+                    card += `<details class="raw-json-details"><summary>View Raw Response JSON</summary><pre class="raw-json-container">${{DOMPurify.sanitize(responseJson)}}</pre></details>`;
+                }}
+
+                let hasTrace = isAgentEval && agentData.turns;
+                let hasRef = !!reference;
+
+                if (hasTrace || hasRef) {{
+                    card += `<div style="display: flex; gap: 1rem; margin-top: 16px;">`;
+
+                    if (hasTrace) {{
+                        let traceContent = formatAgentData(agentData);
+                        card += `<div style="flex: 1; min-width: 0;">
+                                     <details open class="conversation-trace-details" style="margin: 0; height: 100%;">
+                                        <summary>Conversation Trace</summary>
+                                        <div style="font-size:13px; color:#5f6368; margin-bottom:12px;">Sequence of multi-agent events across turns</div>
+                                        <div class="agent-trace-container">${{traceContent}}</div>
+                                     </details>
+                                 </div>`;
+                    }}
+
+                    if (hasRef) {{
+                        card += `<div style="flex: 1; min-width: 0;">`;
+                        if (isRefAgentData) {{
+                            let refTraceContent = formatAgentData(refAgentDataObj);
+                            card += `<details open class="conversation-trace-details" style="margin: 0; height: 100%;">
+                                        <summary>Reference</summary>
+                                        <div style="font-size:13px; color:#5f6368; margin-bottom:12px;">Sequence of multi-agent events across turns</div>
+                                        <div class="agent-trace-container">${{refTraceContent}}</div>
+                                     </details>`;
+                        }} else {{
+                            card += `<div class="reference-container" style="margin: 0; height: 100%;"><strong>Reference</strong><br>${{DOMPurify.sanitize(marked.parse(String(reference)))}}</div>`;
+                        }}
+                        card += `</div>`;
+                    }}
+                    card += `</div>`;
+                }}
+
+                let metricTable = '<h3 style="margin-top:24px;">Evaluation Metrics</h3><div class="metrics-list">';
+                const candidateMetrics = (caseResult.response_candidate_results && caseResult.response_candidate_results[0] && caseResult.response_candidate_results[0].metric_results) || {{}};
+                Object.entries(candidateMetrics).forEach(([name, val]) => {{
+                    let metricNameCell = `<strong>${{name}}</strong>`;
+                    let explanationHandled = false;
+                    let bubbles = '';
+
+                    if (name.startsWith('hallucination') && val.explanation) {{
+                        try {{
+                            const explanationData = typeof val.explanation === 'string' ? JSON.parse(val.explanation) : val.explanation;
+                            if (Array.isArray(explanationData) && explanationData.length > 0) {{
+                                let sentenceGroups = [];
+                                if (explanationData[0].explanation && Array.isArray(explanationData[0].explanation)) {{
+                                    explanationData.forEach(item => {{
+                                        if(item.explanation && Array.isArray(item.explanation)) {{
+                                            sentenceGroups.push(item.explanation);
+                                        }}
+                                    }});
+                                }} else if (explanationData[0].sentence) {{
+                                    sentenceGroups.push(explanationData);
+                                }}
+
+                                if(sentenceGroups.length > 0) {{
+                                    sentenceGroups.forEach(sentenceList => {{
+                                        bubbles += '<div class="rubric-bubble-container" style="margin-top: 8px;">';
+                                        sentenceList.forEach(item => {{
+                                            let sentence = item.sentence || 'N/A';
+                                            const label = item.label ? item.label.toLowerCase() : '';
+                                            const isPass = label === 'no_rad' || label === 'supported';
+                                            const verdictText = isPass ? '<span class="pass">Pass</span>' : '<span class="fail">Fail</span>';
+                                            if (isPass) {{
+                                                sentence = `"${{sentence}}" is grounded`;
+                                            }}
+                                            const rationale = item.rationale || 'N/A';
+                                            const itemJson = JSON.stringify(item, null, 2);
+                                            bubbles += `
+                                                <details class="rubric-details">
+                                                    <summary class="rubric-bubble">${{verdictText}}: ${{DOMPurify.sanitize(sentence)}}</summary>
+                                                    <div class="explanation" style="padding: 10px 0 0 20px;">${{DOMPurify.sanitize(rationale)}}</div>
+                                                    <pre class="raw-json-container">${{DOMPurify.sanitize(itemJson)}}</pre>
+                                                </details>`;
+                                        }});
+                                        bubbles += '</div>';
+                                    }});
+                                    explanationHandled = true;
+                                }}
+                            }}
+                        }} catch (e) {{
+                            console.error("Failed to parse hallucination explanation:", e);
+                        }}
+                    }} else if (name.startsWith('safety') && val.score != null) {{
+                        try {{
+                            bubbles += '<div class="rubric-bubble-container" style="margin-top: 8px;">';
+                            const verdictText = val.score >= 1.0 ? '<span class="pass">Pass</span>' : '<span class="fail">Fail</span>';
+                            const explanation = val.explanation || (val.score >= 1.0 ? 'Safety check passed' : 'Safety check failed');
+                            const itemJson = JSON.stringify(val, null, 2);
+                            bubbles += `
+                                <details class="rubric-details">
+                                    <summary class="rubric-bubble">${{verdictText}}: ${{DOMPurify.sanitize(explanation)}}</summary>
+                                    <pre class="raw-json-container">${{DOMPurify.sanitize(itemJson)}}</pre>
+                                </details>`;
+                            bubbles += '</div>';
+                            explanationHandled = true;
+                        }} catch (e) {{
+                            console.error("Failed to process safety metric:", e);
+                        }}
+                    }}
+
+                    if (!bubbles && val.rubric_verdicts && val.rubric_verdicts.length > 0) {{
+                        bubbles += '<div class="rubric-bubble-container" style="margin-top: 8px;">';
+                        val.rubric_verdicts.forEach(verdict => {{
+                            const rubricDescription = verdict.evaluated_rubric && verdict.evaluated_rubric.content && verdict.evaluated_rubric.content.property ? verdict.evaluated_rubric.content.property.description : 'N/A';
+                            const verdictText = verdict.verdict ? '<span class="pass">Pass</span>' : '<span class="fail">Fail</span>';
+                            const verdictJson = JSON.stringify(verdict, null, 2);
+                            bubbles += `
+                                <details class="rubric-details">
+                                    <summary class="rubric-bubble">${{verdictText}}: ${{DOMPurify.sanitize(rubricDescription)}}</summary>
+                                    <pre class="raw-json-container">${{DOMPurify.sanitize(verdictJson)}}</pre>
+                                </details>`;
+                        }});
+                        bubbles += '</div>';
+                    }}
+
+                    let scoreDisplay = val.score != null ? val.score.toFixed(2) : 'N/A';
+                    let metricContent = '';
+
+                    if (val.explanation && !explanationHandled) {{
+                        metricContent += `<div class="explanation" style="margin-top:0; margin-bottom: 12px;">${{DOMPurify.sanitize(marked.parse(String(val.explanation)))}}</div>`;
+                    }}
+                    if (bubbles) {{
+                        metricContent += bubbles;
+                    }}
+                    if (!metricContent) {{
+                        metricContent = `<div style="color: #80868b; font-style: italic; font-size: 13px;">No additional details.</div>`;
+                    }}
+
+                    metricTable += `
+                        <details class="metric-details" open>
+                            <summary class="metric-summary">
+                                <div class="metric-name-wrapper">${{DOMPurify.sanitize(name)}}</div>
+                                <div class="metric-score">${{DOMPurify.sanitize(scoreDisplay)}}</div>
+                            </summary>
+                            <div class="metric-body">
+                                ${{metricContent}}
+                            </div>
+                        </details>
+                    `;
+                }});
+                metricTable += '</div>';
+                card += metricTable + '</details>';
+                container.innerHTML += card;
+            }});
+        }}
+
+        renderSummary(vizData_vertex_eval_sdk.summary_metrics);
+        renderDetails(vizData_vertex_eval_sdk.eval_case_results, vizData_vertex_eval_sdk.metadata);
+    </script>
+</body>
+</html>
+"""
+    )
+
+
+def get_comparison_html(eval_result_json: str) -> str:
+    """Returns a self-contained HTML for a side-by-side eval comparison."""
+    payload_b64 = _encode_to_base64(eval_result_json)
+    return textwrap.dedent(
+        f"""
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Eval Comparison Report</title>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+    <style>
+
+        body {{ font-family: 'Roboto', 'Helvetica', sans-serif; margin: 2em; background-color: #f8f9fa; color: #202124; }}
+        .container {{ max-width: 95%; margin: 20px auto; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }}
+        h1, h2, h3, h4 {{ color: #3c4043; }}
+        h1 {{ border-bottom: 2px solid #4285F4; padding-bottom: 8px; }}
+        h2 {{ border-bottom: 1px solid #dadce0; padding-bottom: 8px; }}
+        table {{ border-collapse: collapse; width: 100%; margin: 1em 0; }}
+        th, td {{ border: 1px solid #dadce0; padding: 12px; text-align: left; vertical-align: top; }}
+        th {{ background-color: #f2f2f2; font-weight: 500; }}
+        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; }}
+        .explanation {{ color: #5f6368; font-style: italic; font-size: 0.9em; padding-top: 8px; }}
+        .raw-json-details summary {{ font-size: 0.9em; cursor: pointer; color: #5f6368;}}
+        .raw-json-container {{ white-space: pre-wrap; word-wrap: break-word; max-height: 300px; overflow-y: auto; background-color: #f1f1f1; padding: 10px; border-radius: 4px; margin-top: 8px; }}
+
+        .rubric-bubble-container {{ display: flex; flex-wrap: wrap; gap: 8px; }}
+        .rubric-details {{ border: none; padding: 0; margin: 0; }}
+        .rubric-bubble {{ display: inline-flex; align-items: center; background-color: #e8f0fe; color: #1967d2; border-radius: 16px; padding: 8px 12px; font-size: 0.9em; cursor: pointer; list-style: none; }}
+        .rubric-bubble::-webkit-details-marker {{ display: none; }}
+        .rubric-bubble::before {{ content: '►'; margin-right: 8px; font-size: 0.8em; transition: transform 0.2s; }}
+        .rubric-details[open] > .rubric-bubble::before {{ transform: rotate(90deg); }}
+        .pass {{ color: green; font-weight: bold; }}
+        .fail {{ color: red; font-weight: bold; }}
+
+        /* Tool Declarations */
+        .tool-declarations-container {{ background-color: #f1f1f1; padding: 10px; border-radius: 4px; margin-top: 8px; max-height: 300px; overflow-y: auto; }}
+        .tool-declaration {{ margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ddd; }}
+        .tool-declaration:last-child {{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }}
+
+        /* Agent Topology UI */
+        .system-topology-details {{ background: #fff; border: 1px solid #dadce0; border-radius: 8px; padding: 16px; margin-top: 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }}
+        .system-topology-details > summary {{ font-size: 1.1em; font-weight: 500; cursor: pointer; outline: none; margin-bottom: 12px; list-style: none; display: flex; align-items: center; color: #3c4043; }}
+        .system-topology-details > summary::-webkit-details-marker {{ display: none; }}
+        .system-topology-details > summary::before {{ content: '▼'; font-size: 0.8em; margin-right: 8px; transition: transform 0.2s; }}
+        .system-topology-details:not([open]) > summary::before {{ transform: rotate(-90deg); }}
+
+        .topology-container {{ background: #f8f9fa; border-radius: 8px; padding: 16px; margin-top: 8px; border: 1px solid #dadce0; overflow-x: auto; }}
+        .agent-node {{ background: #fff; border: 1px solid #dadce0; border-radius: 8px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); min-width: 300px; max-width: 600px; }}
+        .agent-node-header {{ padding: 10px 16px; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 8px; background: #f1f3f4; border-top-left-radius: 8px; border-top-right-radius: 8px; }}
+        .agent-name {{ font-weight: 600; color: #1a73e8; }}
+        .agent-type {{ font-size: 11px; background: #e8eaed; padding: 2px 8px; border-radius: 12px; color: #5f6368; font-family: monospace; }}
+        .agent-node-body {{ padding: 12px 16px; font-size: 13px; color: #3c4043; }}
+        .agent-desc {{ margin-bottom: 8px; }}
+        .agent-inst details, .agent-tools details {{ margin-bottom: 8px; padding: 8px; }}
+        .agent-inst summary, .agent-tools summary {{ cursor: pointer; font-weight: 500; color: #5f6368; font-size: 12px; outline: none; margin-bottom: 0; }}
+        .inst-content, .tools-content {{ margin-top: 8px; padding: 8px; background: #f8f9fa; border-radius: 4px; border: 1px solid #eee; white-space: pre-wrap; word-wrap: break-word; font-family: monospace; font-size: 12px; max-height: 200px; overflow-y: auto; }}
+        .sub-agents-container {{ margin-top: 16px; padding-left: 24px; border-left: 2px solid #dadce0; position: relative; }}
+        .sub-agents-container::before {{ content: ''; position: absolute; top: -16px; left: -2px; width: 2px; height: 16px; background: #dadce0; }}
+
+        /* Multi-turn Agent Trace UI */
+        .conversation-trace-details {{ background: #fff; border: 1px solid #dadce0; border-radius: 8px; padding: 16px; margin-top: 0; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }}
+        .conversation-trace-details > summary {{ font-size: 1.1em; font-weight: 500; cursor: pointer; outline: none; margin-bottom: 8px; list-style: none; display: flex; align-items: center; color: #3c4043; }}
+        .conversation-trace-details > summary::-webkit-details-marker {{ display: none; }}
+        .conversation-trace-details > summary::before {{ content: '▼'; font-size: 0.8em; margin-right: 8px; transition: transform 0.2s; }}
+        .conversation-trace-details:not([open]) > summary::before {{ transform: rotate(-90deg); }}
+
+        .agent-timeline {{ position: relative; padding-left: 32px; margin-top: 16px; font-family: 'Roboto', sans-serif; }}
+        .agent-timeline::before {{ content: ''; position: absolute; top: 0; bottom: 0; left: 11px; width: 2px; background: #e8eaed; }}
+
+        .turn-details {{ margin-bottom: 16px; padding: 0; border: none; }}
+        .turn-summary {{ list-style: none; outline: none; cursor: pointer; display: block; margin-left: -32px; padding-left: 32px; }}
+        .turn-summary::-webkit-details-marker {{ display: none; }}
+        .turn-header {{ margin: 16px 0 16px -32px; position: relative; z-index: 1; display: inline-flex; align-items: center; }}
+
+        .turn-badge {{ display: inline-flex; align-items: center; background: #f8f9fa; color: #5f6368; padding: 4px 12px; border-radius: 16px; font-size: 11px; font-weight: 600; border: 1px solid #dadce0; letter-spacing: 0.5px; }}
+        .turn-divider {{ color: #dadce0; margin: 0 6px; font-weight: normal; }}
+        .turn-badge::before {{ content: '▼'; margin-right: 6px; font-size: 0.8em; display: inline-block; transition: transform 0.2s; }}
+        .turn-details:not([open]) .turn-badge::before {{ transform: rotate(-90deg); }}
+
+        .timeline-item {{ position: relative; margin-bottom: 16px; }}
+        .timeline-icon {{ position: absolute; left: -32px; top: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e8f0fe; border: 2px solid #fff; color: #1a73e8; z-index: 1; box-sizing: border-box; margin-left: 0; }}
+        .timeline-icon.user {{ background: #f3e8fd; color: #9334e6; }}
+        .timeline-icon.tool {{ background: #e6f4ea; color: #1e8e3e; }}
+        .timeline-content {{ background: #fff; border: 1px solid #dadce0; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden; }}
+        .event-header {{ padding: 12px 16px 8px; font-size: 12px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; }}
+        .event-author {{ color: #1a73e8; letter-spacing: 0.5px; text-transform: uppercase; }}
+        .event-author.user {{ color: #9334e6; }}
+        .event-author.tool {{ color: #1e8e3e; }}
+        .event-role {{ color: #80868b; font-weight: normal; font-size: 11px; font-family: monospace;}}
+        .event-body {{ padding: 0 16px 12px; font-size: 14px; color: #202124; line-height: 1.5; }}
+        .dark-code-block {{ background: #0e111a; color: #d4d4d4; padding: 12px; border-radius: 6px; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; margin: 8px 0 0 0; overflow-x: auto; border: 1px solid #3c4043; }}
+        .function-call-title {{ color: #e37400; font-weight: 600; font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 4px; }}
+        .function-response-title {{ color: #0f9d58; font-weight: 600; font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 4px; }}
+        .agent-trace-container {{ max-height: 600px; overflow-x: auto; overflow-y: auto; padding-right: 8px; border: 1px solid #eee; padding: 12px; border-radius: 8px; background: #fafafa; }}
+
+        /* Collapsible Metrics */
+        .metric-details {{ background: #fff; border: 1px solid #dadce0; border-radius: 8px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden; }}
+        .metric-summary {{ list-style: none; cursor: pointer; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; background: #f8f9fa; margin: 0; outline: none; }}
+        .metric-summary::-webkit-details-marker {{ display: none; }}
+        .metric-details[open] .metric-summary {{ border-bottom: 1px solid #dadce0; }}
+        .metric-name-wrapper {{ display: flex; align-items: center; font-weight: 600; color: #3c4043; font-size: 14px; }}
+        .metric-name-wrapper::before {{ content: '►'; font-size: 0.8em; margin-right: 8px; transition: transform 0.2s; color: #5f6368; }}
+        .metric-details[open] .metric-name-wrapper::before {{ transform: rotate(90deg); }}
+        .metric-score {{ font-weight: bold; font-size: 16px; color: #1a73e8; }}
+        .metric-body {{ padding: 16px; }}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Eval Comparison Report</h1>
+        <div id="summary-section"></div>
+        <div id="details-section"></div>
+    </div>
+    <script>
+        var vizData_vertex_eval_sdk = JSON.parse(new TextDecoder().decode(Uint8Array.from(atob("{payload_b64}"), c => c.charCodeAt(0))));
+
+        function formatToolDeclarations(toolDeclarations) {{
+            if (!toolDeclarations) return '';
+            let functions = [];
+            const builtins = [];
+
+            function collectFromTool(tool) {{
+                if (!tool || typeof tool !== 'object') return;
+                if (Array.isArray(tool.function_declarations) && tool.function_declarations.length > 0) {{
+                    functions = functions.concat(tool.function_declarations);
+                    return;
+                }}
+                if (tool.name && tool.parameters) {{
+                    functions.push(tool);
+                    return;
+                }}
+                Object.keys(tool).forEach(k => {{
+                    if (k === 'function_declarations') return;
+                    if (tool[k] === null || tool[k] === undefined) return;
+                    builtins.push(k);
+                }});
+            }}
+
+            if (Array.isArray(toolDeclarations)) {{
+                toolDeclarations.forEach(collectFromTool);
+            }} else if (typeof toolDeclarations === 'object') {{
+                if (toolDeclarations.function_declarations) {{
+                    functions = functions.concat(toolDeclarations.function_declarations);
+                }} else {{
+                    collectFromTool(toolDeclarations);
+                }}
+            }}
+
+            if (functions.length === 0 && builtins.length === 0) {{
+                 return `<pre class="raw-json-container">${{DOMPurify.sanitize(JSON.stringify(toolDeclarations, null, 2))}}</pre>`;
+            }}
+
+            let html = '<div class="tool-declarations-container">';
+            functions.forEach(func => {{
+                html += '<div class="tool-declaration">';
+                const params = func.parameters && func.parameters.properties ? func.parameters.properties : {{}};
+                const requiredParams = func.parameters && func.parameters.required ? new Set(func.parameters.required) : new Set();
+                const paramStrings = Object.keys(params).map(p => `${{DOMPurify.sanitize(p)}}: ${{DOMPurify.sanitize(params[p].type)}}`).join(', ');
+                html += `<strong>${{DOMPurify.sanitize(func.name)}}</strong>(${{paramStrings}})<br>`;
+                if(func.description) html += `<em>${{DOMPurify.sanitize(func.description)}}</em><br>`;
+                if(Object.keys(params).length > 0) html += 'Parameters:<br>';
+                Object.keys(params).forEach(p => {{
+                    html += `&nbsp;&nbsp;- ${{DOMPurify.sanitize(p)}}: ${{DOMPurify.sanitize(params[p].description || '')}} ${{requiredParams.has(p) ? '<strong>(required)</strong>' : ''}}<br>`;
+                }});
+                html += '</div>';
+            }});
+            builtins.forEach(name => {{
+                html += `<div class="tool-declaration"><strong>${{DOMPurify.sanitize(name)}}</strong> <em>(built-in tool)</em></div>`;
+            }});
+            html += '</div>';
+            return html;
+        }}
+
+        function formatSystemTopology(agents) {{
+            if (!agents || Object.keys(agents).length === 0) return '<p>No agent configurations provided.</p>';
+
+            const allSubAgents = new Set();
+            Object.values(agents).forEach(agent => {{
+                if (agent.sub_agents) {{
+                    agent.sub_agents.forEach(sa => allSubAgents.add(sa));
+                }}
+            }});
+
+            const roots = Object.keys(agents).filter(id => !allSubAgents.has(id));
+            if (roots.length === 0) {{
+                roots.push(Object.keys(agents)[0]);
+            }}
+
+            let html = '<div class="topology-container">';
+
+            const renderAgent = (agentId, visited) => {{
+                if (visited.has(agentId)) return '';
+                visited.add(agentId);
+
+                const agent = agents[agentId];
+                if (!agent) return '';
+
+                let nodeHtml = `<div class="agent-node">`;
+                nodeHtml += `<div class="agent-node-header">
+                               <span style="font-size:16px;">🤖</span>
+                               <span class="agent-name">${{DOMPurify.sanitize(agentId)}}</span>
+                               ${{agent.agent_type ? `<span class="agent-type">${{DOMPurify.sanitize(agent.agent_type)}}</span>` : ''}}
+                             </div>`;
+
+                nodeHtml += `<div class="agent-node-body">`;
+                if (agent.description) {{
+                    nodeHtml += `<div class="agent-desc"><strong>Role:</strong> ${{DOMPurify.sanitize(agent.description)}}</div>`;
+                }}
+                if (agent.instruction) {{
+                    nodeHtml += `<div class="agent-inst">
+                                    <details>
+                                        <summary>System Instructions</summary>
+                                        <div class="inst-content">${{DOMPurify.sanitize(agent.instruction)}}</div>
+                                    </details>
+                                 </div>`;
+                }}
+                if (agent.tools && agent.tools.length > 0) {{
+                    nodeHtml += `<div class="agent-tools">
+                                    <details>
+                                        <summary>Tools (${{agent.tools.length}})</summary>
+                                        <div class="tools-content" style="padding:0; border:none; background:transparent;">
+                                            ${{formatToolDeclarations(agent.tools)}}
+                                        </div>
+                                    </details>
+                                 </div>`;
+                }}
+
+                if (agent.sub_agents && agent.sub_agents.length > 0) {{
+                    nodeHtml += `<div class="sub-agents-container">`;
+                    agent.sub_agents.forEach(sa => {{
+                        nodeHtml += renderAgent(sa, new Set(visited));
+                    }});
+                    nodeHtml += `</div>`;
+                }}
+
+                nodeHtml += `</div></div>`;
+                return nodeHtml;
+            }};
+
+            roots.forEach(rootId => {{
+                html += renderAgent(rootId, new Set());
+            }});
+
+            html += '</div>';
+            return html;
+        }}
+
+        function formatAgentData(agentData) {{
+            let data = agentData;
+            if (typeof data === 'string') {{
+                try {{ data = JSON.parse(data); }} catch(e) {{ return ''; }}
+            }}
+            if (!data || !data.turns) return '';
+
+            let html = '<div class="agent-timeline">';
+            data.turns.forEach((turn, idx) => {{
+                const tIndex = turn.turn_index !== undefined ? turn.turn_index : (idx + 1);
+                const tId = turn.turn_id ? DOMPurify.sanitize(String(turn.turn_id)) : `turn-${{String(tIndex).padStart(3, '0')}}`;
+
+                html += `<details open class="turn-details">`;
+                html += `<summary class="turn-summary"><div class="turn-header"><span class="turn-badge">TURN ${{tIndex}} <span class="turn-divider">|</span> ID: ${{tId}}</span></div></summary>`;
+
+                if (turn.events) {{
+                    turn.events.forEach(event => {{
+                        const role = (event.content && event.content.role) ? event.content.role.toLowerCase() : 'model';
+                        const author = event.author ? event.author : role;
+
+                        let iconClass = 'model';
+                        if (role === 'user') iconClass = 'user';
+                        if (role === 'tool') iconClass = 'tool';
+
+                        let svgIcon = '';
+                        if (iconClass === 'user') {{
+                            svgIcon = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`;
+                        }} else if (iconClass === 'tool') {{
+                            svgIcon = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>`;
+                        }} else {{
+                            svgIcon = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"></rect><circle cx="12" cy="5" r="2"></circle><path d="M12 7v4"></path><line x1="8" y1="16" x2="8" y2="16"></line><line x1="16" y1="16" x2="16" y2="16"></line></svg>`;
+                        }}
+
+                        html += `<div class="timeline-item">
+                                    <div class="timeline-icon ${{iconClass}}">${{svgIcon}}</div>
+                                    <div class="timeline-content">
+                                        <div class="event-header">
+                                            <span class="event-author ${{iconClass}}">${{DOMPurify.sanitize(author)}}</span>
+                                            <span class="event-role">${{DOMPurify.sanitize(role)}}</span>
+                                        </div>
+                                        <div class="event-body">`;
+
+                        if (event.content && event.content.parts) {{
+                            event.content.parts.forEach(part => {{
+                                if (part.text) {{
+                                    html += `<div>${{DOMPurify.sanitize(marked.parse(String(part.text)))}}</div>`;
+                                }} else if (part.function_call) {{
+                                    const fnName = part.function_call.name;
+                                    const fnArgs = JSON.stringify(part.function_call.args, null, 2);
+                                    html += `<div class="function-call-title">&gt;_ Function Call: ${{DOMPurify.sanitize(fnName)}}</div>
+                                             <pre class="dark-code-block">${{DOMPurify.sanitize(fnArgs)}}</pre>`;
+                                }} else if (part.function_response) {{
+                                    const fnName = part.function_response.name;
+                                    let fnRes = part.function_response.response;
+                                    if(typeof fnRes === 'object' && fnRes !== null && fnRes.result !== undefined) {{
+                                        fnRes = fnRes.result;
+                                    }}
+                                    const fnResStr = JSON.stringify(fnRes, null, 2);
+                                    html += `<div class="function-response-title">
+                                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
+                                                Tool Output: ${{DOMPurify.sanitize(fnName)}}
+                                             </div>
+                                             <pre class="dark-code-block">${{DOMPurify.sanitize(fnResStr)}}</pre>`;
+                                }}
+                            }});
+                        }} else {{
+                             html += `<div><pre class="raw-json-container">${{DOMPurify.sanitize(JSON.stringify(event.content, null, 2))}}</pre></div>`;
+                        }}
+
+                        html += `</div></div></div>`;
+                    }});
+                }}
+                html += `</details>`;
+            }});
+            html += '</div>';
+            return html;
+        }}
+
+        function renderSummary(summaryMetrics, metadata) {{
+            const container = document.getElementById('summary-section');
+            if (!summaryMetrics || summaryMetrics.length === 0) {{ container.innerHTML = '<h2>Summary Metrics</h2><p>No summary metrics.</p>'; return; }}
+            const candidateNames = (metadata.candidate_names && metadata.candidate_names.length) ? metadata.candidate_names : null;
+            let table = '<h2>Summary Metrics</h2><table><thead><tr><th>Metric</th><th>Mean Score</th><th>Std Dev</th><th>Win/Tie Rates</th></tr></thead><tbody>';
+            summaryMetrics.forEach(m => {{
+                let winRateText = 'N/A';
+                if (m.win_rates) {{
+                    winRateText = m.win_rates.map((rate, i) => `<b>${{candidateNames ? candidateNames[i] : `Candidate #${{i+1}}`}}</b> wins: <b>${{(rate * 100).toFixed(1)}}%</b>`).join('<br>');
+                    if (m.tie_rate !== undefined) {{ winRateText += `<br>Ties: <b>${{(m.tie_rate * 100).toFixed(1)}}%</b>`; }}
+                }}
+                table += `<tr><td>${{m.metric_name}}</td><td>${{m.mean_score.toFixed(4)}}</td><td>${{m.stdev_score.toFixed(4)}}</td><td>${{winRateText}}</td></tr>`;
+            }});
+            container.innerHTML = table + '</tbody></table>';
+        }}
+
+        function renderDetails(caseResults, metadata) {{
+            const container = document.getElementById('details-section');
+            container.innerHTML = '<h2>Detailed Comparison</h2>';
+            if (!caseResults || caseResults.length === 0) {{ container.innerHTML += '<p>No detailed results.</p>'; return; }}
+
+            const datasetRows = metadata.dataset || [];
+            const candidateNames = (metadata.candidate_names && metadata.candidate_names.length) ? metadata.candidate_names : null;
+
+            caseResults.forEach((caseResult, i) => {{
+                const original_case = datasetRows[caseResult.eval_case_index] || {{}};
+                const isValEmpty = (val) => !val || val === 'None' || val === 'nan' || String(val).trim() === '';
+
+                const promptText = isValEmpty(original_case.prompt_display_text) ? '' : original_case.prompt_display_text;
+                const promptJson = original_case.prompt_raw_json;
+                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 = `<details open><summary>Case #${{caseResult.eval_case_index}}</summary>`;
+
+                if (agentData && agentData.agents && Object.keys(agentData.agents).length > 0) {{
+                    card += `<details open class="system-topology-details">
+                                <summary>System Topology</summary>
+                                ${{formatSystemTopology(agentData.agents)}}
+                             </details>`;
+                }}
+
+                if (promptText) {{
+                    card += `<div class="prompt-container"><strong>Prompt:</strong><br>${{DOMPurify.sanitize(marked.parse(String(promptText)))}}</div>`;
+                }}
+
+                if (promptJson && promptJson !== '""' && promptJson !== 'null' && promptJson !== '{{}}') {{
+                    card += `<details class="raw-json-details"><summary>View Raw Prompt JSON</summary><pre class="raw-json-container">${{DOMPurify.sanitize(promptJson)}}</pre></details>`;
+                }}
+
+                let hasTrace = agentData && agentData.turns;
+                let hasRef = !!reference;
+
+                if (hasTrace || hasRef) {{
+                    card += `<div style="display: flex; gap: 1rem; margin-top: 16px; margin-bottom: 16px;">`;
+
+                    if (hasTrace) {{
+                        let traceContent = formatAgentData(agentData);
+                        card += `<div style="flex: 1; min-width: 0;">
+                                     <details open class="conversation-trace-details" style="margin: 0; height: 100%;">
+                                        <summary>Conversation Trace</summary>
+                                        <div style="font-size:13px; color:#5f6368; margin-bottom:12px;">Sequence of multi-agent events across turns</div>
+                                        <div class="agent-trace-container">${{traceContent}}</div>
+                                     </details>
+                                 </div>`;
+                    }}
+
+                    if (hasRef) {{
+                        card += `<div style="flex: 1; min-width: 0;">`;
+                        if (isRefAgentData) {{
+                            let refTraceContent = formatAgentData(refAgentDataObj);
+                            card += `<details open class="conversation-trace-details" style="margin: 0; height: 100%;">
+                                        <summary>Reference</summary>
+                                        <div style="font-size:13px; color:#5f6368; margin-bottom:12px;">Sequence of multi-agent events across turns</div>
+                                        <div class="agent-trace-container">${{refTraceContent}}</div>
+                                     </details>`;
+                        }} else {{
+                            card += `<div class="reference-container" style="margin: 0; height: 100%;"><strong>Reference</strong><br>${{DOMPurify.sanitize(marked.parse(String(reference)))}}</div>`;
+                        }}
+                        card += `</div>`;
+                    }}
+
+                    card += `</div>`;
+                }}
+
+                card += `<div class="responses-grid">`;
+
+                (caseResult.response_candidate_results || []).forEach((candidate, j) => {{
+                    const candidateName = candidateNames ? candidateNames[j] : `Candidate #${{j + 1}}`;
+                    const displayText = isValEmpty(candidate.display_text) ? '' : candidate.display_text;
+                    const rawJsonResponse = candidate.raw_json;
+
+                    card += `<div class="response-column"><h4>${{candidateName}}</h4>`;
+
+                    if (displayText) {{
+                        card += `<div class="response-text-container">${{DOMPurify.sanitize(marked.parse(String(displayText)))}}</div>`;
+                    }}
+
+                    if (rawJsonResponse && rawJsonResponse !== '""' && rawJsonResponse !== 'null' && rawJsonResponse !== '{{}}') {{
+                        card += `<details class="raw-json-details"><summary>View Raw Response JSON</summary><pre class="raw-json-container">${{DOMPurify.sanitize(rawJsonResponse)}}</pre></details>`;
+                    }}
+
+                    card += `<h5 style="margin-top: 16px; margin-bottom: 8px; font-size: 1.1em; color: #3c4043;">Metrics</h5><div class="metrics-list">`;
+                    Object.entries(candidate.metric_results || {{}}).forEach(([name, val]) => {{
+                        let explanationHandled = false;
+                        let bubbles = '';
+
+                        if (val.rubric_verdicts && val.rubric_verdicts.length > 0) {{
+                            bubbles += '<div class="rubric-bubble-container" style="margin-top: 8px;">';
+                            val.rubric_verdicts.forEach(verdict => {{
+                                const rubricDescription = verdict.evaluated_rubric && verdict.evaluated_rubric.content && verdict.evaluated_rubric.content.property ? verdict.evaluated_rubric.content.property.description : 'N/A';
+                                const verdictText = verdict.verdict ? '<span class="pass">Pass</span>' : '<span class="fail">Fail</span>';
+                                const verdictJson = JSON.stringify(verdict, null, 2);
+                                bubbles += `
+                                    <details class="rubric-details">
+                                        <summary class="rubric-bubble">${{verdictText}}: ${{DOMPurify.sanitize(rubricDescription)}}</summary>
+                                        <pre class="raw-json-container">${{DOMPurify.sanitize(verdictJson)}}</pre>
+                                    </details>`;
+                            }});
+                            bubbles += '</div>';
+                        }}
+
+                        let scoreDisplay = val.score != null ? val.score.toFixed(2) : 'N/A';
+                        let metricContent = '';
+
+                        if (val.explanation && !explanationHandled) {{
+                            metricContent += `<div class="explanation" style="margin-top:0; margin-bottom: 12px;">${{DOMPurify.sanitize(marked.parse(String(val.explanation)))}}</div>`;
+                        }}
+                        if (bubbles) {{
+                            metricContent += bubbles;
+                        }}
+                        if (!metricContent) {{
+                            metricContent = `<div style="color: #80868b; font-style: italic; font-size: 13px;">No additional details.</div>`;
+                        }}
+
+                        card += `
+                            <details class="metric-details" open>
+                                <summary class="metric-summary">
+                                    <div class="metric-name-wrapper">${{DOMPurify.sanitize(name)}}</div>
+                                    <div class="metric-score">${{DOMPurify.sanitize(scoreDisplay)}}</div>
+                                </summary>
+                                <div class="metric-body">
+                                    ${{metricContent}}
+                                </div>
+                            </details>
+                        `;
+                    }});
+                    card += '</div></div>';
+                }});
+                container.innerHTML += card + '</div></details>';
+            }});
+        }}
+        renderSummary(vizData_vertex_eval_sdk.summary_metrics, vizData_vertex_eval_sdk.metadata);
+        renderDetails(vizData_vertex_eval_sdk.eval_case_results, vizData_vertex_eval_sdk.metadata);
+    </script>
+</body>
+</html>
+"""
+    )
+
+
+def get_inference_html(dataframe_json: str) -> str:
+    """Returns a self-contained HTML for displaying inference results."""
+    payload_b64 = _encode_to_base64(dataframe_json)
+    return textwrap.dedent(
+        f"""
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Evaluation Dataset</title>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+    <style>
+        body {{ font-family: 'Roboto', sans-serif; margin: 2em; background-color: #f8f9fa; color: #202124;}}
+        .container {{ max-width: 95%; margin: 20px auto; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }}
+        h1 {{ color: #3c4043; border-bottom: 2px solid #4285F4; padding-bottom: 8px; }}
+        table {{ border-collapse: collapse; width: 100%; table-layout: fixed; }}
+        th, td {{ border: 1px solid #dadce0; padding: 12px; text-align: left; vertical-align: top; }}
+        th {{ background-color: #f2f2f2; font-weight: 500;}}
+        td > div {{ white-space: pre-wrap; word-wrap: break-word; max-height: 400px; overflow-y: auto; overflow-wrap: break-word; }}
+        .raw-json-details summary {{ font-size: 0.9em; cursor: pointer; color: #5f6368; }}
+        .raw-json-container {{ white-space: pre-wrap; word-wrap: break-word; max-height: 300px; overflow-y: auto; background-color: #f1f1f1; padding: 10px; border-radius: 4px; margin-top: 8px; }}
+        .rubric-group-title {{ font-weight: bold; margin-bottom: 10px; display: block; }}
+        .rubric-bubble-container {{ display: flex; flex-wrap: wrap; gap: 8px; }}
+        .rubric-details {{ border: none; padding: 0; margin: 0; }}
+        .rubric-bubble {{
+            display: inline-flex;
+            align-items: center;
+            background-color: #e8f0fe;
+            color: #1967d2;
+            border-radius: 16px;
+            padding: 8px 12px;
+            font-size: 0.9em;
+            cursor: pointer;
+            list-style: none; /* Hide default marker in Safari */
+        }}
+        .rubric-bubble::-webkit-details-marker {{ display: none; }} /* Hide default marker in Chrome */
+        .rubric-bubble::before {{
+            content: '►';
+            margin-right: 8px;
+            font-size: 0.8em;
+            transition: transform 0.2s;
+        }}
+        .rubric-details[open] > .rubric-bubble::before {{
+            transform: rotate(90deg);
+        }}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Evaluation Dataset</h1>
+        <div id="results-table"></div>
+    </div>
+    <script>
+        var vizData_vertex_eval_sdk = JSON.parse(new TextDecoder().decode(Uint8Array.from(atob("{payload_b64}"), c => c.charCodeAt(0))));
+        var container_vertex_eval_sdk = document.getElementById('results-table');
+
+        function renderRubrics(cellValue) {{
+            let content = '';
+            let rubricData = cellValue;
+            if (typeof rubricData === 'string') {{
+                try {{
+                    rubricData = JSON.parse(rubricData);
+                }} catch (e) {{
+                    console.error("Error parsing rubric_groups JSON:", e, rubricData);
+                    return `<div>Error parsing rubrics.</div>`;
+                }}
+            }}
+
+            if (typeof rubricData !== 'object' || rubricData === null) {{
+                 return `<div>Invalid rubric data.</div>`;
+            }}
+
+            for (const groupName in rubricData) {{
+                const rubrics = rubricData[groupName];
+                content += `<div class="rubric-group-title">${{groupName}}</div>`;
+                if (Array.isArray(rubrics) && rubrics.length > 0) {{
+                    content += '<div class="rubric-bubble-container">';
+                    rubrics.forEach((rubric, index) => {{
+                        const rubricJson = JSON.stringify(rubric, null, 2);
+                        const description = rubric.content && rubric.content.property ? rubric.content.property.description : 'N/A';
+                        content += `
+                            <details class="rubric-details">
+                                <summary class="rubric-bubble">${{DOMPurify.sanitize(description)}}</summary>
+                                <pre class="raw-json-container">${{DOMPurify.sanitize(rubricJson)}}</pre>
+                            </details>`;
+                    }});
+                    content += '</div>';
+                }}
+            }}
+            return `<div>${{content}}</div>`;
+        }}
+
+        function renderCell(cellValue, header) {{
+            let cellContent = '';
+            if (header === 'rubric_groups') {{
+                return `<td>${{renderRubrics(cellValue)}}</td>`;
+            }}
+
+            if (cellValue && typeof cellValue === 'object' && cellValue.display_text !== undefined) {{
+                cellContent += `<div>${{DOMPurify.sanitize(marked.parse(String(cellValue.display_text)))}}</div>`;
+                if (cellValue.raw_json) {{
+                    cellContent += `<details class="raw-json-details"><summary>View Raw JSON</summary><pre class="raw-json-container">${{DOMPurify.sanitize(cellValue.raw_json)}}</pre></details>`;
+                }}
+            }} else {{
+                const cellDisplay = cellValue === null || cellValue === undefined ? '' : String(cellValue);
+                cellContent = `<div>${{DOMPurify.sanitize(marked.parse(cellDisplay))}}</div>`;
+            }}
+            return `<td>${{cellContent}}</td>`;
+        }}
+
+        if (!vizData_vertex_eval_sdk || vizData_vertex_eval_sdk.length === 0) {{ container_vertex_eval_sdk.innerHTML = "<p>No data.</p>"; }}
+        else {{
+            let table = '<table><thead><tr>';
+            const headers = Object.keys(vizData_vertex_eval_sdk[0] || {{}});
+            headers.forEach(h => table += `<th>${{h}}</th>`);
+            table += '</tr></thead><tbody>';
+            vizData_vertex_eval_sdk.forEach(row => {{
+                table += '<tr>';
+                headers.forEach(header => {{
+                    table += renderCell(row[header], header);
+                }});
+                table += '</tr>';
+            }});
+            container_vertex_eval_sdk.innerHTML = table + '</tbody></table>';
+        }}
+    </script>
+</body>
+</html>
+"""
+    )
+
+
+def display_evaluation_result(
+    eval_result_obj: types.EvaluationResult,
+    candidate_names: Optional[list[str]] = None,
+) -> None:
+    """Displays evaluation result in an IPython environment."""
+    if not _is_ipython_env():
+        logger.warning("Skipping display: not in an IPython environment.")
+        return
+    else:
+        from IPython import display
+
+    try:
+        result_dump = eval_result_obj.model_dump(
+            mode="json", exclude_none=True, exclude={"evaluation_dataset"}
+        )
+    except errors.PydanticSerializationError as e:
+        logger.error(
+            "Serialization Error: %s\nCould not display the evaluation "
+            "result due to a data serialization issue. Please check the "
+            "content of the EvaluationResult object.",
+            e,
+        )
+        return
+    except Exception as e:
+        logger.error("Failed to serialize EvaluationResult: %s", e, exc_info=True)
+        raise
+
+    input_dataset_list = eval_result_obj.evaluation_dataset
+    is_comparison = input_dataset_list and len(input_dataset_list) > 1
+
+    metadata_payload = result_dump.get("metadata", {})
+    metadata_payload["candidate_names"] = candidate_names or metadata_payload.get(
+        "candidate_names"
+    )
+
+    if is_comparison and input_dataset_list:
+        if input_dataset_list[0]:
+            metadata_payload["dataset"] = _extract_dataset_rows(input_dataset_list[0])
+
+        if "eval_case_results" in result_dump:
+            for case_res in result_dump["eval_case_results"]:
+                for resp_idx, cand_res in enumerate(
+                    case_res.get("response_candidate_results", [])
+                ):
+                    if (
+                        input_dataset_list is not None
+                        and resp_idx < len(input_dataset_list)
+                        and input_dataset_list[resp_idx]
+                    ):
+                        rows = _extract_dataset_rows(input_dataset_list[resp_idx])
+                        case_idx = case_res.get("eval_case_index")
+                        if case_idx is not None and case_idx < len(rows):
+                            original_case = rows[case_idx]
+                            cand_res["display_text"] = original_case[
+                                "response_display_text"
+                            ]
+                            cand_res["raw_json"] = original_case["response_raw_json"]
+
+        win_rates = eval_result_obj.win_rates if eval_result_obj.win_rates else {}
+        if "summary_metrics" in result_dump:
+            for summary in result_dump["summary_metrics"]:
+                if summary.get("metric_name") in win_rates:
+                    summary.update(win_rates[summary["metric_name"]])
+
+        result_dump["metadata"] = metadata_payload
+        html_content = get_comparison_html(json.dumps(result_dump))
+    else:
+        single_dataset = input_dataset_list[0] if input_dataset_list else None
+        processed_rows = []
+        if single_dataset is not None:
+            processed_rows = _extract_dataset_rows(single_dataset)
+            metadata_payload["dataset"] = processed_rows
+
+            if "eval_case_results" in result_dump and processed_rows:
+                for case_res in result_dump["eval_case_results"]:
+                    case_idx = case_res.get("eval_case_index")
+                    if (
+                        case_idx is not None
+                        and case_idx < len(processed_rows)
+                        and case_res.get("response_candidate_results")
+                    ):
+                        original_case = processed_rows[case_idx]
+                        cand_res = case_res["response_candidate_results"][0]
+                        cand_res["display_text"] = original_case[
+                            "response_display_text"
+                        ]
+                        cand_res["raw_json"] = original_case["response_raw_json"]
+
+        result_dump["metadata"] = metadata_payload
+        html_content = get_evaluation_html(json.dumps(result_dump))
+
+    display.display(display.HTML(html_content))
+
+
+def display_evaluation_dataset(eval_dataset_obj: types.EvaluationDataset) -> None:
+    """Displays an evaluation dataset in an IPython environment."""
+    if not _is_ipython_env():
+        logger.warning("Skipping display: not in an IPython environment.")
+        return
+    else:
+        from IPython import display
+
+    df = eval_dataset_obj.eval_dataset_df
+
+    # Fall back to eval_cases when eval_dataset_df is not populated (e.g.
+    # when the dataset was constructed manually with eval_cases).
+    if df is None or df.empty:
+        if eval_dataset_obj.eval_cases:
+            df = _evals_common._eval_cases_to_dataframe(eval_dataset_obj.eval_cases)
+        if df is None or df.empty:
+            logger.warning("No inference data to display.")
+            return
+
+    processed_rows = []
+
+    for _, row in df.iterrows():
+        processed_row = {}
+        for col_name, cell_value in row.items():
+            if col_name in ["prompt", "request", "response"]:
+                processed_row[col_name] = _extract_text_and_raw_json(cell_value)
+            elif col_name == "rubric_groups":
+                # Special handling for rubric_groups to keep it as a dict
+                if isinstance(cell_value, dict):
+                    processed_row[col_name] = {
+                        k: [  # type: ignore[misc]
+                            (
+                                v_item.model_dump(mode="json")
+                                if hasattr(v_item, "model_dump")
+                                else v_item
+                            )
+                            for v_item in v
+                        ]
+                        for k, v in cell_value.items()
+                    }
+                else:
+                    processed_row[col_name] = cell_value
+            else:
+                if isinstance(cell_value, (dict, list)):
+                    processed_row[col_name] = json.dumps(  # type: ignore[assignment]
+                        cell_value, ensure_ascii=False, default=_pydantic_serializer
+                    )
+                else:
+                    processed_row[col_name] = cell_value
+        processed_rows.append(processed_row)
+
+    dataframe_json_string = json.dumps(processed_rows, ensure_ascii=False, default=str)
+    html_content = get_inference_html(dataframe_json_string)
+    display.display(display.HTML(html_content))
+
+
+def get_loss_analysis_html(loss_analysis_json: str) -> str:
+    """Returns self-contained HTML for loss pattern analysis visualization."""
+    payload_b64 = _encode_to_base64(loss_analysis_json)
+    return textwrap.dedent(
+        f"""
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Loss Pattern Analysis</title>
+    <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+    <style>
+        body {{ font-family: 'Roboto', 'Helvetica', sans-serif; margin: 2em; background-color: #f8f9fa; color: #202124; }}
+        .container {{ max-width: 1200px; margin: 20px auto; padding: 20px; background-color: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }}
+        h1, h2, h3 {{ color: #3c4043; }}
+        h1 {{ border-bottom: 2px solid #4285F4; padding-bottom: 8px; }}
+        h2 {{ border-bottom: 1px solid #dadce0; padding-bottom: 8px; }}
+        table {{ border-collapse: collapse; width: 100%; margin: 1em 0; }}
+        th, td {{ border: 1px solid #dadce0; padding: 12px; text-align: left; vertical-align: top; }}
+        th {{ background-color: #f2f2f2; font-weight: 500; }}
+        details {{ border: 1px solid #dadce0; border-radius: 8px; padding: 16px; margin-bottom: 16px; background: #fff; }}
+        summary {{ font-weight: 500; font-size: 1.1em; cursor: pointer; }}
+
+        .metric-header {{ display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }}
+        .metric-label {{ color: #1a73e8; font-weight: 600; font-size: 1.1em; }}
+        .candidate-label {{ color: #5f6368; font-size: 0.95em; }}
+        .item-count {{ font-weight: bold; font-size: 16px; color: #1a73e8; }}
+
+        .cluster-card {{ background: #fff; border: 1px solid #dadce0; border-radius: 8px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden; }}
+        .cluster-summary {{ list-style: none; cursor: pointer; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; background: #f8f9fa; margin: 0; outline: none; }}
+        .cluster-summary::-webkit-details-marker {{ display: none; }}
+        .cluster-card[open] .cluster-summary {{ border-bottom: 1px solid #dadce0; }}
+
+        .cluster-name {{ display: flex; align-items: center; font-weight: 600; color: #3c4043; font-size: 14px; }}
+        .cluster-name::before {{ content: '\\25B6'; font-size: 0.8em; margin-right: 8px; transition: transform 0.2s; color: #5f6368; }}
+        .cluster-card[open] .cluster-name::before {{ transform: rotate(90deg); }}
+
+        .l1-pill {{ display: inline-block; background-color: #e8f0fe; color: #1967d2; border-radius: 16px; padding: 2px 10px; font-size: 0.85em; font-weight: 500; margin-right: 6px; }}
+        .cluster-body {{ padding: 16px; }}
+        .cluster-description {{ color: #5f6368; font-size: 0.95em; margin-bottom: 12px; line-height: 1.5; }}
+
+        .example-card {{ background: #f8f9fa; border: 1px solid #eee; border-radius: 6px; padding: 12px; margin-bottom: 8px; }}
+        .example-label {{ font-weight: 600; font-size: 0.9em; color: #3c4043; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #eee; }}
+        .example-scenario {{ background: #e8f0fe; border-radius: 6px; padding: 8px 12px; margin: 6px 0; font-size: 0.9em; color: #1967d2; display: flex; align-items: flex-start; gap: 6px; }}
+        .example-scenario-icon {{ flex-shrink: 0; margin-top: 1px; }}
+        .example-scenario-text {{ word-break: break-word; }}
+        .example-rubric {{ display: inline-block; background-color: #fce8e6; color: #c5221f; border-radius: 12px; padding: 2px 10px; font-size: 0.85em; font-weight: 500; margin-right: 6px; margin-bottom: 4px; }}
+        .example-rationale {{ color: #5f6368; font-size: 0.9em; line-height: 1.5; margin-top: 6px; background: #f1f1f1; padding: 8px 12px; border-radius: 4px; white-space: pre-wrap; word-wrap: break-word; }}
+        .example-section-label {{ font-size: 0.8em; font-weight: 500; color: #5f6368; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; margin-top: 8px; }}
+        .rubric-description {{ color: #5f6368; font-size: 0.9em; margin: 4px 0 6px 0; line-height: 1.4; }}
+        .examples-details {{ border: none; padding: 0; margin-top: 8px; }}
+        .examples-details > summary {{ font-size: 0.95em; color: #1a73e8; cursor: pointer; }}
+        .no-data {{ color: #5f6368; font-style: italic; padding: 16px; text-align: center; }}
+    </style>
+</head>
+<body>
+<div class="container">
+<div id="loss-analysis-root"></div>
+</div>
+<script>
+(function() {{
+    var data = JSON.parse(new TextDecoder().decode(Uint8Array.from(atob("{payload_b64}"), c => c.charCodeAt(0))));
+
+    const root = document.getElementById('loss-analysis-root');
+    const results = data.results || [];
+
+    if (results.length === 0) {{
+        root.innerHTML = '<h1>Loss Pattern Analysis</h1><p class="no-data">No loss analysis results found.</p>';
+        return;
+    }}
+
+    let html = '<h1>Loss Pattern Analysis</h1>';
+
+    // Summary table
+    if (results.length > 0) {{
+        html += '<h2>Analysis Summary</h2><table><thead><tr><th>Metric</th><th>Candidate</th><th>Clusters</th><th>Total Failed Items</th></tr></thead><tbody>';
+        results.forEach(r => {{
+            const cfg = r.config || {{}};
+            const clusters = r.clusters || [];
+            const totalItems = clusters.reduce((sum, c) => sum + (c.item_count || 0), 0);
+            html += '<tr>';
+            html += '<td>' + DOMPurify.sanitize(cfg.metric || 'N/A') + '</td>';
+            html += '<td>' + DOMPurify.sanitize(cfg.candidate || 'N/A') + '</td>';
+            html += '<td>' + clusters.length + '</td>';
+            html += '<td class="item-count">' + totalItems + '</td>';
+            html += '</tr>';
+        }});
+        html += '</tbody></table>';
+    }}
+
+    // Per-result detail sections
+    results.forEach((r, ri) => {{
+        const cfg = r.config || {{}};
+        const clusters = r.clusters || [];
+        const totalItems = clusters.reduce((sum, c) => sum + (c.item_count || 0), 0);
+
+        html += '<h2>';
+        html += '<span class="metric-label">' + DOMPurify.sanitize(cfg.metric || 'Unknown Metric') + '</span>';
+        if (cfg.candidate) html += ' <span class="candidate-label">/ ' + DOMPurify.sanitize(cfg.candidate) + '</span>';
+        html += '</h2>';
+
+        if (clusters.length === 0) {{
+            html += '<p class="no-data">No loss clusters found for this metric.</p>';
+            return;
+        }}
+
+        // Sort clusters by item_count descending
+        clusters.sort((a, b) => (b.item_count || 0) - (a.item_count || 0));
+
+        // Cluster detail cards
+        clusters.forEach((c, ci) => {{
+            const entry = c.taxonomy_entry || {{}};
+            const examples = c.examples || [];
+            const isFirst = ci === 0;
+            const count = c.item_count || 0;
+            const pct = totalItems > 0 ? Math.round(count / totalItems * 100) : 0;
+
+            html += '<details class="cluster-card"' + (isFirst ? ' open' : '') + '>';
+            html += '<summary class="cluster-summary">';
+            html += '<div class="cluster-name">';
+            html += '<span class="l1-pill">' + DOMPurify.sanitize(entry.l1_category || '') + '</span> ';
+            html += DOMPurify.sanitize(entry.l2_category || 'Cluster ' + (ci + 1));
+            html += '</div>';
+            html += '<span class="item-count">' + count + ' items (' + pct + '%)</span>';
+            html += '</summary>';
+
+            html += '<div class="cluster-body">';
+
+            if (entry.description) {{
+                html += '<div class="cluster-description">' + DOMPurify.sanitize(entry.description) + '</div>';
+            }}
+
+            // Examples section
+            if (examples.length > 0) {{
+                const exLabel = examples.length < count
+                    ? 'Examples (' + examples.length + ' of ' + count + ')'
+                    : 'Examples (' + examples.length + ')';
+                html += '<details class="examples-details">';
+                html += '<summary>' + exLabel + '</summary>';
+                html += '<div style="margin-top: 8px;">';
+                examples.forEach((ex, ei) => {{
+                    html += '<div class="example-card">';
+                    html += '<div class="example-label">Example ' + (ei + 1) + '</div>';
+                    const scenario = (ex.evaluation_result && ex.evaluation_result.scenario_preview) || extractScenarioPreview(ex);
+                    if (scenario) {{
+                        html += '<div class="example-section-label">Scenario</div>';
+                        html += '<div class="example-scenario">';
+                        html += '<span class="example-scenario-icon">';
+                        html += '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>';
+                        html += '</span>';
+                        html += '<span class="example-scenario-text">' + DOMPurify.sanitize(scenario) + '</span>';
+                        html += '</div>';
+                    }}
+                    const rubrics = ex.failed_rubrics || [];
+                    if (rubrics.length > 0) {{
+                        html += '<div class="example-section-label">Failed Rubrics</div>';
+                        html += '<div style="margin-top: 4px;">';
+                        const rubricDescMap = (ex.evaluation_result && ex.evaluation_result.rubric_descriptions) || {{}};
+                        rubrics.forEach(fr => {{
+                            const rubricDesc = fr.rubric_id ? (rubricDescMap[fr.rubric_id] || lookupRubricDescription(ex, fr.rubric_id)) : null;
+                            if (rubricDesc) {{
+                                html += '<div class="rubric-description"><span class="example-rubric">Fail</span> ' + DOMPurify.sanitize(rubricDesc) + '</div>';
+                            }} else if (fr.rubric_id) {{
+                                html += '<div class="rubric-description"><span class="example-rubric">Fail</span> ' + DOMPurify.sanitize(fr.rubric_id) + '</div>';
+                            }}
+                            if (fr.classification_rationale) {{
+                                html += '<div class="example-section-label" style="margin-top: 6px;">Rationale</div>';
+                                html += '<div class="example-rationale">' + DOMPurify.sanitize(fr.classification_rationale) + '</div>';
+                            }}
+                        }});
+                        html += '</div>';
+                    }}
+                    html += '</div>';
+                }});
+                html += '</div></details>';
+            }}
+
+            html += '</div></details>';
+        }});
+    }});
+
+    root.innerHTML = html;
+
+    function lookupRubricDescription(ex, rubricId) {{
+        // Look up the rubric description from evaluation_result.candidate_results
+        // by matching rubric_id in rubric_verdicts.evaluated_rubric.
+        // Handles both snake_case (SDK-side) and camelCase (API echo-back) keys.
+        const er = ex.evaluation_result;
+        if (!er) return null;
+        const candidateResults = er.candidate_results || er.candidateResults;
+        if (!candidateResults) return null;
+        for (const cr of candidateResults) {{
+            const verdicts = cr.rubric_verdicts || cr.rubricVerdicts || [];
+            for (const v of verdicts) {{
+                const evalRubric = v.evaluated_rubric || v.evaluatedRubric;
+                if (!evalRubric) continue;
+                const rid = evalRubric.rubric_id || evalRubric.rubricId;
+                if (rid === rubricId) {{
+                    const content = evalRubric.content;
+                    if (content) {{
+                        if (content.property && content.property.description) {{
+                            return content.property.description;
+                        }}
+                        if (content.text) return content.text;
+                    }}
+                }}
+            }}
+        }}
+        return null;
+    }}
+
+    function extractScenarioPreview(ex) {{
+        // Extract the first user message from evaluation_result as a scenario preview.
+        // Handles both snake_case (SDK-side) and camelCase (API echo-back) keys.
+        const er = ex.evaluation_result;
+        if (!er) return null;
+        const req = er.request;
+        if (!req) return null;
+        const prompt = req.prompt;
+
+        // Helper: extract first user text from agent_data turns
+        function firstUserText(agentData) {{
+            if (!agentData || !agentData.turns) return null;
+            for (const turn of agentData.turns) {{
+                if (!turn.events) continue;
+                for (const event of turn.events) {{
+                    const role = event.author || (event.content && event.content.role) || '';
+                    if (role.toLowerCase() === 'user' && event.content && event.content.parts) {{
+                        for (const part of event.content.parts) {{
+                            if (part.text) {{
+                                const text = part.text.trim();
+                                return text.length > 150 ? text.substring(0, 150) + '...' : text;
+                            }}
+                        }}
+                    }}
+                }}
+            }}
+            return null;
+        }}
+
+        if (prompt) {{
+            // Path 1: prompt.agent_data.turns (LRO inline results path)
+            const agentData = prompt.agent_data || prompt.agentData;
+            const fromPromptAgent = firstUserText(agentData);
+            if (fromPromptAgent) return fromPromptAgent;
+
+            // Path 2: prompt.user_scenario.starting_prompt (eval run path)
+            const scenario = prompt.user_scenario || prompt.userScenario;
+            if (scenario) {{
+                const sp = scenario.starting_prompt || scenario.startingPrompt;
+                if (sp) {{
+                    const text = sp.trim();
+                    return text.length > 150 ? text.substring(0, 150) + '...' : text;
+                }}
+            }}
+
+            // Path 3: prompt.parts[].text (simple prompt path)
+            if (prompt.parts) {{
+                for (const part of prompt.parts) {{
+                    if (part.text) {{
+                        const text = part.text.trim();
+                        return text.length > 150 ? text.substring(0, 150) + '...' : text;
+                    }}
+                }}
+            }}
+        }}
+
+        // Path 4: candidate_responses[].agent_data.turns (eval run path -
+        // agent_data is on the candidate response, not the prompt)
+        const crs = req.candidate_responses || req.candidateResponses;
+        if (crs) {{
+            for (const cr of crs) {{
+                const ad = cr.agent_data || cr.agentData;
+                const fromCr = firstUserText(ad);
+                if (fromCr) return fromCr;
+            }}
+        }}
+
+        return null;
+    }}
+}})();
+</script>
+</body>
+</html>
+"""
+    )
+
+
+def display_loss_clusters_response(
+    response_obj: "types.GenerateLossClustersResponse",
+) -> None:
+    """Displays a GenerateLossClustersResponse in an IPython environment."""
+    if not _is_ipython_env():
+        logger.warning("Skipping display: not in an IPython environment.")
+        return
+    else:
+        from IPython import display
+
+    try:
+        result_dump = response_obj.model_dump(mode="json", exclude_none=True)
+    except Exception as e:
+        logger.error(
+            "Failed to serialize GenerateLossClustersResponse: %s",
+            e,
+            exc_info=True,
+        )
+        raise
+
+    html_content = get_loss_analysis_html(
+        json.dumps(result_dump, ensure_ascii=False, default=_pydantic_serializer)
+    )
+    display.display(display.HTML(html_content))
+
+
+def display_loss_analysis_result(
+    result_obj: "types.LossAnalysisResult",
+) -> None:
+    """Displays a single LossAnalysisResult in an IPython environment."""
+    if not _is_ipython_env():
+        logger.warning("Skipping display: not in an IPython environment.")
+        return
+    else:
+        from IPython import display
+
+    try:
+        # Wrap in a response-like structure for the shared HTML generator
+        wrapped = {"results": [result_obj.model_dump(mode="json", exclude_none=True)]}
+    except Exception as e:
+        logger.error(
+            "Failed to serialize LossAnalysisResult: %s",
+            e,
+            exc_info=True,
+        )
+        raise
+
+    html_content = get_loss_analysis_html(
+        json.dumps(wrapped, ensure_ascii=False, default=_pydantic_serializer)
+    )
+    display.display(display.HTML(html_content))
+
+
+def _get_status_html(status: str, error_message: Optional[str] = None) -> str:
+    """Returns a simple HTML string for displaying a status and optional error."""
+    error_html = ""
+    if error_message:
+        error_html = f"""
+        <p>
+            <b>Error:</b>
+            <pre style="white-space: pre-wrap; word-wrap: break-word;">{html.escape(error_message)}</pre>
+        </p>
+        """
+
+    return textwrap.dedent(
+        f"""
+    <div>
+        <p><b>Status:</b> {html.escape(status)}</p>
+        {error_html}
+    </div>
+    """
+    )
+
+
+def _enrich_loss_examples_with_eval_items(
+    results: list["types.LossAnalysisResult"],
+    eval_item_map: Optional[dict[str, dict[str, Any]]],
+) -> list[dict[str, Any]]:
+    """Enriches loss analysis examples with eval item data for visualization.
+
+    For the eval run path, loss examples only have ``evaluation_item``
+    (a resource name) but no ``evaluation_result``.  The JS visualization
+    needs ``evaluation_result`` to extract scenario previews and rubric
+    descriptions.  This function joins the loss examples with the eval
+    item map so the visualization works identically to the LRO path.
+
+    Args:
+        results: Loss analysis results from the eval run.
+        eval_item_map: Optional mapping from evaluation item resource name
+            to serialized evaluation response data (built by
+            ``_evals_common._build_eval_item_map``).
+
+    Returns:
+        A list of dicts ready for JSON serialization, with ``evaluation_result``
+        populated on each example where a match is found.
+    """
+    result_dicts = []
+    for r in results:
+        r_dump = r.model_dump(mode="json", exclude_none=True)
+        if eval_item_map:
+            clusters = r_dump.get("clusters", [])
+            for cluster in clusters:
+                examples = cluster.get("examples", [])
+                for ex in examples:
+                    # Skip if evaluation_result is already populated (LRO path)
+                    if ex.get("evaluation_result"):
+                        continue
+                    # Match by evaluation_item resource name
+                    eval_item_ref = ex.get("evaluation_item")
+                    if eval_item_ref and eval_item_ref in eval_item_map:
+                        ex["evaluation_result"] = eval_item_map[eval_item_ref]
+        result_dicts.append(r_dump)
+    return result_dicts
+
+
+def display_loss_analysis_results(
+    results: list["types.LossAnalysisResult"],
+    eval_item_map: Optional[dict[str, dict[str, Any]]] = None,
+) -> None:
+    """Displays loss analysis results from an EvaluationRun.
+
+    Wraps the list of LossAnalysisResult objects into the same JSON
+    structure used by GenerateLossClustersResponse and renders using
+    the shared get_loss_analysis_html() function.
+
+    When ``eval_item_map`` is provided (from
+    ``get_evaluation_run(include_evaluation_items=True)``), the examples
+    are enriched with scenario and rubric data for the visualization.
+
+    Args:
+        results: A list of LossAnalysisResult objects from
+            EvaluationRunResults.loss_analysis_results.
+        eval_item_map: Optional mapping from evaluation item resource name
+            to serialized evaluation response data for enrichment.
+    """
+    if not _is_ipython_env():
+        logger.warning("Skipping display: not in an IPython environment.")
+        return
+    else:
+        from IPython import display
+
+    try:
+        result_dicts = _enrich_loss_examples_with_eval_items(results, eval_item_map)
+        wrapped = {"results": result_dicts}
+    except Exception as e:
+        logger.error(
+            "Failed to serialize loss analysis results: %s",
+            e,
+            exc_info=True,
+        )
+        raise
+
+    html_content = get_loss_analysis_html(
+        json.dumps(wrapped, ensure_ascii=False, default=_pydantic_serializer)
+    )
+    display.display(display.HTML(html_content))
+
+
+def display_evaluation_run_status(eval_run_obj: "types.EvaluationRun") -> None:
+    """Displays the status of an evaluation run in an IPython environment."""
+    if not _is_ipython_env():
+        logger.warning("Skipping display: not in an IPython environment.")
+        return
+    else:
+        from IPython import display
+
+    status = eval_run_obj.state.name if eval_run_obj.state else "UNKNOWN"
+    error_message = str(eval_run_obj.error) if eval_run_obj.error else None
+    html_content = _get_status_html(status, error_message)
+    display.display(display.HTML(html_content))
+
+
+# Backward-compatible private aliases for the public HTML generators.
+# These are kept temporarily to avoid breaking existing callers that depend on
+# the previous private names. New code should use the public names above.
+_get_evaluation_html = get_evaluation_html
+_get_comparison_html = get_comparison_html
+_get_inference_html = get_inference_html
+_get_loss_analysis_html = get_loss_analysis_html