@agent-native/core 0.120.2 → 0.120.3

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

@@ -1,6 +1,7 @@
 import {
   AgentSidebar,
   focusAgentChat,
+  isAgentChatHomeHandoffActive,
   navigateWithAgentChatViewTransition,
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
@@ -37,6 +38,7 @@ export function Layout({ children }: LayoutProps) {
     activePath: location.pathname,
     enabled: !isAskRoute,
   });
+  const chatHomeHandoffPending = isAgentChatHomeHandoffActive("forms");
   useAgentChatHomeHandoffLinks({
     storageKey: "forms",
     chatPath: "/ask",
@@ -90,6 +92,7 @@ export function Layout({ children }: LayoutProps) {
             agentPageHref="/agent"
             defaultOpen={false}
             chatViewTransition
+            chatViewTransitionHandoff={chatHomeHandoffPending}
             storageKey="forms"
             browserTabId={TAB_ID}
             openOnChatRunning={chatHomeHandoffActive}

package/corpus/templates/forms/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 {
   IconArrowUp,
   IconPlus,
@@ -20,6 +22,7 @@ import {
   IconForms,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
+  IconSearch,
 } from "@tabler/icons-react";
 import { useState, useRef, useEffect, type MouseEvent } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
@@ -70,6 +73,59 @@ export function Sidebar() {
   });
   const effectiveCollapsed = collapsed && !isMobile;
 
+  const collapseButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={() => setCollapsed((value) => !value)}
+          className="flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+          aria-label={
+            effectiveCollapsed
+              ? t("sidebar.expandSidebar")
+              : t("sidebar.collapseSidebar")
+          }
+        >
+          {effectiveCollapsed ? (
+            <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">
+        {effectiveCollapsed
+          ? t("sidebar.expandSidebar")
+          : t("sidebar.collapseSidebar")}
+      </TooltipContent>
+    </Tooltip>
+  );
+  const searchButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={openCommandMenu}
+          className="flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+          aria-label={t("root.searchForms")}
+        >
+          <IconSearch className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">{t("root.searchForms")}</TooltipContent>
+    </Tooltip>
+  );
+  const translateButton = (
+    <LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
+  );
+  const feedbackButton = (
+    <FeedbackButton
+      variant={effectiveCollapsed ? "icon" : "sidebar"}
+      side="right"
+      className={effectiveCollapsed ? "size-8" : "min-w-0"}
+    />
+  );
+
   useEffect(() => {
     if (popoverOpen) {
       setPrompt("");
@@ -198,22 +254,6 @@ export function Sidebar() {
   const sidebarContent = effectiveCollapsed ? (
     <div className="agent-layout-left-drawer flex h-screen w-12 min-w-0 shrink-0 flex-col items-center overflow-hidden border-e border-border bg-sidebar py-2 transition-[width] duration-200 ease-out">
       <TooltipProvider delayDuration={0}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              onClick={() => setCollapsed(false)}
-              className="forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg text-muted-foreground/55 transition-[background-color,box-shadow,color,transform] duration-150 ease-out hover:bg-accent/50 hover:text-muted-foreground active:scale-[0.96] motion-reduce:active:scale-100"
-              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>
-
         <nav className="mt-1 flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto">
           <Tooltip>
             <TooltipTrigger asChild>
@@ -318,6 +358,13 @@ export function Sidebar() {
             </Tooltip>
           </div>
         </nav>
+        <SidebarFooterActions
+          collapsed
+          feedback={feedbackButton}
+          translate={translateButton}
+          search={searchButton}
+          collapse={collapseButton}
+        />
       </TooltipProvider>
     </div>
   ) : (
@@ -368,24 +415,6 @@ export function Sidebar() {
             <IconX size={18} />
           </Button>
         )}
-        {!isMobile && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="size-10 text-muted-foreground/55 transition-[background-color,box-shadow,color,transform] hover:bg-accent/50 hover:text-muted-foreground active:scale-[0.96] motion-reduce:active:scale-100"
-                onClick={() => setCollapsed(true)}
-                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>
-        )}
       </div>
 
       <ScrollArea className="min-h-0 min-w-0 flex-1">
@@ -469,10 +498,16 @@ export function Sidebar() {
       <div className="shrink-0 space-y-2 px-3 py-2">
         <OrgSwitcher />
         <DevDatabaseLink />
-        <div className="flex items-center justify-end gap-2">
-          <FeedbackButton className="min-w-0 flex-1" />
+        <div className="flex justify-end">
           <ThemeToggle className="h-9 w-9 shrink-0" />
         </div>
+        <SidebarFooterActions
+          feedback={feedbackButton}
+          translate={translateButton}
+          search={searchButton}
+          collapse={collapseButton}
+          className="px-0 py-0"
+        />
       </div>
     </div>
   );

package/corpus/templates/forms/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/forms/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/forms/changelog/2026-07-24-forms-sidebar-actions-now-keep-search-language-feedback-and-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-24
+---
+
+Forms sidebar actions now keep search, language, feedback, and collapse controls together.

package/corpus/templates/forms/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/macros/app/components/DailyProgress.tsx

@@ -124,7 +124,7 @@ export function DailyProgress({
   };
 
   return (
-    <div className="relative overflow-hidden rounded-2xl border border-border bg-card p-4 sm:p-5">
+    <div className="relative overflow-hidden rounded-2xl bg-card p-4 sm:p-5">
       <div className="macros-summary-grid">
         {/* Left Side */}
         <div className="space-y-8 flex flex-col justify-center">
@@ -134,7 +134,7 @@ export function DailyProgress({
                 {t("daily.summary")}
               </p>
             </div>
-            <div className="px-3 py-1.5 rounded-full bg-muted/40 border border-border flex items-center">
+            <div className="px-3 py-1.5 rounded-full bg-muted/40 flex items-center">
               <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-widest leading-none">
                 {t("daily.goalWithValue", { value: goalCalories })}
               </span>
@@ -215,7 +215,7 @@ export function DailyProgress({
               ].map((m) => (
                 <div
                   key={m.label}
-                  className="p-2.5 sm:p-3 rounded-xl bg-muted/30 border border-border"
+                  className="p-2.5 sm:p-3 rounded-xl bg-muted/30"
                 >
                   <p className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1">
                     {m.label}
@@ -230,14 +230,14 @@ export function DailyProgress({
         </div>
 
         {/* Right Side: Charts */}
-        <div className="macros-summary-chart border-l border-border pl-8 flex-col justify-center transition-all duration-300">
+        <div className="macros-summary-chart flex-col justify-center transition-all duration-300">
           <Tabs
             value={activeChart}
             onValueChange={setActiveChart}
             className="flex flex-col space-y-6"
           >
             <div className="flex items-center justify-between">
-              <TabsList className="bg-muted/40 border border-border h-8">
+              <TabsList className="bg-muted/40 h-8">
                 <TabsTrigger
                   value="weight"
                   className="gap-2 text-[10px] uppercase tracking-wider h-6 px-3"

package/corpus/templates/macros/app/components/ExerciseCard.tsx

@@ -26,8 +26,8 @@ export function ExerciseCard({
 }: ExerciseCardProps) {
   const t = useT();
   return (
-    <div className="group relative flex items-center gap-3 overflow-hidden rounded-xl border border-border bg-card p-3 hover:bg-accent/40 sm:gap-4 sm:p-4">
-      <div className="flex items-center justify-center w-9 h-9 shrink-0 rounded-lg bg-orange-500/10 border border-orange-500/20">
+    <div className="group relative flex items-center gap-3 overflow-hidden rounded-xl bg-card p-3 hover:bg-accent/40 sm:gap-4 sm:p-4">
+      <div className="flex items-center justify-center w-9 h-9 shrink-0 rounded-lg bg-orange-500/10">
         <IconFlame className="h-4 w-4 text-orange-400" />
       </div>
       <div className="flex-1 min-w-0">

package/corpus/templates/macros/app/components/MealCard.tsx

@@ -26,8 +26,8 @@ export function MealCard({
 }: MealCardProps) {
   const t = useT();
   return (
-    <div className="group relative flex items-center gap-3 overflow-hidden rounded-xl border border-border bg-card p-3 hover:bg-accent/40 sm:gap-4 sm:p-4">
-      <div className="flex items-center justify-center w-9 h-9 shrink-0 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
+    <div className="group relative flex items-center gap-3 overflow-hidden rounded-xl bg-card p-3 hover:bg-accent/40 sm:gap-4 sm:p-4">
+      <div className="flex items-center justify-center w-9 h-9 shrink-0 rounded-lg bg-emerald-500/10">
         <IconToolsKitchen2 className="h-4 w-4 text-emerald-400" />
       </div>
       <div className="flex-1 min-w-0">

package/corpus/templates/macros/app/components/WeightCard.tsx

@@ -40,8 +40,8 @@ export function WeightCard({
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
   return (
-    <div className="group relative flex items-center gap-3 rounded-xl border border-border bg-card p-3 hover:bg-accent/40 sm:gap-4 sm:p-4">
-      <div className="flex items-center justify-center w-9 h-9 shrink-0 rounded-lg bg-blue-500/10 border border-blue-500/20">
+    <div className="group relative flex items-center gap-3 rounded-xl bg-card p-3 hover:bg-accent/40 sm:gap-4 sm:p-4">
+      <div className="flex items-center justify-center w-9 h-9 shrink-0 rounded-lg bg-blue-500/10">
         <IconScale className="h-4 w-4 text-blue-400" />
       </div>
       <div className="flex-1 min-w-0">

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.