From e708aabf3919bdad2c020f6f5ad33836f59ef227 Mon Sep 17 00:00:00 2001
From: Shy Alter <puemos@users.noreply.github.com>
Date: Tue, 28 Jul 2026 16:28:03 +0200
Subject: [PATCH 1/3] feat(sessions): add image artifact viewer

Normalize image artifact MIME types and add lightweight zoom and pan controls by extending the existing image preview primitives.

Generated-By: PostHog Code
Task-Id: 577e32f4-830b-4174-a9c4-efa9464652a1
---
 .../components/ArtifactPreview.test.tsx       |  46 +++++++
 .../sessions/components/ArtifactPreview.tsx   |  36 ++---
 .../components/artifactPreviewDocument.ts     |  32 +++++
 .../ui/src/primitives/SafeImagePreview.tsx    | 124 ++++++++++++++----
 .../hooks/useImagePanAndZoom.test.tsx         |  10 ++
 .../primitives/hooks/useImagePanAndZoom.ts    |  15 +++
 6 files changed, 215 insertions(+), 48 deletions(-)

diff --git a/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx b/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
index aa7a904c15..eed4403444 100644
--- a/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
+++ b/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
@@ -3,6 +3,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ArtifactPreview } from "./ArtifactPreview";
 import {
   artifactHtmlDocument,
+  artifactPreviewBlob,
   markdownDocument,
 } from "./artifactPreviewDocument";
 
@@ -102,6 +103,51 @@ describe("ArtifactPreview", () => {
     expect(frame).toHaveAttribute("sandbox", "");
   });
 
+  it.each([
+    ["image.png", "image/png"],
+    ["image.jpg", "image/jpeg"],
+    ["image.gif", "image/gif"],
+    ["image.webp", "image/webp"],
+    ["image.bmp", "image/bmp"],
+    ["image.ico", "image/x-icon"],
+    ["image.tiff", "image/tiff"],
+    ["image.avif", "image/avif"],
+  ])("normalizes %s served as octet-stream", async (name, mimeType) => {
+    const blob = await artifactPreviewBlob(
+      new Blob(["image"], { type: "application/octet-stream" }),
+      name,
+    );
+
+    expect(blob.type).toBe(mimeType);
+  });
+
+  it("shows image controls instead of an iframe", () => {
+    useQuery.mockReturnValue({
+      data: new Blob(["image"], { type: "image/png" }),
+      isLoading: false,
+      isError: false,
+    });
+
+    render(
+      <ArtifactPreview
+        taskId="task-1"
+        runId="run-1"
+        artifactId="artifact-1"
+        name="image.png"
+      />,
+    );
+
+    expect(screen.getByRole("img", { name: "image.png" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Zoom in" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Zoom out" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Fit to view" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByTitle("Preview of image.png")).not.toBeInTheDocument();
+  });
+
   it("renders GFM Markdown while escaping embedded HTML", () => {
     const document = markdownDocument(
       "# Report\n\n**Ready**\n\n| Name | Value |\n| --- | --- |\n| Cost | 12 |\n\n<script>alert('no')</script>",
diff --git a/packages/ui/src/features/sessions/components/ArtifactPreview.tsx b/packages/ui/src/features/sessions/components/ArtifactPreview.tsx
index ba1d4ccb26..d1b4cd5789 100644
--- a/packages/ui/src/features/sessions/components/ArtifactPreview.tsx
+++ b/packages/ui/src/features/sessions/components/ArtifactPreview.tsx
@@ -4,6 +4,7 @@ import {
 } from "@posthog/core/sessions/sessionService";
 import { useService } from "@posthog/di/react";
 import { Spinner } from "@posthog/quill";
+import { isAllowedImageMimeType } from "@posthog/shared";
 import {
   getAuthIdentity,
   useAuthStateValue,
@@ -11,16 +12,8 @@ import {
 import { AUTH_SCOPED_QUERY_META } from "@posthog/ui/features/auth/useCurrentUser";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo } from "react";
-import {
-  artifactHtmlDocument,
-  markdownDocument,
-} from "./artifactPreviewDocument";
-
-const MARKDOWN_EXTENSIONS = new Set(["md", "mdx", "markdown"]);
-
-function extension(filename: string): string {
-  return filename.split(".").pop()?.toLowerCase() ?? "";
-}
+import { ZoomableImage } from "../../../primitives/SafeImagePreview";
+import { artifactPreviewBlob } from "./artifactPreviewDocument";
 
 export function ArtifactPreview({
   taskId,
@@ -46,18 +39,7 @@ export function ArtifactPreview({
       if (!url) throw new Error("Artifact is unavailable");
       const response = await fetch(url);
       if (!response.ok) throw new Error("Artifact preview failed");
-      const blob = await response.blob();
-      if (MARKDOWN_EXTENSIONS.has(extension(name))) {
-        return new Blob([markdownDocument(await blob.text())], {
-          type: "text/html",
-        });
-      }
-      if (extension(name) === "html" || extension(name) === "htm") {
-        return new Blob([artifactHtmlDocument(await blob.text())], {
-          type: "text/html",
-        });
-      }
-      return blob;
+      return artifactPreviewBlob(await response.blob(), name);
     },
     enabled: authIdentity !== null,
     staleTime: Infinity,
@@ -89,6 +71,16 @@ export function ArtifactPreview({
       </div>
     );
   }
+  if (data && isAllowedImageMimeType(data.type)) {
+    return (
+      <ZoomableImage
+        src={previewUrl}
+        alt={name}
+        controls
+        className="size-full bg-(--gray-2) p-4"
+      />
+    );
+  }
   return (
     <iframe
       className="h-full w-full border-0 bg-white"
diff --git a/packages/ui/src/features/sessions/components/artifactPreviewDocument.ts b/packages/ui/src/features/sessions/components/artifactPreviewDocument.ts
index b92e9ddb8b..77ee9a74f8 100644
--- a/packages/ui/src/features/sessions/components/artifactPreviewDocument.ts
+++ b/packages/ui/src/features/sessions/components/artifactPreviewDocument.ts
@@ -1,9 +1,16 @@
+import { getImageMimeType, isAllowedImageMimeType } from "@posthog/shared";
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { applyCspToHtml } from "../../mcp-apps/utils/mcp-app-csp";
 
+const MARKDOWN_EXTENSIONS = new Set(["md", "mdx", "markdown"]);
+
+function extension(filename: string): string {
+  return filename.split(".").pop()?.toLowerCase() ?? "";
+}
+
 export function artifactHtmlDocument(html: string): string {
   return applyCspToHtml(html);
 }
@@ -16,3 +23,28 @@ export function markdownDocument(markdown: string): string {
     :root{font:15px/1.6 system-ui,sans-serif;color-scheme:light dark}body{box-sizing:border-box;margin:0 auto;max-width:900px;padding:32px;color:CanvasText;background:Canvas}h1,h2{border-bottom:1px solid color-mix(in srgb,CanvasText 18%,transparent);padding-bottom:.3em}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.25em}a{color:LinkText}blockquote{margin-left:0;padding-left:1em;border-left:4px solid color-mix(in srgb,CanvasText 25%,transparent);color:GrayText}pre,code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}code{border-radius:4px;background:color-mix(in srgb,CanvasText 8%,transparent);padding:.15em .3em}pre{overflow:auto;border-radius:6px;background:color-mix(in srgb,CanvasText 8%,transparent);padding:16px}pre code{background:none;padding:0}table{border-spacing:0;border-collapse:collapse}th,td{border:1px solid color-mix(in srgb,CanvasText 20%,transparent);padding:6px 12px}img{max-width:100%}hr{border:0;border-top:1px solid color-mix(in srgb,CanvasText 20%,transparent)}
   </style></head><body>${content}</body></html>`);
 }
+
+export async function artifactPreviewBlob(
+  blob: Blob,
+  filename: string,
+): Promise<Blob> {
+  const filenameMimeType = getImageMimeType(filename);
+  const imageMimeType = isAllowedImageMimeType(blob.type)
+    ? blob.type.toLowerCase()
+    : filenameMimeType;
+
+  if (isAllowedImageMimeType(imageMimeType)) {
+    return new Blob([blob], { type: imageMimeType });
+  }
+  if (MARKDOWN_EXTENSIONS.has(extension(filename))) {
+    return new Blob([markdownDocument(await blob.text())], {
+      type: "text/html",
+    });
+  }
+  if (["html", "htm"].includes(extension(filename))) {
+    return new Blob([artifactHtmlDocument(await blob.text())], {
+      type: "text/html",
+    });
+  }
+  return blob;
+}
diff --git a/packages/ui/src/primitives/SafeImagePreview.tsx b/packages/ui/src/primitives/SafeImagePreview.tsx
index 67a58b3f71..5c2cb1907e 100644
--- a/packages/ui/src/primitives/SafeImagePreview.tsx
+++ b/packages/ui/src/primitives/SafeImagePreview.tsx
@@ -1,3 +1,8 @@
+import {
+  ArrowsInSimple,
+  MagnifyingGlassMinus,
+  MagnifyingGlassPlus,
+} from "@phosphor-icons/react";
 import {
   buildImageDataUrl,
   isAllowedImageMimeType,
@@ -16,6 +21,90 @@ interface SafeImagePreviewProps {
   style?: React.CSSProperties;
   /** Rendered when the image fails to decode or has a disallowed mime type. */
   fallback?: React.ReactNode;
+  controls?: boolean;
+}
+
+interface ZoomableImageProps {
+  src: string;
+  alt: string;
+  className?: string;
+  style?: React.CSSProperties;
+  controls?: boolean;
+  onError?: () => void;
+}
+
+export function ZoomableImage({
+  src,
+  alt,
+  className,
+  style,
+  controls = false,
+  onError,
+}: ZoomableImageProps) {
+  const zoom = useImagePanAndZoom();
+
+  return (
+    <div
+      ref={zoom.containerRef}
+      className={`relative flex touch-none select-none items-center justify-center overflow-hidden ${className ?? "max-h-full max-w-full"}`}
+      style={{
+        ...style,
+        cursor: zoom.isDragging
+          ? "grabbing"
+          : zoom.isZoomed
+            ? "grab"
+            : style?.cursor,
+      }}
+    >
+      <img
+        src={src}
+        alt={alt}
+        draggable={false}
+        className="max-h-full max-w-full object-contain"
+        style={{
+          transform: zoom.transform,
+          transformOrigin: "center center",
+          willChange: "transform",
+        }}
+        onError={onError}
+      />
+      {controls && (
+        <div className="-translate-x-1/2 absolute bottom-3 left-1/2 flex items-center gap-1 rounded-md border border-(--gray-a5) bg-(--color-panel-solid) p-1 shadow-sm">
+          <button
+            type="button"
+            title="Zoom out"
+            aria-label="Zoom out"
+            disabled={zoom.scale <= 1}
+            onClick={zoom.zoomOut}
+            className="flex size-7 items-center justify-center rounded text-(--gray-11) hover:bg-(--gray-a3) disabled:opacity-40"
+          >
+            <MagnifyingGlassMinus size={16} />
+          </button>
+          <span className="w-11 text-center text-(--gray-11) text-xs">
+            {Math.round(zoom.scale * 100)}%
+          </span>
+          <button
+            type="button"
+            title="Zoom in"
+            aria-label="Zoom in"
+            onClick={zoom.zoomIn}
+            className="flex size-7 items-center justify-center rounded text-(--gray-11) hover:bg-(--gray-a3)"
+          >
+            <MagnifyingGlassPlus size={16} />
+          </button>
+          <button
+            type="button"
+            title="Fit to view"
+            aria-label="Fit to view"
+            onClick={zoom.reset}
+            className="flex size-7 items-center justify-center rounded text-(--gray-11) hover:bg-(--gray-a3)"
+          >
+            <ArrowsInSimple size={16} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
 }
 
 function DefaultFallback() {
@@ -37,10 +126,10 @@ export function SafeImagePreview({
   className,
   style,
   fallback,
+  controls,
 }: SafeImagePreviewProps) {
   const [hasError, setHasError] = useState(false);
   const [lastSource, setLastSource] = useState({ base64, mimeType });
-  const zoom = useImagePanAndZoom();
 
   if (lastSource.base64 !== base64 || lastSource.mimeType !== mimeType) {
     setLastSource({ base64, mimeType });
@@ -57,30 +146,13 @@ export function SafeImagePreview({
   }
 
   return (
-    <div
-      ref={zoom.containerRef}
-      className={`flex touch-none select-none items-center justify-center overflow-hidden ${className ?? "max-h-full max-w-full"}`}
-      style={{
-        ...style,
-        cursor: zoom.isDragging
-          ? "grabbing"
-          : zoom.isZoomed
-            ? "grab"
-            : style?.cursor,
-      }}
-    >
-      <img
-        src={buildImageDataUrl(mimeType, base64)}
-        alt={alt ?? "image preview"}
-        draggable={false}
-        className="max-h-full max-w-full object-contain"
-        style={{
-          transform: zoom.transform,
-          transformOrigin: "center center",
-          willChange: "transform",
-        }}
-        onError={() => setHasError(true)}
-      />
-    </div>
+    <ZoomableImage
+      src={buildImageDataUrl(mimeType, base64)}
+      alt={alt ?? "image preview"}
+      className={className}
+      style={style}
+      controls={controls}
+      onError={() => setHasError(true)}
+    />
   );
 }
diff --git a/packages/ui/src/primitives/hooks/useImagePanAndZoom.test.tsx b/packages/ui/src/primitives/hooks/useImagePanAndZoom.test.tsx
index 0a50d3aff8..9b07608917 100644
--- a/packages/ui/src/primitives/hooks/useImagePanAndZoom.test.tsx
+++ b/packages/ui/src/primitives/hooks/useImagePanAndZoom.test.tsx
@@ -225,6 +225,16 @@ describe("useImagePanAndZoom", () => {
     });
   });
 
+  it("zooms with controls", () => {
+    const harness = setupHarness();
+
+    act(() => harness.current.zoomIn());
+    expect(harness.current.scale).toBe(1.25);
+
+    act(() => harness.current.zoomOut());
+    expect(harness.current.scale).toBe(1);
+  });
+
   it("ignores pointer drag when not zoomed", () => {
     const harness = setupHarness();
     act(() => {
diff --git a/packages/ui/src/primitives/hooks/useImagePanAndZoom.ts b/packages/ui/src/primitives/hooks/useImagePanAndZoom.ts
index 942bae42a5..a9c62d6638 100644
--- a/packages/ui/src/primitives/hooks/useImagePanAndZoom.ts
+++ b/packages/ui/src/primitives/hooks/useImagePanAndZoom.ts
@@ -14,8 +14,11 @@ interface UseImagePanAndZoomOptions {
 interface UseImagePanAndZoomResult {
   containerRef: RefObject<HTMLDivElement | null>;
   transform: string;
+  scale: number;
   isZoomed: boolean;
   isDragging: boolean;
+  zoomIn: () => void;
+  zoomOut: () => void;
   reset: () => void;
 }
 
@@ -143,12 +146,24 @@ export function useImagePanAndZoom(
   }, [minScale, maxScale]);
 
   const reset = useCallback(() => setState(IDENTITY), []);
+  const zoomBy = useCallback(
+    (factor: number) => {
+      setState((prev) => {
+        const scale = clamp(prev.scale * factor, minScale, maxScale);
+        return scale === 1 ? IDENTITY : { ...prev, scale };
+      });
+    },
+    [minScale, maxScale],
+  );
 
   return {
     containerRef,
     transform: `translate(${state.tx}px, ${state.ty}px) scale(${state.scale})`,
+    scale: state.scale,
     isZoomed: state.scale > 1,
     isDragging,
+    zoomIn: () => zoomBy(1.25),
+    zoomOut: () => zoomBy(0.8),
     reset,
   };
 }

From b1120f699fd97b8c7fa493c065b39a82e4b8379f Mon Sep 17 00:00:00 2001
From: Shy Alter <puemos@users.noreply.github.com>
Date: Tue, 28 Jul 2026 16:40:47 +0200
Subject: [PATCH 2/3] fix(sessions): use reliable image gestures

Replace the custom image gesture hook with react-zoom-pan-pinch, allow zooming out to 10%, and cover toolbar clicks and trackpad pinch behavior.

Generated-By: PostHog Code
Task-Id: 577e32f4-830b-4174-a9c4-efa9464652a1
---
 packages/ui/package.json                      |   1 +
 .../components/ArtifactPreview.test.tsx       |  49 ++-
 .../ui/src/primitives/SafeImagePreview.tsx    | 137 ++++----
 .../hooks/useImagePanAndZoom.test.tsx         | 318 ------------------
 .../primitives/hooks/useImagePanAndZoom.ts    | 169 ----------
 pnpm-lock.yaml                                |  15 +
 6 files changed, 141 insertions(+), 548 deletions(-)
 delete mode 100644 packages/ui/src/primitives/hooks/useImagePanAndZoom.test.tsx
 delete mode 100644 packages/ui/src/primitives/hooks/useImagePanAndZoom.ts

diff --git a/packages/ui/package.json b/packages/ui/package.json
index a93ec5c3a5..60d7dea2b9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -95,6 +95,7 @@
     "react-hotkeys-hook": "^4.4.4",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.6",
+    "react-zoom-pan-pinch": "^4.0.3",
     "reflect-metadata": "catalog:",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
diff --git a/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx b/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
index eed4403444..610af36b74 100644
--- a/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
+++ b/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ArtifactPreview } from "./ArtifactPreview";
 import {
@@ -121,7 +121,7 @@ describe("ArtifactPreview", () => {
     expect(blob.type).toBe(mimeType);
   });
 
-  it("shows image controls instead of an iframe", () => {
+  it("shows working image controls instead of an iframe", () => {
     useQuery.mockReturnValue({
       data: new Blob(["image"], { type: "image/png" }),
       isLoading: false,
@@ -146,6 +146,51 @@ describe("ArtifactPreview", () => {
       screen.getByRole("button", { name: "Fit to view" }),
     ).toBeInTheDocument();
     expect(screen.queryByTitle("Preview of image.png")).not.toBeInTheDocument();
+
+    const zoomOut = screen.getByRole("button", { name: "Zoom out" });
+    fireEvent.click(zoomOut);
+    fireEvent.click(zoomOut);
+    fireEvent.click(zoomOut);
+    fireEvent.click(zoomOut);
+    expect(screen.getByText("10%")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Fit to view" }));
+    expect(screen.getByText("100%")).toBeInTheDocument();
+  });
+
+  it("zooms with a trackpad pinch gesture", async () => {
+    useQuery.mockReturnValue({
+      data: new Blob(["image"], { type: "image/png" }),
+      isLoading: false,
+      isError: false,
+    });
+
+    render(
+      <ArtifactPreview
+        taskId="task-1"
+        runId="run-1"
+        artifactId="artifact-1"
+        name="image.png"
+      />,
+    );
+
+    const image = screen.getByRole("img", { name: "image.png" });
+    const viewport = image.closest(".react-transform-wrapper");
+    expect(viewport).not.toBeNull();
+    fireEvent.wheel(viewport as Element, {
+      ctrlKey: true,
+      deltaY: -100,
+      clientX: 100,
+      clientY: 100,
+    });
+
+    await waitFor(() => {
+      const percentage = Number.parseInt(
+        screen.getByText(/%$/).textContent ?? "0",
+        10,
+      );
+      expect(percentage).toBeGreaterThan(100);
+    });
   });
 
   it("renders GFM Markdown while escaping embedded HTML", () => {
diff --git a/packages/ui/src/primitives/SafeImagePreview.tsx b/packages/ui/src/primitives/SafeImagePreview.tsx
index 5c2cb1907e..9c73fbe9f7 100644
--- a/packages/ui/src/primitives/SafeImagePreview.tsx
+++ b/packages/ui/src/primitives/SafeImagePreview.tsx
@@ -10,7 +10,11 @@ import {
 } from "@posthog/shared";
 import { Flex, Text } from "@radix-ui/themes";
 import { useState } from "react";
-import { useImagePanAndZoom } from "./hooks/useImagePanAndZoom";
+import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
+
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 8;
+const SCALE_STEP = 0.25;
 
 interface SafeImagePreviewProps {
   /** Base64-encoded image data (no data URL prefix). */
@@ -41,68 +45,83 @@ export function ZoomableImage({
   controls = false,
   onError,
 }: ZoomableImageProps) {
-  const zoom = useImagePanAndZoom();
+  const [scale, setScale] = useState(1);
 
   return (
     <div
-      ref={zoom.containerRef}
-      className={`relative flex touch-none select-none items-center justify-center overflow-hidden ${className ?? "max-h-full max-w-full"}`}
-      style={{
-        ...style,
-        cursor: zoom.isDragging
-          ? "grabbing"
-          : zoom.isZoomed
-            ? "grab"
-            : style?.cursor,
-      }}
+      className={`relative overflow-hidden ${className ?? "max-h-full max-w-full"}`}
+      style={style}
     >
-      <img
-        src={src}
-        alt={alt}
-        draggable={false}
-        className="max-h-full max-w-full object-contain"
-        style={{
-          transform: zoom.transform,
-          transformOrigin: "center center",
-          willChange: "transform",
-        }}
-        onError={onError}
-      />
-      {controls && (
-        <div className="-translate-x-1/2 absolute bottom-3 left-1/2 flex items-center gap-1 rounded-md border border-(--gray-a5) bg-(--color-panel-solid) p-1 shadow-sm">
-          <button
-            type="button"
-            title="Zoom out"
-            aria-label="Zoom out"
-            disabled={zoom.scale <= 1}
-            onClick={zoom.zoomOut}
-            className="flex size-7 items-center justify-center rounded text-(--gray-11) hover:bg-(--gray-a3) disabled:opacity-40"
-          >
-            <MagnifyingGlassMinus size={16} />
-          </button>
-          <span className="w-11 text-center text-(--gray-11) text-xs">
-            {Math.round(zoom.scale * 100)}%
-          </span>
-          <button
-            type="button"
-            title="Zoom in"
-            aria-label="Zoom in"
-            onClick={zoom.zoomIn}
-            className="flex size-7 items-center justify-center rounded text-(--gray-11) hover:bg-(--gray-a3)"
-          >
-            <MagnifyingGlassPlus size={16} />
-          </button>
-          <button
-            type="button"
-            title="Fit to view"
-            aria-label="Fit to view"
-            onClick={zoom.reset}
-            className="flex size-7 items-center justify-center rounded text-(--gray-11) hover:bg-(--gray-a3)"
-          >
-            <ArrowsInSimple size={16} />
-          </button>
-        </div>
-      )}
+      <TransformWrapper
+        minScale={MIN_SCALE}
+        maxScale={MAX_SCALE}
+        centerOnInit
+        centerZoomedOut
+        smooth={false}
+        wheel={{ wheelDisabled: true }}
+        trackPadPanning={{ disabled: false }}
+        doubleClick={{ mode: "reset" }}
+        zoomAnimation={{ disabled: true }}
+        onTransform={(_, state) => setScale(state.scale)}
+      >
+        {({ zoomIn, zoomOut, resetTransform }) => (
+          <>
+            <TransformComponent
+              wrapperStyle={{ width: "100%", height: "100%" }}
+              contentStyle={{
+                width: "100%",
+                height: "100%",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <img
+                src={src}
+                alt={alt}
+                draggable={false}
+                className="max-h-full max-w-full object-contain"
+                onError={onError}
+              />
+            </TransformComponent>
+            {controls && (
+              <div className="-translate-x-1/2 absolute bottom-3 left-1/2 flex items-center gap-1 rounded-md border border-(--gray-a5) bg-(--color-panel-solid) p-1 shadow-sm">
+                <button
+                  type="button"
+                  title="Zoom out"
+                  aria-label="Zoom out"
+                  disabled={scale <= MIN_SCALE}
+                  onClick={() => zoomOut(SCALE_STEP, 0)}
+                  className="flex size-7 items-center justify-center rounded text-(--gray-11) hover:bg-(--gray-a3) disabled:opacity-40"
+                >
+                  <MagnifyingGlassMinus size={16} />
+                </button>
+                <span className="w-11 text-center text-(--gray-11) text-xs">
+                  {Math.round(scale * 100)}%
+                </span>
+                <button
+                  type="button"
+                  title="Zoom in"
+                  aria-label="Zoom in"
+                  disabled={scale >= MAX_SCALE}
+                  onClick={() => zoomIn(SCALE_STEP, 0)}
+                  className="flex size-7 items-center justify-center rounded text-(--gray-11) hover:bg-(--gray-a3) disabled:opacity-40"
+                >
+                  <MagnifyingGlassPlus size={16} />
+                </button>
+                <button
+                  type="button"
+                  title="Fit to view"
+                  aria-label="Fit to view"
+                  onClick={() => resetTransform(0)}
+                  className="flex size-7 items-center justify-center rounded text-(--gray-11) hover:bg-(--gray-a3)"
+                >
+                  <ArrowsInSimple size={16} />
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </TransformWrapper>
     </div>
   );
 }
diff --git a/packages/ui/src/primitives/hooks/useImagePanAndZoom.test.tsx b/packages/ui/src/primitives/hooks/useImagePanAndZoom.test.tsx
deleted file mode 100644
index 9b07608917..0000000000
--- a/packages/ui/src/primitives/hooks/useImagePanAndZoom.test.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import { useImagePanAndZoom } from "@posthog/ui/primitives/hooks/useImagePanAndZoom";
-import { act, fireEvent, render } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-type HookResult = ReturnType<typeof useImagePanAndZoom>;
-
-interface HarnessProps {
-  onRender: (result: HookResult) => void;
-  options?: Parameters<typeof useImagePanAndZoom>[0];
-}
-
-function Harness({ onRender, options }: HarnessProps) {
-  const result = useImagePanAndZoom(options);
-  onRender(result);
-  return (
-    <div
-      data-testid="container"
-      ref={result.containerRef}
-      style={{ width: 200, height: 200 }}
-    />
-  );
-}
-
-function setupHarness(options?: Parameters<typeof useImagePanAndZoom>[0]) {
-  let latest: HookResult | null = null;
-  const view = render(
-    <Harness
-      onRender={(result) => {
-        latest = result;
-      }}
-      options={options}
-    />,
-  );
-  const container = view.getByTestId("container");
-  container.getBoundingClientRect = () =>
-    ({
-      x: 0,
-      y: 0,
-      left: 0,
-      top: 0,
-      right: 200,
-      bottom: 200,
-      width: 200,
-      height: 200,
-      toJSON: () => ({}),
-    }) as DOMRect;
-  container.setPointerCapture = () => {};
-  container.releasePointerCapture = () => {};
-  container.hasPointerCapture = () => true;
-  return {
-    container,
-    get current() {
-      if (!latest) throw new Error("hook did not render");
-      return latest;
-    },
-  };
-}
-
-function parseTransform(transform: string) {
-  const match = transform.match(
-    /translate\(([-0-9.]+)px, ([-0-9.]+)px\) scale\(([-0-9.]+)\)/,
-  );
-  if (!match) throw new Error(`unexpected transform: ${transform}`);
-  return {
-    tx: Number.parseFloat(match[1]),
-    ty: Number.parseFloat(match[2]),
-    scale: Number.parseFloat(match[3]),
-  };
-}
-
-describe("useImagePanAndZoom", () => {
-  it("starts at identity transform and not zoomed", () => {
-    const harness = setupHarness();
-    expect(parseTransform(harness.current.transform)).toEqual({
-      tx: 0,
-      ty: 0,
-      scale: 1,
-    });
-    expect(harness.current.isZoomed).toBe(false);
-  });
-
-  it.each([
-    { modifier: "ctrlKey", label: "trackpad pinch" },
-    { modifier: "metaKey", label: "Cmd + wheel" },
-  ] as const)("zooms in via $label", ({ modifier }) => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        [modifier]: true,
-        deltaY: -100,
-        clientX: 100,
-        clientY: 100,
-      });
-    });
-    expect(harness.current.isZoomed).toBe(true);
-    expect(parseTransform(harness.current.transform).scale).toBeGreaterThan(1);
-  });
-
-  it("ignores wheel without modifier when not zoomed", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        deltaY: 200,
-        clientX: 100,
-        clientY: 100,
-      });
-    });
-    expect(parseTransform(harness.current.transform)).toEqual({
-      tx: 0,
-      ty: 0,
-      scale: 1,
-    });
-  });
-
-  it("pans on wheel without modifier when zoomed in", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        ctrlKey: true,
-        deltaY: -200,
-        clientX: 100,
-        clientY: 100,
-      });
-    });
-    const beforePan = parseTransform(harness.current.transform);
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        deltaX: 30,
-        deltaY: 40,
-        clientX: 100,
-        clientY: 100,
-      });
-    });
-    const afterPan = parseTransform(harness.current.transform);
-    expect(afterPan.tx).toBeCloseTo(beforePan.tx - 30);
-    expect(afterPan.ty).toBeCloseTo(beforePan.ty - 40);
-    expect(afterPan.scale).toBe(beforePan.scale);
-  });
-
-  it.each([
-    { direction: "in", deltaY: -2000, expected: 4 },
-    { direction: "out", deltaY: 2000, expected: 1 },
-  ])("clamps scale at the $direction limit", ({ deltaY, expected }) => {
-    const harness = setupHarness({ minScale: 1, maxScale: 4 });
-    for (let i = 0; i < 50; i++) {
-      act(() => {
-        fireEvent.wheel(harness.container, {
-          ctrlKey: true,
-          deltaY,
-          clientX: 100,
-          clientY: 100,
-        });
-      });
-    }
-    expect(parseTransform(harness.current.transform).scale).toBe(expected);
-  });
-
-  it("snaps to identity when zooming all the way back to scale 1", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        ctrlKey: true,
-        deltaY: -300,
-        clientX: 150,
-        clientY: 150,
-      });
-    });
-    expect(harness.current.isZoomed).toBe(true);
-    for (let i = 0; i < 50; i++) {
-      act(() => {
-        fireEvent.wheel(harness.container, {
-          ctrlKey: true,
-          deltaY: 200,
-          clientX: 0,
-          clientY: 0,
-        });
-      });
-    }
-    expect(parseTransform(harness.current.transform)).toEqual({
-      tx: 0,
-      ty: 0,
-      scale: 1,
-    });
-  });
-
-  it("double-click resets to identity", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        ctrlKey: true,
-        deltaY: -300,
-        clientX: 100,
-        clientY: 100,
-      });
-    });
-    expect(harness.current.isZoomed).toBe(true);
-    act(() => {
-      fireEvent.dblClick(harness.container);
-    });
-    expect(parseTransform(harness.current.transform)).toEqual({
-      tx: 0,
-      ty: 0,
-      scale: 1,
-    });
-    expect(harness.current.isZoomed).toBe(false);
-  });
-
-  it("reset() returns to identity", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        ctrlKey: true,
-        deltaY: -300,
-        clientX: 80,
-        clientY: 80,
-      });
-    });
-    act(() => {
-      harness.current.reset();
-    });
-    expect(parseTransform(harness.current.transform)).toEqual({
-      tx: 0,
-      ty: 0,
-      scale: 1,
-    });
-  });
-
-  it("zooms with controls", () => {
-    const harness = setupHarness();
-
-    act(() => harness.current.zoomIn());
-    expect(harness.current.scale).toBe(1.25);
-
-    act(() => harness.current.zoomOut());
-    expect(harness.current.scale).toBe(1);
-  });
-
-  it("ignores pointer drag when not zoomed", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.pointerDown(harness.container, {
-        pointerId: 1,
-        button: 0,
-        clientX: 50,
-        clientY: 50,
-      });
-      fireEvent.pointerMove(harness.container, {
-        pointerId: 1,
-        clientX: 120,
-        clientY: 90,
-      });
-      fireEvent.pointerUp(harness.container, { pointerId: 1 });
-    });
-    expect(parseTransform(harness.current.transform)).toEqual({
-      tx: 0,
-      ty: 0,
-      scale: 1,
-    });
-  });
-
-  it("pans on pointer drag when zoomed", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        ctrlKey: true,
-        deltaY: -300,
-        clientX: 100,
-        clientY: 100,
-      });
-    });
-    const before = parseTransform(harness.current.transform);
-    act(() => {
-      fireEvent.pointerDown(harness.container, {
-        pointerId: 1,
-        button: 0,
-        clientX: 50,
-        clientY: 50,
-      });
-      fireEvent.pointerMove(harness.container, {
-        pointerId: 1,
-        clientX: 80,
-        clientY: 30,
-      });
-    });
-    const dragging = parseTransform(harness.current.transform);
-    expect(dragging.tx).toBeCloseTo(before.tx + 30);
-    expect(dragging.ty).toBeCloseTo(before.ty - 20);
-    expect(dragging.scale).toBe(before.scale);
-    expect(harness.current.isDragging).toBe(true);
-    act(() => {
-      fireEvent.pointerUp(harness.container, { pointerId: 1 });
-      fireEvent.pointerMove(harness.container, {
-        pointerId: 1,
-        clientX: 999,
-        clientY: 999,
-      });
-    });
-    expect(parseTransform(harness.current.transform)).toEqual(dragging);
-    expect(harness.current.isDragging).toBe(false);
-  });
-
-  it("zooms toward the cursor position", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        ctrlKey: true,
-        deltaY: -100,
-        clientX: 150,
-        clientY: 100,
-      });
-    });
-    const { tx, ty, scale } = parseTransform(harness.current.transform);
-    const cursorOffsetX = 150 - 100;
-    const cursorOffsetY = 100 - 100;
-    expect(tx).toBeCloseTo(cursorOffsetX - cursorOffsetX * scale);
-    expect(ty).toBeCloseTo(cursorOffsetY - cursorOffsetY * scale);
-  });
-});
diff --git a/packages/ui/src/primitives/hooks/useImagePanAndZoom.ts b/packages/ui/src/primitives/hooks/useImagePanAndZoom.ts
deleted file mode 100644
index a9c62d6638..0000000000
--- a/packages/ui/src/primitives/hooks/useImagePanAndZoom.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-import {
-  type RefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-
-interface UseImagePanAndZoomOptions {
-  minScale?: number;
-  maxScale?: number;
-}
-
-interface UseImagePanAndZoomResult {
-  containerRef: RefObject<HTMLDivElement | null>;
-  transform: string;
-  scale: number;
-  isZoomed: boolean;
-  isDragging: boolean;
-  zoomIn: () => void;
-  zoomOut: () => void;
-  reset: () => void;
-}
-
-interface ZoomState {
-  scale: number;
-  tx: number;
-  ty: number;
-}
-
-const IDENTITY: ZoomState = { scale: 1, tx: 0, ty: 0 };
-
-function clamp(value: number, min: number, max: number) {
-  return Math.min(max, Math.max(min, value));
-}
-
-export function useImagePanAndZoom(
-  options: UseImagePanAndZoomOptions = {},
-): UseImagePanAndZoomResult {
-  const minScale = options.minScale ?? 1;
-  const maxScale = options.maxScale ?? 8;
-
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [state, setState] = useState<ZoomState>(IDENTITY);
-  const [isDragging, setIsDragging] = useState(false);
-  const stateRef = useRef(state);
-  stateRef.current = state;
-
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-
-    let drag: {
-      pointerId: number;
-      startX: number;
-      startY: number;
-      startTx: number;
-      startTy: number;
-    } | null = null;
-
-    const handleWheel = (event: WheelEvent) => {
-      if (event.ctrlKey || event.metaKey) {
-        event.preventDefault();
-        const rect = el.getBoundingClientRect();
-        const cursorX = event.clientX - (rect.left + rect.width / 2);
-        const cursorY = event.clientY - (rect.top + rect.height / 2);
-        setState((prev) => {
-          const nextScale = clamp(
-            prev.scale * Math.exp(-event.deltaY * 0.01),
-            minScale,
-            maxScale,
-          );
-          if (nextScale === prev.scale) return prev;
-          if (nextScale === 1) return IDENTITY;
-          const ratio = nextScale / prev.scale;
-          return {
-            scale: nextScale,
-            tx: cursorX - (cursorX - prev.tx) * ratio,
-            ty: cursorY - (cursorY - prev.ty) * ratio,
-          };
-        });
-        return;
-      }
-      if (stateRef.current.scale <= 1) return;
-      event.preventDefault();
-      setState((prev) => ({
-        scale: prev.scale,
-        tx: prev.tx - event.deltaX,
-        ty: prev.ty - event.deltaY,
-      }));
-    };
-
-    const handlePointerDown = (event: PointerEvent) => {
-      if (event.button !== 0) return;
-      if (stateRef.current.scale <= 1) return;
-      el.setPointerCapture(event.pointerId);
-      drag = {
-        pointerId: event.pointerId,
-        startX: event.clientX,
-        startY: event.clientY,
-        startTx: stateRef.current.tx,
-        startTy: stateRef.current.ty,
-      };
-      setIsDragging(true);
-    };
-
-    const handlePointerMove = (event: PointerEvent) => {
-      if (!drag || drag.pointerId !== event.pointerId) return;
-      const dx = event.clientX - drag.startX;
-      const dy = event.clientY - drag.startY;
-      const startTx = drag.startTx;
-      const startTy = drag.startTy;
-      setState((prev) => ({
-        scale: prev.scale,
-        tx: startTx + dx,
-        ty: startTy + dy,
-      }));
-    };
-
-    const handlePointerUp = (event: PointerEvent) => {
-      if (!drag || drag.pointerId !== event.pointerId) return;
-      if (el.hasPointerCapture(event.pointerId)) {
-        el.releasePointerCapture(event.pointerId);
-      }
-      drag = null;
-      setIsDragging(false);
-    };
-
-    const handleDoubleClick = () => setState(IDENTITY);
-
-    el.addEventListener("wheel", handleWheel, { passive: false });
-    el.addEventListener("pointerdown", handlePointerDown);
-    el.addEventListener("pointermove", handlePointerMove);
-    el.addEventListener("pointerup", handlePointerUp);
-    el.addEventListener("pointercancel", handlePointerUp);
-    el.addEventListener("dblclick", handleDoubleClick);
-
-    return () => {
-      el.removeEventListener("wheel", handleWheel);
-      el.removeEventListener("pointerdown", handlePointerDown);
-      el.removeEventListener("pointermove", handlePointerMove);
-      el.removeEventListener("pointerup", handlePointerUp);
-      el.removeEventListener("pointercancel", handlePointerUp);
-      el.removeEventListener("dblclick", handleDoubleClick);
-    };
-  }, [minScale, maxScale]);
-
-  const reset = useCallback(() => setState(IDENTITY), []);
-  const zoomBy = useCallback(
-    (factor: number) => {
-      setState((prev) => {
-        const scale = clamp(prev.scale * factor, minScale, maxScale);
-        return scale === 1 ? IDENTITY : { ...prev, scale };
-      });
-    },
-    [minScale, maxScale],
-  );
-
-  return {
-    containerRef,
-    transform: `translate(${state.tx}px, ${state.ty}px) scale(${state.scale})`,
-    scale: state.scale,
-    isZoomed: state.scale > 1,
-    isDragging,
-    zoomIn: () => zoomBy(1.25),
-    zoomOut: () => zoomBy(0.8),
-    reset,
-  };
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6680b87dd7..65ef2c8cbf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1427,6 +1427,9 @@ importers:
       react-resizable-panels:
         specifier: ^3.0.6
         version: 3.0.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-zoom-pan-pinch:
+        specifier: ^4.0.3
+        version: 4.0.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       reflect-metadata:
         specifier: 'catalog:'
         version: 0.2.2
@@ -13767,6 +13770,13 @@ packages:
       react: 19.2.6
       react-dom: 19.2.6
 
+  react-zoom-pan-pinch@4.0.3:
+    resolution: {integrity: sha512-N2Hi6L78fFmhRra+ORpFSW7WST5x6kxpOPplIvtB0b7b+U2anpo1z1wLgaWRPS2kUSqcraRG+JgBCIlDJnqqAg==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      react: 19.2.6
+      react-dom: 19.2.6
+
   react-resizable-panels@4.10.0:
     resolution: {integrity: sha512-frjewRQt7TCv/vCH1pJfjZ7RxAhr5pKuqVQtVgzFq/vherxBFOWyC3xMbryx5Ti2wylViGUFc93Etg4rB3E0UA==}
     peerDependencies:
@@ -29620,6 +29630,11 @@ snapshots:
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
 
+  react-zoom-pan-pinch@4.0.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   react-resizable-panels@4.10.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       react: 19.2.6

From c879c876be42ae21c8b6d800aae8f3e01543df87 Mon Sep 17 00:00:00 2001
From: Shy Alter <puemos@users.noreply.github.com>
Date: Tue, 28 Jul 2026 17:20:59 +0200
Subject: [PATCH 3/3] fix(sessions): handle image decode failures

Show the existing artifact preview error state when image bytes cannot be decoded.

Generated-By: PostHog Code
Task-Id: 577e32f4-830b-4174-a9c4-efa9464652a1
---
 .../components/ArtifactPreview.test.tsx       | 22 ++++++++++
 .../sessions/components/ArtifactPreview.tsx   | 40 ++++++++++++-------
 2 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx b/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
index 610af36b74..4946346cf3 100644
--- a/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
+++ b/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
@@ -193,6 +193,28 @@ describe("ArtifactPreview", () => {
     });
   });
 
+  it("shows the preview error when an image cannot be decoded", () => {
+    useQuery.mockReturnValue({
+      data: new Blob(["not an image"], { type: "image/png" }),
+      isLoading: false,
+      isError: false,
+    });
+
+    render(
+      <ArtifactPreview
+        taskId="task-1"
+        runId="run-1"
+        artifactId="artifact-1"
+        name="broken.png"
+      />,
+    );
+
+    fireEvent.error(screen.getByRole("img", { name: "broken.png" }));
+    expect(
+      screen.getByText("This artifact can’t be previewed."),
+    ).toBeInTheDocument();
+  });
+
   it("renders GFM Markdown while escaping embedded HTML", () => {
     const document = markdownDocument(
       "# Report\n\n**Ready**\n\n| Name | Value |\n| --- | --- |\n| Cost | 12 |\n\n<script>alert('no')</script>",
diff --git a/packages/ui/src/features/sessions/components/ArtifactPreview.tsx b/packages/ui/src/features/sessions/components/ArtifactPreview.tsx
index d1b4cd5789..c13bb02d41 100644
--- a/packages/ui/src/features/sessions/components/ArtifactPreview.tsx
+++ b/packages/ui/src/features/sessions/components/ArtifactPreview.tsx
@@ -11,10 +11,33 @@ import {
 } from "@posthog/ui/features/auth/store";
 import { AUTH_SCOPED_QUERY_META } from "@posthog/ui/features/auth/useCurrentUser";
 import { useQuery } from "@tanstack/react-query";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { ZoomableImage } from "../../../primitives/SafeImagePreview";
 import { artifactPreviewBlob } from "./artifactPreviewDocument";
 
+function ArtifactPreviewError() {
+  return (
+    <div className="flex h-full items-center justify-center text-muted-foreground">
+      This artifact can’t be previewed.
+    </div>
+  );
+}
+
+function ArtifactImagePreview({ src, name }: { src: string; name: string }) {
+  const [hasError, setHasError] = useState(false);
+
+  if (hasError) return <ArtifactPreviewError />;
+  return (
+    <ZoomableImage
+      src={src}
+      alt={name}
+      controls
+      className="size-full bg-(--gray-2) p-4"
+      onError={() => setHasError(true)}
+    />
+  );
+}
+
 export function ArtifactPreview({
   taskId,
   runId,
@@ -65,21 +88,10 @@ export function ArtifactPreview({
     );
   }
   if (isError || !previewUrl) {
-    return (
-      <div className="flex h-full items-center justify-center text-muted-foreground">
-        This artifact can’t be previewed.
-      </div>
-    );
+    return <ArtifactPreviewError />;
   }
   if (data && isAllowedImageMimeType(data.type)) {
-    return (
-      <ZoomableImage
-        src={previewUrl}
-        alt={name}
-        controls
-        className="size-full bg-(--gray-2) p-4"
-      />
-    );
+    return <ArtifactImagePreview src={previewUrl} name={name} />;
   }
   return (
     <iframe