Add Recent Drafts section and Drafts library tab

[SajalChaplot]

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.

Old UX

Screen.Recording.2026-06-18.at.9.32.15.AM.mov

###Updated UX

Screen.Recording.2026-06-18.at.9.25.12.AM.mov

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]

Here's a visual recap of what changed:

Open the full interactive recap

Large diff — this recap is a summarized view (top files + schema/API deltas).

[SajalChaplot]

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

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

[SajalChaplot]

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

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

1. Video drafts excluded — mediaType is now omitted when viewing Drafts, so image and video drafts show.
2. 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]

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

1. 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.

2. 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]

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

[builder-io-integration]

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.

[steve8708]

@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

[builder-io-integration]

Addressed the two new review comments:

• Drafts tab only showed one library → the standalone Library Drafts tab now uses the cross-library list-draft-assets action (all accessible libraries), matching the home Recent Drafts section; the library dropdown shows "All libraries" in that view. The embedded picker stays per-library by design.
• Drafts tab could return videos in an image-only picker → mediaType is no longer dropped; the embedded picker always filters by media type, so an image picker never surfaces video drafts. The all-media view is limited to the standalone Library page.

Typecheck and prettier pass locally.

[steve8708]

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

CI fix: both failing checks (Lint & format and Require changeset for publishable package changes) were caused by a stray tsup build artifact, packages/pinpoint/tsup.config.bundled_v7eyzmd03o.mjs, that got swept into a commit. It is not source code (a transient tsup-generated file) and is not on main. Removed it and added tsup.config.bundled_*.mjs to .gitignore so it cannot recur. No publishable package source actually changed in this PR, so the changeset requirement no longer applies.

[builder-io-integration]

Builder reviewed your changes and found 2 potential issues 🟡

Review Details

This incremental update meaningfully improves the Drafts feature: the previously reported single-library mismatch and embedded picker media-type leak are now fixed, and I resolved both earlier review threads before continuing. The standalone Library Drafts tab now has a distinct global-drafts path, while embedded pickers stay scoped to the host’s requested library/media type.

Risk remains standard because these changes affect shared asset-listing behavior, picker routing, and a new cross-library action. I found two new medium-severity issues in the follow-up implementation. First, the standalone “all drafts” view is now hard-capped to the newest 100 rows, so older drafts silently disappear and become unsearchable despite the UI/comments describing it as the global drafts view. Second, the new tab query-param support is only read from the URL, not written back when users change tabs, so the visible tab and URL diverge after interaction; refreshing or sharing the URL can reopen the wrong tab.

The overall approach is close, but the global Drafts UX still needs its result set and URL state to match the feature’s user-facing behavior.

🧪 Browser testing: Will run after this review (PR touches UI code)

[builder-io-integration]

🟡 Standalone Drafts tab only loads the newest 100 drafts

The standalone global Drafts view now calls list-draft-assets with a hard-coded limit: 100, and the action schema also caps requests at 100. Users with more than 100 draft candidates silently lose access to older drafts, and those older drafts are also unsearchable from this view.

[builder-io-integration]

Fixed. Raised the cap: list-draft-assets schema now allows limit up to 500 and the standalone Drafts tab requests limit: 500 (newest-first). This keeps the query bounded for performance while making truncation unlikely in practice. Full pagination/infinite-scroll would be a larger follow-up and is out of scope for this PR.

[builder-io-integration]

🟡 Draft tab state is read from the URL but never written back

The new tab query param is parsed and used to initialize/reset assetTab, but clicking a tab only calls setAssetTab(...) and never updates the URL. After switching away from /library?tab=drafts, refresh/share/back-forward can reopen the wrong tab because the URL and visible state drift apart.

[builder-io-integration]

Fixed. Clicking a tab now writes the ?tab= param via setSearchParams(..., { replace: true }) so the URL stays in sync (survives refresh/share and matches the home-page deep link). To avoid a regression, the tab param is excluded from the host-config key (hostParamsKey), so toggling tabs no longer retriggers the effect that resets media type / query / library from the URL.

[steve8708]

@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

also fix merge conflict

[steve8708]

@builderio-bot fix the merge conflicts

[builder-io-integration]

Resolved the latest merge conflicts from main in _index.tsx and library.tsx:

• Merged main's i18n (t(...)) for the library toolbar/tabs/empty-state with the Drafts feature; added brandKitDetail.drafts, assetPicker.allLibraries, assetPicker.noDrafts, and assetPicker.noMatchingDrafts keys to the en-US base (other locales fall back).
• Kept both urlAssetTab and main's mcpChatBridgeActive.
• Re-applied two fixes that were dropped during the merge: draft limit cap raised to 500 (action + standalone tab), and the active tab now syncs to the URL via setSearchParams, with tab excluded from the host-config key so toggling tabs no longer resets media type / query / library.
• Recent Drafts is still wired into the redesigned chat-surface hero.

Typecheck, prettier, and the list-draft-assets test all pass locally.

[steve8708]

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

Re-resolved the latest merge from main (it had refactored library.tsx significantly — split into AssetPickerSurface + LibraryRoute, moved i18n to the library.* namespace, and added its own per-library draft-candidate stage).

To avoid a fragile half-merge, I took main's library.tsx as the base and cleanly re-applied the Drafts feature on top of its current structure:

• Drafts tab added to AssetPickerSurface with cross-library list-draft-assets (limit 500), "All libraries" label, server-side role=generated/status=candidate filtering, URL ?tab= sync via setSearchParams, and hostParamsKey so toggling tabs doesn't reset media/query/library.
• Hid the per-library candidate stage while on the Drafts tab.
• Added i18n keys under main's library namespace (drafts, allLibraries, noDrafts, noMatchingDrafts); removed the superseded keys I had added to other namespaces.
• _index.tsx: kept main's new imports (GenerationResults, useImageModelMenu) alongside RecentDraftsSection in the hero.

Typecheck, prettier, and the list-draft-assets test pass locally. No conflict markers remain.

[steve8708]

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

currently lint and security guards fail - pleae fix

[builder-io-integration]

Fixed the two failing checks:

Lint & format — oxfmt --check flagged 5 files (this repo uses oxfmt, not prettier). Ran oxfmt to reformat them. pnpm fmt:check and pnpm oxlint now pass clean.

Security guards (guard:i18n-catalogs) — the new library.* draft keys were missing translations:

• zh-TW (a standalone full catalog) was missing drafts, allLibraries, noDrafts, noMatchingDrafts entirely.
• The 9 merge-override locales (zh-CN, es-ES, fr-FR, de-DE, ja-JP, ko-KR, pt-BR, hi-IN, ar-SA) fell back to English values, tripping the "still matches English" guard.

I also moved the last two raw English literals in RecentDraftsSection.tsx ("Recent Drafts", "View all drafts", plus the "Draft asset" fallback) into i18n. Added library.recentDrafts, library.viewAllDrafts, library.draftAsset to the English catalog and translated all three (plus the four above) across every locale.

Verified locally: pnpm guards (all guards), pnpm fmt:check, pnpm oxlint, assets typecheck, and the list-draft-assets spec all pass. PR shows MERGEABLE, no conflicts.

[steve8708]

@builderio-bot failing checks still not fixed…

[steve8708]

@builderio-bot nvm they just hadn’t rerun yet

[builder-io-integration]

Confirmed — you're right, they just needed the rerun. Both Lint & format and Security guards now pass on commit 8f026e0, and no checks are failing. PR is MERGEABLE (the BLOCKED state is just awaiting required review approval, not a CI problem). Nothing further to fix.

[builder-io-integration]

Confirmed — you're right, they just needed the rerun. Both Lint & format and Security guards now pass on commit 8f026e0, and no checks are failing. PR is MERGEABLE (the BLOCKED state is just awaiting required review approval, not a CI problem). Nothing further to fix.

[steve8708]

@builderio-bot resolve the merge conflicts

[builder-io-integration]

Merge conflict resolved. The single conflict in library.tsx was in the loading-skeleton block — I kept our drafts-aware listLoading variable (needed so the skeleton shows while global drafts load) and adopted main's new assets-library-dense-grid styling. Both the skeleton grid and the empty-state grid now use that class consistently.

Verified: no conflict markers remain, no unmerged files, formatting passes, and assets typecheck is clean. The merge is ready to commit/push.