@agent-native/core 0.77.24 → 0.78.1

package/corpus/templates/assets/app/components/generation/GenerationResults.tsx

@@ -0,0 +1,425 @@
+import {
+  readClientAppState,
+  sendToAgentChat,
+  useActionMutation,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
+import { IconMessageCircle, IconPhoto, IconTrash } from "@tabler/icons-react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { assetPreviewSources } from "@/lib/asset-preview-sources";
+
+import type {
+  AssetVariantState,
+  ImageLibrarySummary,
+} from "../../../shared/api";
+
+type LibraryListResult = {
+  libraries?: ImageLibrarySummary[];
+};
+
+function variantStateKey(threadId: string | null) {
+  return threadId ? `asset-variants:${threadId}` : "asset-variants";
+}
+
+function slotTime(slot: AssetVariantState["slots"][number]): number {
+  const raw = slot.createdAt ?? slot.updatedAt ?? "";
+  const time = Date.parse(raw);
+  return Number.isNaN(time) ? 0 : time;
+}
+
+function stalePendingRunId(
+  slot: AssetVariantState["slots"][number],
+): string | null {
+  if (slot.status !== "pending") return null;
+  if (!slot.runId) return null;
+  const timestamp = slotTime(slot);
+  if (!timestamp) return null;
+  return Date.now() - timestamp >= 2 * 60 * 1000 ? slot.runId : null;
+}
+
+export function GenerationResults({ threadId }: { threadId: string | null }) {
+  const t = useT();
+  const queryClient = useQueryClient();
+  const [clearAllOpen, setClearAllOpen] = useState(false);
+  const stateKey = variantStateKey(threadId);
+  const stateQueryKey = useMemo(() => ["app-state", stateKey], [stateKey]);
+  const { data: variants } = useQuery({
+    queryKey: stateQueryKey,
+    queryFn: async ({ signal }) => {
+      return readClientAppState<AssetVariantState>(stateKey, { signal });
+    },
+    refetchInterval: 1000,
+  });
+  const { data: librariesData } = useActionQuery("list-libraries", {
+    compact: true,
+  } as any) as { data?: LibraryListResult };
+  const saveGenerated = useActionMutation("save-generated-image");
+  const dismissSlot = useActionMutation("dismiss-variant-slots");
+  const refreshGeneration = useActionMutation("refresh-generation-run");
+  const refreshingRunIds = useRef<Set<string>>(new Set());
+  const libraryTitle = useMemo(() => {
+    if (!variants?.libraryId) return null;
+    return (
+      librariesData?.libraries?.find((item) => item.id === variants.libraryId)
+        ?.title ?? null
+    );
+  }, [librariesData?.libraries, variants?.libraryId]);
+  const slots = useMemo(
+    () =>
+      (variants?.slots ?? [])
+        .slice()
+        .sort(
+          (left, right) =>
+            slotTime(right) - slotTime(left) ||
+            right.slotId.localeCompare(left.slotId),
+        ),
+    [variants?.slots],
+  );
+  const belongsToThread = Boolean(
+    variants &&
+    (threadId ? variants.threadId === threadId : !variants.threadId),
+  );
+
+  useEffect(() => {
+    if (!belongsToThread) return;
+    if (!slots.length || refreshGeneration.isPending) return;
+    const runId = slots
+      .map(stalePendingRunId)
+      .find((id): id is string =>
+        Boolean(id && !refreshingRunIds.current.has(id)),
+      );
+    if (!runId) return;
+    refreshingRunIds.current.add(runId);
+    refreshGeneration.mutate(
+      { runId },
+      {
+        onSettled: () => {
+          window.setTimeout(() => {
+            refreshingRunIds.current.delete(runId);
+          }, 30_000);
+          void queryClient.invalidateQueries({
+            queryKey: stateQueryKey,
+            refetchType: "active",
+          });
+        },
+      },
+    );
+  }, [belongsToThread, queryClient, refreshGeneration, slots, stateQueryKey]);
+
+  if (!belongsToThread || !variants) return null;
+  if (slots.length === 0) return null;
+
+  const pendingCount = slots.filter((slot) => slot.status === "pending").length;
+  const readyCount = slots.filter((slot) => slot.status === "ready").length;
+  const failedCount = slots.filter((slot) => slot.status === "failed").length;
+  const statusSummary = [
+    pendingCount > 0
+      ? t("library.generatingCount", { count: pendingCount })
+      : null,
+    readyCount > 0 ? t("library.readyCount", { count: readyCount }) : null,
+    failedCount > 0 ? t("library.failedCount", { count: failedCount }) : null,
+  ]
+    .filter(Boolean)
+    .join(" / ");
+
+  function clearAllCandidates() {
+    dismissSlot.mutate(
+      { threadId, scope: "all" },
+      {
+        onSuccess: () => {
+          setClearAllOpen(false);
+          void queryClient.invalidateQueries({
+            queryKey: stateQueryKey,
+          });
+        },
+        onError: (error) =>
+          toast.error(error.message || t("library.couldNotClearCandidates")),
+      },
+    );
+  }
+
+  return (
+    <>
+      <AlertDialog open={clearAllOpen} onOpenChange={setClearAllOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("library.clearGeneratedCandidatesTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("library.clearGeneratedCandidatesDescription")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={dismissSlot.isPending}>
+              {t("library.cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={dismissSlot.isPending}
+              onClick={(event) => {
+                event.preventDefault();
+                clearAllCandidates();
+              }}
+            >
+              {dismissSlot.isPending ? (
+                <>
+                  <Spinner className="h-4 w-4" />
+                  {t("library.clearing")}
+                </>
+              ) : (
+                t("library.clearCandidates")
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <section className="mx-auto mb-4 w-full max-w-[760px] px-4">
+        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
+          <div className="flex items-start justify-between gap-3 border-b border-border/80 px-3 py-3">
+            <div className="flex min-w-0 items-start gap-2.5">
+              <div className="flex size-7 shrink-0 items-center justify-center rounded-md border border-border bg-muted/50 text-muted-foreground">
+                {pendingCount > 0 ? (
+                  <Spinner className="h-3.5 w-3.5" />
+                ) : (
+                  <IconPhoto className="h-4 w-4" />
+                )}
+              </div>
+              <div className="min-w-0">
+                <div className="flex min-w-0 items-center gap-2">
+                  <h2 className="truncate text-sm font-semibold">
+                    {t("library.generatedCandidatesTitle")}
+                  </h2>
+                  <Badge variant="secondary" className="shrink-0">
+                    {statusSummary}
+                  </Badge>
+                </div>
+                <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                  {libraryTitle || t("library.noBrandKit")} / {variants.prompt}
+                </p>
+              </div>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 shrink-0 gap-1 px-2 text-xs text-muted-foreground hover:text-destructive"
+              disabled={dismissSlot.isPending}
+              onClick={() => setClearAllOpen(true)}
+            >
+              <IconTrash className="h-3.5 w-3.5" />
+              {t("library.clear")}
+            </Button>
+          </div>
+
+          <div className="max-h-[min(640px,52vh)] overflow-y-auto p-3">
+            <div
+              className={
+                slots.length === 1
+                  ? "grid grid-cols-1 gap-3"
+                  : "grid grid-cols-1 gap-3 sm:grid-cols-2"
+              }
+            >
+              {slots.map((slot, index) => (
+                <GenerationResultItem
+                  key={slot.slotId}
+                  slot={slot}
+                  index={index}
+                  prompt={variants.prompt}
+                  libraryTitle={libraryTitle}
+                  isSaving={saveGenerated.isPending}
+                  isDismissing={dismissSlot.isPending}
+                  onSave={() => {
+                    if (!slot.assetId && !slot.slotId) return;
+                    saveGenerated.mutate(
+                      {
+                        ...(slot.assetId ? { assetId: slot.assetId } : {}),
+                        ...(slot.slotId ? { slotId: slot.slotId } : {}),
+                        threadId,
+                      },
+                      {
+                        onSuccess: () => {
+                          toast.success(t("library.savedGeneratedAsset"));
+                          void queryClient.invalidateQueries({
+                            queryKey: stateQueryKey,
+                          });
+                          void queryClient.invalidateQueries({
+                            queryKey: ["action", "get-library"],
+                          });
+                        },
+                        onError: (error) =>
+                          toast.error(
+                            error.message || t("library.couldNotSaveCandidate"),
+                          ),
+                      },
+                    );
+                  }}
+                  onDismiss={() => {
+                    dismissSlot.mutate(
+                      { slotId: slot.slotId, threadId },
+                      {
+                        onSuccess: () => {
+                          void queryClient.invalidateQueries({
+                            queryKey: stateQueryKey,
+                          });
+                        },
+                        onError: (error) =>
+                          toast.error(
+                            error.message ||
+                              t("library.couldNotDismissCandidate"),
+                          ),
+                      },
+                    );
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+function GenerationResultItem({
+  slot,
+  index,
+  prompt,
+  libraryTitle,
+  isSaving,
+  isDismissing,
+  onSave,
+  onDismiss,
+}: {
+  slot: AssetVariantState["slots"][number];
+  index: number;
+  prompt: string;
+  libraryTitle: string | null;
+  isSaving: boolean;
+  isDismissing: boolean;
+  onSave: () => void;
+  onDismiss: () => void;
+}) {
+  const ready = slot.status === "ready" && Boolean(slot.assetId);
+  const t = useT();
+  return (
+    <article className="overflow-hidden rounded-lg border border-border/80 bg-background/70">
+      <div className="relative aspect-[16/10] overflow-hidden bg-muted/40">
+        <GenerationSlotPreview slot={slot} />
+        <div className="absolute left-2 top-2 flex items-center gap-1 rounded-full border border-border/70 bg-background/90 px-2 py-1 text-[11px] font-medium shadow-sm">
+          {slot.status === "pending" ? <Spinner className="h-3 w-3" /> : null}
+          <span>
+            {slot.status === "pending"
+              ? t("library.generating")
+              : slot.status === "ready"
+                ? t("library.candidateWithNumber", { number: index + 1 })
+                : t("library.failed")}
+          </span>
+        </div>
+      </div>
+      <div className="space-y-2 p-2.5">
+        <div className="min-w-0 text-xs">
+          <div className="truncate font-medium">
+            {slot.status === "ready"
+              ? t("library.readyToSave")
+              : slot.status === "pending"
+                ? t("library.stillRendering")
+                : t("library.generationFailed")}
+          </div>
+          <div className="mt-0.5 truncate text-muted-foreground">
+            {libraryTitle || t("library.noBrandKit")}
+            {prompt ? ` / ${prompt}` : null}
+          </div>
+        </div>
+        <div className="flex flex-wrap items-center gap-1.5">
+          <Button
+            size="sm"
+            className="h-7 px-2 text-xs"
+            disabled={!ready || isSaving}
+            onClick={onSave}
+          >
+            {isSaving ? <Spinner className="h-3 w-3" /> : t("library.save")}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 gap-1 px-2 text-xs"
+            disabled={!slot.assetId}
+            onClick={() =>
+              sendToAgentChat({
+                message: `Refine generated asset ${slot.assetId}: `,
+                context: [
+                  "## Assets candidate",
+                  `Asset ID: ${slot.assetId}`,
+                  `Run ID: ${slot.runId ?? "unknown"}`,
+                  `Prompt: ${prompt}`,
+                  libraryTitle ? `Brand kit: ${libraryTitle}` : "",
+                  "Use refine-image with assetId when the user describes the change.",
+                ]
+                  .filter(Boolean)
+                  .join("\n"),
+                submit: false,
+                openSidebar: true,
+              })
+            }
+          >
+            <IconMessageCircle className="h-3.5 w-3.5" />
+            {t("library.refine")}
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+            disabled={isDismissing}
+            onClick={onDismiss}
+            aria-label={t("library.deleteCandidate")}
+          >
+            <IconTrash className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+function GenerationSlotPreview({
+  slot,
+}: {
+  slot: AssetVariantState["slots"][number];
+}) {
+  const t = useT();
+  const sources = assetPreviewSources(slot, "thumbnail");
+  const src = sources[0];
+  if (src) {
+    return <img src={src} alt="" className="h-full w-full object-contain" />;
+  }
+  if (slot.status === "failed") {
+    return (
+      <div className="flex h-full w-full items-center justify-center p-2 text-center text-[11px] text-destructive">
+        {slot.error || t("library.failed")}
+      </div>
+    );
+  }
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-muted">
+      <IconPhoto className="h-6 w-6 animate-pulse text-muted-foreground" />
+    </div>
+  );
+}

package/corpus/templates/assets/app/components/layout/Header.tsx

@@ -35,7 +35,9 @@ function StaticTitle({ pathname }: { pathname: string }) {
 
 function ResolvedTitle() {
   const location = useLocation();
-  const libraryMatch = location.pathname.match(/^\/brand-kits\/([^/]+)/);
+  const libraryMatch = location.pathname.match(
+    /^\/(?:library|brand-kits)\/([^/]+)/,
+  );
   if (libraryMatch) {
     return <LibraryTitle id={libraryMatch[1]} />;
   }

package/corpus/templates/assets/app/components/layout/Layout.tsx

@@ -13,6 +13,7 @@ import { IconMenu2 } from "@tabler/icons-react";
 import { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router";
 
+import { GenerationResults } from "@/components/generation/GenerationResults";
 import { useNavigationState } from "@/hooks/use-navigation-state";
 import { ASSETS_CHAT_STORAGE_KEY } from "@/lib/chat";
 import { cn } from "@/lib/utils";
@@ -59,6 +60,7 @@ export function Layout({ children }: LayoutProps) {
   const isPicker = location.pathname === "/library";
   const hideHeader =
     location.pathname === "/library" ||
+    location.pathname.startsWith("/library/") ||
     location.pathname === "/extensions" ||
     location.pathname.startsWith("/extensions/");
   const chromeless =
@@ -138,6 +140,9 @@ export function Layout({ children }: LayoutProps) {
           t("chat.suggestionProductVideo"),
           t("chat.suggestionReferenceStyle"),
         ]}
+        threadFooterSlot={({ threadId }) => (
+          <GenerationResults threadId={threadId} />
+        )}
       >
         {appFrame}
       </AgentSidebar>

package/corpus/templates/assets/app/components/layout/Sidebar.tsx

@@ -16,10 +16,9 @@ import {
   IconClipboardList,
   IconDots,
   IconEdit,
-  IconLayoutGrid,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
-  IconPalette,
+  IconLayoutGrid,
   IconPhotoPlus,
   IconPin,
   IconPlus,
@@ -48,7 +47,6 @@ import { cn } from "@/lib/utils";
 const baseNavItems = [
   { icon: IconPhotoPlus, labelKey: "navigation.create", href: "/" },
   { icon: IconLayoutGrid, labelKey: "navigation.library", href: "/library" },
-  { icon: IconPalette, labelKey: "navigation.brandKits", href: "/brand-kits" },
   { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
 ];
 
@@ -494,10 +492,10 @@ export function Sidebar() {
             const isActive =
               item.href === "/"
                 ? isCreateRoute
-                : item.href === "/brand-kits"
-                  ? location.pathname === "/brand-kits" ||
-                    location.pathname.startsWith("/brand-kits/") ||
+                : item.href === "/library"
+                  ? location.pathname === "/library" ||
                     location.pathname.startsWith("/library/") ||
+                    location.pathname.startsWith("/brand-kits/") ||
                     location.pathname.startsWith("/image/") ||
                     location.pathname.startsWith("/asset/")
                   : location.pathname.startsWith(item.href);

package/corpus/templates/assets/app/hooks/use-navigation-state.ts

@@ -22,6 +22,13 @@ function optionalLibraryTab(params: URLSearchParams) {
     : undefined;
 }
 
+function isPickerRequest(params: URLSearchParams) {
+  return (
+    params.get("__an_picker") === "1" ||
+    params.get("__an_mcp_chat_bridge") === "1"
+  );
+}
+
 function navigationFromPath(pathname: string, search = "") {
   const params = new URLSearchParams(search);
   const chat = pathname.match(/^\/chat\/([^/]+)/);
@@ -31,13 +38,15 @@ function navigationFromPath(pathname: string, search = "") {
       threadId: decodePathParam(chat[1]),
     };
   }
-  // The "library" view is the brand-kit detail page (route /brand-kits/:id).
-  // Keep the internal view key stable for the agent/MCP contract.
-  const library = pathname.match(/^\/brand-kits\/([^/]+)/);
+  // The "library" view is the unified Library workspace. Keep the internal
+  // detail key stable for agent/MCP callers that already navigate by brand-kit
+  // id, while the URL is now /library/:id.
+  const library = pathname.match(/^\/(?:library|brand-kits)\/([^/]+)/);
   if (library) {
     return {
       view: "library",
-      libraryId: library[1],
+      selection: decodePathParam(library[1]),
+      libraryId: decodePathParam(library[1]),
       activeTab: optionalLibraryTab(params),
     };
   }
@@ -50,24 +59,40 @@ function navigationFromPath(pathname: string, search = "") {
       view: "create",
     };
   }
-  // The "picker" view is the image Library browser (route /library).
   if (pathname === "/library") {
+    if (isPickerRequest(params)) {
+      return {
+        view: "picker",
+        mediaType:
+          params.get("mediaType") === "video"
+            ? "video"
+            : params.get("mediaType") === "image"
+              ? "image"
+              : undefined,
+        libraryId: optionalParam(params, "libraryId"),
+        query: optionalParam(params, "q"),
+        prompt: optionalParam(params, "prompt"),
+        aspectRatio: optionalParam(params, "aspectRatio"),
+      };
+    }
+    const queryLibraryId = optionalParam(params, "libraryId");
+    if (queryLibraryId) {
+      return {
+        view: "library",
+        selection: queryLibraryId,
+        libraryId: queryLibraryId,
+        activeTab: optionalLibraryTab(params),
+      };
+    }
     return {
-      view: "picker",
-      mediaType:
-        params.get("mediaType") === "video"
-          ? "video"
-          : params.get("mediaType") === "image"
-            ? "image"
-            : undefined,
-      libraryId: optionalParam(params, "libraryId"),
-      query: optionalParam(params, "q"),
-      prompt: optionalParam(params, "prompt"),
-      aspectRatio: optionalParam(params, "aspectRatio"),
+      view: "library",
+      selection: "all",
+      tab: optionalParam(params, "tab"),
+      scope: optionalParam(params, "scope"),
+      search: optionalParam(params, "q"),
     };
   }
-  // The "libraries" view is the Brand Kits list (route /brand-kits).
-  if (pathname === "/brand-kits") return { view: "libraries" };
+  if (pathname === "/brand-kits") return { view: "library", selection: "all" };
   if (pathname === "/extensions") return { view: "extensions" };
   const extension = pathname.match(/^\/extensions\/([^/]+)/);
   if (extension) return { view: "extensions", extensionId: extension[1] };
@@ -85,7 +110,7 @@ function pathFromCommand(command: any): string | null {
       params.set("tab", command.activeTab);
     }
     const query = params.toString();
-    return `/brand-kits/${command.libraryId}${query ? `?${query}` : ""}`;
+    return `/library/${command.libraryId}${query ? `?${query}` : ""}`;
   }
   if (
     (command.view === "asset" || command.view === "image") &&
@@ -100,7 +125,7 @@ function pathFromCommand(command: any): string | null {
   ) {
     const tab =
       typeof command.activeTab === "string" ? command.activeTab : "runs";
-    return `/brand-kits/${command.libraryId}?tab=${encodeURIComponent(tab)}`;
+    return `/library/${command.libraryId}?tab=${encodeURIComponent(tab)}`;
   }
   if (command.view === "audit") return "/audit";
   if (command.view === "settings") return "/settings";
@@ -112,6 +137,7 @@ function pathFromCommand(command: any): string | null {
   }
   if (command.view === "picker") {
     const params = new URLSearchParams();
+    params.set("__an_picker", "1");
     if (command.mediaType === "image" || command.mediaType === "video") {
       params.set("mediaType", command.mediaType);
     }
@@ -130,7 +156,7 @@ function pathFromCommand(command: any): string | null {
     const query = params.toString();
     return query ? `/library?${query}` : "/library";
   }
-  if (command.view === "libraries") return "/brand-kits";
+  if (command.view === "libraries") return "/library";
   if (command.view === "extensions" && command.extensionId) {
     return `/extensions/${command.extensionId}`;
   }