@@ -106,6 +106,18 @@ 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.
+
 ### Painting
 
 The painter traverses Fabric's mounted child order, including stacking changes.
 
@@ -54,6 +54,10 @@ module.exports = {
   testPathIgnorePatterns: baseConfig.testPathIgnorePatterns,
   transformIgnorePatterns: ['.*'],
   testRunner: '<rootDir>/private/react-native-fantom/runner/index.js',
+  reporters: [
+    '<rootDir>/private/react-native-fantom/reporter/index.js',
+    'default',
+  ],
   watchPathIgnorePatterns: ['<rootDir>/private/react-native-fantom/build/'],
   globalSetup:
     '<rootDir>/private/react-native-fantom/runner/global-setup/setup.js',
 
@@ -0,0 +1,198 @@
+/**
+ * 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 queryImageSupport from './terminalCapabilities';
+import {encodeTerminalImage, getImageProtocol} from './terminalImages';
+import fs from 'node:fs';
+import tty from 'node:tty';
+
+export type TestResult = {
+  failureMessage?: ?string,
+  readonly screenshotFailureMessage?: ?string,
+  readonly testResults: ReadonlyArray<
+    Readonly<{
+      fullName: string,
+      status: string,
+      screenshotResults?: ReadonlyArray<ScreenshotResult>,
+    }>,
+  >,
+};
+
+interface TerminalOutput {
+  readonly isTTY?: boolean;
+  readonly columns?: number;
+  readonly rows?: number;
+  write(string): unknown;
+}
+
+export default class ScreenshotReporter {
+  #vsCodeImages: ?Promise<boolean> = null;
+
+  onRunStart(): void {
+    this.#vsCodeImages = null;
+  }
+
+  async onTestResult(_test: unknown, result: TestResult): Promise<void> {
+    const input = process.stdin;
+    const output = process.stderr;
+    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(
+          test =>
+            test.status === 'failed' &&
+            test.screenshotResults?.some(
+              screenshot => !screenshot.pass && screenshot.receivedPath != null,
+            ),
+        )
+      ) {
+        this.#vsCodeImages ??= queryImageSupport(input, output);
+        supportsVSCodeImages = await this.#vsCodeImages;
+      }
+      reportScreenshotPreviews(
+        result,
+        output,
+        process.env,
+        supportsVSCodeImages,
+      );
+    }
+  }
+}
+
+export function reportScreenshotPreviews(
+  result: TestResult,
+  output: TerminalOutput,
+  env: TerminalEnvironment,
+  supportsVSCodeImages: boolean = false,
+): void {
+  const protocol = getImageProtocol(output.isTTY, env, supportsVSCodeImages);
+  if (protocol == null) {
+    return;
+  }
+  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;
+  }
+  try {
+    output.write(previews);
+  } catch {
+    return;
+  }
+  if (
+    hasPreview &&
+    allPreviewsRendered &&
+    result.screenshotFailureMessage != null
+  ) {
+    result.failureMessage = result.screenshotFailureMessage;
+  }
+}