Skip to content

feat(sessions): add image artifact viewer - #3875

Merged
trunk-io[bot] merged 3 commits into
mainfrom
posthog-code/artifact-image-viewer
Jul 28, 2026
Merged

feat(sessions): add image artifact viewer#3875
trunk-io[bot] merged 3 commits into
mainfrom
posthog-code/artifact-image-viewer

Conversation

@puemos

@puemos puemos commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Problem

Image artifacts can render blank when object storage serves them as application/octet-stream, and the existing preview has no image navigation controls.

Why: Generated images should be inspectable directly beside the task conversation without downloading them.

Changes

  • Normalize supported image artifacts with the existing shared MIME map.
  • Use react-zoom-pan-pinch for reliable controls, drag panning, and trackpad gestures, with zoom from 10% to 800%.
  • Keep HTML and Markdown on their existing sandboxed iframe path.

How did you test this?

  • pnpm test in packages/ui (2,295 tests)
  • pnpm typecheck in packages/ui
  • pnpm build in apps/web
  • Biome check on changed files

Automatic notifications

  • Publish to changelog?
  • Alert Sales and Marketing teams?

Created with PostHog Code

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
@trunk-io

trunk-io Bot commented Jul 28, 2026

Copy link
Copy Markdown

😎 Merged successfully - details.

@github-actions

github-actions Bot commented Jul 28, 2026

Copy link
Copy Markdown

React Doctor found no issues in the changed files. 🎉

Reviewed by React Doctor for commit c879c87.

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
@posthog

posthog Bot commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

🦔 ReviewHog reviewed this pull request

Found 0 must fix, 0 should fix, 1 consider.

Published 1 finding (view the review).

@posthog

posthog Bot commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

ReviewHog Alpha 🦔 If you find any issues helpful - please reply "valid", "invalid", etc., for evaluation purposes 🙏

@posthog posthog Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ReviewHog Report

Changes

Issues: 1 issue

Files (5)
  • packages/ui/package.json
  • packages/ui/src/features/sessions/components/ArtifactPreview.tsx
  • packages/ui/src/features/sessions/components/artifactPreviewDocument.ts
  • packages/ui/src/primitives/SafeImagePreview.tsx
  • packages/ui/src/primitives/hooks/useImagePanAndZoom.ts

Comment thread packages/ui/src/features/sessions/components/ArtifactPreview.tsx
Show the existing artifact preview error state when image bytes cannot be decoded.

Generated-By: PostHog Code
Task-Id: 577e32f4-830b-4174-a9c4-efa9464652a1
@puemos
puemos marked this pull request as ready for review July 28, 2026 15:39
@trunk-io
trunk-io Bot merged commit f69bcf4 into main Jul 28, 2026
40 checks passed
@trunk-io
trunk-io Bot deleted the posthog-code/artifact-image-viewer branch July 28, 2026 16:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants