@mintlify/cli 4.0.1434 → 4.0.1437

package/src/mintTestUi.tsx

@@ -0,0 +1,988 @@
+import {
+  DEFAULT_COMMAND_TIMEOUT_MS,
+  DEFAULT_CONCURRENCY,
+  clearRunSave,
+  runCodeTests,
+  type CodeTestReport,
+  type DocsPage,
+  type HarnessAgent,
+  type RunSave,
+  type TaskPhase,
+  type TaskResult,
+  type TaskUpdate,
+} from '@mintlify/agent-harness';
+import { Box, render, Text, useInput } from 'ink';
+import path from 'node:path';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+import { toggleScopeSelection, visibleScopeRows, type ScopeTreeRow } from './mintTestTree.js';
+
+type Screen = 'resume' | 'harnesses' | 'scope' | 'running' | 'report' | 'error';
+
+interface MintTestUiProps {
+  targetPath: string;
+  docsRoot: string;
+  pages: DocsPage[];
+  autoSelectedFiles: string[];
+  totalPages: number;
+  save: RunSave | null;
+  onFinish: (exitCode: number) => void;
+}
+
+interface StepDefinition {
+  id: 'harnesses' | 'scope' | 'check' | 'generate' | 'run' | 'report';
+  label: string;
+}
+
+const HARNESSES: Array<{ agent: HarnessAgent; model: string; label: string }> = [
+  { agent: 'claude', model: 'claude-opus-4-8', label: 'Claude Opus 4.8' },
+  { agent: 'claude', model: 'claude-sonnet-4-6', label: 'Claude Sonnet 4.6' },
+  { 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' },
+  { id: 'check', label: 'Check testability' },
+  { id: 'generate', label: 'Generate tests' },
+  { id: 'run', label: 'Run tests' },
+  { id: 'report', label: 'Report' },
+];
+
+function formatTokens(tokens: number): string {
+  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`;
+  if (tokens >= 1_000) return `${Math.round(tokens / 1_000)}k`;
+  return String(tokens);
+}
+
+function padTokens(tokens: number): string {
+  return formatTokens(tokens).padStart(4);
+}
+
+export function formatDuration(durationMs: number): string {
+  const seconds = Math.max(0, Math.floor(durationMs / 1_000));
+  if (seconds < 60) return `${seconds}s`;
+  return `${Math.floor(seconds / 60)}m ${String(seconds % 60).padStart(2, '0')}s`;
+}
+
+function padDuration(durationMs: number): string {
+  return formatDuration(durationMs).padStart(7);
+}
+
+function padCount(value: number, total: number): string {
+  return String(value).padStart(String(total).length);
+}
+
+function useTerminalSize(): { columns: number; rows: number } {
+  const [size, setSize] = useState(() => ({
+    columns: process.stdout.columns || 100,
+    rows: process.stdout.rows || 30,
+  }));
+
+  useEffect(() => {
+    const resize = () =>
+      setSize({ columns: process.stdout.columns || 100, rows: process.stdout.rows || 30 });
+    process.stdout.on('resize', resize);
+    return () => {
+      process.stdout.off('resize', resize);
+    };
+  }, []);
+
+  return size;
+}
+
+function stepState(
+  step: StepDefinition['id'],
+  screen: Screen,
+  activeRunStage: 'check' | 'generate' | 'run'
+): 'pending' | 'running' | 'complete' | 'error' {
+  const order = ['harnesses', 'scope', 'check', 'generate', 'run', 'report'];
+  const screenStep =
+    screen === 'resume'
+      ? 'harnesses'
+      : screen === 'running' || screen === 'error'
+        ? activeRunStage
+        : screen;
+  const current = order.indexOf(screenStep);
+  const index = order.indexOf(step);
+  if (screen === 'error' && index === current) return 'error';
+  if (index < current || screen === 'report') return 'complete';
+  if (index === current) return 'running';
+  return 'pending';
+}
+
+function StepGlyph({ state }: { state: ReturnType<typeof stepState> }) {
+  if (state === 'complete') return <Text color="green">✓</Text>;
+  if (state === 'running') return <Text color="cyan">●</Text>;
+  if (state === 'error') return <Text color="red">✗</Text>;
+  return <Text dimColor>○</Text>;
+}
+
+const RESUME_OPTIONS = ['Resume', 'Start fresh'] as const;
+const EMPTY_SELECTION: ReadonlySet<string> = new Set();
+
+function ResumeScreen({ save, cursor }: { save: RunSave; cursor: number }) {
+  return (
+    <Box flexDirection="column">
+      <Text bold>Resume previous run?</Text>
+      <Box flexDirection="column" marginTop={1}>
+        <Text>
+          Run <Text color="cyan">{save.runId}</Text>
+        </Text>
+        <Text dimColor>
+          {save.selectedFiles.length} {save.selectedFiles.length === 1 ? 'page' : 'pages'} ·{' '}
+          {save.agents.join(', ')}
+        </Text>
+      </Box>
+      <Box flexDirection="column" marginTop={1}>
+        {RESUME_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>
+      <Box flexDirection="column" marginTop={1}>
+        {HARNESSES.map((harness, index) => (
+          <Text key={harness.label} color={cursor === index ? 'cyan' : undefined}>
+            {cursor === index ? '›' : ' '} {cursor === index ? '(•)' : '( )'} {harness.label}
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+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));
+  const visible = rows.slice(start, start + viewport);
+
+  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}
+        </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) => {
+          const index = start + visibleIndex;
+          const selection =
+            row.selection === 'all' ? '[x]' : row.selection === 'some' ? '[-]' : '[ ]';
+          const disclosure = row.kind === 'directory' ? (row.expanded ? '▾' : '▸') : ' ';
+          return (
+            <Text key={row.id} color={index === cursor ? 'cyan' : undefined}>
+              {' '.repeat(row.depth * 2)}
+              {index === cursor ? '›' : ' '} {selection} {disclosure} {row.label}{' '}
+              <Text dimColor>
+                {row.blockCount} {row.blockCount === 1 ? 'code block' : 'code blocks'}
+              </Text>
+            </Text>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}
+
+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',
+  'failed',
+  'agent_error',
+  'not_testable',
+  'cancelled',
+]);
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+interface TaskRow extends TaskUpdate {
+  startedAt: number;
+  finishedAt?: number;
+}
+
+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' };
+  return { glyph: '○', dim: true };
+}
+
+const SETTLED_PHASES = new Set<TaskPhase>([...DONE_PHASES, 'checked', 'generated']);
+
+function directoryStatus(
+  files: string[],
+  phases: ReadonlyMap<string, TaskRow>,
+  spinner: string
+): { glyph: string; color?: string; dim?: boolean } {
+  const rows = files.map((file) => phases.get(file));
+  if (rows.some((row) => row && ACTIVE_PHASES.has(row.phase))) {
+    return { glyph: spinner, color: 'green' };
+  }
+  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' };
+    }
+    return rows.every((row) => row && DONE_PHASES.has(row.phase))
+      ? { glyph: '●', color: 'green' }
+      : { glyph: '●', dim: true };
+  }
+  return { glyph: '○', dim: true };
+}
+
+function ActivityScreen({
+  stage,
+  cancelling,
+  harness,
+  rows,
+  cursor,
+  phases,
+  height,
+  totalTasks,
+  spinnerFrame,
+  runStartedAt,
+  now,
+}: {
+  stage: 'check' | 'generate' | 'run';
+  cancelling: boolean;
+  harness: string;
+  rows: ReturnType<typeof visibleScopeRows>;
+  cursor: number;
+  phases: ReadonlyMap<string, TaskRow>;
+  height: number;
+  totalTasks: number;
+  spinnerFrame: number;
+  runStartedAt: number;
+  now: number;
+}) {
+  const spinner = SPINNER_FRAMES[spinnerFrame % SPINNER_FRAMES.length] ?? '⠋';
+  const updates = [...phases.values()];
+  const message = cancelling
+    ? 'Cancelling agent and test processes'
+    : stage === 'check'
+      ? 'Checking which code blocks can be tested'
+      : stage === 'generate'
+        ? 'Agents are generating test projects'
+        : 'Running generated tests';
+  const done = updates.filter((update) => DONE_PHASES.has(update.phase)).length;
+  const notTestable = updates.filter((update) => update.phase === 'not_testable').length;
+  const created = updates.filter((update) =>
+    ['generated', 'running', 'passed', 'failed'].includes(update.phase)
+  ).length;
+  const tokens = updates.reduce((total, update) => total + update.tokens, 0);
+  const checked = updates.filter((update) => update.phase !== 'checking').length;
+  const progress =
+    stage === 'check'
+      ? `${padCount(checked, totalTasks)}/${totalTasks} pages checked`
+      : stage === 'generate'
+        ? `${padCount(created, totalTasks - notTestable)}/${totalTasks - notTestable} tests created`
+        : `${padCount(done - notTestable, totalTasks - notTestable)}/${totalTasks - notTestable} tasks finished`;
+  const viewport = Math.max(4, height - 13);
+  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">
+        <Text bold>
+          {padDuration(now - runStartedAt)} <Text dimColor>{padTokens(tokens)} tokens</Text>
+        </Text>
+        <Text color="green">
+          <Text>{spinner}</Text> {message}
+        </Text>
+        <Text dimColor>Harness: {harness}</Text>
+        <Text dimColor>{progress}</Text>
+      </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
+                </Text>
+              ) : null}
+              {task ? (
+                <Text dimColor> {padDuration((task.finishedAt ?? now) - task.startedAt)}</Text>
+              ) : null}
+            </Text>
+          );
+        })}
+      </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 };
+}
+
+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' };
+}
+
+function ReportScreen({
+  report,
+  rows,
+  cursor,
+  phases,
+  height,
+}: {
+  report: CodeTestReport;
+  rows: ReturnType<typeof visibleScopeRows>;
+  cursor: number;
+  phases: ReadonlyMap<string, TaskRow>;
+  height: number;
+}) {
+  const statusColor =
+    report.status === 'passed'
+      ? 'green'
+      : report.status === 'completed'
+        ? 'cyan'
+        : report.status === 'cancelled'
+          ? 'yellow'
+          : 'red';
+  const heading =
+    report.status === 'passed'
+      ? 'All runnable tests passed'
+      : 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">
+        <Text bold color={statusColor}>
+          {heading}
+        </Text>
+        <Text>
+          Finished in <Text bold>{formatDuration(report.durationMs)}</Text>
+        </Text>
+        <Text dimColor wrap="truncate-end">
+          Report at {report.reportPath}
+        </Text>
+      </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>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}
+
+function footerForScreen(screen: Screen, running: boolean, cancelled: boolean): string {
+  if (running) return '↑/↓/j/k move · ←/→/h/l collapse/expand · Ctrl-C cancel';
+  if (screen === 'resume') 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') {
+    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';
+  }
+  return 'Enter exit';
+}
+
+function MintTestApp({
+  targetPath,
+  docsRoot,
+  pages,
+  autoSelectedFiles,
+  totalPages,
+  save,
+  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 [resumeCursor, setResumeCursor] = useState(0);
+  const [harnessIndex, setHarnessIndex] = useState(0);
+  const [runHarness, setRunHarness] = useState('');
+  const harness = HARNESSES[harnessIndex] ?? HARNESSES[0]!;
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(() => new Set(autoSelectedFiles));
+  const [expandedDirectories, setExpandedDirectories] = useState<Set<string>>(new Set());
+  const [scopeCursor, setScopeCursor] = useState(0);
+  const [activeRunStage, setActiveRunStage] = useState<'check' | 'generate' | 'run'>('check');
+  const [cancelling, setCancelling] = useState(false);
+  const [ctrlCArmed, setCtrlCArmed] = useState(false);
+  const ctrlCTimer = useRef<NodeJS.Timeout | undefined>(undefined);
+  const [taskPhases, setTaskPhases] = useState<Map<string, TaskRow>>(new Map());
+  const [totalTasks, setTotalTasks] = useState(0);
+  const [runCursor, setRunCursor] = useState(0);
+  const [runExpanded, setRunExpanded] = useState<Set<string>>(new Set());
+  const [runFiles, setRunFiles] = useState<string[]>([]);
+  const [runStartedAt, setRunStartedAt] = useState(0);
+  const autoCollapsed = useRef<Set<string>>(new Set());
+  const manualCursor = useRef(false);
+  const [spinnerFrame, setSpinnerFrame] = useState(0);
+  const [now, setNow] = useState(() => Date.now());
+  const [report, setReport] = useState<CodeTestReport>();
+  const [error, setError] = useState<string>();
+  const abortController = useRef<AbortController | undefined>(undefined);
+  const finished = useRef(false);
+  const rows = useMemo(
+    () => visibleScopeRows(pages, expandedDirectories, selectedFiles),
+    [pages, expandedDirectories, selectedFiles]
+  );
+  const phasesByFile = useMemo(
+    () => new Map([...taskPhases.values()].map((row) => [row.file, row])),
+    [taskPhases]
+  );
+  const visibleRunFiles = useMemo(
+    () =>
+      runFiles.filter(
+        (file) => activeRunStage === 'check' || phasesByFile.get(file)?.phase !== 'not_testable'
+      ),
+    [runFiles, activeRunStage, phasesByFile]
+  );
+  const runRows = useMemo(() => {
+    const included = new Set(visibleRunFiles);
+    return visibleScopeRows(
+      pages.filter((page) => included.has(page.file)),
+      runExpanded,
+      EMPTY_SELECTION
+    );
+  }, [pages, visibleRunFiles, runExpanded]);
+
+  useEffect(() => {
+    if (screen !== 'running') return;
+    const timer = setInterval(() => setSpinnerFrame((frame) => frame + 1), 120);
+    const clock = setInterval(() => setNow(Date.now()), 1_000);
+    return () => {
+      clearInterval(timer);
+      clearInterval(clock);
+    };
+  }, [screen]);
+
+  useEffect(() => {
+    if (screen !== 'running') return;
+    const fileDone = (file: string) => {
+      const phase = phasesByFile.get(file)?.phase;
+      return phase !== undefined && DONE_PHASES.has(phase);
+    };
+    const directoryFiles = new Map<string, string[]>();
+    for (const file of visibleRunFiles) {
+      const parts = file.split('/');
+      let currentPath = '';
+      for (const part of parts.slice(0, -1)) {
+        currentPath = currentPath ? `${currentPath}/${part}` : part;
+        const id = `dir:${currentPath}`;
+        directoryFiles.set(id, [...(directoryFiles.get(id) ?? []), file]);
+      }
+    }
+    const toCollapse = [...directoryFiles.entries()]
+      .filter(([id, files]) => !autoCollapsed.current.has(id) && files.every(fileDone))
+      .map(([id]) => id);
+    if (toCollapse.length > 0) {
+      for (const id of toCollapse) autoCollapsed.current.add(id);
+      setRunExpanded((current) => {
+        const next = new Set(current);
+        for (const id of toCollapse) next.delete(id);
+        return next;
+      });
+    }
+    const rowDone = (row: ScopeTreeRow) => {
+      const files = row.kind === 'directory' ? row.selectableFiles : row.file ? [row.file] : [];
+      return files.length > 0 && files.every(fileDone);
+    };
+    if (manualCursor.current) return;
+    const current = runRows[runCursor];
+    if (runRows.length > 0 && (!current || rowDone(current))) {
+      const nextIndex = runRows.findIndex((row) => !rowDone(row));
+      if (nextIndex !== -1 && nextIndex !== runCursor) setRunCursor(nextIndex);
+    }
+  }, [screen, phasesByFile, visibleRunFiles, runRows, runCursor]);
+
+  const finish = (exitCode: number) => {
+    if (finished.current) return;
+    finished.current = true;
+    onFinish(exitCode);
+  };
+
+  const startRun = ({
+    runId,
+    runAgents,
+    runModel,
+    runFiles: runFiles_,
+  }: {
+    runId: string | null;
+    runAgents: HarnessAgent[];
+    runModel: string;
+    runFiles: string[];
+  }) => {
+    if (abortController.current) return;
+    const controller = new AbortController();
+    abortController.current = controller;
+    setTotalTasks(runAgents.length * runFiles_.length);
+    setRunHarness(
+      HARNESSES.find((entry) => entry.agent === runAgents[0] && entry.model === runModel)?.label ??
+        `${runAgents.join(', ')} · ${runModel}`
+    );
+    setRunCursor(0);
+    autoCollapsed.current = new Set();
+    manualCursor.current = false;
+    setRunStartedAt(Date.now());
+    setNow(Date.now());
+    setRunFiles(runFiles_);
+    setRunExpanded(
+      new Set(
+        runFiles_.flatMap((file) => {
+          const parts = file.split('/').slice(0, -1);
+          return parts.map((_, index) => `dir:${parts.slice(0, index + 1).join('/')}`);
+        })
+      )
+    );
+    setScreen('running');
+    setActiveRunStage('check');
+    void runCodeTests({
+      path: targetPath,
+      agents: runAgents,
+      model: runModel,
+      selectedFiles: runFiles_,
+      outputDirectory,
+      runId,
+      concurrency: DEFAULT_CONCURRENCY,
+      commandTimeoutMs: DEFAULT_COMMAND_TIMEOUT_MS,
+      signal: controller.signal,
+      onTaskUpdate: (update) => {
+        const phaseStage =
+          update.phase === 'running'
+            ? 'run'
+            : update.phase === 'generating' || update.phase === 'generated'
+              ? 'generate'
+              : null;
+        if (phaseStage) {
+          setActiveRunStage((stage) => {
+            const order = ['check', 'generate', 'run'] as const;
+            return order.indexOf(phaseStage) > order.indexOf(stage) ? phaseStage : stage;
+          });
+        }
+        const now = Date.now();
+        setTaskPhases((current) => {
+          const previous = current.get(update.id);
+          return new Map(current).set(update.id, {
+            ...update,
+            startedAt: previous?.startedAt ?? now,
+            ...(ACTIVE_PHASES.has(update.phase) ? {} : { finishedAt: now }),
+          });
+        });
+      },
+    })
+      .then((nextReport) => {
+        setReport(nextReport);
+        const failedFiles = nextReport.tasks
+          .filter((task) => task.status === 'failed' || task.status === 'agent_error')
+          .map((task) => task.file);
+        setRunExpanded(
+          new Set(
+            failedFiles.flatMap((file) => {
+              const parts = file.split('/').slice(0, -1);
+              return parts.map((_, index) => `dir:${parts.slice(0, index + 1).join('/')}`);
+            })
+          )
+        );
+        setRunCursor(0);
+        setScreen('report');
+      })
+      .catch((runError: unknown) => {
+        if (controller.signal.aborted) {
+          finish(130);
+          return;
+        }
+        setError(runError instanceof Error ? runError.message : String(runError));
+        setScreen('error');
+      });
+  };
+
+  useInput((input, key) => {
+    if (key.ctrl && input === 'c') {
+      if (ctrlCArmed) {
+        if (abortController.current) {
+          abortController.current.abort();
+          setCancelling(true);
+        }
+        finish(130);
+      } else {
+        setCtrlCArmed(true);
+        if (ctrlCTimer.current) clearTimeout(ctrlCTimer.current);
+        ctrlCTimer.current = setTimeout(() => setCtrlCArmed(false), 2_000);
+      }
+      return;
+    }
+
+    if (screen === 'running' || screen === 'report') {
+      const collapse = key.leftArrow || input === 'h';
+      const expand = key.rightArrow || input === 'l';
+      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) {
+        manualCursor.current = true;
+        const row = runRows[runCursor];
+        if (row?.kind !== 'directory') return;
+        setRunExpanded((current) => {
+          const next = new Set(current);
+          if (collapse) next.delete(row.id);
+          else next.add(row.id);
+          return next;
+        });
+      } else if (screen === 'report' && key.return && report) {
+        finish(report.status === 'passed' ? 0 : report.status === 'cancelled' ? 130 : 1);
+      }
+      return;
+    }
+
+    if (screen === 'resume' && save) {
+      if (key.upArrow || input === 'k' || key.downArrow || input === 'j') {
+        setResumeCursor((current) => (current + 1) % RESUME_OPTIONS.length);
+      } else if (key.return) {
+        if (resumeCursor === 0) {
+          setSelectedFiles(new Set(save.selectedFiles));
+          startRun({
+            runId: save.runId,
+            runAgents: save.agents,
+            runModel: save.model,
+            runFiles: save.selectedFiles,
+          });
+        } else {
+          void clearRunSave(outputDirectory);
+          setScreen('harnesses');
+        }
+      }
+      return;
+    }
+
+    if (screen === 'harnesses') {
+      if (key.upArrow || input === 'k')
+        setHarnessIndex((current) => (current + HARNESSES.length - 1) % HARNESSES.length);
+      else if (key.downArrow || input === 'j')
+        setHarnessIndex((current) => (current + 1) % HARNESSES.length);
+      else if (key.return) setScreen('scope');
+      return;
+    }
+
+    if (screen === 'scope') {
+      const collapse = key.leftArrow || input === 'h';
+      const expand = key.rightArrow || input === 'l';
+      if (key.upArrow || input === 'k') setScopeCursor((current) => Math.max(0, current - 1));
+      else if (key.downArrow || input === 'j')
+        setScopeCursor((current) => Math.max(0, Math.min(rows.length - 1, current + 1)));
+      else if (collapse || expand) {
+        const row = rows[scopeCursor];
+        if (row?.kind !== 'directory') return;
+        setExpandedDirectories((current) => {
+          const next = new Set(current);
+          if (collapse) next.delete(row.id);
+          else next.add(row.id);
+          return next;
+        });
+      } else if (input === ' ') {
+        const row = rows[scopeCursor];
+        if (row) setSelectedFiles((current) => toggleScopeSelection(current, row));
+      } else if (input.toLowerCase() === 'a') {
+        setSelectedFiles((current) => (current.size === files.length ? new Set() : new Set(files)));
+      } else if (key.return && (selectedFiles.size > 0 || files.length === 0)) {
+        startRun({
+          runId: null,
+          runAgents: [harness.agent],
+          runModel: harness.model,
+          runFiles: [...selectedFiles],
+        });
+      }
+      return;
+    }
+
+    if (screen === 'error' && key.return) {
+      finish(1);
+    }
+  });
+
+  const leftWidth = size.columns >= 90 ? 28 : 24;
+  const viewHeight = size.rows - 1;
+  const running = screen === 'running';
+  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') {
+    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}
+      />
+    );
+  } else if (screen === 'report' && report) {
+    content = (
+      <ReportScreen
+        report={report}
+        rows={runRows}
+        cursor={runCursor}
+        phases={phasesByFile}
+        height={viewHeight}
+      />
+    );
+  } else if (screen === 'error') {
+    content = (
+      <Box flexDirection="column">
+        <Text color="red" bold>
+          Mint test stopped
+        </Text>
+        <Text>{error ?? 'Unknown error'}</Text>
+      </Box>
+    );
+  } else {
+    content = (
+      <ActivityScreen
+        stage={activeRunStage}
+        cancelling={cancelling}
+        harness={runHarness}
+        rows={runRows}
+        cursor={runCursor}
+        phases={phasesByFile}
+        height={viewHeight}
+        totalTasks={totalTasks}
+        spinnerFrame={spinnerFrame}
+        runStartedAt={runStartedAt}
+        now={now}
+      />
+    );
+  }
+
+  return (
+    <Box flexDirection="column" width={size.columns} height={viewHeight} overflow="hidden">
+      <Box flexGrow={1} gap={1} overflow="hidden">
+        <Box
+          width={leftWidth}
+          flexShrink={0}
+          borderStyle="round"
+          borderColor="gray"
+          paddingX={1}
+          flexDirection="column"
+        >
+          <Text bold>Steps</Text>
+          {STEPS.map((step) => {
+            const state = stepState(step.id, screen, activeRunStage);
+            return (
+              <Text key={step.id} color={state === 'running' ? 'cyan' : undefined}>
+                <StepGlyph state={state} /> {step.label}
+              </Text>
+            );
+          })}
+        </Box>
+        <Box
+          flexGrow={1}
+          borderStyle={fullBleed ? undefined : 'round'}
+          borderColor="gray"
+          paddingX={fullBleed ? 0 : 1}
+          flexDirection="column"
+          overflow="hidden"
+        >
+          {content}
+        </Box>
+      </Box>
+      <Text dimColor>
+        {ctrlCArmed
+          ? 'Ctrl-C again to exit'
+          : footerForScreen(screen, running, report?.status === 'cancelled')}
+      </Text>
+    </Box>
+  );
+}
+
+export async function runMintTestUi(options: Omit<MintTestUiProps, 'onFinish'>): Promise<number> {
+  process.stdout.write('\u001B[?1049h\u001B[?25l');
+  let instance: ReturnType<typeof render> | undefined;
+  try {
+    return await new Promise<number>((resolve) => {
+      instance = render(<MintTestApp {...options} onFinish={resolve} />, {
+        exitOnCtrlC: false,
+        patchConsole: false,
+      });
+    });
+  } finally {
+    instance?.unmount();
+    process.stdout.write('\u001B[?25h\u001B[?1049l');
+  }
+}