@ai-lighthouse/cli 1.0.1 → 1.0.2

package/src/ui/components/HallucinationSection.tsx

@@ -1,172 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,203 +0,0 @@
-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

@@ -1,157 +0,0 @@
-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;
-}