@agent-native/core 0.120.2 → 0.120.4

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-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/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,9 +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 { 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,
@@ -15,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";
@@ -86,7 +89,7 @@ function persistedActiveThreadId() {
   }
 }
 
-function BrainChatsSection() {
+function BrainChatsSection({ open }: { open: boolean }) {
   const navigate = useNavigate();
   const t = useT();
   const {
@@ -181,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>
   );
 }
@@ -262,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
@@ -360,7 +394,7 @@ export function Sidebar({
                   link
                 )}
                 {!collapsed && item.view === "ask" && isAskRoute ? (
-                  <BrainChatsSection />
+                  <BrainChatsSection open />
                 ) : null}
               </div>
             );
@@ -408,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/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/calendar/app/components/layout/Sidebar.tsx

@@ -1,8 +1,10 @@
 import { appPath } from "@agent-native/core/client/api-path";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
-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 {
   IconHierarchy2,
   IconCalendar,
@@ -22,6 +24,7 @@ import {
   IconEyeOff,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
+  IconSearch,
 } from "@tabler/icons-react";
 import {
   startOfMonth,
@@ -703,6 +706,61 @@ export function Sidebar({
     onClose();
   }
 
+  const collapseButton = onCollapsedChange ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 shrink-0 text-muted-foreground"
+          onClick={() => onCollapsedChange(!collapsed)}
+          aria-label={
+            collapsed
+              ? t("sidebar.expandSidebar")
+              : t("sidebar.collapseSidebar")
+          }
+        >
+          {collapsed ? (
+            <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
+          ) : (
+            <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
+          )}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        {collapsed ? t("sidebar.expandSidebar") : t("sidebar.collapseSidebar")}
+      </TooltipContent>
+    </Tooltip>
+  ) : null;
+  const searchButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-muted-foreground"
+          onClick={openCommandMenu}
+          aria-label={t("root.commandSearch")}
+        >
+          <IconSearch className="h-4 w-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="top">{t("root.commandSearch")}</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 (
     <>
       {/* Mobile overlay */}
@@ -728,25 +786,7 @@ export function Sidebar({
             collapsed ? "px-1" : "px-4",
           )}
         >
-          {collapsed && onCollapsedChange ? (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="h-10 w-10 shrink-0 text-muted-foreground"
-                  onClick={() => onCollapsedChange(false)}
-                  aria-label={t("sidebar.expandSidebar")}
-                >
-                  <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="right">
-                {t("sidebar.expandSidebar")}
-              </TooltipContent>
-            </Tooltip>
-          ) : (
+          {!collapsed && (
             <>
               <Link
                 to="/"
@@ -769,35 +809,6 @@ export function Sidebar({
                   {t("navigation.brand")}
                 </span>
               </Link>
-              {onCollapsedChange ? (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8 shrink-0 text-muted-foreground"
-                      onClick={() => onCollapsedChange(!collapsed)}
-                      aria-label={
-                        collapsed
-                          ? t("sidebar.expandSidebar")
-                          : t("sidebar.collapseSidebar")
-                      }
-                    >
-                      {collapsed ? (
-                        <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
-                      ) : (
-                        <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
-                      )}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">
-                    {collapsed
-                      ? t("sidebar.expandSidebar")
-                      : t("sidebar.collapseSidebar")}
-                  </TooltipContent>
-                </Tooltip>
-              ) : null}
             </>
           )}
         </div>
@@ -1173,9 +1184,6 @@ export function Sidebar({
 
             <div className="flex items-center gap-1 px-1.5 py-1.5">
               <DevDatabaseLink />
-              <div className="min-w-0 flex-1">
-                <FeedbackButton className="px-3 py-2" />
-              </div>
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -1202,6 +1210,13 @@ export function Sidebar({
             </div>
           </div>
         ) : null}
+        <SidebarFooterActions
+          collapsed={collapsed}
+          feedback={feedbackButton}
+          translate={translateButton}
+          search={searchButton}
+          collapse={collapseButton}
+        />
       </aside>
     </>
   );