@microsoft/m365-copilot-eval 1.2.1-preview.1 → 1.4.0-preview.1

package/src/clients/cli/generate_report.py

@@ -1,76 +1,82 @@
-import json
+import html as html_module
 import markdown
-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."""
+    """Calculate aggregate statistics across all evaluation results.
+
+    Scans ALL results (not just the first) to discover which metrics were used,
+    correctly handling per-prompt evaluator variation. Each metric reports
+    prompts_evaluated (how many prompts it actually ran on) and total_prompts.
+    """
     if not results:
         return {}
-    
-    # Extract all metrics from the first result to know what metrics we have
-    first_result = results[0]
-    metrics = first_result.get('results', {})
-    
+
+    # 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 flat_results:
+        all_metric_keys.update(result.get('results', {}).keys())
+
     aggregates = {}
-    
-    for metric_key in metrics.keys():
-        if not metric_key.endswith('_score'):
-            continue
-            
-        metric_name = metric_key[:-6]  # Remove '_score' suffix
-        metric_display_name = metric_name.replace('_', ' ').title()
-        
+
+    for eval_name in sorted(all_metric_keys):
+        display_name = pascal_case_to_title(eval_name)
+        metric_id = METRIC_IDS.get(eval_name, eval_name.lower())
+
         scores = []
         pass_count = 0
         fail_count = 0
         threshold_value = None
-        
-        for result in results:
-            metric_data = result.get('results', {}).get(metric_key)
-            if metric_data:
-                try:
-                    # Parse the JSON string to get the actual data
-                    parsed_data = json.loads(metric_data) if isinstance(metric_data, str) else metric_data
-                    
-                    # Extract score, result, and threshold
-                    score = parsed_data.get('score')
-                    if score is None:
-                        score = parsed_data.get(metric_name) 
-                    if score is None:
-                        score = parsed_data.get(f'{metric_name}_score')
-
-                    result_status = parsed_data.get('result')
-                    if result_status is None:
-                        result_status = parsed_data.get(f'{metric_name}_result')
-
-                    threshold = parsed_data.get('threshold')
-                    if threshold is None:
-                        threshold = parsed_data.get(f'{metric_name}_threshold')
-                    
-                    if score is not None:
-                        scores.append(float(score))
-                    
-                    if result_status:
-                        if str(result_status).lower() == 'pass':
-                            pass_count += 1
-                        elif str(result_status).lower() == 'fail':
-                            fail_count += 1
-                    
-                    # Capture threshold (should be consistent across all results)
-                    if threshold is not None and threshold_value is None:
-                        threshold_value = threshold
-                            
-                except (json.JSONDecodeError, ValueError, TypeError):
-                    continue
-        
-        if scores:
-            avg_score = sum(scores) / len(scores)
+        prompts_evaluated = 0
+
+        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:
+                score = parsed_data.get(metric_id)
+
+                result_status = parsed_data.get('result')
+
+                threshold = parsed_data.get('threshold')
+
+                if score is not None:
+                    scores.append(float(score))
+
+                if result_status:
+                    if str(result_status).lower() == STATUS_PASS:
+                        pass_count += 1
+                    elif str(result_status).lower() == STATUS_FAIL:
+                        fail_count += 1
+
+                if threshold is not None and threshold_value is None:
+                    threshold_value = threshold
+
+            except (ValueError, TypeError):
+                continue
+
+        if scores or pass_count > 0 or fail_count > 0:
+            avg_score = sum(scores) / len(scores) if scores else 0
             total_evaluated = pass_count + fail_count
             pass_rate = (pass_count / total_evaluated * 100) if total_evaluated > 0 else 0
-            
-            aggregates[metric_display_name] = {
-                'total_prompts': len(results),
+
+            aggregates[display_name] = {
+                'total_prompts': len(flat_results),
+                'prompts_evaluated': prompts_evaluated,
                 'total_evaluated': total_evaluated,
                 'pass_count': pass_count,
                 'fail_count': fail_count,
@@ -79,14 +85,8 @@ def calculate_aggregate_statistics(results):
                 'threshold': threshold_value,
                 'scores': scores
             }
-    
-    return aggregates
 
-def parse_score(score_str):
-    try:
-        return json.loads(score_str)
-    except Exception:
-        return {}
+    return aggregates
 
 def format_score(score):
   try:
@@ -100,9 +100,9 @@ def format_score(score):
 
 def extract_metric_rows(entry):
     """
-    Build generic metric rows from any `*_score` keys on an entry.
+    Build generic metric rows from evaluation results.
     Each row has: Metric, Result, Score, Threshold, Reason.
-    Supports metrics under entry['results'] and falls back to top-level for backward compatibility.
+    Omits metrics that did not run (None values) for this prompt.
     """
     rows = []
 
@@ -112,29 +112,22 @@ def extract_metric_rows(entry):
                 return d[k]
         return ''
 
-    def iter_score_fields(e):
-        container = e.get('results') if isinstance(e, dict) else None
-        if isinstance(container, dict):
-            for k, v in container.items():
-                if isinstance(k, str) and k.endswith('_score'):
-                    yield k, v
-            return
-        # fallback to top-level flat structure
-        for k, v in e.items():
-            if isinstance(k, str) and k.endswith('_score'):
-                yield k, v
+    results_container = entry.get('results', {}) if isinstance(entry, dict) else {}
 
-    for key, raw in iter_score_fields(entry):
-        metric_id = key[:-6]  # strip "_score"
-        metric_obj = parse_score(raw) if isinstance(raw, (str, bytes)) else (raw or {})
+    for eval_name, metric_obj in results_container.items():
+        if metric_obj is None:
+            continue  # Skip metrics that did not run for this prompt
+        if not isinstance(metric_obj, dict):
+            continue
 
-        display_name = metric_id.replace('_', ' ').title()
+        display_name = pascal_case_to_title(eval_name)
+        metric_id = METRIC_IDS.get(eval_name, eval_name.lower())
 
         # Candidate key patterns inside the parsed metric object
-        score_val = pick(metric_obj, [metric_id, f'{metric_id}_score', 'score', 'value'])
-        result_val = pick(metric_obj, [f'{metric_id}_result', 'result', 'status'])
-        threshold_val = pick(metric_obj, [f'{metric_id}_threshold', 'threshold', 'min_threshold', 'expected'])
-        reason_val = pick(metric_obj, [f'{metric_id}_reason', 'reason', 'rationale', 'explanation'])
+        score_val = pick(metric_obj, [metric_id])
+        result_val = pick(metric_obj, ['result'])
+        threshold_val = pick(metric_obj, ['threshold'])
+        reason_val = pick(metric_obj, [f'{metric_id}_reason', 'reason'])
 
         rows.append({
             'Metric': display_name,
@@ -145,107 +138,277 @@ def extract_metric_rows(entry):
         })
     return rows
 
-def generate_html_report(results):
+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:
+        return ""
+    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; }',
-      '    </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 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>')
-            
-            # Create aggregate table with same style as individual results
-            html.append('<table>')
-            html.append('<tr><th>Metric</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 = stats.get('threshold', 'N/A')
-                html.append(f'''
-                <tr>
-                    <td><strong>{metric_name}</strong></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>')
+    metadata_items = []
+    if agent_name:
+        metadata_items.append(f'<strong>Agent Name:</strong> {_escape(agent_name)}')
+    if agent_id:
+        metadata_items.append(f'<strong>Agent ID:</strong> {_escape(agent_id)}')
+    if cli_version:
+        metadata_items.append(f'<strong>CLI Version:</strong> {_escape(cli_version)}')
+    if metadata_items:
+        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}: {entry.get("prompt", "")}</h3>')
-        html.append('<table>')
-        html.append('<tr><th>Response</th><td>{}</td></tr>'.format(markdown.markdown(entry.get("response", ""))))
-        html.append('<tr><th>Expected Response</th><td>{}</td></tr>'.format(markdown.markdown(entry.get("expected_response", ""))))
-        html.append('</table>')
-
-        score_rows = extract_metric_rows(entry)
-        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()
-        )
-
-        html.append('<details open class="score-details"><summary>Show/Hide Evaluation Metric Scores</summary>')
-        html.append(score_html)
-        html.append('</details>')
-
-        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>')  # Close individual-results
-    html.append('</body></html>')
-    html.append('<p><small>Generated by M365 Copilot Agents Evaluation CLI.</small></p>')
+        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>')
+
+    if not results:
+        html.append('        <p>No prompt results found.</p>')
+
+    html.append('      </div>')
+    html.append('    </section>')
+
+    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)