Add Recent Drafts section and Drafts library tab by SajalChaplot · Pull Request #1219 · BuilderIO/agent-native

SajalChaplot · 2026-06-16T08:29:15Z

Summary

Adds a "Recent Drafts" section below the home prompt box showing the 5 most recently AI-generated candidate assets, and introduces a new "Drafts" tab in the Library view to house all unsaved draft generations.

Problem

There was no quick way for users to revisit AI-generated assets that hadn't been saved yet. Unsaved draft generations were mixed in with other assets in the library with no dedicated view, making them hard to find.

Solution

A new list-draft-assets server action queries candidate-role assets across accessible libraries. A RecentDraftsSection component renders the 5 most recent drafts below the home prompt box with a "View all drafts" link pointing to the library's new Drafts tab. The library route gains a drafts tab type that filters assets by role === "generated" && status === "candidate", and the tab is pre-selected when navigating via the ?tab=drafts URL parameter.

Key Changes

actions/list-draft-assets.ts – New server action that fetches unsaved draft assets (role = "generated", status = "candidate") across accessible libraries, ordered newest first, with an optional libraryId filter and configurable limit.
RecentDraftsSection.tsx – New React component that displays up to 5 recent drafts as a thumbnail grid with skeleton loading states, image/video thumbnail support, and a "View all drafts" button linking to /library?tab=drafts.
_index.tsx – Renders <RecentDraftsSection /> below the prompt box on the home page.
library.tsx – Adds a drafts tab type and isDraftAsset helper; updates assetMatchesTab so the generated tab excludes drafts; reads the ?tab= URL param on mount and syncs it to state; passes includeCandidates: true when the drafts tab is active; adds the "Drafts" TabsTrigger to the UI; adds status field to the Asset type.

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

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

github-actions · 2026-06-16T08:29:49Z

Here's a visual recap of what changed:

Open the full interactive recap

SajalChaplot · 2026-06-16T09:09:21Z

@builderio-bot look at latest PR feedback and fix anything you agree with. Be skeptical. Reply to every comment if you fixed it or not and why.

builder-io-integration · 2026-06-16T09:11:16Z

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

SajalChaplot · 2026-06-16T09:13:15Z

@builderio-bot look at latest PR feedback and fix anything you agree with. Be skeptical. Reply to every comment if you fixed it or not and why.

builder-io-integration · 2026-06-16T09:16:18Z

Reviewed the two bot comments — agreed with both, fixed both in the Drafts tab query (library.tsx):

Video drafts excluded — mediaType is now omitted when viewing Drafts, so image and video drafts show.
Only latest run shown — candidateRunIds is now omitted on the Drafts tab, so all unsaved drafts appear, not just the most recent batch.

Typecheck passes.

builder-io-integration · 2026-06-16T09:17:18Z

Both PR review comments were valid, and I fixed both in the Drafts tab query (templates/assets/app/routes/library.tsx):

Video drafts excluded — the query applied a default mediaType: "image" even on the Drafts tab, hiding video drafts that RecentDraftsSection would show. Now mediaType is omitted (undefined) when viewing Drafts, so both image and video drafts appear.
Only the latest run shown — candidateRunIds was passed regardless of tab, narrowing Drafts to the most recent generation batch. Now it's omitted on the Drafts tab, so all unsaved drafts appear.

I replied to each review comment explaining the fix, posted a PR summary, and typecheck passes. The changes haven't been pushed yet — they'll go up on the next push.

⠀
🟡 Both PR comments addressed and replied to; fixes are committed locally and need a push to update the PR.

SajalChaplot · 2026-06-16T10:13:44Z

@builderio-bot ci/link and format check is failing. fix that

builder-io-integration · 2026-06-16T10:15:56Z

Only the Lint & format check was failing — there's no separate "link" check (the user meant "lint"). The failure was Prettier formatting on my two changed files (list-draft-assets.ts and library.tsx).

I ran Prettier --write on them and verified they now pass prettier --check. The reformatted files are staged and will update the PR on the next push.

⠀
🟢 Fixed the Prettier formatting failures in list-draft-assets.ts and library.tsx; both now pass the format check.

builder-io-integration

Builder reviewed your changes and found 2 potential issues 🟡

Review Details

Incremental Code Review — PR #1219

Good News: The two critical issues from the previous review have been fixed:

✅ Drafts tab now includes both image and video drafts (removed mediaType constraint)
✅ Drafts tab now shows all unsaved drafts, not just the latest batch (removed candidateRunIds filter)

New Issues Found: 3 items identified in the updated implementation.

Issues in Updated Code

🟡 MEDIUM — Drafts tab fetches entire library instead of filtering server-side (line 810-823)
The Drafts branch removes mediaType and candidateRunIds filters, but never adds server-side status/role filters. The list-assets action still queries every asset in the library, then client-side assetMatchesTab() filters to drafts. This causes performance degradation on large libraries (unnecessary DB/serialization load).

🟡 MEDIUM — Asset tab state stays on Drafts after URL param removed (line 685-687)
The urlAssetTab sync effect only updates when the param is truthy. Navigating from /library?tab=drafts to /library leaves assetTab stuck on "drafts" because the effect doesn't handle the null case. Breaks back/forward navigation and deep-linking.

🔵 LOW — View all drafts links to single-library view despite cross-library home query (RecentDraftsSection line 33)
Home page Recent Drafts fetches across all accessible libraries, but "View all drafts" navigates to /library?tab=drafts which scopes to a single selectedLibraryId. Users can see a draft on home page but not find it in the Library view if it belongs to a different library.

Strengths

✅ Good comments added explaining intent (lines 812, 818)
✅ Dependency arrays properly updated with viewingDrafts
✅ URL parameter parsing logic sound
✅ Database queries and access controls still correct

🧪 Browser testing: Completed in previous review — 12/13 test cases passed (first run scope, full testing)

builder-io-integration · 2026-06-16T10:20:17Z

    () => ({
      libraryId: selectedLibraryId,
-      mediaType,
+      // Drafts can be images or videos, so don't constrain by media type there.
+      mediaType: viewingDrafts ? undefined : mediaType,
      query: query.trim() || undefined,
      includeCandidates:
-        mediaType === "image" && visibleCandidateRunIds.length > 0,
+        viewingDrafts ||
+        (mediaType === "image" && visibleCandidateRunIds.length > 0),
+      // The Drafts tab shows every unsaved draft, not just the latest run batch.
      candidateRunIds:
-        visibleCandidateRunIds.length > 0 ? visibleCandidateRunIds : undefined,
+        !viewingDrafts && visibleCandidateRunIds.length > 0
+          ? visibleCandidateRunIds
+          : undefined,


🟡 Drafts tab fetches entire library instead of filtering server-side

When viewingDrafts is true, the request omits mediaType and candidateRunIds, but never adds server-side draft filters (status: "candidate", role: "generated"). This causes list-assets to query every asset in the library, then filters drafts on the client. For large libraries, this is a performance regression. Consider sending draft filters server-side or using list-draft-assets action instead.

builder-io-integration · 2026-06-16T10:20:17Z

+  useEffect(() => {
+    if (urlAssetTab) setAssetTab(urlAssetTab);
+  }, [urlAssetTab]);


🟡 Asset tab state stays on Drafts after URL param removed

The effect only updates state when urlAssetTab is truthy, so navigating from /library?tab=drafts to /library leaves assetTab stuck on "drafts" (because React Router keeps the component mounted on search param changes). This breaks back/forward navigation. Fix: use setAssetTab(urlAssetTab ?? "all") to reset when the param is absent.

SajalChaplot · 2026-06-16T12:02:17Z

@steve8708 can you share how do I generate a deployed preview. I am trying to connect Builder account in fusion preview, but it is throwing error, so I am unable to test this change. I need to generate image/asset for this one.

steve8708 · 2026-06-16T15:48:32Z

@SajalChaplot can you post in #product-agent-native-feedback this issue, we can tag Milos in there

Add recent drafts section and library drafts tab

dd55159

This comment has been minimized.

Sign in to view

builder-io-integration Bot changed the title ~~Update from the Builder.io agent~~ Add Recent Drafts section and Drafts library tab Jun 16, 2026

builder-io-integration Bot added the builder.io label Jun 16, 2026

This comment has been minimized.

Sign in to view

This comment was marked as outdated.

Sign in to view

Commit unstaged changes

8687072

fix: format code to pass linting checks

5bb7a25

builder-io-integration Bot reviewed Jun 16, 2026

View reviewed changes

Conversation

SajalChaplot commented Jun 16, 2026 • edited by builder-io-integration Bot 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.

This comment has been minimized.

github-actions Bot commented Jun 16, 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 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.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment was marked as outdated.

Uh oh!

SajalChaplot commented Jun 16, 2026

Uh oh!

builder-io-integration Bot commented Jun 16, 2026

Uh oh!

SajalChaplot commented Jun 16, 2026

Uh oh!

builder-io-integration Bot commented Jun 16, 2026

Uh oh!

builder-io-integration Bot commented Jun 16, 2026

Uh oh!

SajalChaplot commented Jun 16, 2026

Uh oh!

builder-io-integration Bot commented Jun 16, 2026

Uh oh!

builder-io-integration Bot left a comment

Choose a reason for hiding this comment

Incremental Code Review — PR #1219

Issues in Updated Code

Strengths

Uh oh!

builder-io-integration Bot Jun 16, 2026

Choose a reason for hiding this comment

🟡 Drafts tab fetches entire library instead of filtering server-side

Uh oh!

builder-io-integration Bot Jun 16, 2026

Choose a reason for hiding this comment

🟡 Asset tab state stays on Drafts after URL param removed

Uh oh!

SajalChaplot commented Jun 16, 2026

Uh oh!

steve8708 commented Jun 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

SajalChaplot commented Jun 16, 2026 •

edited by builder-io-integration Bot

Loading

github-actions Bot commented Jun 16, 2026 •

edited

Loading