@ai-lighthouse/cli 1.0.1 → 1.0.2

package/src/ui/AuditReportUI.tsx

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

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

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