@indemn/cli 1.0.0 → 1.1.1

package/src/report/agent-card/cover.tsx

@@ -0,0 +1,232 @@
+// Agent card cover page — ported from AgentCardCover.tsx
+import { Page, View, Text, Image } from '@react-pdf/renderer';
+import { styles, colors, logoPath } from '../styles.js';
+import { getScoreHexColor } from '../scoring.js';
+import type { LifecycleStage, V1Owner } from './types.js';
+
+export interface AgentCardCoverProps {
+  agentName: string;
+  description?: string;
+  channels: string[];
+  generatedDate: string;
+  lifecycle?: LifecycleStage;
+  owner?: V1Owner;
+  evaluationSummary?: {
+    criteriaRate: number | null;
+    rubricRate: number | null;
+    criteriaPassed: number;
+    criteriaTotal: number;
+    rubricRulesPassed: number;
+    rubricRulesTotal: number;
+    totalRuns: number;
+  };
+}
+
+const lifecycleColors: Record<string, { bg: string; text: string }> = {
+  prototype: { bg: '#e5e7eb', text: '#4b5563' },
+  beta: { bg: '#fef3c7', text: '#92400e' },
+  published: { bg: '#d1fae5', text: '#065f46' },
+};
+
+export function AgentCardCover({
+  agentName,
+  description,
+  channels,
+  generatedDate,
+  lifecycle,
+  owner,
+  evaluationSummary,
+}: AgentCardCoverProps) {
+  const lc = lifecycle ? lifecycleColors[lifecycle] || lifecycleColors.prototype : null;
+  const ownerName = owner
+    ? [owner.firstname, owner.lastname].filter(Boolean).join(' ') || owner.email || null
+    : null;
+
+  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>
+
+      {/* Badges row: V1 Agent + Lifecycle */}
+      <View style={{ flexDirection: 'row', justifyContent: 'center', gap: 8, marginBottom: 16 }}>
+        <View
+          style={{
+            backgroundColor: `${colors.iris}20`,
+            paddingHorizontal: 12,
+            paddingVertical: 4,
+            borderRadius: 4,
+          }}
+        >
+          <Text style={{ fontSize: 10, fontWeight: 500, color: colors.iris }}>
+            V1 Agent
+          </Text>
+        </View>
+        {lc && (
+          <View
+            style={{
+              backgroundColor: lc.bg,
+              paddingHorizontal: 12,
+              paddingVertical: 4,
+              borderRadius: 4,
+            }}
+          >
+            <Text style={{ fontSize: 10, fontWeight: 500, color: lc.text }}>
+              {lifecycle!.charAt(0).toUpperCase() + lifecycle!.slice(1)}
+            </Text>
+          </View>
+        )}
+      </View>
+
+      {/* Title */}
+      <View style={{ alignItems: 'center', marginBottom: 8 }}>
+        <Text
+          style={{
+            fontSize: 28,
+            fontWeight: 700,
+            color: colors.eggplant,
+            marginBottom: 8,
+            textAlign: 'center',
+          }}
+        >
+          {agentName}
+        </Text>
+        {description && (
+          <Text
+            style={{
+              fontSize: 14,
+              fontWeight: 400,
+              color: colors.muted,
+              textAlign: 'center',
+              maxWidth: 400,
+            }}
+          >
+            {description}
+          </Text>
+        )}
+      </View>
+
+      {/* Owner */}
+      {ownerName && (
+        <View style={{ alignItems: 'center', marginBottom: 16 }}>
+          <Text style={{ fontSize: 10, color: colors.muted }}>
+            Owner: {ownerName}
+          </Text>
+        </View>
+      )}
+
+      {/* Channels */}
+      {channels.length > 0 && (
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'center',
+            gap: 8,
+            marginBottom: 32,
+          }}
+        >
+          {channels.map((channel) => (
+            <View
+              key={channel}
+              style={{
+                backgroundColor: colors.background,
+                paddingHorizontal: 10,
+                paddingVertical: 4,
+                borderRadius: 4,
+              }}
+            >
+              <Text style={{ fontSize: 10, fontWeight: 500, color: colors.eggplant }}>
+                {channel}
+              </Text>
+            </View>
+          ))}
+        </View>
+      )}
+
+      {/* Evaluation Summary — Dual Scores */}
+      <View style={{ alignItems: 'center', marginBottom: 48 }}>
+        <View style={[styles.card, { paddingHorizontal: 32, paddingVertical: 20, minWidth: 320 }]}>
+          {evaluationSummary && evaluationSummary.totalRuns > 0 ? (
+            <View>
+              {/* Dual score row */}
+              <View style={{ flexDirection: 'row', justifyContent: 'center', gap: 32, marginBottom: 8 }}>
+                {/* Criteria score */}
+                <View style={{ alignItems: 'center' }}>
+                  <Text style={{ fontSize: 10, fontWeight: 500, color: colors.muted, marginBottom: 4 }}>
+                    Criteria
+                  </Text>
+                  {evaluationSummary.criteriaRate !== null ? (
+                    <>
+                      <Text
+                        style={{
+                          fontSize: 24,
+                          fontWeight: 700,
+                          color: getScoreHexColor(evaluationSummary.criteriaRate),
+                        }}
+                      >
+                        {Math.round(evaluationSummary.criteriaRate * 100)}%
+                      </Text>
+                      <Text style={{ fontSize: 9, color: colors.muted, marginTop: 2 }}>
+                        {evaluationSummary.criteriaPassed}/{evaluationSummary.criteriaTotal} checks
+                      </Text>
+                    </>
+                  ) : (
+                    <Text style={{ fontSize: 14, color: colors.muted }}>-</Text>
+                  )}
+                </View>
+
+                {/* Divider */}
+                <View style={{ width: 1, backgroundColor: colors.border, marginVertical: 4 }} />
+
+                {/* Rubric score */}
+                <View style={{ alignItems: 'center' }}>
+                  <Text style={{ fontSize: 10, fontWeight: 500, color: colors.muted, marginBottom: 4 }}>
+                    Rubric
+                  </Text>
+                  {evaluationSummary.rubricRate !== null ? (
+                    <>
+                      <Text
+                        style={{
+                          fontSize: 24,
+                          fontWeight: 700,
+                          color: getScoreHexColor(evaluationSummary.rubricRate),
+                        }}
+                      >
+                        {Math.round(evaluationSummary.rubricRate * 100)}%
+                      </Text>
+                      <Text style={{ fontSize: 9, color: colors.muted, marginTop: 2 }}>
+                        {evaluationSummary.rubricRulesPassed}/{evaluationSummary.rubricRulesTotal} rules
+                      </Text>
+                    </>
+                  ) : (
+                    <Text style={{ fontSize: 14, color: colors.muted }}>-</Text>
+                  )}
+                </View>
+              </View>
+
+              {/* Run count */}
+              <View style={{ alignItems: 'center' }}>
+                <Text style={{ fontSize: 9, fontWeight: 400, color: colors.muted }}>
+                  across {evaluationSummary.totalRuns} evaluation run{evaluationSummary.totalRuns !== 1 ? 's' : ''}
+                </Text>
+              </View>
+            </View>
+          ) : (
+            <View style={{ alignItems: 'center' }}>
+              <Text style={{ fontSize: 12, fontWeight: 500, color: colors.muted }}>
+                Not yet evaluated
+              </Text>
+            </View>
+          )}
+        </View>
+      </View>
+
+      {/* Footer */}
+      <View style={[styles.footer, { position: 'absolute', bottom: 40 }]}>
+        <Text style={styles.caption}>Generated {generatedDate}</Text>
+        <Text style={styles.caption}>Page 1</Text>
+      </View>
+    </Page>
+  );
+}