codereview-aia 0.1.0

package/src/runtime/ui/RuntimeApp.tsx

@@ -0,0 +1,150 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { LayoutProvider, useLayout } from './Layout';
+import { AuthScreen } from './screens/AuthScreen';
+import { ModeSelection } from './screens/ModeSelection';
+import { ProgressScreen } from './screens/ProgressScreen';
+import { ResultsScreen } from './screens/ResultsScreen';
+import { getInk, getInkSpinner } from './inkModules';
+import type { ReviewResult, ReviewStage } from '../reviewPipeline';
+import { executeReview } from '../reviewPipeline';
+import { loadSession, getSessionToken } from '../auth/session';
+import type { SessionUser } from '../auth/types';
+import { RUNTIME_CONFIG } from '../runtimeConfig';
+import { MissingCrIgnoreError } from '../errors';
+
+type ScreenState = 'auth' | 'mode' | 'progress' | 'results';
+
+interface RuntimeAppProps {
+  debug?: boolean;
+}
+
+interface ProgressState {
+  stage: ReviewStage;
+  filesFound?: number;
+}
+
+const defaultProgress: ProgressState = { stage: 'collecting' };
+
+function AppBody({ debug = false }: RuntimeAppProps) {
+  const { Box, Text, useApp, useInput } = getInk();
+  const { exit } = useApp();
+  const layout = useLayout();
+  const [screen, setScreen] = useState<ScreenState>('auth');
+  const [user, setUser] = useState<SessionUser | null>(null);
+  const [progress, setProgress] = useState<ProgressState>(defaultProgress);
+  const [results, setResults] = useState<ReviewResult | null>(null);
+  type ErrorInfo = { type: 'generic' | 'crignore'; message: string; hint?: string };
+  const [error, setError] = useState<ErrorInfo | null>(null);
+
+  useEffect(() => {
+    const sessionUser = loadSession();
+    const token = getSessionToken();
+    if (token) {
+      process.env.CR_AIA_PROXY_SESSION_TOKEN = token;
+    }
+    if (sessionUser) {
+      setUser(sessionUser);
+      setScreen('mode');
+    }
+  }, []);
+
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (key.ctrl && input === 'c') {
+          exit();
+        }
+
+        if (screen === 'results' && key.return) {
+          setScreen('mode');
+        }
+      },
+      [exit, screen],
+    ),
+  );
+
+  const handleAuth = useCallback((nextUser: SessionUser) => {
+    setUser(nextUser);
+    setScreen('mode');
+  }, []);
+
+  const handleRunReview = useCallback(async (_mode: string) => {
+    setScreen('progress');
+    setResults(null);
+    setError(null);
+    setProgress(defaultProgress);
+
+    try {
+      const reviewResult = await executeReview({
+        model: process.env.AI_CODE_REVIEW_MODEL || RUNTIME_CONFIG.DEFAULT_MODEL,
+        outDir: './reports',
+        debug,
+        onStage: (stage, info) => setProgress({ stage, filesFound: info?.filesFound }),
+      });
+
+      setResults(reviewResult);
+      setScreen('results');
+    } catch (reviewError) {
+      if (reviewError instanceof MissingCrIgnoreError) {
+        setError({
+          type: 'crignore',
+          message: 'cr-aia needs a .crignore file in this repo.',
+          hint: `Create ${reviewError.crIgnorePath} (can be empty, gitignore syntax) and rerun.`,
+        });
+      } else {
+        const message =
+          reviewError instanceof Error
+            ? reviewError.message
+            : 'Failed to run review. Check proxy/auth configuration.';
+        setError({ type: 'generic', message });
+      }
+      setScreen('mode');
+    }
+  }, [debug]);
+
+  return (
+    <Box width={layout.frameWidth} flexDirection="column" gap={1}>
+      {screen === 'auth' && <AuthScreen onAuth={handleAuth} />}
+      {screen === 'mode' && user && <ModeSelection onSelect={(mode) => handleRunReview(mode)} />}
+      {screen === 'progress' && <ProgressScreen stage={progress.stage} filesFound={progress.filesFound} />}
+      {screen === 'results' && results && <ResultsScreen result={results} />}
+      {error && (
+        <Box
+          borderStyle="round"
+          borderColor={error.type === 'crignore' ? 'yellow' : 'red'}
+          paddingX={1}
+          paddingY={1}
+        >
+          <Text color={error.type === 'crignore' ? 'yellow' : 'red'}>
+            {error.message}
+            {error.hint ? `\n${error.hint}` : ''}
+          </Text>
+        </Box>
+      )}
+      <Box justifyContent="space-between">
+        <Text dimColor>{user ? `Logged in as ${user.username}` : 'Authenticate to start reviewing'}</Text>
+        <Text dimColor>Ctrl+C to exit</Text>
+      </Box>
+    </Box>
+  );
+}
+
+export function RuntimeApp(props: RuntimeAppProps) {
+  return (
+    <LayoutProvider>
+      <AppBody {...props} />
+    </LayoutProvider>
+  );
+}
+
+export function LoadingScreen() {
+  const { Box, Text } = getInk();
+  const Spinner = getInkSpinner();
+  return (
+    <Box flexDirection="column" paddingX={1} paddingY={1}>
+      <Text>
+        <Spinner type="dots" /> Preparing runtime environment...
+      </Text>
+    </Box>
+  );
+}

package/src/runtime/ui/inkModules.ts

@@ -0,0 +1,73 @@
+type InkModule = typeof import('ink');
+type SpinnerModule = typeof import('ink-spinner');
+type TextInputModule = typeof import('ink-text-input');
+type SelectInputModule = typeof import('ink-select-input');
+
+const dynamicImporter = new Function('specifier', 'return import(specifier);') as (
+  specifier: string,
+) => Promise<unknown>;
+
+let inkModule: InkModule | null = null;
+let spinnerModule: SpinnerModule['default'] | null = null;
+let textInputModule: TextInputModule['default'] | null = null;
+let selectInputModule: SelectInputModule['default'] | null = null;
+
+async function loadInk(): Promise<void> {
+  if (!inkModule) {
+    inkModule = (await dynamicImporter('ink')) as InkModule;
+  }
+}
+
+async function loadSpinner(): Promise<void> {
+  if (!spinnerModule) {
+    const mod = (await dynamicImporter('ink-spinner')) as SpinnerModule;
+    spinnerModule = mod.default;
+  }
+}
+
+async function loadTextInput(): Promise<void> {
+  if (!textInputModule) {
+    const mod = (await dynamicImporter('ink-text-input')) as TextInputModule;
+    textInputModule = mod.default;
+  }
+}
+
+async function loadSelectInput(): Promise<void> {
+  if (!selectInputModule) {
+    const mod = (await dynamicImporter('ink-select-input')) as SelectInputModule;
+    selectInputModule = mod.default;
+  }
+}
+
+export async function preloadInkModules(): Promise<void> {
+  await Promise.all([loadInk(), loadSpinner(), loadTextInput(), loadSelectInput()]);
+}
+
+export function getInk(): InkModule {
+  if (!inkModule) {
+    throw new Error('Ink module not loaded. Call preloadInkModules() before rendering UI.');
+  }
+  return inkModule;
+}
+
+export function getInkSpinner(): SpinnerModule['default'] {
+  if (!spinnerModule) {
+    throw new Error('Ink spinner module not loaded. Call preloadInkModules() before rendering UI.');
+  }
+  return spinnerModule;
+}
+
+export function getInkTextInput(): TextInputModule['default'] {
+  if (!textInputModule) {
+    throw new Error('Ink TextInput module not loaded. Call preloadInkModules() before rendering UI.');
+  }
+  return textInputModule;
+}
+
+export function getInkSelectInput(): SelectInputModule['default'] {
+  if (!selectInputModule) {
+    throw new Error('Ink SelectInput module not loaded. Call preloadInkModules() before rendering UI.');
+  }
+  return selectInputModule;
+}
+

package/src/runtime/ui/screens/AuthScreen.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import type { SessionUser } from '../../auth/types';
+import { authenticate } from '../../auth/service';
+import { saveSession } from '../../auth/session';
+import { useLayout } from '../Layout';
+import { getInk, getInkSpinner, getInkTextInput } from '../inkModules';
+
+interface AuthScreenProps {
+  onAuth: (user: SessionUser) => void;
+}
+
+export function AuthScreen({ onAuth }: AuthScreenProps) {
+  const { frameWidth } = useLayout();
+  const { Box, Text, useInput } = getInk();
+  const Spinner = getInkSpinner();
+  const TextInput = getInkTextInput();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [step, setStep] = useState<'username' | 'password'>('username');
+
+  const handleSubmit = useCallback(async () => {
+    if (submitting) return;
+
+    if (!username.trim() || !password.trim()) {
+      setError('Username and password are required');
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      setError(null);
+      const result = await authenticate(username.trim(), password.trim());
+      saveSession(result.token);
+      process.env.CR_AIA_PROXY_SESSION_TOKEN = result.token;
+      onAuth(result.user);
+    } catch (authError) {
+      const message = authError instanceof Error ? authError.message : 'Authentication failed';
+      setError(message);
+      setSubmitting(false);
+    }
+  }, [username, password, submitting, onAuth]);
+
+  const handleAdvance = useCallback(() => {
+    if (step === 'password') {
+      return;
+    }
+    if (!username.trim()) {
+      setError('Username is required');
+      return;
+    }
+    setError(null);
+    setStep('password');
+  }, [step, username]);
+
+  useInput((input, key) => {
+    if (key.return) {
+      if (step === 'username') {
+        handleAdvance();
+      } else {
+        handleSubmit();
+      }
+    }
+  });
+
+  useEffect(() => {
+    setError(null);
+  }, [username, password]);
+
+  return (
+    <Box
+      width={frameWidth}
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      paddingX={2}
+      paddingY={1}
+      gap={1}
+    >
+      <Text color="cyan" bold>
+        Sign in
+      </Text>
+      <Text dimColor>
+        {step === 'username' ? 'Type your username, press Enter.' : 'Type your password, press Enter to submit.'}
+      </Text>
+
+      <Box flexDirection="column" gap={1}>
+        <Box flexDirection="column">
+          <Text dimColor>Username</Text>
+          <TextInput
+            value={username}
+            onChange={setUsername}
+            placeholder="username"
+            focus={step === 'username' && !submitting}
+          />
+        </Box>
+
+        <Box flexDirection="column">
+          <Text dimColor>Password</Text>
+          <TextInput
+            value={password}
+            onChange={setPassword}
+            mask="*"
+            placeholder={step === 'password' ? 'password' : 'Press Enter after username'}
+            focus={step === 'password' && !submitting}
+            showCursor={step === 'password'}
+          />
+        </Box>
+      </Box>
+
+      {submitting && (
+        <Box>
+          <Text>
+            <Spinner type="dots" /> Authenticating…
+          </Text>
+        </Box>
+      )}
+
+      {error && (
+        <Box>
+          <Text color="red">{error}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+

package/src/runtime/ui/screens/ModeSelection.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { getInk, getInkSelectInput } from '../inkModules';
+import { useLayout } from '../Layout';
+
+interface ModeSelectionProps {
+  onSelect: (mode: string) => void;
+}
+
+const OPTIONS = [
+  {
+    label: 'Review uncommitted changes',
+    value: 'uncommitted',
+    description: 'Scan staged and unstaged changes only',
+  },
+];
+
+export function ModeSelection({ onSelect }: ModeSelectionProps) {
+  const { Box, Text } = getInk();
+  const SelectInput = getInkSelectInput();
+  const { frameWidth } = useLayout();
+
+  return (
+    <Box
+      width={frameWidth}
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="green"
+      paddingX={2}
+      paddingY={1}
+      gap={1}
+    >
+      <Text color="green" bold>
+        Choose review mode
+      </Text>
+      <Text dimColor>Use arrow keys, press Enter to start.</Text>
+      <SelectInput
+        items={OPTIONS.map((option) => ({
+          label: option.label,
+          value: option.value,
+        }))}
+        onSelect={(item) => onSelect(String(item.value))}
+      />
+      <Box flexDirection="column" marginTop={1}>
+        {OPTIONS.map((option) => (
+          <Text key={option.value} dimColor>
+            · {option.description}
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/runtime/ui/screens/ProgressScreen.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import { useLayout } from '../Layout';
+import type { ReviewStage } from '../../reviewPipeline';
+import { getInk, getInkSpinner } from '../inkModules';
+
+interface ProgressScreenProps {
+  stage: ReviewStage;
+  filesFound?: number;
+}
+
+const STAGE_TEXT: Record<ReviewStage, { title: string; detail: string }> = {
+  collecting: {
+    title: 'Collecting files',
+    detail: 'Inspecting your working tree',
+  },
+  reviewing: {
+    title: 'Running AI review',
+    detail: 'Streaming code to the reviewer',
+  },
+  merging: {
+    title: 'Merging reports',
+    detail: 'Normalizing findings and cost data',
+  },
+};
+
+export function ProgressScreen({ stage, filesFound }: ProgressScreenProps) {
+  const { Box, Text } = getInk();
+  const Spinner = getInkSpinner();
+  const { frameWidth } = useLayout();
+
+  const meta = useMemo(() => STAGE_TEXT[stage], [stage]);
+  const fileStatus =
+    typeof filesFound === 'number' && filesFound >= 0 ? `${filesFound} files queued` : 'Preparing file list…';
+
+  return (
+    <Box
+      width={frameWidth}
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      paddingX={2}
+      paddingY={1}
+      gap={1}
+    >
+      <Box gap={1}>
+        <Text>
+          <Spinner type="line" /> {meta.title}
+        </Text>
+      </Box>
+      <Text dimColor>{meta.detail}</Text>
+      <Text dimColor>{fileStatus}</Text>
+    </Box>
+  );
+}
+

package/src/runtime/ui/screens/ResultsScreen.tsx

@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+import type { ReviewResult } from '../../reviewPipeline';
+import { useLayout } from '../Layout';
+import { getInk } from '../inkModules';
+
+interface ResultsScreenProps {
+  result: ReviewResult;
+}
+
+export function ResultsScreen({ result }: ResultsScreenProps) {
+  const { Box, Text } = getInk();
+  const { frameWidth } = useLayout();
+
+  const severityRows = useMemo(() => {
+    const totals = result.totals || { critical: 0, high: 0, medium: 0, low: 0 };
+    return [
+      { label: 'Critical', value: totals.critical ?? 0 },
+      { label: 'High', value: totals.high ?? 0 },
+      { label: 'Medium', value: totals.medium ?? 0 },
+      { label: 'Low', value: totals.low ?? 0 },
+    ];
+  }, [result.totals]);
+
+  return (
+    <Box
+      width={frameWidth}
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="green"
+      paddingX={2}
+      paddingY={1}
+      gap={1}
+    >
+      <Text color="green" bold>
+        Review complete for {result.repo}
+      </Text>
+      <Text dimColor>Duration: {result.duration}s — Files reviewed: {result.filesReviewed}</Text>
+
+      <Box flexDirection="column" marginTop={1}>
+        {severityRows.map((row) => (
+          <Box key={row.label}>
+            <Text>
+              {row.label}: {row.value}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+
+      {result.findings.length === 0 ? (
+        <Text dimColor>No findings reported.</Text>
+      ) : (
+        <Box flexDirection="column" marginTop={1}>
+          <Text bold>Sample findings</Text>
+          {result.findings.slice(0, 5).map((finding, index) => (
+            <Text key={`${finding.filePath}-${index}`} dimColor>
+              · {finding.filePath ?? finding.file ?? 'unknown'} {finding.priority ? `(${finding.priority})` : ''}
+            </Text>
+          ))}
+          {result.findings.length > 5 && (
+            <Text dimColor>…and {result.findings.length - 5} more in the saved report.</Text>
+          )}
+        </Box>
+      )}
+
+      {result.reportPath && (
+        <Box marginTop={1}>
+          <Text dimColor>Report saved to: {result.reportPath}</Text>
+        </Box>
+      )}
+
+      <Box marginTop={1}>
+        <Text dimColor>Press Enter to return to mode selection.</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/strategies/ArchitecturalReviewStrategy.ts

@@ -0,0 +1,54 @@
+/**
+ * @fileoverview Architectural review strategy implementation.
+ *
+ * This module implements the architectural review strategy, which analyzes the entire
+ * codebase structure and design patterns to provide high-level feedback.
+ */
+
+import type { ApiClientConfig } from '../core/ApiClientSelector';
+import { generateReview } from '../core/ReviewGenerator';
+import type { FileInfo, ReviewOptions, ReviewResult /* , ReviewType */ } from '../types/review'; // ReviewType not used
+import logger from '../utils/logger';
+import type { ProjectDocs } from '../utils/projectDocs';
+import { BaseReviewStrategy } from './ReviewStrategy';
+
+/**
+ * Strategy for architectural reviews
+ */
+export class ArchitecturalReviewStrategy extends BaseReviewStrategy {
+  /**
+   * Create a new architectural review strategy
+   */
+  constructor() {
+    super('architectural');
+  }
+
+  /**
+   * Execute the architectural review strategy
+   * @param files Files to review
+   * @param projectName Project name
+   * @param projectDocs Project documentation
+   * @param options Review options
+   * @param apiClientConfig API client configuration
+   * @returns Promise resolving to the review result
+   */
+  async execute(
+    files: FileInfo[],
+    projectName: string,
+    projectDocs: ProjectDocs | null,
+    options: ReviewOptions,
+    apiClientConfig: ApiClientConfig,
+  ): Promise<ReviewResult> {
+    logger.info('Executing architectural review strategy...');
+
+    // Generate the review using the selected API client
+    return generateReview(
+      files,
+      projectName,
+      this.reviewType,
+      projectDocs,
+      options,
+      apiClientConfig,
+    );
+  }
+}