@ai-lighthouse/cli 1.0.0

package/src/ui/AuditReportUI.tsx

@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Spinner from 'ink-spinner';
+import { ScoreDisplay } from './components/ScoreDisplay.js';
+import { OverviewSection } from './components/OverviewSection.js';
+import { IssuesSection } from './components/IssuesSection.js';
+import { AIUnderstandingSection } from './components/AIUnderstandingSection.js';
+import { HallucinationSection } from './components/HallucinationSection.js';
+import { MessageAlignmentSection } from './components/MessageAlignmentSection.js';
+import { TechnicalSection } from './components/TechnicalSection.js';
+
+interface AuditReportUIProps {
+  url: string;
+  result: any;
+  aiReadiness: any;
+  loading?: boolean;
+  currentStep?: string;
+}
+
+type TabType = 'overview' | 'issues' | 'ai-understanding' | 'hallucination' | 'message-alignment' | 'technical';
+
+export const AuditReportUI: React.FC<AuditReportUIProps> = ({
+  url,
+  result,
+  aiReadiness,
+  loading = false,
+  currentStep = '',
+}) => {
+  const [currentTab, setCurrentTab] = useState<TabType>('overview');
+
+  const tabs: { key: TabType; label: string; icon: string }[] = [
+    { key: 'overview', label: 'Overview', icon: '📊' },
+    { key: 'issues', label: 'Issues', icon: '⚠️' },
+    { key: 'ai-understanding', label: 'AI Understanding', icon: '🧠' },
+    { key: 'hallucination', label: 'Hallucination Risk', icon: '⚠️' },
+    { key: 'message-alignment', label: 'Message Alignment', icon: '🔍' },
+    { key: 'technical', label: 'Technical', icon: '⚙️' },
+  ];
+
+  useInput((input, key) => {
+    if (loading) return;
+
+    if (key.leftArrow) {
+      const currentIndex = tabs.findIndex(t => t.key === currentTab);
+      const prevIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+      setCurrentTab(tabs[prevIndex].key);
+    }
+
+    if (key.rightArrow) {
+      const currentIndex = tabs.findIndex(t => t.key === currentTab);
+      const nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+      setCurrentTab(tabs[nextIndex].key);
+    }
+
+    // Number keys for quick tab switching
+    const num = parseInt(input);
+    if (num >= 1 && num <= tabs.length) {
+      setCurrentTab(tabs[num - 1].key);
+    }
+  });
+
+  if (loading) {
+    return (
+      <Box flexDirection="column" paddingY={1}>
+        <Box>
+          <Text color="green">
+            <Spinner type="dots" />
+          </Text>
+          <Text> {currentStep || 'Loading...'}</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  const overallScore = aiReadiness?.overall || 0;
+  const grade = aiReadiness?.grade || 'N/A';
+
+  return (
+    <Box flexDirection="column">
+      {/* Header */}
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor="cyan"
+        paddingX={2}
+        paddingY={1}
+      >
+        <Text bold color="cyan">
+          🚨 AI Lighthouse Report
+        </Text>
+      </Box>
+
+      {/* Score Display */}
+      <ScoreDisplay score={overallScore} grade={grade} url={url} />
+
+      {/* Tab Navigation */}
+      <Box
+        flexDirection="row"
+        borderStyle="single"
+        borderColor="blue"
+        paddingX={1}
+        marginTop={1}
+      >
+        {tabs.map((tab, index) => {
+          const isActive = tab.key === currentTab;
+          return (
+            <Box key={tab.key} marginRight={1}>
+              <Text
+                bold={isActive}
+                color={isActive ? 'cyan' : 'gray'}
+                backgroundColor={isActive ? 'blue' : undefined}
+              >
+                {` ${index + 1}. ${tab.icon} ${tab.label} `}
+              </Text>
+            </Box>
+          );
+        })}
+      </Box>
+
+      {/* Help Text */}
+      <Box marginTop={1} marginBottom={1}>
+        <Text dimColor>
+          Use ← → arrow keys or numbers (1-{tabs.length}) to navigate tabs
+        </Text>
+      </Box>
+
+      {/* Tab Content */}
+      <Box flexDirection="column">
+        {currentTab === 'overview' && <OverviewSection aiReadiness={aiReadiness} />}
+        {currentTab === 'issues' && <IssuesSection issues={result.issues || []} />}
+        {currentTab === 'ai-understanding' && <AIUnderstandingSection llm={result.llm} />}
+        {currentTab === 'hallucination' && <HallucinationSection hallucinationReport={result.hallucinationReport} />}
+        {currentTab === 'message-alignment' && <MessageAlignmentSection mirrorReport={result.mirrorReport} />}
+        {currentTab === 'technical' && <TechnicalSection result={result} scoring={result.scoring} />}
+      </Box>
+
+      {/* Footer */}
+      <Box
+        marginTop={2}
+        borderStyle="round"
+        borderColor="gray"
+        paddingX={2}
+        paddingY={1}
+      >
+        <Text dimColor>
+          Press Ctrl+C to exit • Report generated at {new Date().toLocaleString()}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/src/ui/SetupWizard.tsx

@@ -0,0 +1,294 @@
+import React, { useState } from 'react';
+import { Box, Text, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import SelectInput from 'ink-select-input';
+
+interface SetupWizardProps {
+  onComplete: (config: AuditConfig) => void;
+  initialUrl?: string;
+}
+
+export interface AuditConfig {
+  url: string;
+  enableLlm: boolean;
+  enableChunking: boolean;
+  enableExtractability: boolean;
+  enableHallucination: boolean;
+  llmProvider?: string;
+  llmModel?: string;
+  llmApiKey?: string;
+  llmBaseUrl?: string;
+}
+
+type Step = 'url' | 'features' | 'llm-provider' | 'llm-model' | 'llm-api-key' | 'llm-base-url';
+
+export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, initialUrl }) => {
+  const { exit } = useApp();
+  const [step, setStep] = useState<Step>(initialUrl ? 'features' : 'url');
+  const [url, setUrl] = useState(initialUrl || '');
+  const [selectedFeatures, setSelectedFeatures] = useState<string[]>([]);
+  const [llmProvider, setLlmProvider] = useState<string>('');
+  const [llmModel, setLlmModel] = useState<string>('');
+  const [llmApiKey, setLlmApiKey] = useState<string>('');
+  const [llmBaseUrl, setLlmBaseUrl] = useState<string>('');
+
+  const featureOptions = [
+    { label: '🧠 AI Understanding (LLM Analysis)', value: 'llm' },
+    { label: '📄 Content Chunking Analysis', value: 'chunking' },
+    { label: '🔄 Extractability Analysis', value: 'extractability' },
+    { label: '⚠️  Hallucination Detection', value: 'hallucination' },
+    { label: '✅ Continue with selected features', value: 'done' },
+  ];
+
+  const llmProviderOptions = [
+    { label: 'OpenAI (GPT-4, GPT-3.5)', value: 'openai' },
+    { label: 'Anthropic (Claude)', value: 'anthropic' },
+    { label: 'Ollama (Local)', value: 'ollama' },
+    { label: 'Custom/Local Provider', value: 'local' },
+  ];
+
+  const handleUrlSubmit = (value: string) => {
+    setUrl(value);
+    setStep('features');
+  };
+
+  const handleFeatureSelect = (item: any) => {
+    if (item.value === 'done') {
+      // Check if LLM is needed
+      if (selectedFeatures.includes('llm') || selectedFeatures.includes('hallucination')) {
+        setStep('llm-provider');
+      } else {
+        completeSetup();
+      }
+    } else {
+      // Toggle feature selection
+      if (selectedFeatures.includes(item.value)) {
+        setSelectedFeatures(selectedFeatures.filter(f => f !== item.value));
+      } else {
+        setSelectedFeatures([...selectedFeatures, item.value]);
+      }
+    }
+  };
+
+  const handleLlmProviderSelect = (item: any) => {
+    setLlmProvider(item.value);
+
+    // Set default base URL for ollama
+    if (item.value === 'ollama') {
+      setLlmBaseUrl('http://localhost:11434');
+    }
+
+    setStep('llm-model');
+  };
+
+  const handleLlmModelSubmit = (value: string) => {
+    setLlmModel(value);
+
+    // If ollama, skip API key and go to base URL
+    if (llmProvider === 'ollama') {
+      setStep('llm-base-url');
+    } else {
+      setStep('llm-api-key');
+    }
+  };
+
+  const handleLlmApiKeySubmit = (value: string) => {
+    setLlmApiKey(value);
+
+    // If provider needs base URL, go there, otherwise complete
+    if (llmProvider === 'local' || llmProvider === 'anthropic') {
+      setStep('llm-base-url');
+    } else {
+      completeSetup();
+    }
+  };
+
+  const handleLlmBaseUrlSubmit = (value: string) => {
+    setLlmBaseUrl(value);
+    completeSetup();
+  };
+
+  const completeSetup = () => {
+    const config: AuditConfig = {
+      url,
+      enableLlm: selectedFeatures.includes('llm') || selectedFeatures.includes('hallucination'),
+      enableChunking: selectedFeatures.includes('chunking'),
+      enableExtractability: selectedFeatures.includes('extractability'),
+      enableHallucination: selectedFeatures.includes('hallucination'),
+    };
+
+    if (config.enableLlm) {
+      config.llmProvider = llmProvider;
+      config.llmModel = llmModel;
+      config.llmApiKey = llmApiKey || undefined;
+      config.llmBaseUrl = llmBaseUrl || undefined;
+    }
+
+    onComplete(config);
+    // Exit the wizard app
+    exit();
+  };
+
+  const getModelPlaceholder = () => {
+    switch (llmProvider) {
+      case 'openai':
+        return 'gpt-4o-mini (default)';
+      case 'anthropic':
+        return 'claude-3-5-sonnet-20241022 (default)';
+      case 'ollama':
+        return 'qwen2.5:0.5b';
+      default:
+        return 'model-name';
+    }
+  };
+
+  const getApiKeyPlaceholder = () => {
+    switch (llmProvider) {
+      case 'openai':
+        return 'sk-...';
+      case 'anthropic':
+        return 'sk-ant-...';
+      default:
+        return 'your-api-key';
+    }
+  };
+
+  return (
+    <Box flexDirection="column" paddingY={1}>
+      {/* Header */}
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor="cyan"
+        paddingX={2}
+        paddingY={1}
+        marginBottom={1}
+      >
+        <Text bold color="cyan">
+          🚨 AI Lighthouse Setup Wizard
+        </Text>
+        <Text dimColor>Configure your audit settings</Text>
+      </Box>
+
+      {/* URL Input */}
+      {step === 'url' && (
+        <Box flexDirection="column">
+          <Text bold>Enter the URL to audit:</Text>
+          <Box marginTop={1}>
+            <Text color="cyan">URL: </Text>
+            <TextInput
+              value={url}
+              onChange={setUrl}
+              onSubmit={handleUrlSubmit}
+              placeholder="https://example.com"
+            />
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>Press Enter to continue</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Feature Selection */}
+      {step === 'features' && (
+        <Box flexDirection="column">
+          <Text bold>Select features to enable:</Text>
+          <Box marginTop={1}>
+            <Text dimColor>
+              Selected: {selectedFeatures.length === 0 ? 'None (basic audit only)' : selectedFeatures.map(f => {
+                const feature = featureOptions.find(opt => opt.value === f);
+                return feature?.label.split(' ')[0];
+              }).join(', ')}
+            </Text>
+          </Box>
+          <Box marginTop={1}>
+            <SelectInput
+              items={featureOptions.map(opt => ({
+                ...opt,
+                label: selectedFeatures.includes(opt.value) && opt.value !== 'done'
+                  ? `✓ ${opt.label}`
+                  : opt.label,
+              }))}
+              onSelect={handleFeatureSelect}
+            />
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>Use ↑↓ to navigate, Enter to toggle/continue</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* LLM Provider Selection */}
+      {step === 'llm-provider' && (
+        <Box flexDirection="column">
+          <Text bold>Select LLM provider:</Text>
+          <Box marginTop={1}>
+            <SelectInput items={llmProviderOptions} onSelect={handleLlmProviderSelect} />
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>Use ↑↓ to navigate, Enter to select</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* LLM Model Input */}
+      {step === 'llm-model' && (
+        <Box flexDirection="column">
+          <Text bold>Enter LLM model name:</Text>
+          <Box marginTop={1}>
+            <Text color="cyan">Model: </Text>
+            <TextInput
+              value={llmModel}
+              onChange={setLlmModel}
+              onSubmit={handleLlmModelSubmit}
+              placeholder={getModelPlaceholder()}
+            />
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>Leave empty for default, or press Enter to continue</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* LLM API Key Input */}
+      {step === 'llm-api-key' && (
+        <Box flexDirection="column">
+          <Text bold>Enter API key:</Text>
+          <Box marginTop={1}>
+            <Text color="cyan">API Key: </Text>
+            <TextInput
+              value={llmApiKey}
+              onChange={setLlmApiKey}
+              onSubmit={handleLlmApiKeySubmit}
+              placeholder={getApiKeyPlaceholder()}
+              mask="*"
+            />
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>Your API key will not be stored</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* LLM Base URL Input */}
+      {step === 'llm-base-url' && (
+        <Box flexDirection="column">
+          <Text bold>Enter API base URL (optional):</Text>
+          <Box marginTop={1}>
+            <Text color="cyan">Base URL: </Text>
+            <TextInput
+              value={llmBaseUrl}
+              onChange={setLlmBaseUrl}
+              onSubmit={handleLlmBaseUrlSubmit}
+              placeholder={llmProvider === 'ollama' ? 'http://localhost:11434' : 'https://api.example.com'}
+            />
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>Press Enter to continue (leave empty for default)</Text>
+          </Box>
+        </Box>
+      )}
+
+    </Box>
+  );
+};

package/src/ui/components/AIUnderstandingSection.tsx

@@ -0,0 +1,183 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface AIUnderstandingSectionProps {
+  llm: any;
+}
+
+export const AIUnderstandingSection: React.FC<AIUnderstandingSectionProps> = ({ llm }) => {
+  if (!llm || Object.keys(llm).length === 0) {
+    return (
+      <Box flexDirection="column" paddingY={1}>
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="yellow"
+          paddingX={2}
+          paddingY={1}
+        >
+          <Text bold color="yellow">
+            💡 Enable AI Understanding Analysis
+          </Text>
+          <Box marginTop={1} flexDirection="column">
+            <Text>LLM analysis is not enabled. To see AI understanding insights, 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>Supported providers: openai, anthropic, ollama, local</Text>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" paddingY={1}>
+      {/* Page Type */}
+      {llm.pageType && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="magenta"
+          paddingX={2}
+          paddingY={1}
+          marginBottom={1}
+        >
+          <Text bold color="magenta">
+            📄 Inferred Page Type
+          </Text>
+          <Text color="cyan">{llm.pageType}</Text>
+        </Box>
+      )}
+
+      {/* AI-Generated Insights */}
+      {llm.pageTypeInsights && llm.pageTypeInsights.length > 0 && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold underline color="blue">
+            💡 AI-Generated Insights
+          </Text>
+          {llm.pageTypeInsights.map((insight: string, idx: number) => (
+            <Box key={idx} marginTop={0.5}>
+              <Text color="cyan">• {insight}</Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+
+      {/* Summary */}
+      {llm.summary && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold underline>
+            Summary
+          </Text>
+          <Box marginTop={0.5}>
+            <Text>{llm.summary}</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Key Topics */}
+      {llm.keyTopics && llm.keyTopics.length > 0 && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold underline>
+            🏷️  Key Topics
+          </Text>
+          <Box marginTop={0.5}>
+            <Text>{llm.keyTopics.map((t: string) => `[${t}]`).join(' ')}</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Metadata Grid */}
+      <Box flexDirection="column" marginBottom={1}>
+        <Text bold underline>
+          Metadata
+        </Text>
+        <Box marginTop={0.5} flexDirection="column">
+          {llm.readingLevel && (
+            <Text>
+              <Text bold>Reading Level:</Text> {llm.readingLevel.description}
+            </Text>
+          )}
+          {llm.sentiment && (
+            <Text>
+              <Text bold>Sentiment:</Text> {llm.sentiment}
+            </Text>
+          )}
+          {llm.technicalDepth && (
+            <Text>
+              <Text bold>Technical Depth:</Text> {llm.technicalDepth}
+            </Text>
+          )}
+        </Box>
+      </Box>
+
+      {/* Top Entities */}
+      {llm.topEntities && llm.topEntities.length > 0 && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold underline>
+            🔍 Key Entities
+          </Text>
+          {llm.topEntities.slice(0, 5).map((entity: any, idx: number) => (
+            <Box key={idx} marginTop={0.5}>
+              <Text>
+                • <Text bold>{entity.name}</Text>{' '}
+                <Text dimColor>
+                  ({entity.type}) - {Math.round((entity.relevance || 0) * 100)}% relevance
+                </Text>
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+
+      {/* Questions AI Can Answer */}
+      {llm.questions && llm.questions.length > 0 && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold underline>
+            ❓ Questions AI Can Answer
+          </Text>
+          {llm.questions.slice(0, 5).map((q: any, idx: number) => (
+            <Box key={idx} marginTop={0.5}>
+              <Text>
+                {idx + 1}. <Text dimColor>[{q.difficulty.toUpperCase()}]</Text> {q.question}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+
+      {/* Suggested FAQs */}
+      {llm.suggestedFAQ && llm.suggestedFAQ.length > 0 && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="yellow"
+          paddingX={2}
+          paddingY={1}
+        >
+          <Text bold color="yellow">
+            💡 Suggested FAQs
+          </Text>
+          {llm.suggestedFAQ
+            .filter((f: any) => f.importance === 'high')
+            .slice(0, 3)
+            .map((faq: any, idx: number) => (
+              <Box key={idx} flexDirection="column" marginTop={1}>
+                <Text>
+                  <Text bold>Q:</Text> {faq.question}
+                </Text>
+                <Text dimColor>
+                  <Text bold>A:</Text> {faq.suggestedAnswer}
+                </Text>
+              </Box>
+            ))}
+        </Box>
+      )}
+    </Box>
+  );
+};