Unify asset preview dialog with details panel and navigation by SajalChaplot · Pull Request #2296 · BuilderIO/agent-native

SajalChaplot · 2026-07-21T17:16:34Z

Summary

Consolidates asset preview into a single, reusable AssetPreviewDialog component with a details panel, download action, and next/previous navigation, replacing the duplicated inline preview dialog on the AssetPickerSurface.

Problem

The library had two separate, duplicated implementations of the asset preview dialog (one used within AssetPreviewDialog and one inlined in AssetPickerSurface). Neither surfaced asset metadata (dimensions, folder, description, prompt, etc.) or provided a quick download action, forcing users to leave the preview to view details on a separate page.

https://clips.agent-native.com/share/qHpqs6Gv7Sx5?ref=clip_share

Solution

Merged the two preview implementations into a single AssetPreviewDialog component that both surfaces now share, and enhanced it with a toggleable details sidebar, a download button, and consistent navigation arrows for moving between assets without leaving the preview.

Key Changes

Replaced the inline preview Dialog in AssetPickerSurface with the shared AssetPreviewDialog component, removing the duplicated markup.
Restyled AssetPreviewDialog into a two-pane layout (media on one side, details on the other) with a header toolbar containing download, details toggle, and close actions.
Added downloadAsset handler using the export-asset action mutation to trigger downloads directly from the preview.
Added AssetPreviewDetails, PreviewField, assetPreviewCategoryLabel, formatPreviewDimensions, and previewGcd helpers to render title, status/role/type/category badges, dimensions with aspect ratio, MIME type, folder, description, and prompt.
Extended the Asset type with folderId, category, model, aspectRatio, durationSeconds, and metadata fields to support the new details panel.
Added new icons (IconDownload, IconInfoCircle) and adjusted styling of navigation arrows and image sizing to fit the new layout.
Added a changelog entry describing the unified asset preview.

To clone this PR locally use the Github CLI with command gh pr checkout 2296

You can tag me at @BuilderIO for anything you want me to fix or change

…e18ddcd4bb5448b199f6

github-actions · 2026-07-21T17:21:27Z

Here's a visual recap of what changed:

Open the full interactive recap

SajalChaplot · 2026-07-21T22:00:59Z

@builderio-bot look at latest PR feedback and fix anything you agree with. Be skeptical. Reply to every comment (directly on the comment thread of each comment) if you fixed it or not and why. then check back every 2 minutes on a loop and see if any new feedback posted, until at least 20 minutes go by without any new feedback posted we want to address, including making sure CI passes too and no merge conflicts (make sure code is mergeable)

builder-io-integration · 2026-07-21T22:19:41Z

CI caught a real issue from my last push: the new assetDetail.downloadFailed toast string I added for the download-error fix failed guard:i18n-catalogs (missing in zh-TW, untranslated fallback in the other 9 locales). Added proper translations to all 10 locale catalogs in a92d63c — guard passes locally now, waiting on CI to confirm.

builder-io-integration

Builder reviewed your changes and found 2 potential issues 🟡

Review Details

Incremental Code Review Summary

The latest commits extract AssetPreviewDialog into a reusable component and wire it into the library, picker, recent drafts, and brand-kit swimlane flows. The previous review findings were addressed: starter assets now bypass export-asset and failed downloads show a toast. The shared component also preserves custom image rendering for the picker and adds source fallbacks for previews.

This remains a standard-risk UI/action integration change. Two new regressions remain. First, the shared dialog navigates directly to the raw export-asset URL instead of applying the same assetMediaUrl normalization used by the standalone asset detail route, which can break downloads under the app's mounted /assets base path. Second, GenerationResults removes its generated-candidate “View details” link without replacing that path or migrating that dialog to the shared preview, leaving users without access to the full asset detail page from that flow.

Key findings

🟡 MEDIUM: Normalize exported download URLs through assetMediaUrl before navigation.
🟡 MEDIUM: Preserve a route to full asset details from the generated-candidate preview.

The refactor otherwise improves reuse and keeps the existing specialized live-slot preview behavior intact.

🧪 Browser testing: Attempted full verification after confirming the dev server was healthy, but all executor batches were blocked because browser automation tools were unavailable. The affected flows remain unverified due to infrastructure.

builder-io-integration · 2026-07-21T22:37:32Z

+                onSuccess: (result: any) => {
+                  const url = result?.downloadUrl;
+                  if (url) window.location.href = url;


🟡 Normalize exported download URLs before navigation

The shared dialog assigns result.downloadUrl directly to window.location.href, unlike the standalone asset detail route, which wraps the value with assetMediaUrl(...). When the app is mounted under /assets or the action returns a root-relative URL, the raw path can resolve incorrectly and produce a silent 404. Apply the existing URL normalization before navigating.

Agreed — the standalone asset detail route already does assetMediaUrl(result.downloadUrl) ?? result.downloadUrl for exactly this reason (mounted-app base path / root-relative fallback URLs). My shared dialog dropped that wrapping. Fixed in 2748284: the export-success handler now goes through assetMediaUrl the same way.

builder-io-integration · 2026-07-21T22:37:32Z

-                  </Link>
-                </Button>
-              ) : null}
              <Button


🟡 Preserve access to generated asset details

This removes the generated-candidate preview's only View details link to /asset/:id, but GenerationPreviewDialog is still a separate component and was not migrated to the new shared dialog. Users can still save/refine/delete, but lose the route to copy the URL, inspect full metadata, or use the standalone asset actions. Retain the link or replace this dialog while preserving those actions.

Agreed, this was a real functionality regression, not just scope trimming — that candidate-review dialog has no Download/Copy-URL affordance of its own, so removing the link left no way to inspect full metadata or get a shareable URL for a live-generation candidate. I over-reached by touching this dialog; it's a genuinely different flow (Save/Refine/Dismiss on unsaved candidates) than the grids this PR was standardizing, and migrating it to the shared component is a separate, larger change I don't want to rush into this PR. Restored the link in 2748284 instead of migrating.

builder-io-integration · 2026-07-21T22:41:07Z

There was a problem with your request, please try again later. Error id: c9698dd944bc4a6ca275fbf05f390abc

… details link

SajalChaplot · 2026-07-22T07:29:17Z

@builderio-bot look at latest PR feedback and fix anything you agree with. Be skeptical. Reply to every comment (directly on the comment thread of each comment) if you fixed it or not and why. then check back every 2 minutes on a loop and see if any new feedback posted, until at least 20 minutes go by without any new feedback posted we want to address, including making sure CI passes too and no merge conflicts (make sure code is mergeable)

…e18ddcd4bb5448b199f6

builder-io-integration · 2026-07-22T07:54:37Z

All checks are now passing (no fail/pending entries) and the branch remains MERGEABLE. BLOCKED is solely due to required human review approval. Let's confirm this is the only blocking reason and do one final check for any last-minute feedback.

SajalChaplot · 2026-07-23T16:57:03Z

@builderio-bot look at latest PR feedback and fix anything you agree with. Be skeptical. Reply to every comment (directly on the comment thread of each comment) if you fixed it or not and why. then check back every 2 minutes on a loop and see if any new feedback posted, until at least 20 minutes go by without any new feedback posted we want to address, including making sure CI passes too and no merge conflicts (make sure code is mergeable)

…e18ddcd4bb5448b199f6 # Conflicts: # templates/assets/app/routes/library.tsx

builder-io-integration · 2026-07-23T17:37:40Z

There was a problem with your request, please try again later. Error id: 28ff114ea6044326b4b4c8f7a7c16da2

shomix

Some tests are failing. O/w cool stuff

SajalChaplot · 2026-07-23T18:35:59Z

@builderio-bot look at latest PR feedback and fix anything you agree with. Be skeptical. Reply to every comment (directly on the comment thread of each comment) if you fixed it or not and why. then check back every 2 minutes on a loop and see if any new feedback posted, until at least 20 minutes go by without any new feedback posted we want to address, including making sure CI passes too and no merge conflicts (make sure code is mergeable)

…e18ddcd4bb5448b199f6

builder-io-integration · 2026-07-23T19:16:35Z

There was a problem with your request, please try again later. Error id: b98d82ab79fa43298cfa176d93140f8e

builderio-bot added 2 commits July 21, 2026 16:53

Enhance asset preview with full-page UI and details panel

0067c73

Merge remote-tracking branch 'refs/remotes/origin/main' into ai_main_…

d2140f4

…e18ddcd4bb5448b199f6

builder-io-integration Bot changed the title ~~Update from the Builder.io agent~~ Unify asset preview dialog with details panel and navigation Jul 21, 2026

builder-io-integration Bot added the builder.io label Jul 21, 2026

This comment has been minimized.

Sign in to view

This comment was marked as outdated.

Sign in to view

Add asset preview dialog component with navigation and details

f2375d7

This comment has been minimized.

Sign in to view

Merge branch 'main' into ai_main_e18ddcd4bb5448b199f6

d8134c2

Handle starter assets and surface download errors in AssetPreviewDialog

63ce0b8

This comment has been minimized.

Sign in to view

Add missing assetDetail.downloadFailed translations for CI i18n guard

a92d63c

builder-io-integration Bot reviewed Jul 21, 2026

View reviewed changes

Normalize download URL via assetMediaUrl; restore generated-candidate…

2748284

… details link

Merge remote-tracking branch 'refs/remotes/origin/main' into ai_main_…

b07ccb0

…e18ddcd4bb5448b199f6

SajalChaplot requested review from a team and shomix and removed request for a team July 22, 2026 10:43

builderio-bot added 2 commits July 23, 2026 17:01

Merge remote-tracking branch 'refs/remotes/origin/main' into ai_main_…

fea4510

…e18ddcd4bb5448b199f6 # Conflicts: # templates/assets/app/routes/library.tsx

chore: retrigger CI (unrelated flaky a2a poll-deadline test)

dbab86e

shomix approved these changes Jul 23, 2026

View reviewed changes

builderio-bot added 2 commits July 23, 2026 18:36

Merge remote-tracking branch 'refs/remotes/origin/main' into ai_main_…

d72d122

…e18ddcd4bb5448b199f6

chore: retrigger CI (unrelated flaky a2a timeout test)

968d3c3

chore: retrigger CI (unrelated flaky a2a client test, 3rd occurrence)

6251941

Uh oh!

Conversation

SajalChaplot commented Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Problem

Solution

Key Changes

Uh oh!

This comment has been minimized.

This comment has been minimized.

github-actions Bot commented Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment has been minimized.

This comment was marked as outdated.

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

SajalChaplot commented Jul 21, 2026

Uh oh!

This comment has been minimized.

builder-io-integration Bot commented Jul 21, 2026

Uh oh!

builder-io-integration Bot left a comment

Choose a reason for hiding this comment

Incremental Code Review Summary

Key findings

Uh oh!

builder-io-integration Bot Jul 21, 2026

Choose a reason for hiding this comment

🟡 Normalize exported download URLs before navigation

Uh oh!

builder-io-integration Bot Jul 21, 2026

Choose a reason for hiding this comment

Uh oh!

builder-io-integration Bot Jul 21, 2026

Choose a reason for hiding this comment

🟡 Preserve access to generated asset details

Uh oh!

builder-io-integration Bot Jul 21, 2026

Choose a reason for hiding this comment

Uh oh!

builder-io-integration Bot commented Jul 21, 2026

Uh oh!

SajalChaplot commented Jul 22, 2026

Uh oh!

builder-io-integration Bot commented Jul 22, 2026

Uh oh!

SajalChaplot commented Jul 23, 2026

Uh oh!

builder-io-integration Bot commented Jul 23, 2026

Uh oh!

shomix left a comment

Choose a reason for hiding this comment

Uh oh!

SajalChaplot commented Jul 23, 2026

Uh oh!

builder-io-integration Bot commented Jul 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

SajalChaplot commented Jul 21, 2026 •

edited

Loading

github-actions Bot commented Jul 21, 2026 •

edited

Loading