codereview-aia 0.1.0 → 0.1.2

package/src/runtime/debug/logManager.ts

@@ -0,0 +1,37 @@
+import { mkdirSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+import { disableFileLogging, enableFileLogging } from '../../utils/logger';
+
+export interface DebugLogSession {
+  filePath: string;
+  stop: () => void;
+}
+
+function formatTimestamp(date: Date): string {
+  const pad = (value: number) => value.toString().padStart(2, '0');
+  const year = date.getFullYear();
+  const month = pad(date.getMonth() + 1);
+  const day = pad(date.getDate());
+  const hours = pad(date.getHours());
+  const minutes = pad(date.getMinutes());
+  const seconds = pad(date.getSeconds());
+  return `${year}${month}${day}-${hours}${minutes}${seconds}`;
+}
+
+export function startDebugLogSession(workspaceRoot: string): DebugLogSession {
+  const logsDir = resolve(workspaceRoot, 'logs');
+  mkdirSync(logsDir, { recursive: true });
+
+  const timestamp = formatTimestamp(new Date());
+  const fileName = `cr-debug-${timestamp}.log`;
+  const filePath = join(logsDir, fileName);
+
+  enableFileLogging(filePath);
+
+  return {
+    filePath,
+    stop: () => {
+      disableFileLogging();
+    },
+  };
+}

package/src/runtime/fileCollector.ts

@@ -3,7 +3,13 @@ import { relative as relativePath, resolve as resolvePath, isAbsolute as isAbsol
 import { execa } from 'execa';
 import { MissingCrIgnoreError } from './errors';
 
-export async function collectFiles(): Promise<string[]> {
+export type FileCollectionMode = 'uncommitted' | 'preprod';
+
+export interface CollectFilesOptions {
+  mode?: FileCollectionMode;
+}
+
+export async function collectFiles(options: CollectFilesOptions = {}): Promise<string[]> {
   try {
     const { stdout: rootOut } = await execa('git', ['rev-parse', '--show-toplevel']);
     const repoRoot = resolvePath(rootOut.trim());
@@ -58,40 +64,54 @@ export async function collectFiles(): Promise<string[]> {
       return absolutePath;
     };
 
-    const gitWorkspaceOptions = { cwd: workspaceRoot } as const;
-    const gitPathSpec = ['--', '.'] as const;
+    const mode: FileCollectionMode = options.mode ?? 'uncommitted';
 
-    const { stdout: statusOut } = await execa('git', ['status', '--porcelain=1', '-z', ...gitPathSpec], gitWorkspaceOptions);
-    const { stdout: diffOut } = await execa('git', ['diff', '--name-only', '-z', ...gitPathSpec], gitWorkspaceOptions);
+    const collectUncommittedFiles = async (): Promise<string[]> => {
+      const gitWorkspaceOptions = { cwd: workspaceRoot } as const;
+      const gitPathSpec = ['--', '.'] as const;
 
-    const statusEntries = statusOut.split('\0').filter(Boolean);
-    const statusFiles: string[] = [];
+      const { stdout: statusOut } = await execa('git', ['status', '--porcelain=1', '-z', ...gitPathSpec], gitWorkspaceOptions);
+      const { stdout: diffOut } = await execa('git', ['diff', '--name-only', '-z', ...gitPathSpec], gitWorkspaceOptions);
 
-    for (let i = 0; i < statusEntries.length; i += 1) {
-      const entry = statusEntries[i];
-      const statusPrefix = entry.slice(0, 3);
-      const pathPart = entry.slice(3).trim();
+      const statusEntries = statusOut.split('\0').filter(Boolean);
+      const statusFiles: string[] = [];
 
-      if (!pathPart) {
-        continue;
-      }
+      for (let i = 0; i < statusEntries.length; i += 1) {
+        const entry = statusEntries[i];
+        const statusPrefix = entry.slice(0, 3);
+        const pathPart = entry.slice(3).trim();
 
-      if (statusPrefix.trim().startsWith('R')) {
-        const renamedTarget = statusEntries[i + 1];
-        if (renamedTarget) {
-          statusFiles.push(renamedTarget);
-          i += 1;
+        if (!pathPart) {
           continue;
         }
+
+        if (statusPrefix.trim().startsWith('R')) {
+          const renamedTarget = statusEntries[i + 1];
+          if (renamedTarget) {
+            statusFiles.push(renamedTarget);
+            i += 1;
+            continue;
+          }
+        }
+
+        statusFiles.push(pathPart);
       }
 
-      statusFiles.push(pathPart);
-    }
+      const diffFiles = diffOut.split('\0').filter(Boolean);
+      const unique = new Set([...statusFiles, ...diffFiles]);
+      return Array.from(unique);
+    };
 
-    const diffFiles = diffOut.split('\0').filter(Boolean);
-    const unique = new Set([...statusFiles, ...diffFiles]);
+    const collectWorkspaceFiles = async (): Promise<string[]> => {
+      const pathSpec = workspaceRelative === '' ? '.' : workspaceRelative;
+      const tracked = await listTrackedFiles(repoRoot, pathSpec || '.');
+      const untracked = await listUntrackedFiles(repoRoot, pathSpec || '.');
+      return Array.from(new Set([...tracked, ...untracked]));
+    };
 
-    const resolved = Array.from(unique)
+    const pendingFiles = mode === 'preprod' ? await collectWorkspaceFiles() : await collectUncommittedFiles();
+
+    const resolved = pendingFiles
       .map((file) => normalize(file))
       .filter((file): file is string => Boolean(file));
 
@@ -105,6 +125,20 @@ export async function collectFiles(): Promise<string[]> {
   }
 }
 
+async function listTrackedFiles(repoRoot: string, pathSpec: string): Promise<string[]> {
+  const { stdout } = await execa('git', ['ls-files', '-z', '--', pathSpec], {
+    cwd: repoRoot,
+  });
+  return stdout.split('\0').filter(Boolean);
+}
+
+async function listUntrackedFiles(repoRoot: string, pathSpec: string): Promise<string[]> {
+  const { stdout } = await execa('git', ['ls-files', '-z', '--others', '--exclude-standard', '--', pathSpec], {
+    cwd: repoRoot,
+  });
+  return stdout.split('\0').filter(Boolean);
+}
+
 async function excludeIgnored(repoRoot: string, files: string[]): Promise<string[]> {
   if (files.length === 0) {
     return [];

package/src/runtime/preprod/webCheck.ts

@@ -0,0 +1,104 @@
+const DEFAULT_AIA_BASE_URL = 'https://ai.enki.si';
+
+function resolveAiaBaseUrl(): string {
+  const configured = process.env.AIA_BASE_URL || process.env.CR_AIA_AIA_BASE_URL;
+  const base = (configured || DEFAULT_AIA_BASE_URL).trim();
+  return base.replace(/\/$/, '');
+}
+
+function summarizeErrorBody(body: string): string {
+  if (!body.trim()) {
+    return 'No response body';
+  }
+
+  if (/<html/i.test(body)) {
+    const sanitized = body
+      .replace(/<script[\s\S]*?<\/script>/gi, ' ')
+      .replace(/<style[\s\S]*?<\/style>/gi, ' ')
+      .replace(/<[^>]+>/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+    return sanitized ? `${sanitized.slice(0, 200)}${sanitized.length > 200 ? '…' : ''}` : 'HTML error response';
+  }
+
+  const normalized = body.replace(/\s+/g, ' ').trim();
+  if (!normalized) {
+    return 'Empty error body';
+  }
+  return normalized.length > 200 ? `${normalized.slice(0, 200)}…` : normalized;
+}
+
+class WebCheckRequestError extends Error {
+  status?: number;
+  detail?: string;
+
+  constructor(message: string, options?: { status?: number; detail?: string; cause?: unknown }) {
+    super(message, options?.cause ? { cause: options.cause } : undefined);
+    this.name = 'WebCheckRequestError';
+    this.status = options?.status;
+    this.detail = options?.detail;
+  }
+}
+
+async function extractErrorDetail(response: Response): Promise<string | undefined> {
+  const contentType = response.headers.get('content-type') || '';
+  if (contentType.includes('application/json')) {
+    try {
+      const payload = (await response.json()) as { error?: { message?: string }; message?: string };
+      return payload?.error?.message || payload?.message || JSON.stringify(payload);
+    } catch {
+      return undefined;
+    }
+  }
+
+  try {
+    const textBody = await response.text();
+    return summarizeErrorBody(textBody);
+  } catch {
+    return undefined;
+  }
+}
+
+async function sendWebCheckRequest(endpoint: string, payload: Record<string, unknown>): Promise<void> {
+  let response: Response;
+  try {
+    response = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(payload),
+    });
+  } catch (networkError) {
+    const message =
+      networkError instanceof Error ? networkError.message : 'Website check request failed due to an unknown error';
+    throw new WebCheckRequestError(`Website check request failed: ${message}`, { cause: networkError });
+  }
+
+  if (!response.ok) {
+    const detail = await extractErrorDetail(response);
+    const suffix = detail ? ` ${detail}` : '';
+    throw new WebCheckRequestError(`Website check failed (${response.status}).${suffix}`, {
+      status: response.status,
+      detail,
+    });
+  }
+}
+
+export async function triggerManualWebCheck(targetUrl: string): Promise<void> {
+  const baseUrl = resolveAiaBaseUrl();
+  const manualEndpoint = `${baseUrl}/api/manual/check`;
+  const legacyEndpoint = `${baseUrl}/api/check-website`;
+  const missingEndpointStatuses = new Set([404, 405, 501]);
+
+  try {
+    await sendWebCheckRequest(manualEndpoint, { url: targetUrl });
+    return;
+  } catch (error) {
+    if (!(error instanceof WebCheckRequestError) || !error.status || !missingEndpointStatuses.has(error.status)) {
+      throw error;
+    }
+  }
+
+  await sendWebCheckRequest(legacyEndpoint, { url: targetUrl, options: {} });
+}

package/src/runtime/reviewPipeline.ts

@@ -2,7 +2,7 @@ import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
 import { basename, isAbsolute, join, resolve } from 'node:path';
 import { tmpdir } from 'node:os';
 import { execa } from 'execa';
-import { collectFiles } from './fileCollector';
+import { collectFiles, type FileCollectionMode } from './fileCollector';
 import { loadManifest } from './manifest';
 import { runAiCodeReview } from './runAiCodeReview';
 import { ensureProxyEnvironmentInitialized } from './proxyEnvironment';
@@ -10,13 +10,17 @@ import { mergeReports } from './reportMerge';
 import { collectReportData } from './reporting/reportDataCollector';
 import { buildMarkdownReport, injectSummary } from './reporting/markdownReportBuilder';
 import { generateReportSummary } from './reporting/summaryGenerator';
+import logger from '../utils/logger';
 
-export type ReviewStage = 'collecting' | 'reviewing' | 'merging';
+export type ReviewStage = 'preparing' | 'collecting' | 'reviewing' | 'merging';
+export type ReviewMode = FileCollectionMode;
 
 export interface ReviewOptions {
   model: string;
   outDir: string;
   debug?: boolean;
+  mode?: ReviewMode;
+  preprodTargetUrl?: string;
   onStage?: (stage: ReviewStage, info?: { filesFound?: number }) => void;
 }
 
@@ -37,10 +41,11 @@ export interface ReviewResult {
 }
 
 export async function executeReview(options: ReviewOptions): Promise<ReviewResult> {
-  const { model, outDir, debug = false, onStage } = options;
+  const { model, outDir, debug = false, onStage, mode = 'uncommitted' } = options;
 
   onStage?.('collecting');
-  const files = await collectFiles();
+  logger.info('Collecting files for review', { mode, workspace: process.cwd() });
+  const files = await collectFiles({ mode });
   const fileCount = files.length;
 
   if (fileCount === 0) {
@@ -48,6 +53,7 @@ export async function executeReview(options: ReviewOptions): Promise<ReviewResul
   }
 
   onStage?.('collecting', { filesFound: fileCount });
+  logger.info('File collection complete', { fileCount });
 
   const workspaceRoot = process.cwd();
   const repoRoot = await resolveRepoRoot();

package/src/runtime/ui/RuntimeApp.tsx

@@ -1,16 +1,19 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, 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 type { ReviewMode, 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';
+import { triggerManualWebCheck } from '../preprod/webCheck';
+import { startDebugLogSession, type DebugLogSession } from '../debug/logManager';
+import logger from '../../utils/logger';
 
 type ScreenState = 'auth' | 'mode' | 'progress' | 'results';
 
@@ -24,6 +27,10 @@ interface ProgressState {
 }
 
 const defaultProgress: ProgressState = { stage: 'collecting' };
+const GENERIC_ERROR_MESSAGE =
+  'Something went wrong. Press D to enable debug mode and rerun to capture logs.';
+const PREPROD_ERROR_MESSAGE =
+  'Could not start the website check. Double-check the URL or try again later.';
 
 function AppBody({ debug = false }: RuntimeAppProps) {
   const { Box, Text, useApp, useInput } = getInk();
@@ -33,8 +40,11 @@ function AppBody({ debug = false }: RuntimeAppProps) {
   const [user, setUser] = useState<SessionUser | null>(null);
   const [progress, setProgress] = useState<ProgressState>(defaultProgress);
   const [results, setResults] = useState<ReviewResult | null>(null);
+  const [debugEnabled, setDebugEnabled] = useState(false);
+  const [lastDebugLogPath, setLastDebugLogPath] = useState<string | null>(null);
   type ErrorInfo = { type: 'generic' | 'crignore'; message: string; hint?: string };
   const [error, setError] = useState<ErrorInfo | null>(null);
+  const combinedDebugFlag = useMemo(() => debug || debugEnabled, [debug, debugEnabled]);
 
   useEffect(() => {
     const sessionUser = loadSession();
@@ -68,23 +78,85 @@ function AppBody({ debug = false }: RuntimeAppProps) {
     setScreen('mode');
   }, []);
 
-  const handleRunReview = useCallback(async (_mode: string) => {
+  const handleToggleDebug = useCallback(() => {
+    setDebugEnabled((prev) => {
+      if (prev) {
+        setLastDebugLogPath(null);
+      }
+      return !prev;
+    });
+  }, []);
+
+  const handleRunReview = useCallback(async (mode: ReviewMode, extras?: { targetUrl?: string }) => {
+    const trimmedUrl = extras?.targetUrl?.trim();
+
+    if (mode === 'preprod' && !trimmedUrl) {
+      setError({ type: 'generic', message: 'Pre-production mode requires a website URL.' });
+      return;
+    }
+
     setScreen('progress');
     setResults(null);
     setError(null);
-    setProgress(defaultProgress);
+    setProgress(mode === 'preprod' ? { stage: 'preparing' } : defaultProgress);
+    setLastDebugLogPath(null);
+
+    let debugSession: DebugLogSession | null = null;
+    const finalizeDebugLogging = () => {
+      if (debugSession) {
+        debugSession.stop();
+        setLastDebugLogPath(debugSession.filePath);
+      } else {
+        setLastDebugLogPath(null);
+      }
+    };
+
+    if (debugEnabled) {
+      try {
+        debugSession = startDebugLogSession(process.cwd());
+      } catch (logInitError) {
+        const message =
+          logInitError instanceof Error
+            ? logInitError.message
+            : 'Unable to initialize debug logging.';
+        setError({ type: 'generic', message: `Debug logging disabled: ${message}` });
+      }
+    }
+
+    if (mode === 'preprod' && trimmedUrl) {
+      try {
+        logger.info('Triggering manual website check', { url: trimmedUrl });
+        await triggerManualWebCheck(trimmedUrl);
+      } catch (webError) {
+        logger.error('Pre-production web check failed', webError);
+        setError({ type: 'generic', message: PREPROD_ERROR_MESSAGE });
+        setScreen('mode');
+        finalizeDebugLogging();
+        return;
+      }
+    }
 
     try {
+      logger.info('Starting code review run', { mode, workspace: process.cwd(), preprodTarget: trimmedUrl });
+      setProgress({ stage: 'collecting' });
       const reviewResult = await executeReview({
         model: process.env.AI_CODE_REVIEW_MODEL || RUNTIME_CONFIG.DEFAULT_MODEL,
         outDir: './reports',
-        debug,
+        debug: combinedDebugFlag,
+        mode,
+        preprodTargetUrl: trimmedUrl,
         onStage: (stage, info) => setProgress({ stage, filesFound: info?.filesFound }),
       });
 
+      logger.info('Code review run complete', {
+        mode,
+        durationSeconds: reviewResult.duration,
+        filesReviewed: reviewResult.filesReviewed,
+      });
       setResults(reviewResult);
       setScreen('results');
     } catch (reviewError) {
+      logger.error('Code review run failed', reviewError);
       if (reviewError instanceof MissingCrIgnoreError) {
         setError({
           type: 'crignore',
@@ -92,22 +164,28 @@ function AppBody({ debug = false }: RuntimeAppProps) {
           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 });
+        setError({ type: 'generic', message: GENERIC_ERROR_MESSAGE });
       }
       setScreen('mode');
+    } finally {
+      finalizeDebugLogging();
     }
-  }, [debug]);
+  }, [combinedDebugFlag, debugEnabled]);
 
   return (
     <Box width={layout.frameWidth} flexDirection="column" gap={1}>
       {screen === 'auth' && <AuthScreen onAuth={handleAuth} />}
-      {screen === 'mode' && user && <ModeSelection onSelect={(mode) => handleRunReview(mode)} />}
+      {screen === 'mode' && user && (
+        <ModeSelection
+          onSelect={(mode, payload) => handleRunReview(mode, payload)}
+          debugEnabled={debugEnabled}
+          onToggleDebug={handleToggleDebug}
+        />
+      )}
       {screen === 'progress' && <ProgressScreen stage={progress.stage} filesFound={progress.filesFound} />}
-      {screen === 'results' && results && <ResultsScreen result={results} />}
+      {screen === 'results' && results && (
+        <ResultsScreen result={results} debugLogPath={lastDebugLogPath} />
+      )}
       {error && (
         <Box
           borderStyle="round"
@@ -121,6 +199,11 @@ function AppBody({ debug = false }: RuntimeAppProps) {
           </Text>
         </Box>
       )}
+      {lastDebugLogPath && screen !== 'results' && (
+        <Box>
+          <Text dimColor>Debug logs saved to: {lastDebugLogPath}</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>

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

@@ -1,23 +1,154 @@
-import React from 'react';
-import { getInk, getInkSelectInput } from '../inkModules';
+import React, { useCallback, useState } from 'react';
+import { getInk, getInkSelectInput, getInkTextInput } from '../inkModules';
 import { useLayout } from '../Layout';
+import type { ReviewMode } from '../../reviewPipeline';
 
 interface ModeSelectionProps {
-  onSelect: (mode: string) => void;
+  onSelect: (mode: ReviewMode, extras?: { targetUrl?: string }) => void;
+  debugEnabled: boolean;
+  onToggleDebug: () => void;
 }
 
-const OPTIONS = [
+interface ModeOption {
+  label: string;
+  value: ReviewMode;
+  description: string;
+  requiresUrl?: boolean;
+}
+
+const OPTIONS: ModeOption[] = [
   {
     label: 'Review uncommitted changes',
     value: 'uncommitted',
     description: 'Scan staged and unstaged changes only',
   },
+  {
+    label: 'Pre-production review',
+    value: 'preprod',
+    description: 'Scan the entire workspace and trigger website checks',
+    requiresUrl: true,
+  },
 ];
 
-export function ModeSelection({ onSelect }: ModeSelectionProps) {
-  const { Box, Text } = getInk();
+export function ModeSelection({ onSelect, debugEnabled, onToggleDebug }: ModeSelectionProps) {
+  const { Box, Text, useInput } = getInk();
   const SelectInput = getInkSelectInput();
+  const TextInput = getInkTextInput();
   const { frameWidth } = useLayout();
+  const [phase, setPhase] = useState<'list' | 'preprodUrl'>('list');
+  const [pendingMode, setPendingMode] = useState<ReviewMode>('preprod');
+  const [highlighted, setHighlighted] = useState<ReviewMode>('uncommitted');
+  const [urlValue, setUrlValue] = useState('');
+  const [urlError, setUrlError] = useState<string | null>(null);
+
+  const resetUrlState = useCallback(() => {
+    setUrlValue('');
+    setUrlError(null);
+  }, []);
+
+  const handleModeSelect = useCallback(
+    (mode: ReviewMode) => {
+      const option = OPTIONS.find((opt) => opt.value === mode);
+      if (!option) {
+        return;
+      }
+
+      if (option.requiresUrl) {
+        setPendingMode(option.value);
+        resetUrlState();
+        setPhase('preprodUrl');
+        return;
+      }
+
+      onSelect(option.value);
+    },
+    [onSelect, resetUrlState],
+  );
+
+  const submitUrl = useCallback(() => {
+    if (phase !== 'preprodUrl') {
+      return;
+    }
+
+    const trimmed = urlValue.trim();
+    if (!trimmed) {
+      setUrlError('URL is required');
+      return;
+    }
+
+    try {
+      const parsed = new URL(trimmed);
+      if (!['http:', 'https:'].includes(parsed.protocol)) {
+        throw new Error('invalid');
+      }
+      setUrlError(null);
+      onSelect(pendingMode, { targetUrl: parsed.toString() });
+    } catch {
+      setUrlError('Enter a valid URL starting with http:// or https://');
+    }
+  }, [onSelect, pendingMode, phase, urlValue]);
+
+  useInput((input, key) => {
+    const normalizedInput = input.toLowerCase();
+    if (normalizedInput === 'd' && !key.ctrl && !key.meta) {
+      onToggleDebug();
+      return;
+    }
+
+    if (phase !== 'preprodUrl') {
+      return;
+    }
+
+    if (key.escape) {
+      setPhase('list');
+      resetUrlState();
+      return;
+    }
+
+    if (key.return) {
+      submitUrl();
+    }
+  });
+
+  if (phase === 'preprodUrl') {
+    return (
+      <Box
+        width={frameWidth}
+        flexDirection="column"
+        borderStyle="round"
+        borderColor="cyan"
+        paddingX={2}
+        paddingY={1}
+        gap={1}
+      >
+        <Text color="cyan" bold>
+          Pre-production review
+        </Text>
+        <Text dimColor>Enter the full website URL. We will trigger ai.enki.si and scan every file here.</Text>
+        <Box flexDirection="column">
+          <Text dimColor>Target URL</Text>
+          <TextInput
+            value={urlValue}
+            onChange={(value) => {
+              setUrlValue(value);
+              if (urlError) {
+                setUrlError(null);
+              }
+            }}
+            placeholder="https://example.com"
+            focus
+          />
+        </Box>
+        {urlError && (
+          <Text color="red">{urlError}</Text>
+        )}
+        <Box justifyContent="space-between">
+          <Text dimColor>Press Enter to start · Esc to go back</Text>
+          <Text dimColor>Debug: {debugEnabled ? 'On' : 'Off'} (press D)</Text>
+        </Box>
+      </Box>
+    );
+  }
 
   return (
     <Box
@@ -29,23 +160,25 @@ export function ModeSelection({ onSelect }: ModeSelectionProps) {
       paddingY={1}
       gap={1}
     >
-      <Text color="green" bold>
-        Choose review mode
-      </Text>
+      <Box justifyContent="space-between" alignItems="center">
+        <Text color="green" bold>
+          Choose review mode
+        </Text>
+        <Text dimColor>Debug: {debugEnabled ? 'On' : 'Off'} (press D)</Text>
+      </Box>
       <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))}
+        onHighlight={(item) => setHighlighted(item.value as ReviewMode)}
+        onSelect={(item) => handleModeSelect(item.value as ReviewMode)}
       />
       <Box flexDirection="column" marginTop={1}>
-        {OPTIONS.map((option) => (
-          <Text key={option.value} dimColor>
-            · {option.description}
-          </Text>
-        ))}
+        <Text dimColor>
+          · {OPTIONS.find((option) => option.value === highlighted)?.description}
+        </Text>
       </Box>
     </Box>
   );