@agent-native/core 0.120.1 → 0.120.3

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

@@ -34,8 +34,6 @@ import {
   IconArrowUpRight,
   IconCheck,
   IconChevronDown,
-  IconChevronLeft,
-  IconChevronRight,
   IconClipboard,
   IconLibraryPhoto,
   IconPhotoPlus,
@@ -60,16 +58,10 @@ import {
 } from "react-router";
 import { toast } from "sonner";
 
+import { AssetPreviewDialog as SharedAssetPreviewDialog } from "@/components/asset/AssetPreviewDialog";
 import { LibraryPresetGrid } from "@/components/library/LibraryPresetGrid";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-  DialogClose,
-} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import {
   Popover,
@@ -165,6 +157,12 @@ type Asset = {
   downloadUrl?: string;
   embedUrl?: string;
   embedPath?: string;
+  folderId?: string | null;
+  category?: string | null;
+  model?: string | null;
+  aspectRatio?: string | null;
+  durationSeconds?: number | null;
+  metadata?: Record<string, unknown> | null;
   libraryTitle?: string | null;
   lineage?: {
     label?: string | null;
@@ -829,7 +827,7 @@ function AssetOverlayImage({ asset }: { asset: Asset }) {
       src={source}
       crossOrigin={isCrossOriginPreview(source) ? "anonymous" : undefined}
       alt={asset.altText ?? asset.title ?? ""}
-      className="max-h-[85vh] w-full rounded-lg object-contain"
+      className="max-h-[72vh] max-w-full rounded-lg object-contain"
       onError={() =>
         setSourceIndex((index) =>
           index + 1 < sources.length ? index + 1 : index,
@@ -1542,98 +1540,15 @@ function AssetPreviewDialog({
   assets: Asset[];
   onAssetChange: (asset: Asset | null) => void;
 }) {
-  const t = useT();
   return (
-    <Dialog
-      open={Boolean(asset)}
-      onOpenChange={(open) => {
-        if (!open) onAssetChange(null);
-      }}
-    >
-      {asset &&
-        (() => {
-          const previewIndex = assets.findIndex(
-            (candidate) => candidate.id === asset.id,
-          );
-          const hasPrev = previewIndex > 0;
-          const hasNext = previewIndex >= 0 && previewIndex < assets.length - 1;
-          const showPreviousAsset = () => {
-            if (hasPrev) onAssetChange(assets[previewIndex - 1]);
-          };
-          const showNextAsset = () => {
-            if (hasNext) onAssetChange(assets[previewIndex + 1]);
-          };
-          return (
-            <DialogContent
-              hideClose
-              onKeyDown={(event) => {
-                if (event.key === "ArrowLeft") showPreviousAsset();
-                if (event.key === "ArrowRight") showNextAsset();
-              }}
-              className="max-w-4xl border-0 bg-transparent p-0 shadow-none"
-            >
-              <DialogTitle className="sr-only">
-                {assetDisplayTitle(asset)}
-              </DialogTitle>
-              <DialogDescription className="sr-only">
-                {t("library.fullSizePreview", {
-                  title: assetDisplayTitle(asset),
-                })}
-              </DialogDescription>
-              <div className="relative">
-                <div className="absolute right-2 top-2 z-10 flex items-center gap-2">
-                  <Button asChild variant="outline" size="sm">
-                    <Link to={`/asset/${encodeURIComponent(asset.id)}`}>
-                      {t("library.viewDetails")}
-                    </Link>
-                  </Button>
-                  <DialogClose
-                    aria-label={t("library.closePreview")}
-                    className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/60 text-white transition hover:bg-black/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
-                  >
-                    <IconX className="h-5 w-5" />
-                  </DialogClose>
-                </div>
-                {asset.mediaType === "video" ||
-                asset.mimeType?.startsWith("video/") ? (
-                  <video
-                    src={asset.previewUrl ?? asset.downloadUrl ?? asset.url}
-                    poster={asset.thumbnailUrl}
-                    controls
-                    autoPlay
-                    playsInline
-                    className="max-h-[85vh] w-full rounded-lg bg-black object-contain"
-                  />
-                ) : (
-                  <AssetOverlayImage asset={asset} />
-                )}
-              </div>
-              {(hasPrev || hasNext) && (
-                <div className="mt-5 flex justify-center gap-2">
-                  <button
-                    type="button"
-                    aria-label={t("library.previousImage")}
-                    onClick={showPreviousAsset}
-                    disabled={!hasPrev}
-                    className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/60 text-white transition hover:bg-black/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:cursor-not-allowed disabled:opacity-40"
-                  >
-                    <IconChevronLeft className="h-5 w-5" />
-                  </button>
-                  <button
-                    type="button"
-                    aria-label={t("library.nextImage")}
-                    onClick={showNextAsset}
-                    disabled={!hasNext}
-                    className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/60 text-white transition hover:bg-black/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:cursor-not-allowed disabled:opacity-40"
-                  >
-                    <IconChevronRight className="h-5 w-5" />
-                  </button>
-                </div>
-              )}
-            </DialogContent>
-          );
-        })()}
-    </Dialog>
+    <SharedAssetPreviewDialog
+      asset={asset}
+      assets={assets}
+      onAssetChange={(next) => onAssetChange(next as Asset | null)}
+      renderImage={(previewAsset) => (
+        <AssetOverlayImage asset={previewAsset as Asset} />
+      )}
+    />
   );
 }
 
@@ -3487,103 +3402,11 @@ export function AssetPickerSurface() {
         )}
       </main>
 
-      <Dialog
-        open={Boolean(previewAsset)}
-        onOpenChange={(open) => {
-          if (!open) setPreviewAsset(null);
-        }}
-      >
-        {previewAsset &&
-          (() => {
-            const previewIndex = assets.findIndex(
-              (asset) => asset.id === previewAsset.id,
-            );
-            const hasPrev = previewIndex > 0;
-            const hasNext =
-              previewIndex >= 0 && previewIndex < assets.length - 1;
-            const showPreviousAsset = () => {
-              if (hasPrev) setPreviewAsset(assets[previewIndex - 1]);
-            };
-            const showNextAsset = () => {
-              if (hasNext) setPreviewAsset(assets[previewIndex + 1]);
-            };
-            return (
-              <DialogContent
-                hideClose
-                onKeyDown={(event) => {
-                  if (event.key === "ArrowLeft") showPreviousAsset();
-                  if (event.key === "ArrowRight") showNextAsset();
-                }}
-                className="max-w-4xl border-0 bg-transparent p-0 shadow-none"
-              >
-                <DialogTitle className="sr-only">
-                  {assetDisplayTitle(previewAsset)}
-                </DialogTitle>
-                <DialogDescription className="sr-only">
-                  {t("library.fullSizePreview", {
-                    title: assetDisplayTitle(previewAsset),
-                  })}
-                </DialogDescription>
-                <div className="relative">
-                  <div className="absolute right-2 top-2 z-10 flex items-center gap-2">
-                    <Button asChild variant="outline" size="sm">
-                      <Link
-                        to={`/asset/${encodeURIComponent(previewAsset.id)}`}
-                      >
-                        {t("library.viewDetails")}
-                      </Link>
-                    </Button>
-                    <DialogClose
-                      aria-label={t("library.closePreview")}
-                      className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/60 text-white transition hover:bg-black/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
-                    >
-                      <IconX className="h-5 w-5" />
-                    </DialogClose>
-                  </div>
-                  {previewAsset.mediaType === "video" ||
-                  previewAsset.mimeType?.startsWith("video/") ? (
-                    <video
-                      src={
-                        previewAsset.previewUrl ??
-                        previewAsset.downloadUrl ??
-                        previewAsset.url
-                      }
-                      poster={previewAsset.thumbnailUrl}
-                      controls
-                      autoPlay
-                      playsInline
-                      className="max-h-[85vh] w-full rounded-lg bg-black object-contain"
-                    />
-                  ) : (
-                    <AssetOverlayImage asset={previewAsset} />
-                  )}
-                </div>
-                {(hasPrev || hasNext) && (
-                  <div className="mt-5 flex justify-center gap-2">
-                    <button
-                      type="button"
-                      aria-label={t("library.previousImage")}
-                      onClick={showPreviousAsset}
-                      disabled={!hasPrev}
-                      className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/60 text-white transition hover:bg-black/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:cursor-not-allowed disabled:opacity-40"
-                    >
-                      <IconChevronLeft className="h-5 w-5" />
-                    </button>
-                    <button
-                      type="button"
-                      aria-label={t("library.nextImage")}
-                      onClick={showNextAsset}
-                      disabled={!hasNext}
-                      className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/60 text-white transition hover:bg-black/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white disabled:cursor-not-allowed disabled:opacity-40"
-                    >
-                      <IconChevronRight className="h-5 w-5" />
-                    </button>
-                  </div>
-                )}
-              </DialogContent>
-            );
-          })()}
-      </Dialog>
+      <AssetPreviewDialog
+        asset={previewAsset}
+        assets={assets}
+        onAssetChange={setPreviewAsset}
+      />
     </div>
   );
 }

package/corpus/templates/assets/changelog/2026-07-21-unified-asset-preview-click-any-asset-to-open-one-preview-wi.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-21
+---
+
+Unified asset preview: clicking an asset anywhere (create drafts, library, brand kits, generated candidates) now opens one side-panel preview with the image, a details panel, and next/previous navigation instead of a separate page

package/corpus/templates/assets/changelog/2026-07-23-assets-image-generation-now-recovers-after-a-completed-tool-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-23
+---
+
+Assets image generation now recovers after a completed tool run.

package/corpus/templates/assets/changelog/2026-07-24-borderless-secondary-surfaces.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-24
+---
+
+Secondary controls and dashboard surfaces now use quieter borderless styling.

package/corpus/templates/assets/changelog/2026-07-24-sidebar-footer-controls-follow-a-consistent-order.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-24
+---
+
+Sidebar utility controls now follow a consistent footer order.

package/corpus/templates/assets/netlify.toml

@@ -6,6 +6,7 @@ functions = "templates/assets/.netlify/functions-internal"
 
 [build.environment]
 GA_MEASUREMENT_ID = "G-ESF7FYXGN9"
+GTM_CONTAINER_ID = "GTM-N3WSTXZ"
 NITRO_PRESET = "netlify"
 NPM_CONFIG_PRODUCTION = "false"
 AGENT_CHAT_DURABLE_BACKGROUND = "true"

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

@@ -1,6 +1,7 @@
 import {
   AgentSidebar,
   focusAgentChat,
+  isAgentChatHomeHandoffActive,
   navigateWithAgentChatViewTransition,
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
@@ -44,6 +45,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
     activePath: location.pathname,
     enabled: !isAskRoute,
   });
+  const chatHomeHandoffPending = isAgentChatHomeHandoffActive("brain");
   useAgentChatHomeHandoffLinks({
     storageKey: "brain",
     chatPath: "/",
@@ -129,6 +131,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <AgentSidebar
         position="right"
         chatViewTransition
+        chatViewTransitionHandoff={chatHomeHandoffPending}
         storageKey="brain"
         browserTabId={TAB_ID}
         openOnChatRunning={chatHomeHandoffActive}

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

@@ -5,10 +5,11 @@ import {
 } from "@agent-native/core/client/agent-chat";
 import { appPath } from "@agent-native/core/client/api-path";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
-import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
-import { useT } from "@agent-native/core/client/i18n";
+import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
+import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
+import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import {
   ChatHistoryRail,
   type ChatHistoryItem,
@@ -16,6 +17,7 @@ import {
 import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
+  IconSearch,
 } from "@tabler/icons-react";
 import { useEffect, useMemo } from "react";
 import { Link, NavLink, useLocation, useNavigate } from "react-router";
@@ -29,6 +31,13 @@ import {
 import { navItems } from "@/lib/brain";
 import { cn } from "@/lib/utils";
 
+const primaryNavItems = navItems.filter(
+  (item) => item.view !== "agent" && item.view !== "settings",
+);
+const bottomNavItems = navItems.filter(
+  (item) => item.view === "agent" || item.view === "settings",
+);
+
 const BRAIN_CHAT_STORAGE_KEY = "brain";
 const BRAIN_ACTIVE_THREAD_KEY = `agent-chat-active-thread:${BRAIN_CHAT_STORAGE_KEY}`;
 
@@ -80,7 +89,7 @@ function persistedActiveThreadId() {
   }
 }
 
-function BrainChatsSection() {
+function BrainChatsSection({ open }: { open: boolean }) {
   const navigate = useNavigate();
   const t = useT();
   const {
@@ -175,38 +184,44 @@ function BrainChatsSection() {
   }
 
   return (
-    <div className="mt-2 ms-4">
-      <ChatHistoryRail
-        items={chatItems}
-        activeId={activeThreadId}
-        onSelect={openThread}
-        onNewChat={() => void handleNewChat()}
-        railLabels={{
-          newChat: t("chat.newChat"),
-          showMore: t("chat.chats"),
-          showLess: t("chat.chats"),
-        }}
-        previewCount={5}
-        expandedCount={15}
-        onTogglePin={(threadId) => {
-          const thread = visibleThreads.find((item) => item.id === threadId);
-          if (thread) void pinThread(threadId, !thread.pinnedAt);
-        }}
-        onRename={handleRenameThread}
-        renameMaxLength={160}
-        onDelete={(threadId) => void handleArchiveThread(threadId)}
-        labels={{
-          options: (item) =>
-            t("chat.optionsFor", { title: item.titleText ?? "" }),
-          renameInput: (item) =>
-            t("chat.renameThread", { title: item.titleText ?? "" }),
-          rename: t("chat.renameChat"),
-          pin: t("chat.pinChat"),
-          unpin: t("chat.unpinChat"),
-          delete: t("chat.archiveChat"),
-        }}
-        className="min-w-0"
-      />
+    <div
+      className="an-chat-history-rail__collapse"
+      data-state={open ? "open" : "closed"}
+      aria-hidden={!open}
+    >
+      <div className="ms-4">
+        <ChatHistoryRail
+          items={chatItems}
+          activeId={activeThreadId}
+          onSelect={openThread}
+          onNewChat={() => void handleNewChat()}
+          railLabels={{
+            newChat: t("chat.newChat"),
+            showMore: t("chat.chats"),
+            showLess: t("chat.chats"),
+          }}
+          previewCount={5}
+          expandedCount={15}
+          onTogglePin={(threadId) => {
+            const thread = visibleThreads.find((item) => item.id === threadId);
+            if (thread) void pinThread(threadId, !thread.pinnedAt);
+          }}
+          onRename={handleRenameThread}
+          renameMaxLength={160}
+          onDelete={(threadId) => void handleArchiveThread(threadId)}
+          labels={{
+            options: (item) =>
+              t("chat.optionsFor", { title: item.titleText ?? "" }),
+            renameInput: (item) =>
+              t("chat.renameThread", { title: item.titleText ?? "" }),
+            rename: t("chat.renameChat"),
+            pin: t("chat.pinChat"),
+            unpin: t("chat.unpinChat"),
+            delete: t("chat.archiveChat"),
+          }}
+          className="min-w-0"
+        />
+      </div>
     </div>
   );
 }
@@ -256,6 +271,31 @@ export function Sidebar({
       </TooltipContent>
     </Tooltip>
   ) : null;
+  const searchButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={openCommandMenu}
+          aria-label={t("navigation.search")}
+          className="flex size-8 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <IconSearch className="size-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">{t("navigation.search")}</TooltipContent>
+    </Tooltip>
+  );
+  const translateButton = (
+    <LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
+  );
+  const feedbackButton = (
+    <FeedbackButton
+      variant={collapsed ? "icon" : "sidebar"}
+      side="right"
+      className={collapsed ? "h-8 w-8" : "min-w-0"}
+    />
+  );
 
   return (
     <aside
@@ -311,7 +351,7 @@ export function Sidebar({
             collapsed ? "justify-items-center gap-1" : "gap-1",
           )}
         >
-          {navItems.map((item) => {
+          {primaryNavItems.map((item) => {
             const Icon = item.icon;
             const label =
               item.view === "agent"
@@ -354,7 +394,7 @@ export function Sidebar({
                   link
                 )}
                 {!collapsed && item.view === "ask" && isAskRoute ? (
-                  <BrainChatsSection />
+                  <BrainChatsSection open />
                 ) : null}
               </div>
             );
@@ -362,13 +402,37 @@ export function Sidebar({
         </div>
       </nav>
 
-      <div className="mt-auto shrink-0">
-        {!collapsed ? (
-          <div className="px-2 py-1">
-            <ExtensionsSidebarSection />
-          </div>
-        ) : null}
+      <nav className="grid shrink-0 gap-1 px-2 py-1">
+        {bottomNavItems.map((item) => {
+          const Icon = item.icon;
+          const label =
+            item.view === "agent"
+              ? t("settings.agentTitle")
+              : t(`navigation.${item.view}`);
+          const link = (
+            <NavLink
+              to={item.href}
+              className={navClass}
+              aria-label={collapsed ? label : undefined}
+            >
+              <Icon className="size-4 shrink-0" />
+              <span className={collapsed ? "sr-only" : "truncate"}>
+                {label}
+              </span>
+            </NavLink>
+          );
+          return collapsed ? (
+            <Tooltip key={item.href}>
+              <TooltipTrigger asChild>{link}</TooltipTrigger>
+              <TooltipContent side="right">{label}</TooltipContent>
+            </Tooltip>
+          ) : (
+            <div key={item.href}>{link}</div>
+          );
+        })}
+      </nav>
 
+      <div className="mt-auto shrink-0">
         {!collapsed ? (
           <div className="px-3 py-2">
             <OrgSwitcher reserveSpace />
@@ -378,16 +442,15 @@ export function Sidebar({
         {!collapsed ? (
           <div className="px-3 py-2">
             <DevDatabaseLink />
-            <div className="flex items-center justify-end gap-1">
-              <FeedbackButton className="min-w-0 flex-1" side="right" />
-              {collapseButton}
-            </div>
           </div>
         ) : null}
-
-        {collapsed && collapseButton ? (
-          <div className="flex justify-center px-2 py-2">{collapseButton}</div>
-        ) : null}
+        <SidebarFooterActions
+          collapsed={collapsed}
+          feedback={feedbackButton}
+          translate={translateButton}
+          search={searchButton}
+          collapse={collapseButton}
+        />
       </div>
     </aside>
   );

package/corpus/templates/brain/app/global.css

@@ -22,7 +22,7 @@
   --muted-foreground: 0 0% 45%;
   --accent: 0 0% 95%;
   --accent-foreground: 0 0% 15%;
-  --destructive: 0 84% 60%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 90%;
   --input: 0 0% 90%;

package/corpus/templates/brain/app/routes/extensions._index.tsx

@@ -1,4 +1,4 @@
-import { ExtensionsListPage } from "@agent-native/core/client/extensions";
+import { Navigate } from "react-router";
 
 import { messagesByLocale } from "@/i18n-data";
 
@@ -7,5 +7,5 @@ export function meta() {
 }
 
 export default function ExtensionsRoute() {
-  return <ExtensionsListPage />;
+  return <Navigate to="/settings#extensions" replace />;
 }

package/corpus/templates/brain/changelog/2026-07-24-borderless-secondary-surfaces.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-24
+---
+
+Secondary controls and dashboard surfaces now use quieter borderless styling.

package/corpus/templates/brain/changelog/2026-07-24-sidebar-footer-controls-follow-a-consistent-order.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-24
+---
+
+Sidebar utility controls now follow a consistent footer order.

package/corpus/templates/brain/netlify.toml

@@ -6,6 +6,7 @@ functions = "templates/brain/.netlify/functions-internal"
 
 [build.environment]
 GA_MEASUREMENT_ID = "G-ESF7FYXGN9"
+GTM_CONTAINER_ID = "GTM-N3WSTXZ"
 NITRO_PRESET = "netlify"
 NPM_CONFIG_PRODUCTION = "false"