Redesign generation results as library-style asset grid

[SajalChaplot]

Summary

Reworks the in-chat generation results UI to match the drafts grid used in the Library section, replacing the old list-style candidate cards with a hover-driven asset grid and a full preview dialog.

Problem

The previous generation results view showed candidates as stacked cards with always-visible action buttons and text labels, which was inconsistent with the drafts UI already used in the Library, and lacked a way to preview a generated asset before deciding to save it.

Solution

Introduced a GenerationDraftCard grid layout consistent with the library drafts UI, along with a GenerationPreviewDialog for viewing an individual generated asset within the chat, keeping scope limited to assets generated in that thread.

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

Key Changes

• Replaced GenerationResultItem list cards with GenerationDraftCard, rendered in a responsive assets-library-grid (2/3 columns) instead of the previous 1/2-column list layout.
• Added hover-revealed action buttons (save, refine, delete) with tooltips on each draft card, matching the library drafts interaction pattern.
• Added GenerationPreviewDialog (using Dialog/DialogContent) to open a full-size preview of a slot, with save, refine, view details, and close actions.
• Extracted shared saveSlot, dismissSlotById, and refineSlot handlers used by both the grid cards and the preview dialog to avoid duplicated mutation logic.
• Added VariantSlot type alias for AssetVariantState["slots"][number] to simplify typing across the file.
• Updated GenerationSlotPreview thumbnail to add a subtle hover scale transition.

---

  

---

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

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

[github-actions]

Here's a visual recap of what changed:

Open the full interactive recap

[SajalChaplot]

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

Went through both automated review rounds (in reply to #2115 (review) and #2115 (review)). Fixed what I agreed with, pushed back on one point:

✅ Fixed — non-ready candidates had no touch-accessible dismiss path
The delete button on pending/failed cards was opacity-0 until hover/focus, so touch users couldn't dismiss a stuck or failed generation. Made that button always visible for non-ready cards (no hover gating).

✅ Fixed — preview dialog had no delete action
Save/Refine/View details existed in the full-screen preview but no way to delete the candidate you're looking at. Added a Delete button to the preview header, wired to the same dismiss-variant-slots mutation used by the grid cards.

✅ Fixed — "View details" left the preview dialog open behind the navigated page
GenerationResults is mounted persistently in the sidebar/thread-footer slot, so navigating via the "View details" link didn't unmount it or clear previewSlotId. Added onClick={() => onOpenChange(false)} to that link so the dialog closes before navigating.

↩️ Pushed back — ready-card quick actions (Save/Refine/Delete) staying hover-only on the grid
This intentionally mirrors the Library "Drafts" grid card pattern (also hover-reveal-only), which was the explicit reference design for this redesign per the original request. Changing it to always-visible would diverge from that parity. The delete-in-preview fix above gives touch users a full path anyway: tap the thumbnail to open the preview, then Save/Refine/Delete from there without needing hover.

Also fixed (found separately, was failing CI)
guard:i18n-catalogs was red because the new library.variantWithNumber key wasn't present in the standalone templates/assets/app/i18n/zh-TW.ts catalog (that locale isn't a passthrough of the English fallback like the others). Added the Traditional Chinese translation there. All guards + typecheck pass locally now.

[builder-io-integration]

Re: #2115 (review) — this review ran against the previously-pushed commit (cef50d8, the variant-numbering change) before my touch-dismiss/preview-delete/View-details fixes above landed. Those fixes are already committed locally and will show up once this branch pushes and CI re-runs; the "previously identified concerns remain unresolved in source" note should be stale after that.

[builder-io-integration]

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

[builder-io-integration]

Builder reviewed your changes and has a few items to flag 🟡

Review Details

Incremental Code Review Summary

The latest commit addresses the previously reported modal-persistence issue by closing the preview before View details navigation, makes non-ready dismissal directly available, adds dismiss to the preview dialog, and adds the Traditional Chinese variant label. These changes improve the affected flows and no regressions were found in the save/refine/dismiss state wiring.

One new UX issue remains: pending and failed cards render their full image area as an enabled-looking button, but clicking it is a no-op because preview activation is gated on ready. This gives users no feedback that the card cannot be opened and is especially confusing alongside the visible status badge.

🧪 Browser testing: Attempted full verification, but browser automation tooling remained unavailable. The dev server also required a restart after setup and was still warming/connecting during the verification window, so no visual evidence was collected.

[steve8708]

awesome, very nice @SajalChaplot!