@mintlify/cli 4.0.1465 → 4.0.1467

package/src/mintTestUi.tsx

@@ -12,20 +12,21 @@ import {
   type HarnessAgent,
   type RunSave,
   type TaskPhase,
-  type TaskResult,
   type TaskUpdate,
 } from './agent-harness/index.js';
+import { readFilePreview } from './mintTestFilePreview.js';
+import { firstLine, footerSegments, taskProblemLabel } from './mintTestText.js';
 import { toggleScopeSelection, visibleScopeRows, type ScopeTreeRow } from './mintTestTree.js';
 
-type Screen = 'resume' | 'harnesses' | 'scope' | 'running' | 'report' | 'error';
+type Screen = 'resume' | 'existing' | 'harnesses' | 'scope' | 'running' | 'report' | 'error';
 
 interface MintTestUiProps {
   targetPath: string;
   docsRoot: string;
   pages: DocsPage[];
   autoSelectedFiles: string[];
-  totalPages: number;
   save: RunSave | null;
+  lastReport: CodeTestReport | null;
   onFinish: (exitCode: number) => void;
 }
 
@@ -40,20 +41,6 @@ const HARNESSES: Array<{ agent: HarnessAgent; model: string; label: string }> =
   { agent: 'codex', model: 'claude-opus-4-8', label: 'Codex' },
 ];
 
-export function countReport(tasks: TaskResult[]): {
-  passed: number;
-  failed: number;
-  cancelled: number;
-  agentErrors: number;
-} {
-  const counts = { passed: 0, failed: 0, cancelled: 0, agentErrors: 0 };
-  for (const task of tasks) {
-    if (task.status === 'agent_error') counts.agentErrors++;
-    else counts[task.status]++;
-  }
-  return counts;
-}
-
 const STEPS: StepDefinition[] = [
   { id: 'harnesses', label: 'Harnesses' },
   { id: 'scope', label: 'Scope' },
@@ -112,7 +99,7 @@ function stepState(
 ): 'pending' | 'running' | 'complete' | 'error' {
   const order = ['harnesses', 'scope', 'check', 'generate', 'run', 'report'];
   const screenStep =
-    screen === 'resume'
+    screen === 'resume' || screen === 'existing'
       ? 'harnesses'
       : screen === 'running' || screen === 'error'
         ? activeRunStage
@@ -133,6 +120,11 @@ function StepGlyph({ state }: { state: ReturnType<typeof stepState> }) {
 }
 
 const RESUME_OPTIONS = ['Resume', 'Start fresh'] as const;
+const EXISTING_RUN_OPTIONS = [
+  'Update tests',
+  'Review last test run',
+  'Start a brand new test',
+] as const;
 const EMPTY_SELECTION: ReadonlySet<string> = new Set();
 
 function ResumeScreen({ save, cursor }: { save: RunSave; cursor: number }) {
@@ -159,11 +151,47 @@ function ResumeScreen({ save, cursor }: { save: RunSave; cursor: number }) {
   );
 }
 
+function ExistingRunScreen({ report, cursor }: { report: CodeTestReport; cursor: number }) {
+  return (
+    <Box flexDirection="column">
+      <Text bold>Mint test has already run in this directory.</Text>
+      <Box flexDirection="column" marginTop={1}>
+        <Text>
+          Last run <Text color="cyan">{report.runId}</Text> ·{' '}
+          <Text
+            color={
+              report.status === 'passed'
+                ? 'green'
+                : report.status === 'completed'
+                  ? 'cyan'
+                  : report.status === 'cancelled'
+                    ? 'yellow'
+                    : 'red'
+            }
+          >
+            {report.status}
+          </Text>
+        </Text>
+        <Text dimColor>
+          {report.selectedFiles.length} {report.selectedFiles.length === 1 ? 'page' : 'pages'} ·{' '}
+          {report.model} · {new Date(report.completedAt).toLocaleString()}
+        </Text>
+      </Box>
+      <Box flexDirection="column" marginTop={1}>
+        {EXISTING_RUN_OPTIONS.map((option, index) => (
+          <Text key={option} color={cursor === index ? 'cyan' : undefined}>
+            {cursor === index ? '›' : ' '} {option}
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
 function HarnessScreen({ cursor }: { cursor: number }) {
   return (
     <Box flexDirection="column">
-      <Text bold>Which harness should generate and run the tests?</Text>
-      <Text dimColor>The selected harness tests every page in the chosen scope.</Text>
+      <Text bold>Select coding harness?</Text>
       <Box flexDirection="column" marginTop={1}>
         {HARNESSES.map((harness, index) => (
           <Text key={harness.label} color={cursor === index ? 'cyan' : undefined}>
@@ -179,20 +207,10 @@ function ScopeScreen({
   rows,
   cursor,
   height,
-  selectedCount,
-  selectedBlocks,
-  testablePages,
-  totalPages,
-  outputDirectory,
 }: {
   rows: ReturnType<typeof visibleScopeRows>;
   cursor: number;
   height: number;
-  selectedCount: number;
-  selectedBlocks: number;
-  testablePages: number;
-  totalPages: number;
-  outputDirectory: string;
 }) {
   const viewport = Math.max(4, height - 18);
   const start = Math.max(0, Math.min(cursor - Math.floor(viewport / 2), rows.length - viewport));
@@ -200,30 +218,14 @@ function ScopeScreen({
 
   return (
     <Box flexDirection="column">
-      <Box borderStyle="round" borderColor="gray" paddingX={1} flexDirection="column">
-        <Text>
-          <Text color="cyan" bold>
-            {testablePages}
-          </Text>{' '}
-          of {totalPages} total pages have untested code
-        </Text>
-        <Text>
-          <Text color="cyan" bold>
-            {selectedCount}
-          </Text>{' '}
-          {selectedCount === 1 ? 'page' : 'pages'} ·{' '}
-          <Text color="cyan" bold>
-            {selectedBlocks}
-          </Text>{' '}
-          {selectedBlocks === 1 ? 'code block' : 'code blocks'} will be tested
-        </Text>
-        <Text dimColor wrap="truncate-end">
-          Tests generated at {outputDirectory}
+      <Box flexDirection="column">
+        <Box marginTop={1} marginRight={2} flexDirection="column">
+          <Text bold>Select pages to test</Text>
+        </Box>
+        <Text bold color="green">
+          enter to confirm
         </Text>
       </Box>
-      <Box marginTop={1} flexDirection="column">
-        <Text bold>Choose the docs to test</Text>
-      </Box>
       <Text dimColor>Folders select or clear every testable page beneath them.</Text>
       <Box flexDirection="column" marginTop={1}>
         {visible.map((row, visibleIndex) => {
@@ -246,19 +248,6 @@ function ScopeScreen({
   );
 }
 
-const PHASE_LABELS: Record<TaskPhase, string> = {
-  checking: 'validating code can be tested',
-  checked: 'code can be tested',
-  not_testable: 'no testable code',
-  generating: 'generating test code',
-  generated: 'test generated',
-  running: 'running tests',
-  passed: 'passed',
-  failed: 'tests failed',
-  agent_error: 'test could not be generated',
-  cancelled: 'cancelled',
-};
-
 const ACTIVE_PHASES = new Set<TaskPhase>(['checking', 'generating', 'running']);
 const DONE_PHASES = new Set<TaskPhase>([
   'passed',
@@ -274,13 +263,224 @@ interface TaskRow extends TaskUpdate {
   finishedAt?: number;
 }
 
+interface GeneratedPathRow {
+  id: string;
+  path: string;
+  previewable: boolean;
+  task: TaskRow;
+}
+
+const OUTPUT_PHASES = new Set<TaskPhase>([
+  'generating',
+  'generated',
+  'running',
+  'passed',
+  'failed',
+  'agent_error',
+  'cancelled',
+]);
+function generatedPathRows(tasks: Iterable<TaskRow>): GeneratedPathRow[] {
+  const rows: GeneratedPathRow[] = [];
+  for (const task of tasks) {
+    if (!OUTPUT_PHASES.has(task.phase)) continue;
+    if (task.generatedFiles.length === 0) {
+      rows.push({
+        id: `${task.id}:directory`,
+        path: task.directory,
+        previewable: false,
+        task,
+      });
+      continue;
+    }
+    for (const file of task.generatedFiles) {
+      rows.push({ id: `${task.id}:${file}`, path: file, previewable: true, task });
+    }
+  }
+  return rows.sort((left, right) => left.path.localeCompare(right.path));
+}
+
+type FilePreviewState =
+  | { status: 'empty' | 'loading' }
+  | { status: 'loaded'; lines: string[]; truncated: boolean }
+  | { status: 'error'; message: string };
+
+function useFilePreview(row: GeneratedPathRow | undefined): FilePreviewState {
+  const [preview, setPreview] = useState<FilePreviewState>({ status: 'empty' });
+
+  useEffect(() => {
+    if (!row?.previewable) {
+      setPreview({ status: 'empty' });
+      return;
+    }
+    let active = true;
+    setPreview({ status: 'loading' });
+    void readFilePreview(row.path)
+      .then((result) => {
+        if (!active) return;
+        if (result.binary) {
+          setPreview({ status: 'error', message: 'Binary files cannot be previewed.' });
+          return;
+        }
+        setPreview({
+          status: 'loaded',
+          lines: result.text.split(/\r?\n/),
+          truncated: result.truncated,
+        });
+      })
+      .catch((error: unknown) => {
+        if (!active) return;
+        setPreview({
+          status: 'error',
+          message: error instanceof Error ? error.message : String(error),
+        });
+      });
+    return () => {
+      active = false;
+    };
+  }, [row?.path, row?.previewable]);
+
+  return preview;
+}
+
+function generatedPathStatus(
+  phase: TaskPhase,
+  spinner: string
+): { glyph: string; color?: string; dim?: boolean } {
+  if (phase === 'generating' || phase === 'running') return { glyph: spinner, color: 'green' };
+  if (phase === 'generated' || phase === 'passed') return { glyph: '✓', color: 'green' };
+  if (phase === 'failed' || phase === 'agent_error') return { glyph: '✗', color: 'red' };
+  if (phase === 'cancelled') return { glyph: '●', color: 'yellow' };
+  return { glyph: '○', dim: true };
+}
+
+function FilePreview({ row, height }: { row: GeneratedPathRow | undefined; height: number }) {
+  const preview = useFilePreview(row);
+  // Border (2), title, path, margin, and one row kept for the truncation notice.
+  const lineLimit = Math.max(1, height - 6);
+
+  return (
+    <Box
+      width="52%"
+      height={height}
+      borderStyle="round"
+      borderColor="gray"
+      paddingX={1}
+      flexDirection="column"
+      overflow="hidden"
+    >
+      <Text bold>File preview</Text>
+      {row ? <Text dimColor>{row.path}</Text> : <Text dimColor>Select a generated file.</Text>}
+      {!row?.previewable ? (
+        <Text dimColor>
+          {row?.task.phase === 'generating'
+            ? 'Files will appear here after generation finishes.'
+            : 'No generated file is available to preview.'}
+        </Text>
+      ) : preview.status === 'loading' ? (
+        <Text dimColor>Loading preview...</Text>
+      ) : preview.status === 'error' ? (
+        <Text color="yellow">{preview.message}</Text>
+      ) : preview.status === 'loaded' ? (
+        <Box flexDirection="column" marginTop={1}>
+          {preview.lines.slice(0, lineLimit).map((line, index) => (
+            <Text key={`${index}:${line}`} wrap="truncate-end">
+              <Text dimColor>{String(index + 1).padStart(3)} </Text>
+              {line || ' '}
+            </Text>
+          ))}
+          {preview.truncated || preview.lines.length > lineLimit ? (
+            <Text dimColor>Preview truncated</Text>
+          ) : null}
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+function GeneratedFilesView({
+  rows,
+  cursor,
+  height,
+  spinner,
+  relativeRoot,
+  emptyMessage = 'Waiting for generated files...',
+}: {
+  rows: GeneratedPathRow[];
+  cursor: number;
+  height: number;
+  spinner: string;
+  relativeRoot: string;
+  emptyMessage?: string;
+}) {
+  const safeCursor = Math.max(0, Math.min(cursor, rows.length - 1));
+  const viewport = Math.max(2, height - 3);
+  const start = Math.max(
+    0,
+    Math.min(safeCursor - Math.floor(viewport / 2), rows.length - viewport)
+  );
+  const visible = rows.slice(start, start + viewport);
+  const selected = rows[safeCursor];
+  const showPreview = selected?.previewable === true;
+
+  return (
+    <Box flexDirection="row" gap={1} flexGrow={1} overflow="hidden">
+      <Box
+        width={showPreview ? '48%' : '100%'}
+        borderStyle="round"
+        borderColor="gray"
+        paddingX={1}
+        flexDirection="column"
+        overflow="hidden"
+      >
+        <Text bold>Generated files</Text>
+        {visible.length === 0 ? <Text dimColor>{emptyMessage}</Text> : null}
+        {visible.map((row, visibleIndex) => {
+          const index = start + visibleIndex;
+          const status = generatedPathStatus(row.task.phase, spinner);
+          const relativePath = path.relative(relativeRoot, row.path) || '.';
+          return (
+            <Text
+              key={row.id}
+              color={index === safeCursor ? 'cyan' : undefined}
+              wrap="truncate-end"
+            >
+              {index === safeCursor ? '›' : ' '}{' '}
+              <Text color={status.color} dimColor={status.dim}>
+                {status.glyph}
+              </Text>{' '}
+              {row.previewable
+                ? row.path
+                : row.task.phase === 'generating'
+                  ? `Writing under ${relativePath}`
+                  : `No generated file in ${relativePath}`}
+              {row.task.phase === 'failed' || row.task.phase === 'agent_error' ? (
+                <Text color="red">
+                  {' '}
+                  {taskProblemLabel(row.task.phase)}
+                  {row.task.error ? <Text dimColor> · {firstLine(row.task.error)}</Text> : null}
+                </Text>
+              ) : null}
+            </Text>
+          );
+        })}
+      </Box>
+      {showPreview ? <FilePreview row={selected} height={height} /> : null}
+    </Box>
+  );
+}
+
 function fileStatus(
   row: TaskRow | undefined,
   spinner: string
 ): { glyph: string; color?: string; dim?: boolean } {
   if (row && ACTIVE_PHASES.has(row.phase)) return { glyph: spinner, color: 'green' };
-  if (row?.phase === 'not_testable') return { glyph: '✗', color: 'yellow' };
   if (row?.phase === 'failed' || row?.phase === 'agent_error') return { glyph: '✗', color: 'red' };
+  if (row?.phase === 'checked' || row?.phase === 'generated' || row?.phase === 'passed') {
+    return { glyph: '✓', color: 'green' };
+  }
+  if (row?.phase === 'not_testable' || row?.phase === 'cancelled') {
+    return { glyph: '●', color: 'yellow' };
+  }
   return { glyph: '○', dim: true };
 }
 
@@ -295,22 +495,35 @@ function directoryStatus(
   if (rows.some((row) => row && ACTIVE_PHASES.has(row.phase))) {
     return { glyph: spinner, color: 'green' };
   }
+  if (rows.some((row) => row?.phase === 'failed' || row?.phase === 'agent_error')) {
+    return { glyph: '✗', color: 'red' };
+  }
   if (rows.every((row) => row && SETTLED_PHASES.has(row.phase))) {
-    if (rows.some((row) => row && ['failed', 'agent_error'].includes(row.phase))) {
-      return { glyph: '●', color: 'red' };
+    if (rows.every((row) => row?.phase === 'not_testable' || row?.phase === 'cancelled')) {
+      return { glyph: '●', color: 'yellow' };
     }
-    return rows.every((row) => row && DONE_PHASES.has(row.phase))
-      ? { glyph: '●', color: 'green' }
-      : { glyph: '●', dim: true };
+    return { glyph: '✓', color: 'green' };
   }
   return { glyph: '○', dim: true };
 }
 
+function ActivityLegend({ spinner }: { spinner: string }) {
+  return (
+    <Text dimColor>
+      ○ waiting · <Text color="green">{spinner}</Text> active · <Text color="green">✓</Text>{' '}
+      complete · <Text color="red">✗</Text> failed · <Text color="yellow">●</Text> skipped /
+      cancelled
+    </Text>
+  );
+}
+
 function ActivityScreen({
   stage,
   cancelling,
   harness,
+  docsRoot,
   rows,
+  generatedRows,
   cursor,
   phases,
   height,
@@ -322,7 +535,9 @@ function ActivityScreen({
   stage: 'check' | 'generate' | 'run';
   cancelling: boolean;
   harness: string;
+  docsRoot: string;
   rows: ReturnType<typeof visibleScopeRows>;
+  generatedRows: GeneratedPathRow[];
   cursor: number;
   phases: ReadonlyMap<string, TaskRow>;
   height: number;
@@ -368,93 +583,140 @@ function ActivityScreen({
         </Text>
         <Text dimColor>Harness: {harness}</Text>
         <Text dimColor>{progress}</Text>
+        {stage === 'check' || stage === 'generate' ? <ActivityLegend spinner={spinner} /> : null}
       </Box>
-      <Box
-        borderStyle="round"
-        borderColor="gray"
-        paddingX={1}
-        marginTop={1}
-        flexDirection="column"
-        flexGrow={1}
-      >
-        {visible.map((row, visibleIndex) => {
-          const index = start + visibleIndex;
-          const disclosure = row.kind === 'directory' ? (row.expanded ? '▾' : '▸') : ' ';
-          const status =
-            row.kind === 'directory'
-              ? directoryStatus(row.selectableFiles, phases, spinner)
-              : fileStatus(row.file ? phases.get(row.file) : undefined, spinner);
-          const task = row.file ? phases.get(row.file) : undefined;
-          const settled =
-            row.kind === 'directory'
-              ? row.selectableFiles.filter((file) => {
-                  const phase = phases.get(file)?.phase;
-                  return phase !== undefined && SETTLED_PHASES.has(phase);
-                }).length
-              : 0;
-          return (
-            <Text key={row.id} color={index === cursor ? 'cyan' : undefined} wrap="truncate-end">
-              {' '.repeat(row.depth * 2)}
-              {index === cursor ? '›' : ' '}{' '}
-              <Text color={status.color} dimColor={status.dim}>
-                {status.glyph}
-              </Text>{' '}
-              {disclosure} {row.label}
-              {row.kind === 'directory' ? (
-                <Text dimColor>
-                  {' '}
-                  {padCount(settled, row.selectableFiles.length)}/{row.selectableFiles.length}{' '}
-                  complete
+      <Box marginTop={1} flexGrow={1} overflow="hidden">
+        {stage === 'check' ? (
+          <Box
+            borderStyle="round"
+            borderColor="gray"
+            paddingX={1}
+            flexDirection="column"
+            flexGrow={1}
+          >
+            {visible.map((row, visibleIndex) => {
+              const index = start + visibleIndex;
+              const disclosure = row.kind === 'directory' ? (row.expanded ? '▾' : '▸') : ' ';
+              const status =
+                row.kind === 'directory'
+                  ? directoryStatus(row.selectableFiles, phases, spinner)
+                  : fileStatus(row.file ? phases.get(row.file) : undefined, spinner);
+              const task = row.file ? phases.get(row.file) : undefined;
+              const settled =
+                row.kind === 'directory'
+                  ? row.selectableFiles.filter((file) => {
+                      const phase = phases.get(file)?.phase;
+                      return phase !== undefined && SETTLED_PHASES.has(phase);
+                    }).length
+                  : 0;
+              return (
+                <Text
+                  key={row.id}
+                  color={index === cursor ? 'cyan' : undefined}
+                  wrap="truncate-end"
+                >
+                  {' '.repeat(row.depth * 2)}
+                  {index === cursor ? '›' : ' '}{' '}
+                  <Text color={status.color} dimColor={status.dim}>
+                    {status.glyph}
+                  </Text>{' '}
+                  {disclosure} {row.label}
+                  {row.kind === 'directory' ? (
+                    <Text dimColor>
+                      {' '}
+                      {padCount(settled, row.selectableFiles.length)}/{row.selectableFiles.length}{' '}
+                      complete
+                    </Text>
+                  ) : null}
+                  {task ? (
+                    <Text dimColor> {padDuration((task.finishedAt ?? now) - task.startedAt)}</Text>
+                  ) : null}
+                  {task && (task.phase === 'failed' || task.phase === 'agent_error') ? (
+                    <Text color="red">
+                      {' '}
+                      {taskProblemLabel(task.phase)}
+                      {task.error ? <Text dimColor> · {firstLine(task.error)}</Text> : null}
+                    </Text>
+                  ) : null}
                 </Text>
-              ) : null}
-              {task ? (
-                <Text dimColor> {padDuration((task.finishedAt ?? now) - task.startedAt)}</Text>
-              ) : null}
-            </Text>
-          );
-        })}
+              );
+            })}
+          </Box>
+        ) : (
+          <GeneratedFilesView
+            rows={generatedRows}
+            cursor={cursor}
+            height={Math.max(4, height - 7)}
+            spinner={spinner}
+            relativeRoot={docsRoot}
+          />
+        )}
       </Box>
     </Box>
   );
 }
 
-function reportFileStatus(row: TaskRow | undefined): {
-  glyph: string;
-  color?: string;
-  dim?: boolean;
-} {
-  if (row?.phase === 'passed') return { glyph: '✓', color: 'green' };
-  if (row?.phase === 'failed' || row?.phase === 'agent_error') return { glyph: '✗', color: 'red' };
-  if (row?.phase === 'not_testable') return { glyph: '✗', color: 'yellow' };
-  if (row?.phase === 'cancelled') return { glyph: '●', color: 'yellow' };
-  return { glyph: '○', dim: true };
+const MAX_PROBLEM_ROWS = 6;
+
+function ProblemsView({ report }: { report: CodeTestReport }) {
+  const problems = report.tasks.filter(
+    (task): task is CodeTestReport['tasks'][number] & { status: 'failed' | 'agent_error' } =>
+      task.status === 'failed' || task.status === 'agent_error'
+  );
+  if (problems.length === 0) return null;
+  const hidden = problems.length - MAX_PROBLEM_ROWS;
+  return (
+    <Box
+      marginTop={1}
+      borderStyle="round"
+      borderColor="red"
+      paddingX={1}
+      flexDirection="column"
+      flexShrink={0}
+    >
+      <Text bold color="red">
+        {problems.length} {problems.length === 1 ? 'page needs' : 'pages need'} attention
+      </Text>
+      {problems.slice(0, MAX_PROBLEM_ROWS).map((task) => (
+        <Text key={task.id} wrap="truncate-end">
+          <Text color="red">✗</Text> {task.file}{' '}
+          <Text dimColor>{taskProblemLabel(task.status)}</Text>
+          {task.error ? <Text dimColor> · {firstLine(task.error)}</Text> : null}
+        </Text>
+      ))}
+      {hidden > 0 ? <Text dimColor>+{hidden} more in the report</Text> : null}
+    </Box>
+  );
 }
 
-function reportDirectoryStatus(
-  files: string[],
-  phases: ReadonlyMap<string, TaskRow>
-): { glyph: string; color?: string; dim?: boolean } {
-  const rows = files.map((file) => phases.get(file));
-  if (rows.some((row) => row?.phase === 'failed' || row?.phase === 'agent_error')) {
-    return { glyph: '✗', color: 'red' };
-  }
-  if (rows.length > 0 && rows.every((row) => row?.phase === 'passed')) {
-    return { glyph: '✓', color: 'green' };
-  }
-  return { glyph: '●', color: 'yellow' };
+/**
+ * Rows the report header takes, including its border and the margin below it. The optional
+ * lines must be counted, or the screen is one row taller than the terminal and Ink drops the
+ * heading (it showed as "Finished in 1m 37s passed").
+ */
+function reportHeaderHeight(report: CodeTestReport, rows: GeneratedPathRow[]): number {
+  const optionalLines =
+    (report.historyError ? 1 : 0) + (rows.some((row) => row.previewable) ? 1 : 0);
+  return 2 + 4 + optionalLines + 1;
+}
+
+function problemsViewHeight(report: CodeTestReport): number {
+  const problems = report.tasks.filter(
+    (task) => task.status === 'failed' || task.status === 'agent_error'
+  ).length;
+  if (problems === 0) return 0;
+  return Math.min(problems, MAX_PROBLEM_ROWS) + 4 + (problems > MAX_PROBLEM_ROWS ? 1 : 0);
 }
 
 function ReportScreen({
   report,
   rows,
   cursor,
-  phases,
   height,
 }: {
   report: CodeTestReport;
-  rows: ReturnType<typeof visibleScopeRows>;
+  rows: GeneratedPathRow[];
   cursor: number;
-  phases: ReadonlyMap<string, TaskRow>;
   height: number;
 }) {
   const statusColor =
@@ -471,13 +733,15 @@ function ReportScreen({
       : report.status === 'completed'
         ? 'Run completed'
         : `Run ${report.status}`;
-  const viewport = Math.max(4, height - 12);
-  const start = Math.max(0, Math.min(cursor - Math.floor(viewport / 2), rows.length - viewport));
-  const visible = rows.slice(start, start + viewport);
-
   return (
     <Box flexDirection="column" flexGrow={1}>
-      <Box borderStyle="round" borderColor="gray" paddingX={1} flexDirection="column">
+      <Box
+        borderStyle="round"
+        borderColor="gray"
+        paddingX={1}
+        flexDirection="column"
+        flexShrink={0}
+      >
         <Text bold color={statusColor}>
           {heading}
         </Text>
@@ -487,66 +751,73 @@ function ReportScreen({
         <Text dimColor wrap="truncate-end">
           Report at {report.reportPath}
         </Text>
+        <Text dimColor wrap="truncate-end">
+          Generated files at {report.outputDirectory}
+        </Text>
+        {report.historyError ? (
+          <Text color="yellow" wrap="truncate-end">
+            Warning: {report.historyError}
+          </Text>
+        ) : null}
+        {rows.some((row) => row.previewable) ? (
+          <Text>Select a file below to preview its contents.</Text>
+        ) : null}
       </Box>
-      <Box
-        borderStyle="round"
-        borderColor="gray"
-        paddingX={1}
-        marginTop={1}
-        flexDirection="column"
-        flexGrow={1}
-      >
-        {visible.map((row, visibleIndex) => {
-          const index = start + visibleIndex;
-          const disclosure = row.kind === 'directory' ? (row.expanded ? '▾' : '▸') : ' ';
-          const status =
-            row.kind === 'directory'
-              ? reportDirectoryStatus(row.selectableFiles, phases)
-              : reportFileStatus(row.file ? phases.get(row.file) : undefined);
-          const task = row.file ? phases.get(row.file) : undefined;
-          const passed =
-            row.kind === 'directory'
-              ? row.selectableFiles.filter((file) => phases.get(file)?.phase === 'passed').length
-              : 0;
-          return (
-            <Text key={row.id} color={index === cursor ? 'cyan' : undefined} wrap="truncate-end">
-              {' '.repeat(row.depth * 2)}
-              {index === cursor ? '›' : ' '}{' '}
-              <Text color={status.color} dimColor={status.dim}>
-                {status.glyph}
-              </Text>{' '}
-              {disclosure} {row.label}
-              {row.kind === 'directory' ? (
-                <Text dimColor>
-                  {' '}
-                  {padCount(passed, row.selectableFiles.length)}/{row.selectableFiles.length} passed
-                </Text>
-              ) : task ? (
-                <Text dimColor>
-                  {' '}
-                  {PHASE_LABELS[task.phase]}
-                  {task.finishedAt ? ` · ${formatDuration(task.finishedAt - task.startedAt)}` : ''}
-                </Text>
-              ) : null}
-            </Text>
-          );
-        })}
+      <ProblemsView report={report} />
+      <Box marginTop={1} flexGrow={1} overflow="hidden">
+        <GeneratedFilesView
+          rows={rows}
+          cursor={cursor}
+          height={Math.max(
+            4,
+            height - reportHeaderHeight(report, rows) - problemsViewHeight(report)
+          )}
+          spinner="●"
+          relativeRoot={report.docsRoot}
+          emptyMessage="No generated files."
+        />
       </Box>
     </Box>
   );
 }
 
-function footerForScreen(screen: Screen, running: boolean, cancelled: boolean): string {
-  if (running) return '↑/↓/j/k move · ←/→/h/l collapse/expand · Ctrl-C cancel';
+function FooterHints({ text }: { text: string }) {
+  return (
+    <>
+      {footerSegments(text).map((segment, index) => (
+        <Text key={`${index}:${segment.key}`}>
+          {index > 0 ? ' · ' : ''}
+          <Text bold>{segment.key}</Text>
+          {segment.action ? ` ${segment.action}` : ''}
+        </Text>
+      ))}
+    </>
+  );
+}
+
+function footerForScreen(
+  screen: Screen,
+  running: boolean,
+  cancelled: boolean,
+  activeRunStage: 'check' | 'generate' | 'run',
+  reviewingSavedRun: boolean
+): string {
+  if (running) {
+    return activeRunStage === 'check'
+      ? '↑/↓/j/k move · ←/→/h/l collapse/expand · Ctrl-C cancel'
+      : '↑/↓/j/k preview generated files · Ctrl-C cancel';
+  }
   if (screen === 'resume') return '↑/↓/j/k move · Enter confirm · Ctrl-C cancel';
+  if (screen === 'existing') return '↑/↓/j/k move · Enter confirm · Ctrl-C cancel';
   if (screen === 'harnesses') return '↑/↓/j/k move · Enter continue · Ctrl-C cancel';
   if (screen === 'scope') {
     return '↑/↓/j/k move · ←/→/h/l collapse/expand · Space select · a all · Enter start';
   }
   if (screen === 'report') {
+    if (reviewingSavedRun) return '↑/↓/j/k preview generated files · Enter exit';
     return cancelled
-      ? '↑/↓/j/k move · ←/→/h/l collapse/expand · Ctrl-C exit · save kept for resume'
-      : '↑/↓/j/k move · ←/→/h/l collapse/expand · Enter exit';
+      ? '↑/↓/j/k preview generated files · Ctrl-C exit · save kept for resume'
+      : '↑/↓/j/k preview generated files · Enter exit';
   }
   return 'Enter exit';
 }
@@ -556,15 +827,18 @@ function MintTestApp({
   docsRoot,
   pages,
   autoSelectedFiles,
-  totalPages,
   save,
+  lastReport,
   onFinish,
 }: MintTestUiProps) {
   const size = useTerminalSize();
   const files = useMemo(() => pages.map((page) => page.file), [pages]);
   const outputDirectory = path.join(docsRoot, 'tests', 'mint-test');
-  const [screen, setScreen] = useState<Screen>(save ? 'resume' : 'harnesses');
+  const [screen, setScreen] = useState<Screen>(
+    save ? 'resume' : lastReport ? 'existing' : 'harnesses'
+  );
   const [resumeCursor, setResumeCursor] = useState(0);
+  const [existingRunCursor, setExistingRunCursor] = useState(0);
   const [harnessIndex, setHarnessIndex] = useState(0);
   const [runHarness, setRunHarness] = useState('');
   const harness = HARNESSES[harnessIndex] ?? HARNESSES[0]!;
@@ -583,9 +857,11 @@ function MintTestApp({
   const [runStartedAt, setRunStartedAt] = useState(0);
   const autoCollapsed = useRef<Set<string>>(new Set());
   const manualCursor = useRef(false);
+  const previousRunStage = useRef(activeRunStage);
   const [spinnerFrame, setSpinnerFrame] = useState(0);
   const [now, setNow] = useState(() => Date.now());
   const [report, setReport] = useState<CodeTestReport>();
+  const [reviewingSavedRun, setReviewingSavedRun] = useState(false);
   const [error, setError] = useState<string>();
   const abortController = useRef<AbortController | undefined>(undefined);
   const finished = useRef(false);
@@ -612,6 +888,7 @@ function MintTestApp({
       EMPTY_SELECTION
     );
   }, [pages, visibleRunFiles, runExpanded]);
+  const generatedRows = useMemo(() => generatedPathRows(taskPhases.values()), [taskPhases]);
 
   useEffect(() => {
     if (screen !== 'running') return;
@@ -624,7 +901,7 @@ function MintTestApp({
   }, [screen]);
 
   useEffect(() => {
-    if (screen !== 'running') return;
+    if (screen !== 'running' || activeRunStage !== 'check') return;
     const fileDone = (file: string) => {
       const phase = phasesByFile.get(file)?.phase;
       return phase !== undefined && DONE_PHASES.has(phase);
@@ -660,7 +937,14 @@ function MintTestApp({
       const nextIndex = runRows.findIndex((row) => !rowDone(row));
       if (nextIndex !== -1 && nextIndex !== runCursor) setRunCursor(nextIndex);
     }
-  }, [screen, phasesByFile, visibleRunFiles, runRows, runCursor]);
+  }, [screen, activeRunStage, phasesByFile, visibleRunFiles, runRows, runCursor]);
+
+  useEffect(() => {
+    if (previousRunStage.current === activeRunStage) return;
+    previousRunStage.current = activeRunStage;
+    manualCursor.current = false;
+    setRunCursor(0);
+  }, [activeRunStage]);
 
   const finish = (exitCode: number) => {
     if (finished.current) return;
@@ -668,6 +952,40 @@ function MintTestApp({
     onFinish(exitCode);
   };
 
+  const reviewRun = (savedReport: CodeTestReport) => {
+    const startedAt = Date.parse(savedReport.startedAt);
+    const finishedAt = Date.parse(savedReport.completedAt);
+    setTaskPhases(
+      new Map(
+        savedReport.tasks.map((task) => [
+          task.id,
+          {
+            id: task.id,
+            agent: task.agent,
+            file: task.file,
+            directory: task.directory,
+            generatedFiles: task.generatedFiles,
+            phase: !task.testable && task.status === 'passed' ? 'not_testable' : task.status,
+            tokens: task.tokens,
+            startedAt: Number.isNaN(startedAt) ? 0 : startedAt,
+            finishedAt: Number.isNaN(finishedAt) ? undefined : finishedAt,
+          } satisfies TaskRow,
+        ])
+      )
+    );
+    setRunFiles(savedReport.selectedFiles);
+    setRunHarness(
+      HARNESSES.find(
+        (entry) => entry.agent === savedReport.agents[0] && entry.model === savedReport.model
+      )?.label ?? `${savedReport.agents.join(', ')} · ${savedReport.model}`
+    );
+    setReport(savedReport);
+    setReviewingSavedRun(true);
+    setActiveRunStage('run');
+    setRunCursor(0);
+    setScreen('report');
+  };
+
   const startRun = ({
     runId,
     runAgents,
@@ -682,6 +1000,10 @@ function MintTestApp({
     if (abortController.current) return;
     const controller = new AbortController();
     abortController.current = controller;
+    setTaskPhases(new Map());
+    setReport(undefined);
+    setReviewingSavedRun(false);
+    setError(undefined);
     setTotalTasks(runAgents.length * runFiles_.length);
     setRunHarness(
       HARNESSES.find((entry) => entry.agent === runAgents[0] && entry.model === runModel)?.label ??
@@ -782,13 +1104,15 @@ function MintTestApp({
     if (screen === 'running' || screen === 'report') {
       const collapse = key.leftArrow || input === 'h';
       const expand = key.rightArrow || input === 'l';
+      const showingGeneratedFiles = screen === 'report' || activeRunStage !== 'check';
+      const rowCount = showingGeneratedFiles ? generatedRows.length : runRows.length;
       if (key.upArrow || input === 'k') {
         manualCursor.current = true;
         setRunCursor((current) => Math.max(0, current - 1));
       } else if (key.downArrow || input === 'j') {
         manualCursor.current = true;
-        setRunCursor((current) => Math.max(0, Math.min(runRows.length - 1, current + 1)));
-      } else if (collapse || expand) {
+        setRunCursor((current) => Math.max(0, Math.min(rowCount - 1, current + 1)));
+      } else if ((collapse || expand) && !showingGeneratedFiles) {
         manualCursor.current = true;
         const row = runRows[runCursor];
         if (row?.kind !== 'directory') return;
@@ -799,7 +1123,51 @@ function MintTestApp({
           return next;
         });
       } else if (screen === 'report' && key.return && report) {
-        finish(report.status === 'passed' ? 0 : report.status === 'cancelled' ? 130 : 1);
+        finish(
+          reviewingSavedRun
+            ? 0
+            : report.status === 'passed'
+              ? 0
+              : report.status === 'cancelled'
+                ? 130
+                : 1
+        );
+      }
+      return;
+    }
+
+    if (screen === 'existing' && lastReport) {
+      if (key.upArrow || input === 'k') {
+        setExistingRunCursor(
+          (current) => (current + EXISTING_RUN_OPTIONS.length - 1) % EXISTING_RUN_OPTIONS.length
+        );
+      } else if (key.downArrow || input === 'j') {
+        setExistingRunCursor((current) => (current + 1) % EXISTING_RUN_OPTIONS.length);
+      } else if (key.return) {
+        if (existingRunCursor === 0) {
+          const knownFiles = new Set(files);
+          const updateFiles = lastReport.selectedFiles.filter((file) => knownFiles.has(file));
+          setSelectedFiles(new Set(updateFiles.length > 0 ? updateFiles : autoSelectedFiles));
+          if (updateFiles.length === 0) {
+            const previousHarness = HARNESSES.findIndex(
+              (entry) => entry.agent === lastReport.agents[0] && entry.model === lastReport.model
+            );
+            if (previousHarness !== -1) setHarnessIndex(previousHarness);
+            setScreen('scope');
+          } else {
+            startRun({
+              runId: null,
+              runAgents: lastReport.agents,
+              runModel: lastReport.model,
+              runFiles: updateFiles,
+            });
+          }
+        } else if (existingRunCursor === 1) {
+          reviewRun(lastReport);
+        } else {
+          setSelectedFiles(new Set(autoSelectedFiles));
+          setScreen('harnesses');
+        }
       }
       return;
     }
@@ -875,33 +1243,15 @@ function MintTestApp({
   const fullBleed = running || (screen === 'report' && report !== undefined);
   let content: React.ReactNode;
   if (screen === 'resume' && save) content = <ResumeScreen save={save} cursor={resumeCursor} />;
-  else if (screen === 'harnesses') {
+  else if (screen === 'existing' && lastReport) {
+    content = <ExistingRunScreen report={lastReport} cursor={existingRunCursor} />;
+  } else if (screen === 'harnesses') {
     content = <HarnessScreen cursor={harnessIndex} />;
   } else if (screen === 'scope') {
-    content = (
-      <ScopeScreen
-        rows={rows}
-        cursor={scopeCursor}
-        height={viewHeight}
-        selectedCount={selectedFiles.size}
-        selectedBlocks={pages.reduce(
-          (total, page) => total + (selectedFiles.has(page.file) ? page.blockCount : 0),
-          0
-        )}
-        testablePages={pages.length}
-        totalPages={totalPages}
-        outputDirectory={outputDirectory}
-      />
-    );
+    content = <ScopeScreen rows={rows} cursor={scopeCursor} height={viewHeight} />;
   } else if (screen === 'report' && report) {
     content = (
-      <ReportScreen
-        report={report}
-        rows={runRows}
-        cursor={runCursor}
-        phases={phasesByFile}
-        height={viewHeight}
-      />
+      <ReportScreen report={report} rows={generatedRows} cursor={runCursor} height={viewHeight} />
     );
   } else if (screen === 'error') {
     content = (
@@ -918,7 +1268,9 @@ function MintTestApp({
         stage={activeRunStage}
         cancelling={cancelling}
         harness={runHarness}
+        docsRoot={docsRoot}
         rows={runRows}
+        generatedRows={generatedRows}
         cursor={runCursor}
         phases={phasesByFile}
         height={viewHeight}
@@ -963,9 +1315,19 @@ function MintTestApp({
         </Box>
       </Box>
       <Text dimColor>
-        {ctrlCArmed
-          ? 'Ctrl-C again to exit'
-          : footerForScreen(screen, running, report?.status === 'cancelled')}
+        {ctrlCArmed ? (
+          <FooterHints text="Ctrl-C again to exit" />
+        ) : (
+          <FooterHints
+            text={footerForScreen(
+              screen,
+              running,
+              report?.status === 'cancelled',
+              activeRunStage,
+              reviewingSavedRun
+            )}
+          />
+        )}
       </Text>
     </Box>
   );