@@ -38,6 +38,14 @@ runs:
         exit 1
       env:
         LD_LIBRARY_PATH: ${{ github.workspace }}/private/react-native-fantom/build/tester
+    - name: Upload failed screenshot comparisons
+      if: ${{ always() }}
+      uses: ./.github/actions/upload-artifact
+      with:
+        name: fantom-screenshot-failures
+        compression-level: 1
+        if-no-files-found: ignore
+        path: private/react-native-fantom/build/screenshot-failures
     - name: Upload test results
       if: ${{ always() }}
       uses: ./.github/actions/upload-artifact
 
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+declare module '@jest/reporters' {
+  declare export class DefaultReporter<
+    TTestResult = unknown,
+    TAggregatedResult = unknown,
+  > {
+    constructor(globalConfig: unknown): void;
+    onRunStart(aggregatedResults: unknown, options: unknown): void;
+    onTestResult(
+      test: unknown,
+      result: TTestResult,
+      aggregatedResults: TAggregatedResult,
+    ): void | Promise<void>;
+    onRunComplete(
+      testContexts: unknown,
+      aggregatedResults: TAggregatedResult,
+    ): void;
+  }
+  declare export class VerboseReporter<
+    TTestResult = unknown,
+    TAggregatedResult = unknown,
+  > extends DefaultReporter<TTestResult, TAggregatedResult> {}
+  declare export class SummaryReporter<TAggregatedResult = unknown> {
+    constructor(globalConfig: unknown): void;
+    onRunStart(aggregatedResults: unknown, options: unknown): void;
+    onRunComplete(
+      testContexts: unknown,
+      aggregatedResults: TAggregatedResult,
+    ): void;
+  }
+}
@@ -108,6 +108,23 @@ the baseline directory before cleaning up the temporary file. Unused images are
 removed only during a full successful snapshot update; empty, failed, skipped or
 filtered suites preserve their baselines.
 
+Failing screenshot snapshots show expected, received and diff PNG previews in
+supported terminals instead of hash diffs, with file paths beneath the images.
+Wide terminals show Expected, Received and Difference side by side; narrow
+terminals stack them. Fantom selects the image protocol from the detected
+terminal. VS Code requires `terminal.integrated.enableImages` in its settings;
+Fantom checks the terminal's response before sending images. If that check
+cannot confirm support (including when another program is reading terminal
+input), it keeps text diagnostics and file paths without printing image headers.
+Unsupported terminals, terminal multiplexers, CI and redirected output retain
+text diagnostics and file paths. Full text diagnostics also remain when any
+required image preview is unavailable.
+
+GitHub Fantom jobs upload failed comparisons as the `fantom-screenshot-failures`
+artifact, grouped by test configuration and snapshot. Each comparison includes
+the expected, received and difference PNGs when available. Failures from earlier
+retries are retained even if a later attempt passes.
+
 ### Painting
 
 The painter traverses Fabric's mounted child order, including stacking changes.
 
@@ -54,6 +54,7 @@ module.exports = {
   testPathIgnorePatterns: baseConfig.testPathIgnorePatterns,
   transformIgnorePatterns: ['.*'],
   testRunner: '<rootDir>/private/react-native-fantom/runner/index.js',
+  reporters: ['<rootDir>/private/react-native-fantom/reporter/index.js'],
   watchPathIgnorePatterns: ['<rootDir>/private/react-native-fantom/build/'],
   globalSetup:
     '<rootDir>/private/react-native-fantom/runner/global-setup/setup.js',
 
@@ -0,0 +1,255 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {ScreenshotResult} from '../runtime/ScreenshotContext';
+import type {TerminalEnvironment} from './terminalImages';
+
+import createImageRow from './imageRow';
+import saveScreenshotArtifacts from './screenshotArtifacts';
+import queryImageSupport from './terminalCapabilities';
+import {encodeTerminalImage, getImageProtocol} from './terminalImages';
+import {
+  DefaultReporter,
+  SummaryReporter,
+  VerboseReporter,
+} from '@jest/reporters';
+import fs from 'node:fs';
+import path from 'node:path';
+import tty from 'node:tty';
+
+export type TestResult = {
+  readonly failureMessage?: ?string,
+  readonly screenshotFailureMessage?: ?string,
+  readonly testResults: ReadonlyArray<
+    Readonly<{
+      fullName: string,
+      status: string,
+      screenshotResults?: ReadonlyArray<ScreenshotResult>,
+    }>,
+  >,
+};
+
+type AggregatedResult = {
+  readonly testResults: ReadonlyArray<TestResult>,
+  ...
+};
+
+interface TerminalOutput {
+  readonly isTTY?: boolean;
+  readonly columns?: number;
+  readonly rows?: number;
+  write(string): unknown;
+}
+
+export default function createScreenshotReporter(globalConfig: {
+  readonly verbose?: boolean,
+  ...
+}): DefaultReporter<TestResult, AggregatedResult> {
+  const Reporter: Class<DefaultReporter<TestResult, AggregatedResult>> =
+    globalConfig.verbose === true ? VerboseReporter : DefaultReporter;
+  const summaryReporter = new SummaryReporter<AggregatedResult>(globalConfig);
+  let terminalResults = new WeakMap<TestResult, TestResult>();
+  return new (class ScreenshotReporter extends Reporter {
+    #vsCodeImages: ?Promise<boolean> = null;
+
+    onRunStart(aggregatedResults: unknown, options: unknown): void {
+      this.#vsCodeImages = null;
+      terminalResults = new WeakMap();
+      super.onRunStart(aggregatedResults, options);
+      summaryReporter.onRunStart(aggregatedResults, options);
+    }
+
+    async onTestResult(
+      test: unknown,
+      result: TestResult,
+      aggregatedResults: AggregatedResult,
+    ): Promise<void> {
+      if (process.env.GITHUB_ACTIONS === 'true') {
+        const errors = saveScreenshotArtifacts(
+          result.testResults
+            .filter(testResult => testResult.status === 'failed')
+            .flatMap(testResult => testResult.screenshotResults ?? []),
+          path.resolve(__dirname, '../build/screenshot-failures'),
+        );
+        for (const error of errors) {
+          console.warn(error);
+        }
+      }
+      const input = process.stdin;
+      const output = process.stderr;
+      let terminalResult = result;
+      if (output instanceof tty.WriteStream) {
+        let supportsVSCodeImages = false;
+        if (
+          process.env.TERM_PROGRAM === 'vscode' &&
+          input instanceof tty.ReadStream &&
+          getImageProtocol(output.isTTY, process.env, true) != null &&
+          result.testResults.some(
+            testResult =>
+              testResult.status === 'failed' &&
+              testResult.screenshotResults?.some(
+                screenshot =>
+                  !screenshot.pass && screenshot.receivedPath != null,
+              ),
+          )
+        ) {
+          this.#vsCodeImages ??= queryImageSupport(input, output);
+          supportsVSCodeImages = await this.#vsCodeImages;
+        }
+        terminalResult = reportScreenshotPreviews(
+          result,
+          output,
+          process.env,
+          supportsVSCodeImages,
+        );
+      }
+      terminalResults.set(result, terminalResult);
+      await super.onTestResult(test, terminalResult, aggregatedResults);
+    }
+
+    onRunComplete(
+      testContexts: unknown,
+      aggregatedResults: AggregatedResult,
+    ): void {
+      super.onRunComplete(testContexts, aggregatedResults);
+      summaryReporter.onRunComplete(testContexts, {
+        ...aggregatedResults,
+        testResults: aggregatedResults.testResults.map(
+          result => terminalResults.get(result) ?? result,
+        ),
+      });
+    }
+  })(globalConfig);
+}
+
+export function reportScreenshotPreviews(
+  result: TestResult,
+  output: TerminalOutput,
+  env: TerminalEnvironment,
+  supportsVSCodeImages: boolean = false,
+): TestResult {
+  const protocol = getImageProtocol(output.isTTY, env, supportsVSCodeImages);
+  if (protocol == null) {
+    return result;
+  }
+  const readErrors = new Map<string, string>();
+  const readImage = (file: string): ?Buffer => {
+    try {
+      return fs.readFileSync(file);
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      readErrors.set(file, message.replace(/\p{Cc}/gu, ''));
+      return null;
+    }
+  };
+  const columns =
+    output.columns != null && output.columns > 0 ? output.columns : 80;
+  const rows = output.rows != null && output.rows > 0 ? output.rows : 30;
+  const horizontal = columns >= 60;
+  const preview = (png: Buffer) =>
+    encodeTerminalImage(png, protocol, {
+      columns: columns - 2,
+      rows: rows - 9,
+      tmux: env.TMUX != null,
+    });
+  let previews = '';
+  let hasPreview = false;
+  let allPreviewsRendered = true;
+  for (const test of result.testResults) {
+    if (test.status !== 'failed') {
+      continue;
+    }
+    for (const screenshot of test.screenshotResults ?? []) {
+      const receivedPath = screenshot.receivedPath;
+      if (screenshot.pass || receivedPath == null) {
+        continue;
+      }
+      const panels = [
+        {
+          label: 'Expected',
+          path: screenshot.expectedPath,
+          image: screenshot.isNew ? null : readImage(screenshot.expectedPath),
+          unavailable: screenshot.isNew ? 'no baseline' : 'preview unavailable',
+          required: !screenshot.isNew,
+        },
+        {
+          label: 'Received',
+          path: receivedPath,
+          image: readImage(receivedPath),
+          unavailable: 'preview unavailable',
+          required: true,
+        },
+        {
+          label: 'Difference',
+          path: screenshot.differencePath,
+          image:
+            screenshot.differencePath == null
+              ? null
+              : readImage(screenshot.differencePath),
+          unavailable: screenshot.isNew ? 'no baseline' : 'preview unavailable',
+          required: !screenshot.isNew,
+        },
+      ];
+      const title = test.fullName.replace(/\p{Cc}/gu, '');
+      previews += `\nScreenshot snapshot: ${title}\n`;
+      const images = panels
+        .map(panel => panel.image)
+        .filter(image => image != null);
+      const row =
+        horizontal && images.length === panels.length
+          ? createImageRow(images)
+          : null;
+      const rowPreview = row == null ? null : preview(row);
+      if (rowPreview != null) {
+        hasPreview = true;
+        const labelWidth = Math.max(
+          8,
+          Math.floor((rowPreview.columns - 6) / 3),
+        );
+        previews +=
+          panels.map(panel => panel.label.padEnd(labelWidth)).join(' | ') +
+          '\n';
+        previews += rowPreview.sequence + '\n';
+        for (const panel of panels) {
+          previews += `${panel.label}: ${panel.path ?? panel.unavailable}\n`;
+        }
+      } else {
+        for (const panel of panels) {
+          previews += `${panel.label}: ${panel.path ?? panel.unavailable}\n`;
+          const image = panel.image == null ? null : preview(panel.image);
+          hasPreview ||= image != null;
+          allPreviewsRendered &&= image != null || !panel.required;
+          const readError = readErrors.get(panel.path ?? '');
+          previews +=
+            (image?.sequence ??
+              (readError == null
+                ? panel.unavailable
+                : `preview unavailable: ${readError}`)) + '\n';
+        }
+      }
+    }
+  }
+  if (previews === '') {
+    return result;
+  }
+  try {
+    output.write(previews);
+  } catch {
+    return result;
+  }
+  if (
+    hasPreview &&
+    allPreviewsRendered &&
+    result.screenshotFailureMessage != null
+  ) {
+    return {...result, failureMessage: result.screenshotFailureMessage};
+  }
+  return result;
+}