@ai-lighthouse/cli 1.0.0

package/src/ui/components/HallucinationSection.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface HallucinationSectionProps {
+  hallucinationReport: any;
+}
+
+export const HallucinationSection: React.FC<HallucinationSectionProps> = ({ hallucinationReport }) => {
+  if (!hallucinationReport || Object.keys(hallucinationReport).length === 0) {
+    return (
+      <Box flexDirection="column" paddingY={1}>
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="yellow"
+          paddingX={2}
+          paddingY={1}
+        >
+          <Text bold color="yellow">
+            💡 Enable Hallucination Detection
+          </Text>
+          <Box marginTop={1} flexDirection="column">
+            <Text>Hallucination detection is not enabled. To see risk assessment, run:</Text>
+            <Box marginTop={1} borderStyle="single" paddingX={1}>
+              <Text color="cyan">
+                ai-lighthouse audit [URL] --enable-hallucination --enable-llm --llm-provider openai --llm-api-key YOUR_KEY
+              </Text>
+            </Box>
+            <Box marginTop={1}>
+              <Text dimColor>Note: Hallucination detection requires LLM analysis to be enabled</Text>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+
+  const riskScore = hallucinationReport.hallucinationRiskScore;
+  const getRiskColor = (score: number) => {
+    if (score >= 70) return 'red';
+    if (score >= 40) return 'yellow';
+    return 'green';
+  };
+
+  return (
+    <Box flexDirection="column" paddingY={1}>
+      {/* Risk Score */}
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={getRiskColor(riskScore)}
+        paddingX={2}
+        paddingY={1}
+        marginBottom={1}
+      >
+        <Text bold color={getRiskColor(riskScore)}>
+          ⚠️  Hallucination Risk Assessment
+        </Text>
+        <Box marginTop={1}>
+          <Text>
+            <Text bold>Risk Score: </Text>
+            <Text bold color={getRiskColor(riskScore)}>
+              {riskScore}/100
+            </Text>
+          </Text>
+        </Box>
+      </Box>
+
+      {/* Fact Check Summary */}
+      {hallucinationReport.factCheckSummary && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="blue"
+          paddingX={2}
+          paddingY={1}
+          marginBottom={1}
+        >
+          <Text bold color="blue">
+            📊 Fact Check Summary
+          </Text>
+          <Box marginTop={1} flexDirection="column">
+            <Text>
+              <Text bold>Total Facts:</Text> {hallucinationReport.factCheckSummary.totalFacts}
+            </Text>
+            <Text>
+              <Text bold color="green">Verified:</Text> {hallucinationReport.factCheckSummary.verifiedFacts}
+            </Text>
+            <Text>
+              <Text bold color="yellow">Unverified:</Text> {hallucinationReport.factCheckSummary.unverifiedFacts}
+            </Text>
+            <Text>
+              <Text bold color="red">Contradictions:</Text> {hallucinationReport.factCheckSummary.contradictions}
+            </Text>
+            {hallucinationReport.factCheckSummary.ambiguities !== undefined && (
+              <Text>
+                <Text bold color="yellow">Ambiguities:</Text> {hallucinationReport.factCheckSummary.ambiguities}
+              </Text>
+            )}
+          </Box>
+        </Box>
+      )}
+
+      {/* Tip for unverified facts */}
+      {hallucinationReport.factCheckSummary?.unverifiedFacts > 0 && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="yellow"
+          paddingX={2}
+          paddingY={1}
+          marginBottom={1}
+        >
+          <Text color="yellow">
+            💡 Tip: Add citations and links to verify claims and reduce AI hallucination risk
+          </Text>
+        </Box>
+      )}
+
+      {/* High-Risk Triggers */}
+      {hallucinationReport.triggers && hallucinationReport.triggers.length > 0 && (
+        <>
+          {hallucinationReport.triggers.filter((t: any) => t.severity === 'high' || t.severity === 'critical').length > 0 && (
+            <Box flexDirection="column" marginBottom={1}>
+              <Text bold underline color="red">
+                🚨 High-Risk Triggers
+              </Text>
+              {hallucinationReport.triggers
+                .filter((t: any) => t.severity === 'high' || t.severity === 'critical')
+                .slice(0, 5)
+                .map((trigger: any, idx: number) => (
+                  <Box
+                    key={idx}
+                    flexDirection="column"
+                    borderStyle="single"
+                    borderColor="red"
+                    paddingX={1}
+                    paddingY={0.5}
+                    marginTop={1}
+                  >
+                    <Text>
+                      {idx + 1}. <Text bold color="red">[{trigger.severity.toUpperCase()}]</Text> {trigger.type}
+                    </Text>
+                    <Text dimColor>{trigger.description}</Text>
+                    {trigger.confidence && (
+                      <Text dimColor>Confidence: {Math.round(trigger.confidence * 100)}%</Text>
+                    )}
+                  </Box>
+                ))}
+            </Box>
+          )}
+        </>
+      )}
+
+      {/* Recommendations */}
+      {hallucinationReport.recommendations && hallucinationReport.recommendations.length > 0 && (
+        <Box flexDirection="column">
+          <Text bold underline color="cyan">
+            💡 Recommendations
+          </Text>
+          {hallucinationReport.recommendations.slice(0, 3).map((rec: string, idx: number) => (
+            <Box key={idx} marginTop={0.5}>
+              <Text color="cyan">
+                {idx + 1}. {rec}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/ui/components/IssuesSection.tsx

@@ -0,0 +1,140 @@
+import React, { useState } from 'react';
+import { Box, Text } from 'ink';
+import SelectInput from 'ink-select-input';
+
+interface IssuesSectionProps {
+  issues: any[];
+}
+
+export const IssuesSection: React.FC<IssuesSectionProps> = ({ issues }) => {
+  const [selectedSeverity, setSelectedSeverity] = useState<string>('all');
+  const [expandedIssue, setExpandedIssue] = useState<number | null>(null);
+
+  const getSeverityColor = (severity: string) => {
+    if (severity === 'critical') return 'red';
+    if (severity === 'high') return 'magenta';
+    if (severity === 'medium') return 'yellow';
+    return 'blue';
+  };
+
+  const getSeverityIcon = (severity: string) => {
+    if (severity === 'critical') return '🔴';
+    if (severity === 'high') return '🟠';
+    if (severity === 'medium') return '🟡';
+    return '🔵';
+  };
+
+  // Group issues by severity
+  const grouped = {
+    critical: issues.filter(i => i.severity === 'critical'),
+    high: issues.filter(i => i.severity === 'high'),
+    medium: issues.filter(i => i.severity === 'medium'),
+    low: issues.filter(i => i.severity === 'low'),
+  };
+
+  const filteredIssues = selectedSeverity === 'all' ? issues : grouped[selectedSeverity as keyof typeof grouped] || [];
+
+  return (
+    <Box flexDirection="column" paddingY={1}>
+      {/* Summary Stats */}
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor="blue"
+        paddingX={2}
+        paddingY={1}
+        marginBottom={1}
+      >
+        <Text bold color="blue">
+          ⚠️  Issues Summary
+        </Text>
+        <Box marginTop={1}>
+          <Box flexDirection="column" width="50%">
+            <Text>
+              <Text color="red" bold>
+                Critical:
+              </Text>{' '}
+              {grouped.critical.length}
+            </Text>
+            <Text>
+              <Text color="magenta" bold>
+                High:
+              </Text>{' '}
+              {grouped.high.length}
+            </Text>
+          </Box>
+          <Box flexDirection="column" width="50%">
+            <Text>
+              <Text color="yellow" bold>
+                Medium:
+              </Text>{' '}
+              {grouped.medium.length}
+            </Text>
+            <Text>
+              <Text color="blue" bold>
+                Low:
+              </Text>{' '}
+              {grouped.low.length}
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+
+      {/* Issue List */}
+      <Box flexDirection="column">
+        <Text bold underline>
+          {selectedSeverity === 'all' ? 'All Issues' : `${selectedSeverity.toUpperCase()} Issues`} ({filteredIssues.length})
+        </Text>
+        {filteredIssues.map((issue: any, idx: number) => (
+          <Box
+            key={idx}
+            flexDirection="column"
+            borderStyle="round"
+            borderColor={getSeverityColor(issue.severity)}
+            paddingX={2}
+            paddingY={1}
+            marginTop={1}
+          >
+            <Box>
+              <Text>
+                {getSeverityIcon(issue.severity)}{' '}
+                <Text bold color={getSeverityColor(issue.severity)}>
+                  {issue.message || issue.title}
+                </Text>
+              </Text>
+            </Box>
+
+            <Box marginTop={0.5}>
+              <Text dimColor>
+                Category: {issue.category} • Impact: {issue.impact}
+              </Text>
+            </Box>
+
+            {issue.evidence && (
+              <Box marginTop={0.5}>
+                <Text dimColor>
+                  {typeof issue.evidence === 'string'
+                    ? issue.evidence.substring(0, 100)
+                    : Array.isArray(issue.evidence)
+                    ? issue.evidence.join(', ').substring(0, 100)
+                    : ''}
+                  {(typeof issue.evidence === 'string' ? issue.evidence : issue.evidence?.join(', ') || '').length > 100 ? '...' : ''}
+                </Text>
+              </Box>
+            )}
+
+            <Box
+              marginTop={1}
+              borderStyle="single"
+              borderColor="cyan"
+              paddingX={1}
+              paddingY={0.5}
+            >
+              <Text color="cyan">💡 Fix: {issue.suggested_fix || issue.remediation}</Text>
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};

package/src/ui/components/MessageAlignmentSection.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface MessageAlignmentSectionProps {
+  mirrorReport: any;
+}
+
+export const MessageAlignmentSection: React.FC<MessageAlignmentSectionProps> = ({ mirrorReport }) => {
+  if (!mirrorReport || Object.keys(mirrorReport).length === 0) {
+    return (
+      <Box flexDirection="column" paddingY={1}>
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="yellow"
+          paddingX={2}
+          paddingY={1}
+        >
+          <Text bold color="yellow">
+            💡 Enable Message Alignment Analysis
+          </Text>
+          <Box marginTop={1} flexDirection="column">
+            <Text>Message alignment analysis is not available. To see what AI understands, run:</Text>
+            <Box marginTop={1} borderStyle="single" paddingX={1}>
+              <Text color="cyan">
+                ai-lighthouse audit [URL] --enable-llm --llm-provider openai --llm-api-key YOUR_KEY
+              </Text>
+            </Box>
+            <Box marginTop={1}>
+              <Text dimColor>This requires LLM analysis to compare AI understanding with your intended message</Text>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+
+  const getScoreColor = (score: number) => {
+    if (score >= 80) return 'green';
+    if (score >= 60) return 'yellow';
+    return 'red';
+  };
+
+  return (
+    <Box flexDirection="column" paddingY={1}>
+      {/* Summary Stats */}
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor="magenta"
+        paddingX={2}
+        paddingY={1}
+        marginBottom={1}
+      >
+        <Text bold color="magenta">
+          🔍 AI Misunderstanding Check
+        </Text>
+        <Box marginTop={1} flexDirection="column">
+          <Box>
+            <Text>
+              <Text bold>Alignment Score:</Text>{' '}
+              <Text bold color={getScoreColor(mirrorReport.summary.alignmentScore)}>
+                {mirrorReport.summary.alignmentScore}/100
+              </Text>
+            </Text>
+          </Box>
+          <Box>
+            <Text>
+              <Text bold>Clarity Score:</Text>{' '}
+              <Text bold color={getScoreColor(mirrorReport.summary.clarityScore)}>
+                {mirrorReport.summary.clarityScore}/100
+              </Text>
+            </Text>
+          </Box>
+          <Box>
+            <Text>
+              <Text bold>Critical Issues:</Text>{' '}
+              <Text color="red">{mirrorReport.summary.critical}</Text>
+            </Text>
+          </Box>
+          <Box>
+            <Text>
+              <Text bold>Major Issues:</Text>{' '}
+              <Text color="yellow">{mirrorReport.summary.major}</Text>
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+
+      {/* What AI Actually Understood */}
+      {mirrorReport.llmInterpretation && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="blue"
+          paddingX={2}
+          paddingY={1}
+          marginBottom={1}
+        >
+          <Text bold color="blue">
+            🤖 What AI Actually Understood
+          </Text>
+          <Text dimColor>({Math.round(mirrorReport.llmInterpretation.confidence * 100)}% confident)</Text>
+
+          <Box marginTop={1} flexDirection="column">
+            {mirrorReport.llmInterpretation.productName && (
+              <Text>
+                <Text bold>Product:</Text> {mirrorReport.llmInterpretation.productName}
+              </Text>
+            )}
+            {mirrorReport.llmInterpretation.purpose && (
+              <Text>
+                <Text bold>Purpose:</Text> {mirrorReport.llmInterpretation.purpose}
+              </Text>
+            )}
+            {mirrorReport.llmInterpretation.valueProposition && (
+              <Text>
+                <Text bold color="magenta">💎 Value:</Text> {mirrorReport.llmInterpretation.valueProposition}
+              </Text>
+            )}
+          </Box>
+
+          {mirrorReport.llmInterpretation.keyBenefits && mirrorReport.llmInterpretation.keyBenefits.length > 0 && (
+            <Box marginTop={1} flexDirection="column">
+              <Text bold>Benefits:</Text>
+              {mirrorReport.llmInterpretation.keyBenefits.map((benefit: string, idx: number) => (
+                <Text key={idx}>• {benefit}</Text>
+              ))}
+            </Box>
+          )}
+
+          {mirrorReport.llmInterpretation.keyFeatures && mirrorReport.llmInterpretation.keyFeatures.length > 0 && (
+            <Box marginTop={1} flexDirection="column">
+              <Text bold>Features:</Text>
+              {mirrorReport.llmInterpretation.keyFeatures.slice(0, 3).map((feature: string, idx: number) => (
+                <Text key={idx}>• {feature}</Text>
+              ))}
+            </Box>
+          )}
+
+          {mirrorReport.llmInterpretation.targetAudience && (
+            <Box marginTop={1}>
+              <Text>
+                <Text bold>Audience:</Text> {mirrorReport.llmInterpretation.targetAudience}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      )}
+
+      {/* Priority Mismatches */}
+      {mirrorReport.mismatches && mirrorReport.mismatches.length > 0 && (
+        <>
+          {mirrorReport.mismatches.filter((m: any) => m.severity === 'critical' || m.severity === 'major').length > 0 && (
+            <Box flexDirection="column" marginBottom={1}>
+              <Text bold underline>
+                Priority Mismatches
+              </Text>
+              {mirrorReport.mismatches
+                .filter((m: any) => m.severity === 'critical' || m.severity === 'major')
+                .slice(0, 5)
+                .map((mismatch: any, idx: number) => (
+                  <Box
+                    key={idx}
+                    flexDirection="column"
+                    borderStyle="single"
+                    borderColor={mismatch.severity === 'critical' ? 'red' : 'yellow'}
+                    paddingX={1}
+                    paddingY={0.5}
+                    marginTop={1}
+                  >
+                    <Text>
+                      {mismatch.severity === 'critical' ? '🔴' : '🟡'} {idx + 1}. <Text bold>{mismatch.field}</Text>
+                    </Text>
+                    <Text dimColor>{mismatch.description}</Text>
+                    <Box marginTop={0.5}>
+                      <Text color="cyan">→ {mismatch.recommendation}</Text>
+                    </Box>
+                  </Box>
+                ))}
+            </Box>
+          )}
+        </>
+      )}
+
+      {/* Recommendations */}
+      {mirrorReport.recommendations && mirrorReport.recommendations.length > 0 && (
+        <Box flexDirection="column">
+          <Text bold underline color="cyan">
+            💡 Top Recommendations
+          </Text>
+          {mirrorReport.recommendations.slice(0, 3).map((rec: string, idx: number) => (
+            <Box key={idx} marginTop={0.5}>
+              <Text color="cyan">
+                {idx + 1}. {rec}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/ui/components/OverviewSection.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface OverviewSectionProps {
+  aiReadiness: any;
+}
+
+export const OverviewSection: React.FC<OverviewSectionProps> = ({ aiReadiness }) => {
+  const getStatusColor = (status: string) => {
+    if (status === 'excellent') return 'green';
+    if (status === 'good') return 'blue';
+    if (status === 'needs-work') return 'yellow';
+    return 'red';
+  };
+
+  const renderProgressBar = (score: number, width: number = 20) => {
+    const filled = Math.round((score / 100) * width);
+    const empty = width - filled;
+    const color = score >= 80 ? 'green' : score >= 60 ? 'yellow' : 'red';
+
+    return (
+      <Text color={color}>
+        {'█'.repeat(filled)}
+        <Text dimColor>{'░'.repeat(empty)}</Text>
+        {` ${Math.round(score)}%`}
+      </Text>
+    );
+  };
+
+  return (
+    <Box flexDirection="column" paddingY={1}>
+      {/* AI Agent Perspective */}
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor="cyan"
+        paddingX={2}
+        paddingY={1}
+        marginBottom={1}
+      >
+        <Text bold color="cyan">
+          🤖 AI Agent Perspective
+        </Text>
+        <Box marginTop={1} flexDirection="column">
+          <Box>
+            <Text>
+              {aiReadiness.aiPerspective?.canUnderstand ? '✅' : '❌'} Can Understand
+              {aiReadiness.aiPerspective?.canExtract ? '✅' : '❌'} Can Extract
+            </Text>
+          </Box>
+          <Box>
+            <Text>
+              {aiReadiness.aiPerspective?.canIndex ? '✅' : '❌'} Can Index
+              {aiReadiness.aiPerspective?.canAnswer ? '✅' : '❌'} Can Answer
+            </Text>
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>
+              Confidence: {Math.round((aiReadiness.aiPerspective?.confidence || 0) * 100)}%
+            </Text>
+          </Box>
+        </Box>
+
+        {aiReadiness.aiPerspective?.mainBlockers && aiReadiness.aiPerspective.mainBlockers.length > 0 && (
+          <Box marginTop={1} flexDirection="column">
+            <Text bold color="red">
+              Main Blockers:
+            </Text>
+            {aiReadiness.aiPerspective.mainBlockers.map((blocker: string, idx: number) => (
+              <Text key={idx} color="red">
+                • {blocker}
+              </Text>
+            ))}
+          </Box>
+        )}
+      </Box>
+
+      {/* Dimension Scores */}
+      <Box flexDirection="column" marginTop={1}>
+        <Text bold underline>
+          🎯 Dimension Scores
+        </Text>
+        {Object.entries(aiReadiness.dimensions || {}).map(([key, dim]: [string, any]) => (
+          <Box key={key} flexDirection="column" marginTop={1}>
+            <Box justifyContent="space-between">
+              <Text bold color={getStatusColor(dim.status)}>
+                {getDimensionIcon(key)} {formatDimensionName(key)}
+              </Text>
+              <Text color={getStatusColor(dim.status)}>{Math.round(dim.score)}/100</Text>
+            </Box>
+            <Box marginTop={0.5}>{renderProgressBar(dim.score)}</Box>
+            {dim.recommendation && (
+              <Box marginTop={0.5}>
+                <Text dimColor>→ {dim.recommendation}</Text>
+              </Box>
+            )}
+          </Box>
+        ))}
+      </Box>
+
+      {/* Quick Wins */}
+      {aiReadiness.quickWins && aiReadiness.quickWins.length > 0 && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="yellow"
+          paddingX={2}
+          paddingY={1}
+          marginTop={1}
+        >
+          <Text bold color="yellow">
+            ⚡ Quick Wins (High Impact, Low Effort)
+          </Text>
+          {aiReadiness.quickWins.slice(0, 5).map((win: any, idx: number) => (
+            <Box key={idx} flexDirection="column" marginTop={1}>
+              <Text bold>
+                {idx + 1}. {win.issue}
+              </Text>
+              <Text dimColor>Impact: {win.impact} • Effort: {win.effort}</Text>
+              <Text color="cyan">→ {win.fix}</Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+function getDimensionIcon(key: string): string {
+  const icons: Record<string, string> = {
+    technical: '⚙️',
+    contentQuality: '📝',
+    crawlability: '🕷️',
+    discoverability: '🔍',
+    knowledge: '🧠',
+    extractability: '🔄',
+    comprehensibility: '💡',
+    trustworthiness: '✅',
+    accessibility: '♿',
+  };
+  return icons[key] || '📌';
+}
+
+function formatDimensionName(key: string): string {
+  const names: Record<string, string> = {
+    technical: 'Technical',
+    contentQuality: 'Content Quality',
+    crawlability: 'Crawlability',
+    discoverability: 'Discoverability',
+    knowledge: 'Knowledge',
+    extractability: 'Extractability',
+    comprehensibility: 'Comprehensibility',
+    trustworthiness: 'Trustworthiness',
+    accessibility: 'Accessibility',
+  };
+  return names[key] || key;
+}