@microsoft/m365-copilot-eval 1.3.0-preview.1 → 1.5.0-preview.1

package/src/clients/cli/generate_report.py

@@ -1,9 +1,7 @@
 import html as html_module
-import json
 import markdown
-from common import METRIC_IDS, pascal_case_to_title
-import pandas as pd
-from pathlib import Path
+from common import METRIC_IDS, STATUS_PASS, STATUS_FAIL, STATUS_ERROR, STATUS_PARTIAL, STATUS_UNKNOWN, pascal_case_to_title
+from datetime import datetime, timezone
 
 def calculate_aggregate_statistics(results):
     """Calculate aggregate statistics across all evaluation results.
@@ -15,9 +13,18 @@ def calculate_aggregate_statistics(results):
     if not results:
         return {}
 
+    # Flatten: multi-turn threads contribute each turn as a separate item
+    flat_results = []
+    for result in results:
+        if result.get("type") == "multi_turn":
+            for turn in result.get("turns", []):
+                flat_results.append(turn)
+        else:
+            flat_results.append(result)
+
     # Discover all metric keys across all results
     all_metric_keys = set()
-    for result in results:
+    for result in flat_results:
         all_metric_keys.update(result.get('results', {}).keys())
 
     aggregates = {}
@@ -32,15 +39,15 @@ def calculate_aggregate_statistics(results):
         threshold_value = None
         prompts_evaluated = 0
 
-        for result in results:
-            metric_data = result.get('results', {}).get(eval_name)
-            if metric_data is None:
+        for result in flat_results:
+            parsed_data = result.get('results', {}).get(eval_name)
+            if parsed_data is None:
                 continue  # This metric did not run for this prompt
+            if not isinstance(parsed_data, dict):
+                continue
 
             prompts_evaluated += 1
             try:
-                parsed_data = json.loads(metric_data) if isinstance(metric_data, str) else metric_data
-
                 score = parsed_data.get(metric_id)
 
                 result_status = parsed_data.get('result')
@@ -51,15 +58,15 @@ def calculate_aggregate_statistics(results):
                     scores.append(float(score))
 
                 if result_status:
-                    if str(result_status).lower() == 'pass':
+                    if str(result_status).lower() == STATUS_PASS:
                         pass_count += 1
-                    elif str(result_status).lower() == 'fail':
+                    elif str(result_status).lower() == STATUS_FAIL:
                         fail_count += 1
 
                 if threshold is not None and threshold_value is None:
                     threshold_value = threshold
 
-            except (json.JSONDecodeError, ValueError, TypeError):
+            except (ValueError, TypeError):
                 continue
 
         if scores or pass_count > 0 or fail_count > 0:
@@ -68,7 +75,7 @@ def calculate_aggregate_statistics(results):
             pass_rate = (pass_count / total_evaluated * 100) if total_evaluated > 0 else 0
 
             aggregates[display_name] = {
-                'total_prompts': len(results),
+                'total_prompts': len(flat_results),
                 'prompts_evaluated': prompts_evaluated,
                 'total_evaluated': total_evaluated,
                 'pass_count': pass_count,
@@ -81,12 +88,6 @@ def calculate_aggregate_statistics(results):
 
     return aggregates
 
-def parse_score(score_str):
-    try:
-        return json.loads(score_str)
-    except Exception:
-        return {}
-
 def format_score(score):
   try:
     val = float(score)
@@ -113,11 +114,11 @@ def extract_metric_rows(entry):
 
     results_container = entry.get('results', {}) if isinstance(entry, dict) else {}
 
-    for eval_name, raw in results_container.items():
-        if raw is None:
+    for eval_name, metric_obj in results_container.items():
+        if metric_obj is None:
             continue  # Skip metrics that did not run for this prompt
-
-        metric_obj = parse_score(raw) if isinstance(raw, (str, bytes)) else (raw or {})
+        if not isinstance(metric_obj, dict):
+            continue
 
         display_name = pascal_case_to_title(eval_name)
         metric_id = METRIC_IDS.get(eval_name, eval_name.lower())
@@ -137,6 +138,36 @@ def extract_metric_rows(entry):
         })
     return rows
 
+def prompt_passed(entry):
+    """Determine whether a prompt passed all evaluations.
+
+    Centralized predicate used by both the summary banner and per-prompt
+    cards so that pass/fail counts stay consistent.
+
+    Called in two contexts:
+      - On un-flattened results: multi-turn threads have type="multi_turn"
+        and are evaluated via their summary.overall_status.
+      - On flattened results (banner counts): individual turns have
+        status="pass"/"fail"/"error" and are evaluated like single-turn items.
+
+    A prompt/turn fails when:
+      - it is a multi-turn thread with overall_status != 'pass', OR
+      - its status is explicitly 'fail' or 'error', OR
+      - any metric result is explicitly 'fail'.
+    Otherwise it is considered passed (including prompts with no metric rows).
+    """
+    if entry.get("type") == "multi_turn":
+        summary = entry.get("summary", {})
+        return summary.get("overall_status") == STATUS_PASS
+
+    status = str(entry.get('status', '')).lower()
+    if status in (STATUS_FAIL, STATUS_ERROR):
+        return False
+    metric_rows = extract_metric_rows(entry)
+    if any(str(row.get('Result', '')).lower() == STATUS_FAIL for row in metric_rows):
+        return False
+    return True
+
 def _escape(text):
     """HTML-escape user-controlled content to prevent XSS."""
     if text is None:
@@ -144,40 +175,89 @@ def _escape(text):
     return html_module.escape(str(text))
 
 def generate_html_report(results, agent_name=None, agent_id=None, cli_version=None):
+    aggregates = calculate_aggregate_statistics(results)
+
+    # Flatten multi-turn threads for banner counts (consistent with aggregate stats)
+    flat_items = []
+    for entry in results:
+        if entry.get("type") == "multi_turn":
+            flat_items.extend(entry.get("turns", []))
+        else:
+            flat_items.append(entry)
+    total_prompts = len(flat_items)
+
+    passed_prompts = sum(1 for item in flat_items if prompt_passed(item))
+    failed_prompt_count = total_prompts - passed_prompts
+    overall_pass_rate = (passed_prompts / total_prompts * 100) if total_prompts else 0
+    generated_utc = datetime.now(timezone.utc).replace(microsecond=0).isoformat().replace("+00:00", "Z")
+
     html = [
-      '<!DOCTYPE html>',
-      '<html lang="en">',
-      '<head>',
-      '    <meta charset="UTF-8">',
-      '    <title>M365 Copilot Agents Evaluation Scores Report</title>',
-      '    <style>',
-      '        body { font-family: Arial, sans-serif; margin: 2em; padding: 1.5em; background: #fafafa; }',
-      '        h1 { margin-top: 0; color: #2c3e50; }',
-      '        h2 { color: #34495e; margin-top: 2em; }',
-      '        table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }',
-      '        th, td { border: 1px solid #ccc; padding: 10px 12px; text-align: left; vertical-align: top; }',
-      '        th { background: #f4f4f4; font-weight: 600; }',
-      '        details { padding: 0.75em 1em; border: 1px solid #ddd; border-radius: 6px; background: #fff; }',
-      '        details summary { cursor: pointer; font-weight: 600; margin: -0.75em -1em 0.75em; padding: 0.75em 1em; background: #eef2f5; border-bottom: 1px solid #ddd; }',
-      '        .pass { background: #d4edda; color: #155724; }',
-      '        .fail { background: #f8d7da; color: #721c24; }',
-      '        .score-details { font-size: 0.95em; color: #333; background: #f9f9f9; }',
-      '        .score-details table { margin-top: 0.5em !important; }',
-      '        .score-details th { background: #e9ecef; }',
-      '        .aggregate-section { margin: 2em 0; }',
-      '        .aggregate-section h2 { color: #34495e; margin-top: 0; }',
-      '        .pass-rate-excellent { background: #d1f2eb; color: #186a3b; font-weight: bold; }',
-      '        .pass-rate-good { background: #fef9e7; color: #7d6608; font-weight: bold; }',
-      '        .pass-rate-poor { background: #fadbd8; color: #b03a2e; font-weight: bold; }',
-      '        .individual-results { margin-top: 3em; }',
-      '        .evaluator-badge { display: inline-block; padding: 2px 8px; margin: 2px; border-radius: 4px; font-size: 0.85em; background: #e8eaf6; color: #283593; }',
-      '    </style>',
-      '</head>',
-      '<body>',
-      '    <h1> M365 Copilot Agents Evaluation Report</h1>',
+        '<!DOCTYPE html>',
+        '<html lang="en">',
+        '<head>',
+        '  <meta charset="UTF-8">',
+        '  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
+        '  <title>M365 Copilot Agents Evaluation Scores Report</title>',
+        '  <style>',
+        '    :root {',
+        '      --bg: #f6f7f9;',
+        '      --panel: #ffffff;',
+        '      --ink: #1f2937;',
+        '      --muted: #5b6473;',
+        '      --ok-bg: #e7f7ed;',
+        '      --ok-ink: #15603a;',
+        '      --bad-bg: #fdecec;',
+        '      --bad-ink: #8b1e2f;',
+        '      --border: #dde2ea;',
+        '      --bar-track: #e8edf5;',
+        '      --bar-fill: #2b6cb0;',
+        '    }',
+        '    * { box-sizing: border-box; }',
+        '    body { margin: 0; background: radial-gradient(circle at top right, #eef3ff 0%, var(--bg) 45%); color: var(--ink); font-family: "Segoe UI", Tahoma, sans-serif; }',
+        '    .container { max-width: 1100px; margin: 0 auto; padding: 24px 18px 40px; }',
+        '    h1 { margin: 0 0 8px; }',
+        '    .meta { color: var(--muted); margin-bottom: 20px; }',
+        '    .summary-banner { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 12px; margin: 16px 0 24px; }',
+        '    .summary-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }',
+        '    .summary-label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }',
+        '    .summary-value { display: block; margin-top: 6px; font-size: 24px; font-weight: 700; }',
+        '    .section { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 18px; }',
+        '    .evaluator-row { margin: 12px 0; }',
+        '    .evaluator-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 6px; }',
+        '    .progress-track { width: 100%; background: var(--bar-track); border-radius: 999px; overflow: hidden; height: 12px; }',
+        '    .progress-fill { height: 100%; background: var(--bar-fill); }',
+        '    .prompt-result-cards { display: grid; gap: 14px; }',
+        '    .prompt-card { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 14px; overflow: hidden; overflow-wrap: break-word; }',
+        '    .status-chip { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-bottom: 10px; }',
+        '    .status-pass { background: var(--ok-bg); color: var(--ok-ink); }',
+        '    .status-fail { background: var(--bad-bg); color: var(--bad-ink); }',
+        '    .prompt-card h3 { margin: 0 0 8px; font-size: 16px; }',
+        '    .kv { margin: 8px 0; }',
+        '    .kv > strong { display: block; min-width: 130px; color: var(--muted); margin-bottom: 4px; }',
+        '    .kv .md-content { padding-left: 4px; font-size: 14px; line-height: 1.5; }',
+        '    .kv .md-content p { margin: 4px 0; }',
+        '    .kv .md-content h1, .kv .md-content h2, .kv .md-content h3, .kv .md-content h4 { font-size: 14px; margin: 8px 0 4px; }',
+        '    .kv .md-content ul, .kv .md-content ol { margin: 4px 0; padding-left: 20px; }',
+        '    .kv .md-content li { margin: 2px 0; }',
+        '    .kv .md-content pre { background: #f4f6fa; padding: 8px; border-radius: 4px; overflow-x: auto; font-size: 13px; margin: 4px 0; }',
+        '    .kv .md-content code { font-size: 13px; background: #f4f6fa; padding: 1px 4px; border-radius: 3px; }',
+        '    .kv .md-content pre code { padding: 0; background: none; }',
+        '    .kv .md-content hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }',
+        '    .metric-table { width: 100%; border-collapse: collapse; margin-top: 10px; table-layout: fixed; }',
+        '    .metric-table th, .metric-table td { border: 1px solid var(--border); padding: 8px; text-align: left; vertical-align: top; }',
+        '    .metric-table th { background: #f4f6fa; }',
+        '    .metric-table .cell-pass { background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; }',
+        '    .metric-table .cell-fail { background: var(--bad-bg); color: var(--bad-ink); font-weight: 600; }',
+        '    .evaluator-badge { display: inline-block; padding: 2px 8px; margin: 2px; border-radius: 4px; font-size: 0.85em; background: #e8eaf6; color: #283593; }',
+        '    .footer { margin-top: 20px; color: var(--muted); font-size: 13px; }',
+        '    @media (max-width: 760px) { .summary-banner { grid-template-columns: repeat(2, minmax(140px, 1fr)); } .kv strong { min-width: 90px; } }',
+        '  </style>',
+        '</head>',
+        '<body>',
+        '  <div class="container">',
+        '    <h1>M365 Copilot Agents Evaluation Report</h1>',
     ]
 
-    # Add metadata section
     metadata_items = []
     if agent_name:
         metadata_items.append(f'<strong>Agent Name:</strong> {_escape(agent_name)}')
@@ -186,86 +266,149 @@ def generate_html_report(results, agent_name=None, agent_id=None, cli_version=No
     if cli_version:
         metadata_items.append(f'<strong>CLI Version:</strong> {_escape(cli_version)}')
     if metadata_items:
-        html.append(f'    <p style="color: #666; font-size: 0.95em;">{" &nbsp;|&nbsp; ".join(metadata_items)}</p>')
-
-    # Add aggregate statistics if multiple results
-    if len(results) > 1:
-        aggregates = calculate_aggregate_statistics(results)
-        if aggregates:
-            html.append('<div class="aggregate-section">')
-            html.append(f'<h2> Aggregate Statistics ({len(results)} prompts evaluated)</h2>')
-
-            html.append('<table>')
-            html.append('<tr><th>Metric</th><th>Prompts</th><th>Pass Rate</th><th>Passed</th><th>Failed</th><th>Avg Score</th><th>Threshold</th></tr>')
-
-            for metric_name, stats in aggregates.items():
-                pass_rate_class = 'pass-rate-excellent' if stats['pass_rate'] >= 80 else 'pass-rate-good' if stats['pass_rate'] >= 60 else 'pass-rate-poor'
-                threshold_display = _escape(str(stats.get('threshold', 'N/A')))
-                prompts_evaluated = stats.get('prompts_evaluated', stats['total_evaluated'])
-                total_prompts = stats.get('total_prompts', len(results))
-                html.append(f'''
-                <tr>
-                    <td><strong>{_escape(metric_name)}</strong></td>
-                    <td>{prompts_evaluated}/{total_prompts}</td>
-                    <td class="{pass_rate_class}">{stats['pass_rate']:.1f}%</td>
-                    <td class="pass">{stats['pass_count']}</td>
-                    <td class="fail">{stats['fail_count']}</td>
-                    <td>{stats['avg_score']:.2f}</td>
-                    <td>{threshold_display}</td>
-                </tr>
-                ''')
-
-            html.append('</table>')
+        html.append(f'    <p class="meta">{" | ".join(metadata_items)}</p>')
+
+    html.append('    <section class="summary-banner" aria-label="summary banner">')
+    html.append(f'      <div class="summary-tile"><span class="summary-label">Total Prompts</span><span class="summary-value">{total_prompts}</span></div>')
+    html.append(f'      <div class="summary-tile"><span class="summary-label">Passed</span><span class="summary-value">{passed_prompts}</span></div>')
+    html.append(f'      <div class="summary-tile"><span class="summary-label">Failed</span><span class="summary-value">{failed_prompt_count}</span></div>')
+    html.append(f'      <div class="summary-tile"><span class="summary-label">Pass Rate</span><span class="summary-value">{overall_pass_rate:.1f}%</span></div>')
+    html.append('    </section>')
+
+    html.append('    <section class="section">')
+    html.append('      <h2>Aggregate Evaluator Statistics</h2>')
+    if aggregates:
+        for metric_name, stats in aggregates.items():
+            pass_rate = stats.get('pass_rate', 0)
+            prompts_evaluated = stats.get('prompts_evaluated', stats.get('total_evaluated', 0))
+            html.append('<div class="evaluator-row">')
+            avg_score = stats.get('avg_score', 0)
+            threshold = stats.get('threshold', 'N/A')
+            html.append(
+                f'<div class="evaluator-head"><strong>{_escape(metric_name)}</strong>'
+                f'<span>{pass_rate:.1f}% ({stats.get("pass_count", 0)} pass / {stats.get("fail_count", 0)} fail, {prompts_evaluated}/{total_prompts} prompts)'
+                f' &middot; Avg Score: {avg_score:.2f} &middot; Threshold: {_escape(str(threshold))}</span></div>'
+            )
+            html.append('<div class="progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{:.1f}" aria-label="{} pass rate">'.format(pass_rate, _escape(metric_name)))
+            html.append(f'<div class="progress-fill" style="width:{pass_rate:.1f}%"></div></div>')
             html.append('</div>')
+    else:
+        html.append('      <p>No evaluator aggregates available.</p>')
+    html.append('    </section>')
 
-    # Individual results section
-    html.append('<div class="individual-results">')
-    html.append('<h2> Individual Results</h2>')
+    html.append('    <section class="section">')
+    html.append('      <h2>Prompt Results</h2>')
+    html.append('      <div class="prompt-result-cards">')
 
     for idx, entry in enumerate(results, 1):
-        html.append(f'<h3>Prompt {idx}: {_escape(entry.get("prompt", ""))}</h3>')
-
-        # Show evaluator badges for this prompt
-        evaluators_ran = entry.get('evaluators_ran', [])
-        if evaluators_ran:
-            badges = ''.join(f'<span class="evaluator-badge">{_escape(e)}</span>' for e in evaluators_ran)
-            html.append(f'<p>Evaluators: {badges}</p>')
-
-        html.append('<table>')
-        html.append('<tr><th>Response</th><td>{}</td></tr>'.format(markdown.markdown(_escape(entry.get("response", "")))))
-        html.append('<tr><th>Expected Response</th><td>{}</td></tr>'.format(markdown.markdown(_escape(entry.get("expected_response", "")))))
-        html.append('</table>')
-
-        score_rows = extract_metric_rows(entry)
-        if score_rows:
-            score_df = pd.DataFrame(score_rows)
-
-            def highlight_result(val):
-                lv = str(val).lower()
-                if lv == 'pass':
-                    return 'background-color: #d4edda; color: #155724;'
-                elif lv == 'fail':
-                    return 'background-color: #f8d7da; color: #721c24;'
-                return ''
-
-            score_html = (
-                score_df.style
-                .map(highlight_result, subset=['Result'])
-                .set_table_attributes('style="margin-top:1em;"')
-                .hide(axis="index")
-                .to_html()
-            )
+        if entry.get("type") == "multi_turn":
+            # Multi-turn thread card
+            thread_name = _escape(entry.get("name", "Unnamed Thread"))
+            summary = entry.get("summary", {})
+            status = summary.get("overall_status", STATUS_UNKNOWN)
+            is_passed = status == STATUS_PASS
+            chip_class = 'status-pass' if is_passed else 'status-fail'
+            chip_text = 'PASSED' if is_passed else ('PARTIAL' if status == STATUS_PARTIAL else 'FAILED')
+
+            html.append('        <article class="prompt-card">')
+            html.append(f'          <span class="status-chip {chip_class}">{chip_text}</span>')
+            html.append(f'          <h3>Thread {idx}: {thread_name}</h3>')
+            html.append(f'          <p>{summary.get("turns_passed", 0)}/{summary.get("turns_total", 0)} turns passed</p>')
+
+            for t_idx, turn in enumerate(entry.get("turns", []), 1):
+                turn_status = turn.get("status", STATUS_UNKNOWN)
+                turn_chip_class = 'status-pass' if turn_status == STATUS_PASS else 'status-fail'
+                turn_chip_text = {
+                    STATUS_PASS: 'PASSED',
+                    STATUS_FAIL: 'FAILED',
+                    STATUS_ERROR: 'ERROR',
+                }.get(turn_status, turn_status.upper())
+
+                html.append(f'          <div style="margin-left:16px;padding:8px 0;border-top:1px solid var(--border);">')
+                html.append(f'            <span class="status-chip {turn_chip_class}">{turn_chip_text}</span>')
+                html.append(f'            <strong>Turn {t_idx}:</strong> {_escape(turn.get("prompt", ""))}')
+
+                turn_evaluators = turn.get('evaluators_ran', [])
+                if turn_evaluators:
+                    badges = ''.join(f'<span class="evaluator-badge">{_escape(e)}</span>' for e in turn_evaluators)
+                    html.append(f'            <p>Evaluators: {badges}</p>')
+
+                if turn.get("response"):
+                    html.append(f'            <div class="kv"><strong>Response:</strong><div class="md-content">{markdown.markdown(_escape(turn.get("response", "")))}</div></div>')
+                if turn.get("error"):
+                    html.append(f'            <p class="kv"><strong>Error:</strong> {_escape(turn["error"])}</p>')
+
+                turn_rows = extract_metric_rows(turn)
+                if turn_rows:
+                    html.append('            <table class="metric-table">')
+                    html.append('              <tr><th>Metric</th><th>Result</th><th>Score</th><th>Threshold</th><th>Reason</th></tr>')
+                    for row in turn_rows:
+                        result_val = str(row.get("Result", "")).lower()
+                        result_class = ' class="cell-pass"' if result_val == STATUS_PASS else ' class="cell-fail"' if result_val == STATUS_FAIL else ""
+                        html.append(
+                            '<tr>'
+                            f'<td>{_escape(row.get("Metric", ""))}</td>'
+                            f'<td{result_class}>{_escape(str(row.get("Result", "")))}</td>'
+                            f'<td>{_escape(str(row.get("Score", "")))}</td>'
+                            f'<td>{_escape(str(row.get("Threshold", "")))}</td>'
+                            f'<td>{_escape(str(row.get("Reason", "")))}</td>'
+                            '</tr>'
+                        )
+                    html.append('            </table>')
+
+                html.append('          </div>')
+
+            html.append('        </article>')
+        else:
+            score_rows = extract_metric_rows(entry)
+            is_passed = prompt_passed(entry)
+            chip_class = 'status-pass' if is_passed else 'status-fail'
+            chip_text = 'PASSED' if is_passed else 'FAILED'
+
+            html.append('        <article class="prompt-card">')
+            html.append(f'          <span class="status-chip {chip_class}">{chip_text}</span>')
+            html.append(f'          <h3>Prompt {idx}: {_escape(entry.get("prompt", ""))}</h3>')
+
+            evaluators_ran = entry.get('evaluators_ran', [])
+            if evaluators_ran:
+                badges = ''.join(f'<span class="evaluator-badge">{_escape(e)}</span>' for e in evaluators_ran)
+                html.append(f'          <p>Evaluators: {badges}</p>')
+
+            html.append(f'          <div class="kv"><strong>Response:</strong><div class="md-content">{markdown.markdown(_escape(entry.get("response", "")))}</div></div>')
+            html.append(f'          <div class="kv"><strong>Expected:</strong><div class="md-content">{markdown.markdown(_escape(entry.get("expected_response", "")))}</div></div>')
+
+            error_details = entry.get('error_details') or entry.get('errorDetails')
+            if error_details:
+                html.append(f'          <p class="kv"><strong>Error Details:</strong> {_escape(error_details)}</p>')
+
+            if score_rows:
+                html.append('          <table class="metric-table">')
+                html.append('            <tr><th>Metric</th><th>Result</th><th>Score</th><th>Threshold</th><th>Reason</th></tr>')
+                for row in score_rows:
+                    result_val = str(row.get("Result", "")).lower()
+                    result_class = ' class="cell-pass"' if result_val == STATUS_PASS else ' class="cell-fail"' if result_val == STATUS_FAIL else ""
+                    html.append(
+                        '<tr>'
+                        f'<td>{_escape(row.get("Metric", ""))}</td>'
+                        f'<td{result_class}>{_escape(str(row.get("Result", "")))}</td>'
+                        f'<td>{_escape(str(row.get("Score", "")))}</td>'
+                        f'<td>{_escape(str(row.get("Threshold", "")))}</td>'
+                        f'<td>{_escape(str(row.get("Reason", "")))}</td>'
+                        '</tr>'
+                    )
+                html.append('          </table>')
+
+            html.append('        </article>')
 
-            html.append('<details open class="score-details"><summary>Show/Hide Evaluation Metric Scores</summary>')
-            html.append(score_html)
-            html.append('</details>')
+    if not results:
+        html.append('        <p>No prompt results found.</p>')
 
-        html.append(f'<p><em>Entry {idx} of {len(results)}</em></p>')
-        if idx < len(results):  # Don't add HR after last item
-            html.append('<hr>')
+    html.append('      </div>')
+    html.append('    </section>')
 
-    html.append('</div>')  # Close individual-results
-    html.append('</body></html>')
-    html.append('<p><small>Generated by M365 Copilot Agents Evaluation CLI.</small></p>')
+    html.append(f'    <p class="footer">Generated by M365 Copilot Agents Evaluation CLI &mdash; <time datetime="{generated_utc}">{generated_utc} UTC</time></p>')
+    html.append('  </div>')
+    html.append('</body>')
+    html.append('</html>')
 
     return '\n'.join(html)