@indemn/cli 1.0.0 → 1.1.0

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

@@ -0,0 +1,582 @@
+// Agent card document — ported from AgentCardDocument.tsx
+import { Document, Page, View, Text } from '@react-pdf/renderer';
+import { AgentCardCover } from './cover.js';
+import { styles, colors } from '../styles.js';
+import { getScoreHexColor } from '../scoring.js';
+import type {
+  AgentCardData,
+  AgentCardTool,
+  AgentCardKnowledgeBase,
+  AgentCardLLMConfig,
+  AgentCardEvalRun,
+  LifecycleStage,
+  V1Owner,
+  ComponentScoreDetail,
+} from './types.js';
+
+interface AgentCardDocumentProps {
+  data: AgentCardData;
+}
+
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+
+function PageHeader({ title, pageNumber }: { title: string; pageNumber: number }) {
+  return (
+    <View style={styles.pageHeader}>
+      <Text style={styles.pageTitle}>{title}</Text>
+      <Text style={styles.pageNumber}>Page {pageNumber}</Text>
+    </View>
+  );
+}
+
+function PageFooter({ generatedDate }: { generatedDate: string }) {
+  return (
+    <View style={styles.footer}>
+      <Text style={styles.caption}>Generated {generatedDate}</Text>
+      <Text style={styles.caption}>Indemn Agent Card</Text>
+    </View>
+  );
+}
+
+function ComponentScoreBadge({ label, detail }: { label: string; detail?: ComponentScoreDetail }) {
+  if (!detail || detail.total === 0) return null;
+  const rate = detail.passed / detail.total;
+  const pct = Math.round(rate * 100);
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+      <View
+        style={{
+          backgroundColor: `${getScoreHexColor(rate)}18`,
+          paddingHorizontal: 8,
+          paddingVertical: 3,
+          borderRadius: 4,
+        }}
+      >
+        <Text style={{ fontSize: 9, fontWeight: 600, color: getScoreHexColor(rate) }}>
+          {label}: {pct}% ({detail.passed}/{detail.total})
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Page 2: System Prompt
+// ---------------------------------------------------------------------------
+
+function SystemPromptPage({
+  systemPrompt,
+  generatedDate,
+  componentScore,
+}: {
+  systemPrompt?: string;
+  generatedDate: string;
+  componentScore?: ComponentScoreDetail;
+}) {
+  return (
+    <Page size="A4" style={styles.page}>
+      <View style={styles.pageHeader}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+          <Text style={styles.pageTitle}>System Prompt</Text>
+          <ComponentScoreBadge label="Prompt Score" detail={componentScore} />
+        </View>
+        <Text style={styles.pageNumber}>Page 2</Text>
+      </View>
+
+      {systemPrompt ? (
+        <View
+          style={{
+            backgroundColor: colors.background,
+            borderRadius: 6,
+            padding: 16,
+            flex: 1,
+            marginBottom: 60,
+          }}
+        >
+          <Text
+            style={{
+              fontFamily: 'Courier',
+              fontSize: 9,
+              lineHeight: 1.6,
+              color: colors.eggplant,
+            }}
+          >
+            {systemPrompt}
+          </Text>
+        </View>
+      ) : (
+        <View style={[styles.card, { alignItems: 'center', paddingVertical: 40 }]}>
+          <Text style={{ fontSize: 12, color: colors.muted }}>
+            No system prompt configured
+          </Text>
+        </View>
+      )}
+
+      <PageFooter generatedDate={generatedDate} />
+    </Page>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Page 3: Tools
+// ---------------------------------------------------------------------------
+
+function ToolsPage({
+  tools,
+  generatedDate,
+  componentScore,
+}: {
+  tools: AgentCardTool[];
+  generatedDate: string;
+  componentScore?: ComponentScoreDetail;
+}) {
+  return (
+    <Page size="A4" style={styles.page}>
+      <View style={styles.pageHeader}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+          <Text style={styles.pageTitle}>Tools ({tools.length})</Text>
+          <ComponentScoreBadge label="Function Score" detail={componentScore} />
+        </View>
+        <Text style={styles.pageNumber}>Page 3</Text>
+      </View>
+
+      {tools.length > 0 ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: 12,
+            marginBottom: 60,
+          }}
+        >
+          {tools.map((tool) => (
+            <View
+              key={tool.id}
+              style={{
+                width: '48%',
+                backgroundColor: colors.background,
+                borderRadius: 6,
+                padding: 12,
+              }}
+            >
+              <Text style={{ fontSize: 11, fontWeight: 600, color: colors.eggplant, marginBottom: 4 }}>
+                {tool.name}
+              </Text>
+              <Text style={{ fontSize: 9, fontFamily: 'Courier', color: colors.muted, marginBottom: 4 }}>
+                {tool.tool_name}
+              </Text>
+              {tool.description && (
+                <Text style={{ fontSize: 9, color: colors.muted, lineHeight: 1.4, marginBottom: 4 }}>
+                  {tool.description}
+                </Text>
+              )}
+              <View
+                style={{
+                  backgroundColor: colors.white,
+                  paddingHorizontal: 6,
+                  paddingVertical: 2,
+                  borderRadius: 3,
+                  alignSelf: 'flex-start',
+                }}
+              >
+                <Text style={{ fontSize: 8, fontWeight: 500, color: colors.iris }}>
+                  {tool.type}
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      ) : (
+        <View style={[styles.card, { alignItems: 'center', paddingVertical: 40 }]}>
+          <Text style={{ fontSize: 12, color: colors.muted }}>
+            No tools configured
+          </Text>
+        </View>
+      )}
+
+      <PageFooter generatedDate={generatedDate} />
+    </Page>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Page 4: Knowledge Bases
+// ---------------------------------------------------------------------------
+
+function KnowledgeBasesPage({
+  knowledgeBases,
+  generatedDate,
+  componentScore,
+}: {
+  knowledgeBases: AgentCardKnowledgeBase[];
+  generatedDate: string;
+  componentScore?: ComponentScoreDetail;
+}) {
+  return (
+    <Page size="A4" style={styles.page}>
+      <View style={styles.pageHeader}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+          <Text style={styles.pageTitle}>Knowledge Bases ({knowledgeBases.length})</Text>
+          <ComponentScoreBadge label="KB Score" detail={componentScore} />
+        </View>
+        <Text style={styles.pageNumber}>Page 4</Text>
+      </View>
+
+      {knowledgeBases.length > 0 ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: 12,
+            marginBottom: 60,
+          }}
+        >
+          {knowledgeBases.map((kb) => (
+            <View
+              key={kb.id}
+              style={{
+                width: '48%',
+                backgroundColor: colors.background,
+                borderRadius: 6,
+                padding: 12,
+              }}
+            >
+              <Text style={{ fontSize: 11, fontWeight: 600, color: colors.eggplant, marginBottom: 4 }}>
+                {kb.name}
+              </Text>
+              <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+                <View
+                  style={{
+                    backgroundColor: colors.white,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                    borderRadius: 3,
+                  }}
+                >
+                  <Text style={{ fontSize: 8, fontWeight: 500, color: colors.iris }}>
+                    {kb.type}
+                  </Text>
+                </View>
+                <Text style={{ fontSize: 9, color: colors.muted }}>
+                  {kb.document_count} documents
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      ) : (
+        <View style={[styles.card, { alignItems: 'center', paddingVertical: 40 }]}>
+          <Text style={{ fontSize: 12, color: colors.muted }}>
+            No knowledge bases linked
+          </Text>
+        </View>
+      )}
+
+      <PageFooter generatedDate={generatedDate} />
+    </Page>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Page 5: LLM Configuration
+// ---------------------------------------------------------------------------
+
+function LLMConfigPage({
+  llmConfig,
+  generatedDate,
+}: {
+  llmConfig?: AgentCardLLMConfig;
+  generatedDate: string;
+}) {
+  return (
+    <Page size="A4" style={styles.page}>
+      <PageHeader title="LLM Configuration" pageNumber={5} />
+
+      {llmConfig ? (
+        <View style={[styles.card, { marginBottom: 60 }]}>
+          <View style={{ flexDirection: 'row', marginBottom: 12 }}>
+            <View style={{ flex: 1 }}>
+              <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Provider</Text>
+              <Text style={{ fontSize: 12, fontWeight: 500, color: colors.eggplant }}>
+                {llmConfig.provider || 'N/A'}
+              </Text>
+            </View>
+            <View style={{ flex: 1 }}>
+              <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Model</Text>
+              <Text style={{ fontSize: 12, fontWeight: 500, fontFamily: 'Courier', color: colors.eggplant }}>
+                {llmConfig.model || 'N/A'}
+              </Text>
+            </View>
+          </View>
+
+          {llmConfig.parameters && Object.keys(llmConfig.parameters).length > 0 && (
+            <View>
+              <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 8 }}>Parameters</Text>
+              <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
+                {Object.entries(llmConfig.parameters).map(([key, value]) => (
+                  <View key={key} style={{ backgroundColor: colors.white, borderRadius: 4, padding: 8, minWidth: 100 }}>
+                    <Text style={{ fontSize: 9, color: colors.muted, marginBottom: 2 }}>
+                      {key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}
+                    </Text>
+                    <Text style={{ fontSize: 11, fontFamily: 'Courier', color: colors.eggplant }}>
+                      {String(value)}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+            </View>
+          )}
+        </View>
+      ) : (
+        <View style={[styles.card, { alignItems: 'center', paddingVertical: 40 }]}>
+          <Text style={{ fontSize: 12, color: colors.muted }}>
+            No LLM configuration set (using defaults)
+          </Text>
+        </View>
+      )}
+
+      <PageFooter generatedDate={generatedDate} />
+    </Page>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Page 6: Evaluation History
+// ---------------------------------------------------------------------------
+
+function EvaluationHistoryPage({
+  runs,
+  generatedDate,
+}: {
+  runs: AgentCardEvalRun[];
+  generatedDate: string;
+}) {
+  const completedRuns = runs.filter(r => r.status === 'completed');
+  const recentRuns = completedRuns.slice(0, 10);
+
+  return (
+    <Page size="A4" style={styles.page}>
+      <PageHeader title={`Evaluation History (${completedRuns.length} runs)`} pageNumber={6} />
+
+      {recentRuns.length > 0 ? (
+        <View style={{ marginBottom: 60 }}>
+          {/* Table header */}
+          <View
+            style={{
+              flexDirection: 'row',
+              backgroundColor: colors.eggplant,
+              borderTopLeftRadius: 6,
+              borderTopRightRadius: 6,
+              paddingVertical: 8,
+              paddingHorizontal: 12,
+            }}
+          >
+            <Text style={{ flex: 2, fontSize: 9, fontWeight: 600, color: colors.white }}>Date</Text>
+            <Text style={{ flex: 2, fontSize: 9, fontWeight: 600, color: colors.white }}>Model</Text>
+            <Text style={{ flex: 1, fontSize: 9, fontWeight: 600, color: colors.white, textAlign: 'center' }}>Items</Text>
+            <Text style={{ flex: 1.5, fontSize: 9, fontWeight: 600, color: colors.white, textAlign: 'center' }}>Criteria</Text>
+            <Text style={{ flex: 1.5, fontSize: 9, fontWeight: 600, color: colors.white, textAlign: 'center' }}>Rubric</Text>
+          </View>
+
+          {/* Table rows */}
+          {recentRuns.map((run, i) => {
+            const date = run.completed_at || run.created_at;
+            const dateStr = new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+            const model = run.bot_llm_model || 'N/A';
+            const criteriaStr = run.criteriaScore !== null ? `${run.criteriaScore}% (${run.criteriaPassed}/${run.criteriaTotal})` : '-';
+            const rubricStr = run.rubricScore !== null ? `${run.rubricScore}% (${run.rubricRulesPassed}/${run.rubricRulesTotal})` : '-';
+
+            return (
+              <View
+                key={run.run_id}
+                style={{
+                  flexDirection: 'row',
+                  backgroundColor: i % 2 === 0 ? colors.background : colors.white,
+                  paddingVertical: 7,
+                  paddingHorizontal: 12,
+                  ...(i === recentRuns.length - 1 ? { borderBottomLeftRadius: 6, borderBottomRightRadius: 6 } : {}),
+                }}
+              >
+                <Text style={{ flex: 2, fontSize: 9, color: colors.eggplant }}>{dateStr}</Text>
+                <Text style={{ flex: 2, fontSize: 9, fontFamily: 'Courier', color: colors.eggplant }}>{model}</Text>
+                <Text style={{ flex: 1, fontSize: 9, color: colors.muted, textAlign: 'center' }}>{run.completed}/{run.total}</Text>
+                <Text style={{ flex: 1.5, fontSize: 9, fontWeight: 500, color: run.criteriaScore !== null ? getScoreHexColor(run.criteriaScore / 100) : colors.muted, textAlign: 'center' }}>
+                  {criteriaStr}
+                </Text>
+                <Text style={{ flex: 1.5, fontSize: 9, fontWeight: 500, color: run.rubricScore !== null ? getScoreHexColor(run.rubricScore / 100) : colors.muted, textAlign: 'center' }}>
+                  {rubricStr}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+      ) : (
+        <View style={[styles.card, { alignItems: 'center', paddingVertical: 40 }]}>
+          <Text style={{ fontSize: 12, color: colors.muted }}>
+            No completed evaluation runs
+          </Text>
+        </View>
+      )}
+
+      <PageFooter generatedDate={generatedDate} />
+    </Page>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Page 7: Metadata
+// ---------------------------------------------------------------------------
+
+function MetadataPage({
+  botId,
+  organizationId,
+  lifecycle,
+  owner,
+  generatedDate,
+}: {
+  botId: string;
+  organizationId?: string;
+  lifecycle?: LifecycleStage;
+  owner?: V1Owner;
+  generatedDate: string;
+}) {
+  const ownerName = owner
+    ? [owner.firstname, owner.lastname].filter(Boolean).join(' ') || owner.email || 'Unknown'
+    : undefined;
+
+  const lcColors: Record<string, { bg: string; text: string }> = {
+    prototype: { bg: '#e5e7eb', text: '#4b5563' },
+    beta: { bg: '#fef3c7', text: '#92400e' },
+    published: { bg: '#d1fae5', text: '#065f46' },
+  };
+  const lc = lifecycle ? lcColors[lifecycle] || lcColors.prototype : null;
+
+  return (
+    <Page size="A4" style={styles.page}>
+      <PageHeader title="Metadata" pageNumber={7} />
+
+      <View style={[styles.card, { marginBottom: 60 }]}>
+        {/* Row 1: Lifecycle + Owner */}
+        <View style={{ flexDirection: 'row', marginBottom: 16 }}>
+          <View style={{ flex: 1 }}>
+            <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Lifecycle Stage</Text>
+            {lc ? (
+              <View style={{ backgroundColor: lc.bg, paddingHorizontal: 8, paddingVertical: 3, borderRadius: 4, alignSelf: 'flex-start' }}>
+                <Text style={{ fontSize: 10, fontWeight: 600, color: lc.text }}>
+                  {lifecycle!.charAt(0).toUpperCase() + lifecycle!.slice(1)}
+                </Text>
+              </View>
+            ) : (
+              <Text style={{ fontSize: 11, color: colors.muted }}>Not set</Text>
+            )}
+          </View>
+          <View style={{ flex: 1 }}>
+            <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Owner</Text>
+            <Text style={{ fontSize: 11, color: colors.eggplant }}>
+              {ownerName || 'Unassigned'}
+            </Text>
+            {owner?.email && ownerName !== owner.email && (
+              <Text style={{ fontSize: 9, color: colors.muted }}>{owner.email}</Text>
+            )}
+          </View>
+        </View>
+
+        {/* Row 2: Bot ID + Org ID */}
+        <View style={{ flexDirection: 'row', marginBottom: 12 }}>
+          <View style={{ flex: 1 }}>
+            <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Bot ID</Text>
+            <Text style={{ fontSize: 11, fontFamily: 'Courier', color: colors.eggplant }}>
+              {botId}
+            </Text>
+          </View>
+          <View style={{ flex: 1 }}>
+            <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Organization ID</Text>
+            <Text style={{ fontSize: 11, fontFamily: 'Courier', color: colors.eggplant }}>
+              {organizationId || 'N/A'}
+            </Text>
+          </View>
+        </View>
+
+        {/* Row 3: Generated date */}
+        <View style={{ flexDirection: 'row' }}>
+          <View style={{ flex: 1 }}>
+            <Text style={{ fontSize: 10, color: colors.muted, marginBottom: 4 }}>Report Generated</Text>
+            <Text style={{ fontSize: 11, color: colors.eggplant }}>{generatedDate}</Text>
+          </View>
+        </View>
+      </View>
+
+      <PageFooter generatedDate={generatedDate} />
+    </Page>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Document
+// ---------------------------------------------------------------------------
+
+export function AgentCardDocument({ data }: AgentCardDocumentProps) {
+  const hasEvalRuns = data.evaluationRuns && data.evaluationRuns.length > 0;
+
+  return (
+    <Document
+      title={`Indemn Agent Card - ${data.name}`}
+      author="Indemn Platform"
+      subject={`Agent card for ${data.name}`}
+    >
+      {/* Page 1: Cover */}
+      <AgentCardCover
+        agentName={data.name}
+        description={data.description}
+        channels={data.channels}
+        generatedDate={data.generatedDate}
+        lifecycle={data.lifecycle}
+        owner={data.owner}
+        evaluationSummary={data.evaluationSummary}
+      />
+
+      {/* Page 2: System Prompt */}
+      <SystemPromptPage
+        systemPrompt={data.system_prompt}
+        generatedDate={data.generatedDate}
+        componentScore={data.componentScores?.prompt}
+      />
+
+      {/* Page 3: Tools */}
+      <ToolsPage
+        tools={data.tools}
+        generatedDate={data.generatedDate}
+        componentScore={data.componentScores?.function}
+      />
+
+      {/* Page 4: Knowledge Bases */}
+      <KnowledgeBasesPage
+        knowledgeBases={data.knowledge_bases}
+        generatedDate={data.generatedDate}
+        componentScore={data.componentScores?.knowledge_base}
+      />
+
+      {/* Page 5: LLM Configuration */}
+      <LLMConfigPage llmConfig={data.llm_config} generatedDate={data.generatedDate} />
+
+      {/* Page 6: Evaluation History (only if runs exist) */}
+      {hasEvalRuns && (
+        <EvaluationHistoryPage
+          runs={data.evaluationRuns!}
+          generatedDate={data.generatedDate}
+        />
+      )}
+
+      {/* Page 7 (or 6 if no eval history): Metadata */}
+      <MetadataPage
+        botId={data.id}
+        organizationId={data.organization_id}
+        lifecycle={data.lifecycle}
+        owner={data.owner}
+        generatedDate={data.generatedDate}
+      />
+    </Document>
+  );
+}

package/src/report/agent-card/types.ts

@@ -0,0 +1,86 @@
+// Agent card data types
+
+export type LifecycleStage = 'prototype' | 'beta' | 'published';
+
+export interface V1Owner {
+  firstname?: string;
+  lastname?: string;
+  email?: string;
+}
+
+export interface ComponentScoreDetail {
+  score?: number;
+  total: number;
+  passed: number;
+}
+
+export interface ComponentScores {
+  prompt?: ComponentScoreDetail;
+  knowledge_base?: ComponentScoreDetail;
+  function?: ComponentScoreDetail;
+  general?: ComponentScoreDetail;
+}
+
+export interface AgentCardTool {
+  id: string;
+  name: string;
+  tool_name: string;
+  type: string;
+  description?: string;
+}
+
+export interface AgentCardKnowledgeBase {
+  id: string;
+  name: string;
+  type: string;
+  document_count: number;
+}
+
+export interface AgentCardLLMConfig {
+  provider?: string;
+  model?: string;
+  parameters?: Record<string, unknown>;
+}
+
+export interface AgentCardEvalRun {
+  run_id: string;
+  status: string;
+  created_at: string;
+  completed_at?: string;
+  bot_llm_model?: string;
+  bot_llm_provider?: string;
+  criteriaScore: number | null;  // 0-100
+  rubricScore: number | null;    // 0-100
+  criteriaPassed: number;
+  criteriaTotal: number;
+  rubricRulesPassed: number;
+  rubricRulesTotal: number;
+  total: number;
+  completed: number;
+}
+
+export interface AgentCardData {
+  id: string;
+  name: string;
+  description?: string;
+  channels: string[];
+  organization_id?: string;
+  system_prompt?: string;
+  tools: AgentCardTool[];
+  knowledge_bases: AgentCardKnowledgeBase[];
+  llm_config?: AgentCardLLMConfig;
+  generatedDate: string;
+  lifecycle?: LifecycleStage;
+  owner?: V1Owner;
+  evaluationSummary?: {
+    criteriaRate: number | null;
+    rubricRate: number | null;
+    criteriaPassed: number;
+    criteriaTotal: number;
+    rubricRulesPassed: number;
+    rubricRulesTotal: number;
+    totalRuns: number;
+  };
+  componentScores?: ComponentScores;
+  evaluationRuns?: AgentCardEvalRun[];
+}