@agent-native/core 0.80.10 → 0.81.0

package/corpus/templates/assets/app/i18n-data.ts

@@ -826,6 +826,13 @@ const enUS = {
     noMatchingAssets: "No matching assets across your kits.",
     noMatchingLibraryAssets:
       "No matching {{mediaLabel}} assets in this library.",
+    drafts: "Drafts",
+    allLibraries: "All libraries",
+    noDrafts: "No drafts yet.",
+    noMatchingDrafts: "No matching drafts.",
+    recentDrafts: "Recent Drafts",
+    viewAllDrafts: "View all drafts",
+    draftAsset: "Draft asset",
     noReusableAssets:
       "No reusable assets yet. Select a kit to upload references or generate assets.",
     noNewAssetsUploaded: "No new assets were uploaded.",
@@ -2762,6 +2769,12 @@ export const messagesByLocale = {
   "zh-TW": mergeMessages(zhTW),
   "zh-CN": mergeMessages({
     library: {
+      allLibraries: "所有库",
+      noDrafts: "暂无草稿。",
+      noMatchingDrafts: "没有匹配的草稿。",
+      recentDrafts: "最近草稿",
+      viewAllDrafts: "查看所有草稿",
+      draftAsset: "草稿资产",
       addAssets: "添加资产",
       addAssetsDescription:
         "上传源素材或生成候选项，然后只将应指导未来生成的资产标记为参考。",
@@ -3500,6 +3513,12 @@ export const messagesByLocale = {
   }),
   "es-ES": mergeMessages({
     library: {
+      allLibraries: "Todas las bibliotecas",
+      noDrafts: "Aún no hay borradores.",
+      noMatchingDrafts: "No hay borradores coincidentes.",
+      recentDrafts: "Borradores recientes",
+      viewAllDrafts: "Ver todos los borradores",
+      draftAsset: "Borrador",
       addAssets: "Agregar activos",
       addAssetsDescription:
         "Cargue material fuente o genere candidatos, luego marque solo los activos que deberían guiar a las generaciones futuras como referencias.",
@@ -3963,6 +3982,12 @@ export const messagesByLocale = {
   }),
   "fr-FR": mergeMessages({
     library: {
+      allLibraries: "Toutes les bibliothèques",
+      noDrafts: "Aucun brouillon pour l'instant.",
+      noMatchingDrafts: "Aucun brouillon correspondant.",
+      recentDrafts: "Brouillons récents",
+      viewAllDrafts: "Voir tous les brouillons",
+      draftAsset: "Brouillon",
       addAssets: "Ajouter des éléments",
       addAssetsDescription:
         "Téléchargez le matériel source ou générez des candidats, puis marquez uniquement les atouts qui devraient guider les générations futures comme références.",
@@ -4404,6 +4429,12 @@ export const messagesByLocale = {
   }),
   "de-DE": mergeMessages({
     library: {
+      allLibraries: "Alle Bibliotheken",
+      noDrafts: "Noch keine Entwürfe.",
+      noMatchingDrafts: "Keine passenden Entwürfe.",
+      recentDrafts: "Letzte Entwürfe",
+      viewAllDrafts: "Alle Entwürfe anzeigen",
+      draftAsset: "Entwurf",
       addAssets: "Assets hinzufügen",
       addAssetsDescription:
         "Laden Sie Quellmaterial hoch oder generieren Sie Kandidaten und markieren Sie dann nur die Assets, die künftigen Generationen als Referenz dienen sollen.",
@@ -4753,6 +4784,12 @@ export const messagesByLocale = {
   }),
   "ja-JP": mergeMessages({
     library: {
+      allLibraries: "すべてのライブラリ",
+      noDrafts: "下書きはまだありません。",
+      noMatchingDrafts: "一致する下書きはありません。",
+      recentDrafts: "最近の下書き",
+      viewAllDrafts: "すべての下書きを表示",
+      draftAsset: "下書きアセット",
       addAssets: "アセットの追加",
       addAssetsDescription:
         "ソース素材をアップロードするか候補を生成し、将来の世代を導く必要がある資産のみを参照としてマークします。",
@@ -5092,6 +5129,12 @@ export const messagesByLocale = {
   }),
   "ko-KR": mergeMessages({
     library: {
+      allLibraries: "모든 라이브러리",
+      noDrafts: "아직 초안이 없습니다.",
+      noMatchingDrafts: "일치하는 초안이 없습니다.",
+      recentDrafts: "최근 초안",
+      viewAllDrafts: "모든 초안 보기",
+      draftAsset: "초안 자산",
       addAssets: "자산 추가",
       addAssetsDescription:
         "원본 자료를 업로드하거나 후보를 생성한 후, 미래 세대를 이끌어야 할 자산만 참고 자료로 표시하세요.",
@@ -5430,6 +5473,12 @@ export const messagesByLocale = {
   }),
   "pt-BR": mergeMessages({
     library: {
+      allLibraries: "Todas as bibliotecas",
+      noDrafts: "Ainda não há rascunhos.",
+      noMatchingDrafts: "Nenhum rascunho correspondente.",
+      recentDrafts: "Rascunhos recentes",
+      viewAllDrafts: "Ver todos os rascunhos",
+      draftAsset: "Rascunho",
       addAssets: "Adicionar recursos",
       addAssetsDescription:
         "Carregue o material de origem ou gere candidatos e marque apenas os ativos que devem orientar as gerações futuras como referências.",
@@ -5870,6 +5919,12 @@ export const messagesByLocale = {
   }),
   "hi-IN": mergeMessages({
     library: {
+      allLibraries: "सभी लाइब्रेरी",
+      noDrafts: "अभी तक कोई ड्राफ़्ट नहीं।",
+      noMatchingDrafts: "कोई मिलान वाला ड्राफ़्ट नहीं।",
+      recentDrafts: "हाल के ड्राफ़्ट",
+      viewAllDrafts: "सभी ड्राफ़्ट देखें",
+      draftAsset: "ड्राफ़्ट एसेट",
       addAssets: "संपत्तियां जोड़ें",
       addAssetsDescription:
         "स्रोत सामग्री अपलोड करें या उम्मीदवार तैयार करें, फिर केवल उन संपत्तियों को चिह्नित करें जो भविष्य की पीढ़ियों को संदर्भ के रूप में मार्गदर्शन करें।",
@@ -6206,6 +6261,12 @@ export const messagesByLocale = {
   }),
   "ar-SA": mergeMessages({
     library: {
+      allLibraries: "جميع المكتبات",
+      noDrafts: "لا توجد مسودات بعد.",
+      noMatchingDrafts: "لا توجد مسودات مطابقة.",
+      recentDrafts: "المسودات الأخيرة",
+      viewAllDrafts: "عرض جميع المسودات",
+      draftAsset: "مسودة",
       addAssets: "أضف الأصول",
       addAssetsDescription:
         "قم بتحميل المواد المصدرية أو قم بإنشاء مرشحين، ثم حدد فقط الأصول التي يجب أن توجه الأجيال القادمة كمراجع.",

package/corpus/templates/assets/app/routes/_index.tsx

@@ -9,6 +9,7 @@ import { IconPhoto, IconSparkles, IconVideo } from "@tabler/icons-react";
 import { useEffect } from "react";
 import { useNavigate, useParams } from "react-router";
 
+import { RecentDraftsSection } from "@/components/create/RecentDraftsSection";
 import { GenerationResults } from "@/components/generation/GenerationResults";
 import { useImageModelMenu } from "@/hooks/use-image-model-menu";
 import { ASSETS_CHAT_STORAGE_KEY } from "@/lib/chat";
@@ -122,6 +123,9 @@ export default function CreatePage() {
                 </button>
               ))}
             </div>
+            <div className="mt-8 w-full text-left">
+              <RecentDraftsSection />
+            </div>
           </div>
         }
       />

package/corpus/templates/assets/app/routes/library.tsx

@@ -102,16 +102,22 @@ import {
   type VariantSlot,
 } from "./brand-kits.$id";
 
-type AssetTab = "all" | "generated" | "references";
+type AssetTab = "all" | "generated" | "drafts" | "references";
 
 function isGeneratedAsset(asset: Asset) {
   const role = asset.role ?? "";
   return role === "generated" || role === "active" || role === "candidate";
 }
 
+function isDraftAsset(asset: Asset) {
+  return asset.role === "generated" && asset.status === "candidate";
+}
+
 function assetMatchesTab(asset: Asset, tab: AssetTab) {
   if (tab === "all") return true;
-  if (tab === "generated") return isGeneratedAsset(asset);
+  if (tab === "drafts") return isDraftAsset(asset);
+  if (tab === "generated")
+    return isGeneratedAsset(asset) && !isDraftAsset(asset);
   return !isGeneratedAsset(asset);
 }
 
@@ -123,6 +129,7 @@ const MCP_APP_CHAT_BRIDGE_QUERY_PARAM = "__an_mcp_chat_bridge";
 const PICKER_INLINE_SELECT_CLASS =
   "h-7 w-auto min-w-0 max-w-full rounded-md border-0 bg-transparent px-1.5 py-1 text-xs font-medium text-muted-foreground shadow-none ring-offset-transparent transition hover:bg-accent/50 hover:text-foreground focus:ring-0 focus:ring-offset-0 sm:px-2 [&>svg]:ms-1 [&>svg]:size-3.5 [&>svg]:opacity-60";
 type PickerMediaType = "image" | "video";
+type PickerLayout = "default" | "vertical";
 
 type Asset = {
   id: string;
@@ -187,6 +194,7 @@ type HostConfig = {
   styleStrength?: StyleStrength;
   includeLogo?: boolean;
   callerAppId?: string;
+  layout?: PickerLayout;
   autoGenerate?: boolean;
   candidateRunIds?: string[];
 };
@@ -238,6 +246,10 @@ function normalizeMediaType(value: unknown): PickerMediaType {
   return value === "video" ? "video" : "image";
 }
 
+function normalizePickerLayout(value: unknown): PickerLayout | undefined {
+  return value === "vertical" ? "vertical" : undefined;
+}
+
 function normalizeBoolean(value: unknown): boolean | undefined {
   if (typeof value === "boolean") return value;
   if (typeof value !== "string") return undefined;
@@ -314,6 +326,7 @@ function normalizeHostConfig(value: unknown): HostConfig {
     includeLogo: normalizeBoolean(record.includeLogo),
     callerAppId:
       typeof record.callerAppId === "string" ? record.callerAppId : undefined,
+    layout: normalizePickerLayout(record.layout),
     candidateRunIds: normalizeCandidateRunIds(record.candidateRunIds),
   };
   if (Object.prototype.hasOwnProperty.call(record, "autoGenerate")) {
@@ -1957,12 +1970,29 @@ export function LibraryWorkspace({
 
 export function AssetPickerSurface() {
   const t = useT();
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const searchParamsKey = searchParams.toString();
+  const urlAssetTab = useMemo<AssetTab | null>(() => {
+    const tab = new URLSearchParams(searchParamsKey).get("tab");
+    return tab === "all" ||
+      tab === "generated" ||
+      tab === "drafts" ||
+      tab === "references"
+      ? tab
+      : null;
+  }, [searchParamsKey]);
+  // The active tab is the only host-irrelevant search param. Exclude it from the
+  // host-config key so toggling tabs (which writes `?tab=`) doesn't retrigger the
+  // effect that resets media type / query / library from the URL.
+  const hostParamsKey = useMemo(() => {
+    const params = new URLSearchParams(searchParamsKey);
+    params.delete("tab");
+    return params.toString();
+  }, [searchParamsKey]);
   const mcpChatBridgeActive =
     searchParamsRequestPicker(searchParams) || isEmbedMcpChatBridgeActive();
   const urlHostConfig = useMemo(() => {
-    const params = new URLSearchParams(searchParamsKey);
+    const params = new URLSearchParams(hostParamsKey);
     return {
       mediaType: normalizeMediaType(params.get("mediaType")),
       prompt: params.get("prompt") ?? undefined,
@@ -1976,6 +2006,7 @@ export function AssetPickerSurface() {
       styleStrength: normalizeStyleStrength(params.get("styleStrength")),
       includeLogo: normalizeBoolean(params.get("includeLogo")),
       callerAppId: params.get("callerAppId") ?? undefined,
+      layout: normalizePickerLayout(params.get("layout")),
       candidateRunIds: normalizeCandidateRunIds(
         params.getAll("candidateRunIds").length > 0
           ? params.getAll("candidateRunIds")
@@ -1983,7 +2014,7 @@ export function AssetPickerSurface() {
       ),
       autoGenerate: normalizeBoolean(params.get("autoGenerate")) ?? false,
     } satisfies HostConfig;
-  }, [searchParamsKey]);
+  }, [hostParamsKey]);
   const bridgeRef = useRef<EmbeddedAppBridge | null>(null);
   const embedded = useMemo(
     () =>
@@ -2001,6 +2032,9 @@ export function AssetPickerSurface() {
   const [mediaType, setMediaType] = useState<PickerMediaType>(
     () => hostConfig.mediaType ?? "image",
   );
+  const [pickerLayout, setPickerLayout] = useState<PickerLayout>(
+    () => hostConfig.layout ?? "default",
+  );
   const [query, setQuery] = useState(() => hostConfig.query ?? "");
   const [prompt, setPrompt] = useState(() => hostConfig.prompt ?? "");
   const [aspectRatio, setAspectRatio] = useState<string>(
@@ -2008,7 +2042,7 @@ export function AssetPickerSurface() {
   );
   const [presetId, setPresetId] = useState(() => hostConfig.presetId ?? "none");
   const [count, setCount] = useState(() => hostConfig.count ?? 3);
-  const [assetTab, setAssetTab] = useState<AssetTab>("all");
+  const [assetTab, setAssetTab] = useState<AssetTab>(urlAssetTab ?? "all");
   const [selectedLibraryId, setSelectedLibraryId] = useState(
     () => hostConfig.libraryId ?? "",
   );
@@ -2023,6 +2057,7 @@ export function AssetPickerSurface() {
   useEffect(() => {
     setHostConfig((current) => ({ ...current, ...urlHostConfig }));
     setMediaType(urlHostConfig.mediaType ?? "image");
+    setPickerLayout(urlHostConfig.layout ?? "default");
     setQuery(urlHostConfig.query ?? "");
     setPrompt(urlHostConfig.prompt ?? "");
     setSelectedLibraryId(urlHostConfig.libraryId ?? "");
@@ -2032,6 +2067,30 @@ export function AssetPickerSurface() {
     setVisibleCandidateRunIds(urlHostConfig.candidateRunIds ?? []);
   }, [urlHostConfig]);
 
+  useEffect(() => {
+    // Reset to "all" when the tab param is removed (e.g. back/forward nav)
+    // since the component stays mounted across search-param changes.
+    setAssetTab(urlAssetTab ?? "all");
+  }, [urlAssetTab]);
+
+  const handleAssetTabChange = useCallback(
+    (value: AssetTab) => {
+      setAssetTab(value);
+      // Keep the tab reflected in the URL so it survives refresh/share and
+      // stays consistent with the `?tab=` deep link from the home page.
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          if (value === "all") next.delete("tab");
+          else next.set("tab", value);
+          return next;
+        },
+        { replace: true },
+      );
+    },
+    [setSearchParams],
+  );
+
   const librariesQuery = useActionQuery("list-libraries", {
     compact: true,
   } as any) as {
@@ -2116,23 +2175,54 @@ export function AssetPickerSurface() {
     !selectedPreset &&
     Boolean(waitingForPresetData);
   const mediaLabel = mediaType === "video" ? "video" : "image";
+  const viewingDrafts = assetTab === "drafts";
+  // The standalone Library "Drafts" tab mirrors the home Recent Drafts section:
+  // every unsaved draft across all accessible libraries, regardless of media
+  // type. The embedded picker keeps its library + media-type scope so an
+  // image-only picker never surfaces video drafts.
+  const draftsGlobalView = viewingDrafts && !embedded;
   const assetsParams = useMemo(
     () => ({
       libraryId: selectedLibraryId,
       mediaType,
+      // Drafts are exactly generated candidates — filter them server-side
+      // instead of fetching the whole library and filtering on the client.
+      role: viewingDrafts ? "generated" : undefined,
+      status: viewingDrafts ? "candidate" : undefined,
       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,
     }),
-    [mediaType, query, selectedLibraryId, visibleCandidateRunIds],
+    [
+      viewingDrafts,
+      mediaType,
+      query,
+      selectedLibraryId,
+      visibleCandidateRunIds,
+    ],
   );
   const { data: assetData, isLoading: assetsLoading } = useActionQuery(
     "list-assets",
     assetsParams as any,
-    { enabled: Boolean(selectedLibraryId) && !usingStarterLibrary } as any,
+    {
+      enabled:
+        Boolean(selectedLibraryId) && !usingStarterLibrary && !draftsGlobalView,
+    } as any,
   ) as { data?: { assets?: Asset[] }; isLoading: boolean };
+  const { data: globalDraftsData, isLoading: globalDraftsLoading } =
+    useActionQuery(
+      "list-draft-assets",
+      { limit: 500 } as any,
+      {
+        enabled: draftsGlobalView,
+      } as any,
+    ) as { data?: { assets?: Asset[] }; isLoading: boolean };
   const starterAssets: Asset[] = useMemo(
     () =>
       STARTER_PRESET.referenceImages.map((reference) => ({
@@ -2159,11 +2249,23 @@ export function AssetPickerSurface() {
         .some((value) => String(value).toLowerCase().includes(needle)),
     );
   }, [query, starterAssets]);
-  const allAssets = usingStarterLibrary
-    ? mediaType === "image"
-      ? visibleStarterAssets
-      : []
-    : (assetData?.assets ?? []);
+  const globalDrafts = useMemo(() => {
+    const drafts = globalDraftsData?.assets ?? [];
+    const needle = query.trim().toLowerCase();
+    if (!needle) return drafts;
+    return drafts.filter((asset) =>
+      [asset.title, asset.description, asset.prompt]
+        .filter(Boolean)
+        .some((value) => String(value).toLowerCase().includes(needle)),
+    );
+  }, [globalDraftsData, query]);
+  const allAssets = draftsGlobalView
+    ? globalDrafts
+    : usingStarterLibrary
+      ? mediaType === "image"
+        ? visibleStarterAssets
+        : []
+      : (assetData?.assets ?? []);
   const currentLibrary = useMemo(
     () =>
       displayLibraries.find((library) => library.id === selectedLibraryId) ??
@@ -2174,6 +2276,7 @@ export function AssetPickerSurface() {
     () => allAssets.filter((asset) => assetMatchesTab(asset, assetTab)),
     [allAssets, assetTab],
   );
+  const listLoading = draftsGlobalView ? globalDraftsLoading : assetsLoading;
   const [previewAsset, setPreviewAsset] = useState<Asset | null>(null);
   const [standaloneSelection, setStandaloneSelection] = useState<ReturnType<
     typeof assetPayload
@@ -2413,6 +2516,7 @@ export function AssetPickerSurface() {
         const next = normalizeHostConfig(payload);
         setHostConfig((current) => ({ ...current, ...next }));
         if (next.mediaType !== undefined) setMediaType(next.mediaType);
+        if (next.layout !== undefined) setPickerLayout(next.layout);
         if (next.query !== undefined) setQuery(next.query);
         if (next.prompt !== undefined) setPrompt(next.prompt);
         if (next.libraryId !== undefined) setSelectedLibraryId(next.libraryId);
@@ -2442,10 +2546,11 @@ export function AssetPickerSurface() {
         query,
         prompt,
         aspectRatio,
+        layout: pickerLayout,
       },
       { requestSource: "assets-picker-ui" },
     ).catch(() => {});
-  }, [aspectRatio, mediaType, prompt, query, selectedLibraryId]);
+  }, [aspectRatio, mediaType, pickerLayout, prompt, query, selectedLibraryId]);
 
   const canGenerate =
     mediaType === "image" &&
@@ -2561,14 +2666,22 @@ export function AssetPickerSurface() {
     waitingForRequestedPreset,
   ]);
 
+  const verticalLayout = pickerLayout === "vertical";
+
   return (
     <div
       className={cn(
         "flex flex-col overflow-hidden bg-background text-foreground",
         embedded ? "h-screen w-screen" : "h-full w-full",
+        verticalLayout && "assets-picker-vertical",
       )}
     >
-      <header className="flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-3">
+      <header
+        className={cn(
+          "flex shrink-0 items-center justify-between gap-3 border-b border-border",
+          verticalLayout ? "h-10 px-2" : "h-12 px-3",
+        )}
+      >
         <div className="min-w-0 truncate text-sm font-semibold">
           {embedded ? t("navigation.brand") : t("library.library")}
         </div>
@@ -2577,7 +2690,7 @@ export function AssetPickerSurface() {
             <Button
               variant={showCreatePane ? "secondary" : "default"}
               size="sm"
-              className="h-8 gap-1.5"
+              className={cn("gap-1.5", verticalLayout ? "h-7 px-2" : "h-8")}
               onClick={() => setShowCreatePane((open) => !open)}
             >
               {showCreatePane ? (
@@ -2585,7 +2698,9 @@ export function AssetPickerSurface() {
               ) : (
                 <IconPhotoPlus className="h-3.5 w-3.5" />
               )}
-              {showCreatePane ? t("library.close") : t("library.createPane")}
+              <span className={verticalLayout ? "sr-only" : undefined}>
+                {showCreatePane ? t("library.close") : t("library.createPane")}
+              </span>
             </Button>
           )}
           {embedded && (
@@ -2614,9 +2729,14 @@ export function AssetPickerSurface() {
       </header>
 
       {showCreatePane && mediaType === "image" && (
-        <section className="shrink-0 border-b border-border px-3 py-3">
+        <section
+          className={cn(
+            "shrink-0 border-b border-border",
+            verticalLayout ? "px-2 py-2" : "px-3 py-3",
+          )}
+        >
           {mediaType === "image" ? (
-            <div className="mt-2 rounded-lg border border-border/80 bg-background focus-within:ring-1 focus-within:ring-ring">
+            <div className="rounded-lg border border-border/80 bg-background focus-within:ring-1 focus-within:ring-ring">
               <Input
                 type="text"
                 value={prompt}
@@ -2633,10 +2753,23 @@ export function AssetPickerSurface() {
                   if (canGenerate) runGenerate();
                 }}
                 placeholder={t("library.generateImagePlaceholder")}
-                className="h-11 border-0 bg-transparent px-3 py-2.5 leading-6 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+                className={cn(
+                  "border-0 bg-transparent px-3 leading-6 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
+                  verticalLayout ? "h-9 py-2 text-xs" : "h-11 py-2.5",
+                )}
               />
-              <div className="flex items-center gap-1 px-2 pb-2">
-                <div className="flex min-w-0 flex-1 items-center justify-end gap-0.5 sm:gap-1">
+              <div
+                className={cn(
+                  "flex gap-1 px-2 pb-2",
+                  verticalLayout ? "flex-col items-stretch" : "items-center",
+                )}
+              >
+                <div
+                  className={cn(
+                    "flex min-w-0 flex-1 items-center gap-0.5 sm:gap-1",
+                    verticalLayout ? "justify-between" : "justify-end",
+                  )}
+                >
                   <Select value={aspectRatio} onValueChange={setAspectRatio}>
                     <SelectTrigger
                       aria-label={t("brandKitDetail.aspectRatio")}
@@ -2701,7 +2834,10 @@ export function AssetPickerSurface() {
                   ) : null}
                 </div>
                 <Button
-                  className="h-7 min-w-[5.75rem] shrink-0 px-3 text-xs"
+                  className={cn(
+                    "h-7 shrink-0 px-3 text-xs",
+                    !verticalLayout && "min-w-[5.75rem]",
+                  )}
                   disabled={!canGenerate}
                   onClick={runGenerate}
                 >
@@ -2841,31 +2977,65 @@ export function AssetPickerSurface() {
         </section>
       )}
 
-      <main className="min-h-0 flex-1 overflow-y-auto p-3">
+      <main
+        className={cn(
+          "min-h-0 flex-1 overflow-y-auto",
+          verticalLayout ? "p-2" : "p-3",
+        )}
+      >
         {displayLibraries.length > 0 && (
-          <div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-            <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-              <Select
-                value={selectedLibraryId}
-                onValueChange={setSelectedLibraryId}
-              >
-                <SelectTrigger className="h-9 w-full border-border/70 bg-background sm:w-48">
-                  <SelectValue placeholder={t("library.library")} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    {displayLibraries.map((library) => (
-                      <SelectItem key={library.id} value={library.id}>
-                        {library.title}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
+          <div
+            className={cn(
+              "mb-3 flex flex-col gap-2",
+              !verticalLayout &&
+                "sm:flex-row sm:items-center sm:justify-between",
+            )}
+          >
+            <div
+              className={cn(
+                "flex flex-col gap-2",
+                !verticalLayout && "sm:flex-row sm:items-center",
+              )}
+            >
+              {draftsGlobalView ? (
+                <div
+                  className={cn(
+                    "flex h-9 items-center rounded-md border border-border/70 bg-background px-3 text-sm text-muted-foreground",
+                    !verticalLayout && "sm:w-48",
+                  )}
+                >
+                  {t("library.allLibraries")}
+                </div>
+              ) : (
+                <Select
+                  value={selectedLibraryId}
+                  onValueChange={setSelectedLibraryId}
+                >
+                  <SelectTrigger
+                    className={cn(
+                      "h-9 w-full border-border/70 bg-background",
+                      !verticalLayout && "sm:w-48",
+                    )}
+                  >
+                    <SelectValue placeholder={t("library.library")} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {displayLibraries.map((library) => (
+                        <SelectItem key={library.id} value={library.id}>
+                          {library.title}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              )}
               {selectedLibraryId && (
                 <Tabs
                   value={assetTab}
-                  onValueChange={(value) => setAssetTab(value as AssetTab)}
+                  onValueChange={(value) =>
+                    handleAssetTabChange(value as AssetTab)
+                  }
                 >
                   <TabsList>
                     <TabsTrigger value="all">
@@ -2874,6 +3044,9 @@ export function AssetPickerSurface() {
                     <TabsTrigger value="generated">
                       {t("library.generated")}
                     </TabsTrigger>
+                    <TabsTrigger value="drafts">
+                      {t("library.drafts")}
+                    </TabsTrigger>
                     <TabsTrigger value="references">
                       {t("library.references")}
                     </TabsTrigger>
@@ -2888,7 +3061,10 @@ export function AssetPickerSurface() {
                 onInput={(event) => setQuery(event.currentTarget.value)}
                 onChange={(event) => setQuery(event.target.value)}
                 placeholder={t("library.searchMedia", { mediaLabel })}
-                className="h-9 border-border/70 bg-background sm:max-w-xs"
+                className={cn(
+                  "h-9 border-border/70 bg-background",
+                  !verticalLayout && "sm:max-w-xs",
+                )}
               />
             )}
           </div>
@@ -2897,6 +3073,7 @@ export function AssetPickerSurface() {
         {mediaType === "image" &&
           selectedLibraryId &&
           !usingStarterLibrary &&
+          !viewingDrafts &&
           pickerVariantScopeId && (
             <LibraryCandidateStage
               activeLibraryId={selectedLibraryId}
@@ -2914,7 +3091,7 @@ export function AssetPickerSurface() {
           </div>
         )}
 
-        {selectedLibraryId && assetsLoading && (
+        {selectedLibraryId && listLoading && (
           <div className="assets-library-dense-grid grid grid-cols-2 gap-3">
             {Array.from({ length: 8 }).map((_, index) => (
               <Skeleton key={index} className="aspect-square rounded-md" />
@@ -2922,12 +3099,16 @@ export function AssetPickerSurface() {
           </div>
         )}
 
-        {selectedLibraryId && !assetsLoading && assets.length === 0 && (
+        {selectedLibraryId && !listLoading && assets.length === 0 && (
           <div className="flex h-full items-center justify-center text-center">
             <div className="max-w-sm text-sm text-muted-foreground">
-              {query
-                ? t("library.noMatchingLibraryAssets", { mediaLabel })
-                : t("library.noAssetsInLibrary", { mediaLabel })}
+              {draftsGlobalView
+                ? query
+                  ? t("library.noMatchingDrafts")
+                  : t("library.noDrafts")
+                : query
+                  ? t("library.noMatchingLibraryAssets", { mediaLabel })
+                  : t("library.noAssetsInLibrary", { mediaLabel })}
             </div>
           </div>
         )}

package/corpus/templates/assets/changelog/2026-06-29-image-generation-can-now-render-requested-text-and-respect-b.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Image generation can now render requested text and respect brand fonts