@agent-native/core 0.120.2 → 0.120.4

package/corpus/templates/macros/app/components/layout/AppLayout.tsx

@@ -1,10 +1,14 @@
 import { AgentSidebar } from "@agent-native/core/client/agent-chat";
 import { agentNativePath, 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 { HeaderActionsProvider } from "@agent-native/toolkit/app-shell";
+import {
+  HeaderActionsProvider,
+  SidebarFooterActions,
+} from "@agent-native/toolkit/app-shell";
 import {
   IconFlame,
   IconLoader2,
@@ -13,6 +17,7 @@ import {
   IconSettings,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
+  IconSearch,
 } from "@tabler/icons-react";
 import {
   useIsFetching,
@@ -197,6 +202,48 @@ function SidebarContent({
   const ToggleIcon = collapsed
     ? IconLayoutSidebarLeftExpand
     : IconLayoutSidebarLeftCollapse;
+  const collapseButton = onToggleCollapsed ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={collapsed ? t("sidebar.expand") : t("sidebar.collapse")}
+          className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
+          onClick={onToggleCollapsed}
+        >
+          <ToggleIcon className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        {collapsed ? t("sidebar.expand") : t("sidebar.collapse")}
+      </TooltipContent>
+    </Tooltip>
+  ) : null;
+  const searchButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={openCommandMenu}
+          aria-label={t("root.search")}
+          className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
+        >
+          <IconSearch className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">{t("root.search")}</TooltipContent>
+    </Tooltip>
+  );
+  const translateButton = (
+    <LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
+  );
+  const feedbackButton = (
+    <FeedbackButton
+      variant={collapsed ? "icon" : "sidebar"}
+      side="right"
+      className={collapsed ? "size-8" : "min-w-0"}
+    />
+  );
 
   return (
     <div className="flex h-full flex-col">
@@ -225,32 +272,6 @@ function SidebarContent({
             </span>
           </div>
         )}
-        {onToggleCollapsed && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                aria-label={
-                  collapsed
-                    ? t("sidebar.expandLeftSidebar")
-                    : t("sidebar.collapseLeftSidebar")
-                }
-                className={cn(
-                  "hidden h-8 w-8 text-muted-foreground hover:text-foreground md:inline-flex",
-                  collapsed && "mx-auto",
-                )}
-                onClick={onToggleCollapsed}
-              >
-                <ToggleIcon className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right">
-              {collapsed ? t("sidebar.expand") : t("sidebar.collapse")}
-            </TooltipContent>
-          </Tooltip>
-        )}
       </div>
 
       <nav className="flex-1 space-y-1 overflow-y-auto px-2 py-2">
@@ -326,11 +347,17 @@ function SidebarContent({
         <>
           <div className="space-y-2 px-3 py-2">
             <DevDatabaseLink />
-            <FeedbackButton />
             <OrgSwitcher />
           </div>
         </>
       )}
+      <SidebarFooterActions
+        collapsed={collapsed}
+        feedback={feedbackButton}
+        translate={translateButton}
+        search={searchButton}
+        collapse={collapseButton}
+      />
     </div>
   );
 }

package/corpus/templates/macros/app/components/ui/button.tsx

@@ -12,8 +12,7 @@ const buttonVariants = cva(
         default: "bg-foreground text-background hover:bg-foreground/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-border/50 bg-transparent hover:bg-secondary/60 hover:border-border",
+        outline: "bg-accent text-accent-foreground hover:bg-accent/80",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-secondary/60",

package/corpus/templates/macros/app/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-2xl border border-border/40 bg-card text-card-foreground shadow-sm transition-all duration-200",
+      "rounded-2xl bg-card text-card-foreground shadow-sm transition-all duration-200",
       className,
     )}
     {...props}

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

@@ -23,7 +23,7 @@
   --muted-foreground: 0 0% 50%;
   --accent: 0 0% 18%;
   --accent-foreground: 0 0% 98%;
-  --destructive: 0 72% 51%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 24%;
   --input: 0 0% 24%;

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

@@ -131,7 +131,7 @@ export default function IndexPage() {
           >
             <IconChevronLeft className="h-5 w-5 sm:h-4 sm:w-4 rtl:-scale-x-100" />
           </Button>
-          <div className="min-w-[140px] sm:min-w-[160px] text-center px-3 sm:px-4 py-2 rounded-full bg-card border border-border">
+          <div className="min-w-[140px] sm:min-w-[160px] text-center px-3 sm:px-4 py-2 rounded-full bg-card">
             <span className="text-sm font-medium text-foreground">
               {isSameDay(date, new Date())
                 ? t("entry.today")

package/corpus/templates/macros/app/routes/analytics.tsx

@@ -167,10 +167,7 @@ export default function AnalyticsPage() {
               unit: t("analytics.daysUnit"),
             },
           ].map((stat) => (
-            <div
-              key={stat.label}
-              className="p-3 sm:p-4 rounded-xl bg-card/40 border border-border/30"
-            >
+            <div key={stat.label} className="p-3 sm:p-4 rounded-xl bg-card/40">
               <p className="text-[10px] uppercase tracking-widest text-muted-foreground font-medium mb-1.5 sm:mb-2">
                 {stat.label}
               </p>
@@ -187,7 +184,7 @@ export default function AnalyticsPage() {
         </div>
 
         {/* Calorie Trend Chart */}
-        <Card className="border-border/40 bg-card/60 backdrop-blur-md overflow-hidden">
+        <Card className="bg-card/60 backdrop-blur-md overflow-hidden">
           <CardHeader className="pb-4">
             <CardTitle className="text-base font-medium">
               Calorie Trend (
@@ -306,7 +303,7 @@ export default function AnalyticsPage() {
         </Card>
 
         {/* Weekly Net Calories */}
-        <Card className="border-border/40 bg-card/60 backdrop-blur-md overflow-hidden">
+        <Card className="bg-card/60 backdrop-blur-md overflow-hidden">
           <CardHeader className="pb-4">
             <CardTitle className="text-base font-medium">
               Weekly Net Calories vs Goal (
@@ -333,7 +330,7 @@ export default function AnalyticsPage() {
         </Card>
 
         {/* Weight Chart */}
-        <Card className="border-border/40 bg-card/60 backdrop-blur-md overflow-hidden">
+        <Card className="bg-card/60 backdrop-blur-md overflow-hidden">
           <CardHeader className="pb-4">
             <CardTitle className="text-base font-medium">
               Weight Trend (

package/corpus/templates/macros/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/macros/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/mail/app/components/layout/AppLayout.tsx

@@ -5,9 +5,11 @@ import {
 import { agentNativePath } from "@agent-native/core/client/api-path";
 import { appApiPath } 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 { InvitationBanner, OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
+import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import { normalizeMailLabel } from "@shared/gmail-labels";
 import type { Label } from "@shared/types";
 import {
@@ -383,6 +385,60 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     if (!sidebarPinned || isMobile) setSidebarOpen(false);
   }, [sidebarPinned, isMobile]);
 
+  const collapseButton =
+    sidebarPinned && !isMobile ? (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            onClick={() => setSidebarCollapsed((value) => !value)}
+            className="flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+            aria-label={
+              showCollapsedSidebar
+                ? t("sidebar.expandSidebar")
+                : t("sidebar.collapseSidebar")
+            }
+          >
+            {showCollapsedSidebar ? (
+              <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">
+          {showCollapsedSidebar
+            ? t("sidebar.expandSidebar")
+            : t("sidebar.collapseSidebar")}
+        </TooltipContent>
+      </Tooltip>
+    ) : null;
+  const searchButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={openCommandMenu}
+          className="flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+          aria-label={t("mail.search.label")}
+        >
+          <IconSearch className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">{t("mail.search.label")}</TooltipContent>
+    </Tooltip>
+  );
+  const translateButton = (
+    <LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
+  );
+  const feedbackButton = (
+    <FeedbackButton
+      variant={showCollapsedSidebar ? "icon" : "sidebar"}
+      side="right"
+      className={showCollapsedSidebar ? "size-8" : "min-w-0"}
+    />
+  );
+
   // Drag-to-reorder tabs
   const [dragPinnedId, setDragPinnedId] = useState<string | null>(null);
   const [dropIndicator, setDropIndicator] = useState<{
@@ -890,6 +946,13 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     },
   ]);
 
+  useEffect(() => {
+    const handler = () => setPaletteOpen(true);
+    window.addEventListener("agent-native:open-command-menu", handler);
+    return () =>
+      window.removeEventListener("agent-native:open-command-menu", handler);
+  }, []);
+
   // Sequence shortcuts (g + key = go to view)
   const qc = useQueryClient();
   useSequenceShortcuts([
@@ -1436,45 +1499,12 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                     : "justify-between px-4",
                 )}
               >
-                {showCollapsedSidebar ? (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <button
-                        type="button"
-                        onClick={() => setSidebarCollapsed(false)}
-                        className="flex h-10 w-10 items-center justify-center rounded text-muted-foreground hover:bg-accent/50 hover:text-foreground"
-                        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>
-                ) : (
+                {showCollapsedSidebar ? null : (
                   <>
                     <span className="text-[13px] font-medium text-foreground">
                       {t("mail.appName")}
                     </span>
                     <div className="flex items-center gap-1">
-                      {sidebarPinned && !isMobile ? (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <button
-                              type="button"
-                              onClick={() => setSidebarCollapsed(true)}
-                              className="flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:bg-accent/50 hover:text-foreground"
-                              aria-label={t("sidebar.collapseSidebar")}
-                            >
-                              <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
-                            </button>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            {t("sidebar.collapseSidebar")}
-                          </TooltipContent>
-                        </Tooltip>
-                      ) : null}
                       <Tooltip>
                         <TooltipTrigger asChild>
                           <button
@@ -1745,7 +1775,6 @@ function AppLayoutInner({ children }: AppLayoutProps) {
 
                     <div className="flex items-center justify-end gap-1 px-2 py-2">
                       <DevDatabaseLink />
-                      <FeedbackButton className="min-w-0 flex-1" />
                       <Tooltip>
                         <TooltipTrigger asChild>
                           <Link
@@ -1789,6 +1818,14 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                   </div>
                 </>
               )}
+              <SidebarFooterActions
+                collapsed={showCollapsedSidebar}
+                feedback={feedbackButton}
+                translate={translateButton}
+                search={searchButton}
+                collapse={collapseButton}
+                className={showCollapsedSidebar ? undefined : "px-0 py-0"}
+              />
             </div>
           </>
         )}
@@ -1975,6 +2012,51 @@ function StandardLayout({ children }: AppLayoutProps) {
   const queuedDrafts = useQueuedDraftCount();
   const view = location.pathname.split("/").filter(Boolean)[0] || "";
 
+  const collapseButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={() => setSidebarOpen(false)}
+          className="flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+          aria-label={t("sidebar.collapseSidebar")}
+        >
+          <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        {t("sidebar.collapseSidebar")}
+      </TooltipContent>
+    </Tooltip>
+  );
+  const searchButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={() => {
+            setSidebarOpen(false);
+            window.setTimeout(
+              () => document.getElementById("mail-search")?.focus(),
+              0,
+            );
+          }}
+          className="flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+          aria-label={t("mail.search.label")}
+        >
+          <IconSearch className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">{t("mail.search.label")}</TooltipContent>
+    </Tooltip>
+  );
+  const translateButton = (
+    <LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
+  );
+  const feedbackButton = (
+    <FeedbackButton variant="sidebar" side="right" className="min-w-0" />
+  );
+
   // Extensions (`/extensions` list and `/extensions/:id` viewer) render their own h-12
   // toolbar inside the shared
   // ExtensionViewer / ExtensionsListPage components. Skip our header to avoid stacking.
@@ -2113,7 +2195,6 @@ function StandardLayout({ children }: AppLayoutProps) {
 
             <div className="flex items-center justify-end gap-1 px-2 py-2">
               <DevDatabaseLink />
-              <FeedbackButton className="min-w-0 flex-1" />
               <div className="flex shrink-0 items-center gap-0.5">
                 <Tooltip>
                   <TooltipTrigger asChild>
@@ -2154,6 +2235,13 @@ function StandardLayout({ children }: AppLayoutProps) {
                 <ThemeToggle className="h-8 w-8 shrink-0" />
               </div>
             </div>
+            <SidebarFooterActions
+              feedback={feedbackButton}
+              translate={translateButton}
+              search={searchButton}
+              collapse={collapseButton}
+              className="px-0 py-0"
+            />
           </div>
         </div>
       </>

package/corpus/templates/mail/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/mail/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/mail/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/plan/app/components/layout/Layout.tsx

@@ -1,5 +1,6 @@
 import {
   AgentSidebar,
+  isAgentChatHomeHandoffActive,
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
 } from "@agent-native/core/client/agent-chat";
@@ -92,6 +93,7 @@ export function Layout({ children }: LayoutProps) {
     activePath: location.pathname,
     enabled: !chatRoute,
   });
+  const chatHomeHandoffPending = isAgentChatHomeHandoffActive("plans");
   useAgentChatHomeHandoffLinks({
     storageKey: "plans",
     chatPath: "/",
@@ -206,6 +208,7 @@ export function Layout({ children }: LayoutProps) {
             position="right"
             defaultOpen={false}
             chatViewTransition
+            chatViewTransitionHandoff={chatHomeHandoffPending}
             storageKey="plans"
             openOnChatRunning={chatHomeHandoffActive}
             agentPageHref="/agent"