@indemn/cli 1.0.0 → 1.1.0

package/src/report/eval-report/cover.tsx

@@ -0,0 +1,69 @@
+// V1 eval report cover — ported from EvalReportCover.tsx
+import { Page, View, Text, Image } from '@react-pdf/renderer';
+import { styles, colors, logoPath } from '../styles.js';
+
+interface EvalReportCoverProps {
+  customerName: string;
+  reportDate: string;
+  highlights: {
+    totalQuestions: number;
+    totalRules: number;
+    overallScore: number;
+    highSeverityScore: number;
+    mediumSeverityScore: number;
+    highCount: number;
+    mediumCount: number;
+  };
+}
+
+export function EvalReportCover({ customerName, reportDate, highlights }: EvalReportCoverProps) {
+  return (
+    <Page size="A4" style={[styles.page, { justifyContent: 'center' }]}>
+      {/* Logo */}
+      <View style={{ alignItems: 'center', marginBottom: 48 }}>
+        <Image src={logoPath} style={{ width: 200, height: 46 }} />
+      </View>
+
+      {/* Title */}
+      <View style={{ alignItems: 'center', marginBottom: 48 }}>
+        <Text style={{ fontSize: 28, fontWeight: 700, color: colors.eggplant, marginBottom: 8 }}>
+          Evaluation Report
+        </Text>
+        <Text style={{ fontSize: 16, fontWeight: 500, color: colors.muted }}>
+          {customerName}
+        </Text>
+        <Text style={{ fontSize: 14, fontWeight: 400, color: colors.muted, marginTop: 4 }}>
+          {reportDate}
+        </Text>
+      </View>
+
+      {/* Key Highlights */}
+      <View style={[styles.card, { marginHorizontal: 40 }]}>
+        <Text style={[styles.sectionTitle, { textAlign: 'center', marginBottom: 16 }]}>
+          Key Highlights
+        </Text>
+
+        <View style={{ gap: 8 }}>
+          <Text style={styles.bodyText}>
+            {'\u2022'} {highlights.totalQuestions} questions evaluated against {highlights.totalRules} rules
+          </Text>
+          <Text style={styles.bodyText}>
+            {'\u2022'} Overall weighted score: <Text style={{ fontWeight: 600 }}>{Math.round(highlights.overallScore * 100)}%</Text>
+          </Text>
+          <Text style={styles.bodyText}>
+            {'\u2022'} High severity compliance ({highlights.highCount} rules): <Text style={{ fontWeight: 600 }}>{Math.round(highlights.highSeverityScore * 100)}%</Text>
+          </Text>
+          <Text style={styles.bodyText}>
+            {'\u2022'} Medium severity compliance ({highlights.mediumCount} rules): <Text style={{ fontWeight: 600 }}>{Math.round(highlights.mediumSeverityScore * 100)}%</Text>
+          </Text>
+        </View>
+      </View>
+
+      {/* Footer */}
+      <View style={[styles.footer, { position: 'absolute', bottom: 40 }]}>
+        <Text style={styles.caption}>Powered by Indemn Evals</Text>
+        <Text style={styles.caption}>Page 1</Text>
+      </View>
+    </Page>
+  );
+}

package/src/report/eval-report/document.tsx

@@ -0,0 +1,105 @@
+// Eval report document — ported from EvalReportDocument.tsx
+import { Document } from '@react-pdf/renderer';
+import { EvalReportCover } from './cover.js';
+import { EvalReportMatrixPage } from './matrix-page.js';
+import { EvalReportExamplePage } from './example-page.js';
+import { EvalReportV2Cover } from './v2-cover.js';
+import { EvalReportItemPage } from './item-page.js';
+import { calculateWeightedScores } from '../scoring.js';
+import type { MatrixData, WeightConfig, EvaluationResult } from './types.js';
+
+// V1 report data (matrix-based)
+export interface EvalReportDataV1 {
+  customerName: string;
+  reportDate: string;
+  matrixData: MatrixData;
+  weights: WeightConfig;
+}
+
+// V2 report data (per-item results)
+export interface EvalReportDataV2 {
+  customerName: string;
+  reportDate: string;
+  v2Results: EvaluationResult[];
+}
+
+// Union type
+export type EvalReportData = EvalReportDataV1 | EvalReportDataV2;
+
+function isV2ReportData(data: EvalReportData): data is EvalReportDataV2 {
+  return 'v2Results' in data && Array.isArray(data.v2Results);
+}
+
+interface EvalReportDocumentProps {
+  data: EvalReportData;
+}
+
+export function EvalReportDocument({ data }: EvalReportDocumentProps) {
+  if (isV2ReportData(data)) {
+    return (
+      <Document
+        title={`Indemn Evaluation Report - ${data.customerName}`}
+        author="Indemn Evals"
+        subject={`Evaluation report for ${data.reportDate}`}
+      >
+        <EvalReportV2Cover
+          customerName={data.customerName}
+          reportDate={data.reportDate}
+          results={data.v2Results}
+        />
+        {data.v2Results.map((result, index) => (
+          <EvalReportItemPage
+            key={result.result_id}
+            result={result}
+            itemNumber={index + 1}
+            totalItems={data.v2Results.length}
+          />
+        ))}
+      </Document>
+    );
+  }
+
+  // V1 report
+  const weightedScores = calculateWeightedScores(data.matrixData, data.weights);
+
+  const highlights = {
+    totalQuestions: data.matrixData.rows.length,
+    totalRules: data.matrixData.evaluators.length,
+    overallScore: weightedScores.overall,
+    highSeverityScore: weightedScores.bySeverity.High.score,
+    mediumSeverityScore: weightedScores.bySeverity.Medium.score,
+    highCount: weightedScores.bySeverity.High.count,
+    mediumCount: weightedScores.bySeverity.Medium.count,
+  };
+
+  const matrixPageNumber = 2;
+  const exampleStartPage = 3;
+
+  return (
+    <Document
+      title={`Indemn Evaluation Report - ${data.customerName}`}
+      author="Indemn Evals"
+      subject={`Evaluation report for ${data.reportDate}`}
+    >
+      <EvalReportCover
+        customerName={data.customerName}
+        reportDate={data.reportDate}
+        highlights={highlights}
+      />
+      <EvalReportMatrixPage
+        matrixData={data.matrixData}
+        pageNumber={matrixPageNumber}
+      />
+      {data.matrixData.rows.map((row, index) => (
+        <EvalReportExamplePage
+          key={row.resultId}
+          exampleNumber={index + 1}
+          totalExamples={data.matrixData.rows.length}
+          pageNumber={exampleStartPage + index}
+          row={row}
+          evaluators={data.matrixData.evaluators}
+        />
+      ))}
+    </Document>
+  );
+}

package/src/report/eval-report/example-page.tsx

@@ -0,0 +1,121 @@
+// V1 example detail page — ported from EvalReportExamplePage.tsx
+import { Page, View, Text } from '@react-pdf/renderer';
+import { colors } from '../styles.js';
+import { SCORE_THRESHOLDS, getScoreHexColor } from '../scoring.js';
+import type { MatrixRow, EvaluatorInfo } from './types.js';
+
+interface EvalReportExamplePageProps {
+  exampleNumber: number;
+  totalExamples: number;
+  pageNumber: number;
+  row: MatrixRow;
+  evaluators: EvaluatorInfo[];
+}
+
+export function EvalReportExamplePage({
+  exampleNumber,
+  totalExamples,
+  pageNumber: _pageNumber,
+  row,
+  evaluators,
+}: EvalReportExamplePageProps) {
+  void _pageNumber;
+  const passedCount = Object.values(row.cells).filter(c => c.passed).length;
+  const totalCount = Object.keys(row.cells).length;
+  const passRate = Math.round(row.avgScore * 100);
+
+  const failed = evaluators.filter(e => row.cells[e.key] && !row.cells[e.key].passed);
+  const passed = evaluators.filter(e => row.cells[e.key] && row.cells[e.key].passed);
+
+  return (
+    <Page size="A4" orientation="landscape" style={{ fontFamily: 'Barlow', fontSize: 7, color: colors.eggplant, backgroundColor: colors.white, padding: 20 }} wrap>
+      {/* Header Row */}
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8, paddingBottom: 6, borderBottomWidth: 1, borderBottomColor: colors.border }} fixed>
+        <Text style={{ fontSize: 11, fontWeight: 600, color: colors.iris }}>
+          Question {exampleNumber} of {totalExamples}
+        </Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+          <Text style={{ fontSize: 8, color: colors.muted }}>
+            {passedCount}/{totalCount} passed
+          </Text>
+          <View style={{ backgroundColor: passRate >= SCORE_THRESHOLDS.SUCCESS * 100 ? '#dcfce7' : passRate >= SCORE_THRESHOLDS.WARNING * 100 ? '#fef9c3' : '#fee2e2', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 3 }}>
+            <Text style={{ fontSize: 12, fontWeight: 700, color: getScoreHexColor(passRate / 100) }}>
+              {passRate}%
+            </Text>
+          </View>
+        </View>
+      </View>
+
+      {/* FULL Question */}
+      <View style={{ marginBottom: 8 }} wrap={false}>
+        <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant, marginBottom: 3, textTransform: 'uppercase', letterSpacing: 0.5 }}>Question</Text>
+        <View style={{ backgroundColor: colors.background, padding: 6, borderRadius: 3 }}>
+          <Text style={{ fontSize: 6, color: colors.eggplant, lineHeight: 1.4 }}>{row.question}</Text>
+        </View>
+      </View>
+
+      {/* FULL Agent Response */}
+      <View style={{ marginBottom: 8 }}>
+        <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant, marginBottom: 3, textTransform: 'uppercase', letterSpacing: 0.5 }}>Agent Response</Text>
+        <View style={{ backgroundColor: colors.background, padding: 6, borderRadius: 3 }}>
+          <Text style={{ fontSize: 5.5, color: colors.eggplant, lineHeight: 1.4 }}>{row.response}</Text>
+        </View>
+      </View>
+
+      {/* Evaluation Results - Two columns side by side */}
+      <View style={{ flexDirection: 'row', gap: 12 }}>
+        {/* Failed Rules */}
+        <View style={{ flex: 1 }}>
+          <Text style={{ fontSize: 6, fontWeight: 700, color: colors.error, marginBottom: 3, textTransform: 'uppercase', letterSpacing: 0.5 }}>
+            Failed ({failed.length})
+          </Text>
+          <View style={{ backgroundColor: '#fef2f2', padding: 6, borderRadius: 3 }}>
+            {failed.length === 0 ? (
+              <Text style={{ fontSize: 6, color: colors.success }}>All rules passed!</Text>
+            ) : (
+              failed.map((evaluator, idx) => {
+                const cell = row.cells[evaluator.key];
+                return (
+                  <View key={evaluator.key} style={{ marginBottom: idx < failed.length - 1 ? 6 : 0 }}>
+                    <Text style={{ fontSize: 6, fontWeight: 600, color: colors.error, marginBottom: 1 }}>
+                      x {evaluator.name} [{evaluator.severity}]
+                    </Text>
+                    {cell?.comment && (
+                      <Text style={{ fontSize: 5, color: colors.muted, lineHeight: 1.3 }}>
+                        {cell.comment}
+                      </Text>
+                    )}
+                  </View>
+                );
+              })
+            )}
+          </View>
+        </View>
+
+        {/* Passed Rules */}
+        <View style={{ flex: 1 }}>
+          <Text style={{ fontSize: 6, fontWeight: 700, color: colors.success, marginBottom: 3, textTransform: 'uppercase', letterSpacing: 0.5 }}>
+            Passed ({passed.length})
+          </Text>
+          <View style={{ backgroundColor: '#f0fdf4', padding: 6, borderRadius: 3 }}>
+            {passed.length === 0 ? (
+              <Text style={{ fontSize: 6, color: colors.error }}>No rules passed</Text>
+            ) : (
+              passed.map((evaluator) => (
+                <Text key={evaluator.key} style={{ fontSize: 5.5, color: colors.success, marginBottom: 2 }}>
+                  + {evaluator.name}
+                </Text>
+              ))
+            )}
+          </View>
+        </View>
+      </View>
+
+      {/* Footer */}
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingTop: 6, borderTopWidth: 0.5, borderTopColor: colors.border, marginTop: 'auto' }} fixed>
+        <Text style={{ fontSize: 6, color: colors.muted }}>Indemn Evaluation Report</Text>
+        <Text style={{ fontSize: 6, color: colors.muted }} render={({ pageNumber: pn }) => `Page ${pn}`} />
+      </View>
+    </Page>
+  );
+}

package/src/report/eval-report/item-page.tsx

@@ -0,0 +1,211 @@
+// V2 per-item detail page — ported from EvalReportItemPage.tsx
+import { Page, View, Text } from '@react-pdf/renderer';
+import { styles, colors } from '../styles.js';
+import type { EvaluationResult, CriterionScore, RubricRuleScore } from './types.js';
+
+interface EvalReportItemPageProps {
+  result: EvaluationResult;
+  itemNumber: number;
+  totalItems: number;
+}
+
+const severityColors: Record<string, string> = {
+  High: '#3a4389',
+  high: '#3a4389',
+  Medium: '#4752a3',
+  medium: '#4752a3',
+  Low: '#7c85c0',
+  low: '#7c85c0',
+};
+
+function parseTurnsForExcerpt(text: string, maxTurns: number = 3): Array<{ role: string; content: string }> {
+  const turns: Array<{ role: string; content: string }> = [];
+  const lines = text.split('\n');
+  let currentRole: string | null = null;
+  let currentContent: string[] = [];
+
+  for (const line of lines) {
+    if (line.startsWith('User:')) {
+      if (currentRole) turns.push({ role: currentRole, content: currentContent.join('\n').trim() });
+      currentRole = 'User';
+      currentContent = [line.slice(5).trim()];
+    } else if (line.startsWith('Agent:')) {
+      if (currentRole) turns.push({ role: currentRole, content: currentContent.join('\n').trim() });
+      currentRole = 'Agent';
+      currentContent = [line.slice(6).trim()];
+    } else if (currentRole) {
+      currentContent.push(line);
+    }
+  }
+  if (currentRole) turns.push({ role: currentRole, content: currentContent.join('\n').trim() });
+  return turns.slice(0, maxTurns);
+}
+
+function CriterionScoreRow({ criterion }: { criterion: CriterionScore }) {
+  return (
+    <View style={{ flexDirection: 'row', marginBottom: 4, paddingVertical: 3, paddingHorizontal: 6, backgroundColor: criterion.passed ? '#f0fdf4' : '#fef2f2', borderRadius: 3 }}>
+      <Text style={{ fontSize: 7, fontWeight: 700, color: criterion.passed ? colors.success : colors.error, width: 12 }}>
+        {criterion.passed ? 'P' : 'F'}
+      </Text>
+      <View style={{ flex: 1 }}>
+        <Text style={{ fontSize: 6, fontWeight: 600, color: colors.eggplant, marginBottom: 1 }}>
+          {criterion.criterion}
+        </Text>
+        {criterion.reasoning && (
+          <Text style={{ fontSize: 5.5, color: colors.muted, lineHeight: 1.3 }}>
+            {criterion.reasoning.slice(0, 250)}{criterion.reasoning.length > 250 ? '...' : ''}
+          </Text>
+        )}
+      </View>
+      <Text style={{ fontSize: 6, fontWeight: 600, color: criterion.passed ? colors.success : colors.error, width: 30, textAlign: 'right' }}>
+        {Math.round(criterion.score * 100)}%
+      </Text>
+    </View>
+  );
+}
+
+function RubricScoreRow({ rule }: { rule: RubricRuleScore }) {
+  const sevColor = severityColors[rule.severity] || colors.muted;
+  return (
+    <View style={{ flexDirection: 'row', marginBottom: 4, paddingVertical: 3, paddingHorizontal: 6, backgroundColor: rule.passed ? '#f0fdf4' : '#fef2f2', borderRadius: 3 }}>
+      <Text style={{ fontSize: 7, fontWeight: 700, color: rule.passed ? colors.success : colors.error, width: 12 }}>
+        {rule.passed ? 'P' : 'F'}
+      </Text>
+      <View style={{ flex: 1 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, marginBottom: 1 }}>
+          <Text style={{ fontSize: 6, fontWeight: 600, color: colors.eggplant }}>
+            {rule.rule_name}
+          </Text>
+          <View style={{ backgroundColor: `${sevColor}20`, paddingHorizontal: 4, paddingVertical: 1, borderRadius: 2 }}>
+            <Text style={{ fontSize: 5, fontWeight: 600, color: sevColor, textTransform: 'uppercase' }}>
+              {rule.severity}
+            </Text>
+          </View>
+        </View>
+        {rule.reasoning && (
+          <Text style={{ fontSize: 5.5, color: colors.muted, lineHeight: 1.3 }}>
+            {rule.reasoning.slice(0, 250)}{rule.reasoning.length > 250 ? '...' : ''}
+          </Text>
+        )}
+      </View>
+      <Text style={{ fontSize: 6, fontWeight: 600, color: rule.passed ? colors.success : colors.error, width: 30, textAlign: 'right' }}>
+        {Math.round(rule.score * 100)}%
+      </Text>
+    </View>
+  );
+}
+
+export function EvalReportItemPage({ result, itemNumber, totalItems }: EvalReportItemPageProps) {
+  const itemName = result.item_name || result.input.message || `Test Item ${itemNumber}`;
+  const itemType = result.item_type || 'single_turn';
+  const criteriaScores = result.criteria_scores || [];
+  const rubricScores = result.rubric_scores || [];
+  const overallPassed = result.passed ?? (result.criteria_passed !== false && result.rubric_passed !== false);
+
+  const criteriaPassed = criteriaScores.filter(c => c.passed).length;
+  const rubricPassed = rubricScores.filter(r => r.passed).length;
+
+  const transcript = (itemType === 'scenario' || itemType === 'transcript')
+    ? ((result.output.transcript as string | undefined) || result.output.response || '')
+    : '';
+  const transcriptTurns = (itemType === 'scenario' || itemType === 'transcript') ? parseTurnsForExcerpt(transcript) : [];
+
+  return (
+    <Page size="A4" style={[styles.page, { padding: 24 }]} wrap>
+      {/* Header */}
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10, paddingBottom: 6, borderBottomWidth: 1, borderBottomColor: colors.border }} fixed>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <Text style={{ fontSize: 11, fontWeight: 600, color: colors.iris }}>
+            Item {itemNumber} of {totalItems}
+          </Text>
+          <View style={{
+            backgroundColor: itemType === 'scenario' ? `${colors.iris}20`
+              : itemType === 'transcript' ? '#10b98120'
+              : `${colors.muted}20`,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            borderRadius: 3,
+          }}>
+            <Text style={{ fontSize: 7, fontWeight: 600, color: itemType === 'scenario' ? colors.iris : itemType === 'transcript' ? '#059669' : colors.muted }}>
+              {itemType === 'single_turn' ? 'SINGLE TURN' : itemType === 'transcript' ? 'TRANSCRIPT' : 'SCENARIO'}
+            </Text>
+          </View>
+        </View>
+        <View style={{
+          backgroundColor: overallPassed ? '#dcfce7' : '#fee2e2',
+          paddingHorizontal: 8,
+          paddingVertical: 3,
+          borderRadius: 3,
+        }}>
+          <Text style={{ fontSize: 10, fontWeight: 700, color: overallPassed ? colors.success : colors.error }}>
+            {overallPassed ? 'PASSED' : 'FAILED'}
+          </Text>
+        </View>
+      </View>
+
+      {/* Item Name */}
+      <View style={{ marginBottom: 8 }} wrap={false}>
+        <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant, marginBottom: 3, textTransform: 'uppercase', letterSpacing: 0.5 }}>
+          Test Item
+        </Text>
+        <View style={{ backgroundColor: colors.background, padding: 6, borderRadius: 3 }}>
+          <Text style={{ fontSize: 7, color: colors.eggplant, lineHeight: 1.4 }}>{itemName}</Text>
+        </View>
+      </View>
+
+      {/* Transcript excerpt for scenarios */}
+      {transcriptTurns.length > 0 && (
+        <View style={{ marginBottom: 8 }}>
+          <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant, marginBottom: 3, textTransform: 'uppercase', letterSpacing: 0.5 }}>
+            Conversation Excerpt ({transcriptTurns.length} turn{transcriptTurns.length > 1 ? 's' : ''})
+          </Text>
+          <View style={{ backgroundColor: colors.background, padding: 6, borderRadius: 3 }}>
+            {transcriptTurns.map((turn, i) => (
+              <View key={i} style={{ marginBottom: i < transcriptTurns.length - 1 ? 4 : 0 }}>
+                <Text style={{ fontSize: 5.5, fontWeight: 700, color: turn.role === 'User' ? colors.muted : colors.iris, marginBottom: 1 }}>
+                  {turn.role}
+                </Text>
+                <Text style={{ fontSize: 5.5, color: colors.eggplant, lineHeight: 1.3 }}>
+                  {turn.content.slice(0, 200)}{turn.content.length > 200 ? '...' : ''}
+                </Text>
+              </View>
+            ))}
+          </View>
+        </View>
+      )}
+
+      {/* Two-column layout for criteria and rubric scores */}
+      <View style={{ flexDirection: 'row', gap: 10 }}>
+        {/* Criteria Scores */}
+        {criteriaScores.length > 0 && (
+          <View style={{ flex: 1 }}>
+            <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant, marginBottom: 4, textTransform: 'uppercase', letterSpacing: 0.5 }}>
+              Criteria Scores ({criteriaPassed}/{criteriaScores.length} passed)
+            </Text>
+            {criteriaScores.map((criterion, i) => (
+              <CriterionScoreRow key={i} criterion={criterion} />
+            ))}
+          </View>
+        )}
+
+        {/* Rubric Rule Scores */}
+        {rubricScores.length > 0 && (
+          <View style={{ flex: 1 }}>
+            <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant, marginBottom: 4, textTransform: 'uppercase', letterSpacing: 0.5 }}>
+              Rubric Scores ({rubricPassed}/{rubricScores.length} passed)
+            </Text>
+            {rubricScores.map((rule) => (
+              <RubricScoreRow key={rule.rule_id} rule={rule} />
+            ))}
+          </View>
+        )}
+      </View>
+
+      {/* Footer */}
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingTop: 6, borderTopWidth: 0.5, borderTopColor: colors.border, marginTop: 'auto' }} fixed>
+        <Text style={{ fontSize: 6, color: colors.muted }}>Indemn Evaluation Report</Text>
+        <Text style={{ fontSize: 6, color: colors.muted }} render={({ pageNumber: pn }) => `Page ${pn}`} />
+      </View>
+    </Page>
+  );
+}

package/src/report/eval-report/matrix-page.tsx

@@ -0,0 +1,124 @@
+// V1 evaluation matrix page — ported from EvalReportMatrixPage.tsx
+import { Page, View, Text } from '@react-pdf/renderer';
+import { styles, colors } from '../styles.js';
+import type { MatrixData } from './types.js';
+
+interface EvalReportMatrixPageProps {
+  matrixData: MatrixData;
+  pageNumber: number;
+}
+
+export function EvalReportMatrixPage({ matrixData, pageNumber }: EvalReportMatrixPageProps) {
+  const { rows, evaluators, columnAverages } = matrixData;
+
+  const numCol = 25;
+  const questionCol = 160;
+  const evalCol = 28;
+  const scoreCol = 35;
+
+  return (
+    <Page size="A4" orientation="landscape" style={[styles.page, { padding: 20 }]}>
+      {/* Header */}
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10, paddingBottom: 6, borderBottomWidth: 1, borderBottomColor: colors.border }}>
+        <Text style={{ fontSize: 14, fontWeight: 600, color: colors.iris }}>Evaluation Matrix</Text>
+        <Text style={{ fontSize: 8, color: colors.muted }}>Page {pageNumber}</Text>
+      </View>
+
+      {/* Matrix Table */}
+      <View style={{ flex: 1 }}>
+        {/* Table Header */}
+        <View style={{ flexDirection: 'row', borderBottomWidth: 1.5, borderBottomColor: colors.eggplant, paddingBottom: 4, marginBottom: 2 }}>
+          <View style={{ width: numCol }}>
+            <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant }}>#</Text>
+          </View>
+          <View style={{ width: questionCol }}>
+            <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant }}>Question</Text>
+          </View>
+          {evaluators.map((ev) => (
+            <View key={ev.key} style={{ width: evalCol, alignItems: 'center' }}>
+              <Text style={{ fontSize: 5, fontWeight: 700, color: ev.severity === 'High' ? '#3a4389' : colors.iris }}>
+                {ev.name.split(':')[0]}
+              </Text>
+            </View>
+          ))}
+          <View style={{ width: scoreCol, alignItems: 'center' }}>
+            <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant }}>Score</Text>
+          </View>
+        </View>
+
+        {/* Table Rows */}
+        {rows.map((row, index) => (
+          <View
+            key={row.resultId}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingVertical: 2,
+              backgroundColor: index % 2 === 0 ? colors.white : '#f8f8fc',
+            }}
+          >
+            <View style={{ width: numCol }}>
+              <Text style={{ fontSize: 5, color: colors.muted }}>{index + 1}</Text>
+            </View>
+            <View style={{ width: questionCol }}>
+              <Text style={{ fontSize: 5, color: colors.eggplant }}>
+                {row.question.slice(0, 45)}{row.question.length > 45 ? '...' : ''}
+              </Text>
+            </View>
+            {evaluators.map((ev) => {
+              const cell = row.cells[ev.key];
+              const hasCellData = cell !== undefined && cell !== null;
+              const passed = hasCellData && cell.passed;
+              return (
+                <View key={ev.key} style={{ width: evalCol, alignItems: 'center', backgroundColor: hasCellData ? (passed ? '#dcfce7' : '#fee2e2') : 'transparent' }}>
+                  <Text style={{ fontSize: 6, fontWeight: 700, color: hasCellData ? (passed ? colors.success : colors.error) : colors.muted }}>
+                    {hasCellData ? (passed ? 'P' : 'F') : '-'}
+                  </Text>
+                </View>
+              );
+            })}
+            <View style={{ width: scoreCol, alignItems: 'center' }}>
+              <Text style={{ fontSize: 5, fontWeight: 600, color: colors.eggplant }}>
+                {Math.round(row.avgScore * 100)}%
+              </Text>
+            </View>
+          </View>
+        ))}
+
+        {/* Column Averages Row */}
+        <View style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingVertical: 4,
+          borderTopWidth: 1.5,
+          borderTopColor: colors.eggplant,
+          marginTop: 2,
+          backgroundColor: colors.background,
+        }}>
+          <View style={{ width: numCol }} />
+          <View style={{ width: questionCol }}>
+            <Text style={{ fontSize: 6, fontWeight: 700, color: colors.eggplant }}>Pass Rate</Text>
+          </View>
+          {evaluators.map((ev) => (
+            <View key={ev.key} style={{ width: evalCol, alignItems: 'center' }}>
+              <Text style={{ fontSize: 5, fontWeight: 700, color: colors.eggplant }}>
+                {Math.round((columnAverages[ev.key] || 0) * 100)}%
+              </Text>
+            </View>
+          ))}
+          <View style={{ width: scoreCol, alignItems: 'center' }}>
+            <Text style={{ fontSize: 6, fontWeight: 700, color: colors.iris }}>
+              {Math.round(matrixData.overallAverage * 100)}%
+            </Text>
+          </View>
+        </View>
+      </View>
+
+      {/* Footer */}
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingTop: 8, borderTopWidth: 0.5, borderTopColor: colors.border, marginTop: 8 }}>
+        <Text style={{ fontSize: 7, color: colors.muted }}>Indemn Evaluation Report</Text>
+        <Text style={{ fontSize: 7, color: colors.muted }}>Page {pageNumber}</Text>
+      </View>
+    </Page>
+  );
+}