@agent-native/core 0.120.1 → 0.120.3

package/corpus/templates/design/app/entry.client.tsx

@@ -1,3 +1,4 @@
+import { captureException } from "@agent-native/core/client/analytics";
 import { appBasePath } from "@agent-native/core/client/api-path";
 import { hydrateRoot } from "react-dom/client";
 import { HydratedRouter } from "react-router/dom";
@@ -16,4 +17,16 @@ if (context) {
   context.basename = routerBasePath;
 }
 
-hydrateRoot(document, <HydratedRouter />);
+hydrateRoot(document, <HydratedRouter />, {
+  onRecoverableError(error, info) {
+    captureException(error, {
+      tags: {
+        source: "react-recoverable-error",
+        kind: "hydration",
+      },
+      extra: {
+        componentStack: info.componentStack?.slice(0, 2_000),
+      },
+    });
+  },
+});

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

@@ -113,7 +113,7 @@
   --muted-foreground: 0 0% 60%;
   --accent: 0 0% 18%;
   --accent-foreground: 0 0% 96%;
-  --destructive: 0 84% 60%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 24%;
   --input: 0 0% 24%;

package/corpus/templates/design/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/design/changelog/2026-07-23-agent-settings-are-clearly-labeled-manage-agent-in-the-sideb.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-23
+---
+
+Agent settings are clearly labeled Manage agent in the sidebar.

package/corpus/templates/design/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/design/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/design/netlify.toml

@@ -6,6 +6,7 @@ functions = "templates/design/.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/dispatch/app/dispatch-extensions.tsx

@@ -30,7 +30,7 @@ export const dispatchExtensions = {
     {
       id: "agent",
       to: "/agent",
-      label: "Agent",
+      label: "Manage agent",
       icon: IconHierarchy2,
       section: "operations",
     },

package/corpus/templates/dispatch/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/dispatch/changelog/2026-07-23-agent-settings-are-clearly-labeled-manage-agent-in-the-sideb.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-23
+---
+
+Agent settings are clearly labeled Manage agent in the sidebar.

package/corpus/templates/dispatch/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/dispatch/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/dispatch/netlify.toml

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

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,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 {
   IconArrowUp,
   IconPlus,
@@ -21,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";
@@ -71,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("");
@@ -199,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>
@@ -277,46 +316,55 @@ export function Sidebar() {
             {newFormPopover}
           </Popover>
 
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                to="/agent"
-                aria-label={t("navigation.agent")}
-                className={cn(
-                  "forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg active:scale-[0.96] transition-[background-color,box-shadow,color,transform]",
-                  location.pathname.startsWith("/agent")
-                    ? "bg-accent text-accent-foreground"
-                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
-                )}
-              >
-                <IconHierarchy2 className="h-4 w-4" />
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">
-              {t("navigation.agent")}
-            </TooltipContent>
-          </Tooltip>
+          <div className="mt-auto flex flex-col items-center gap-1">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Link
+                  to="/agent"
+                  aria-label={t("settings.agentTitle")}
+                  className={cn(
+                    "forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg active:scale-[0.96] transition-[background-color,box-shadow,color,transform]",
+                    location.pathname.startsWith("/agent")
+                      ? "bg-accent text-accent-foreground"
+                      : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+                  )}
+                >
+                  <IconHierarchy2 className="h-4 w-4" />
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                {t("settings.agentTitle")}
+              </TooltipContent>
+            </Tooltip>
 
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Link
-                to="/settings"
-                aria-label={t("navigation.settings")}
-                className={cn(
-                  "forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg active:scale-[0.96] transition-[background-color,box-shadow,color,transform]",
-                  location.pathname === "/settings"
-                    ? "bg-accent text-accent-foreground"
-                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
-                )}
-              >
-                <IconSettings className="h-4 w-4" />
-              </Link>
-            </TooltipTrigger>
-            <TooltipContent side="right">
-              {t("navigation.settings")}
-            </TooltipContent>
-          </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Link
+                  to="/settings"
+                  aria-label={t("navigation.settings")}
+                  className={cn(
+                    "forms-sidebar-nav-item flex size-10 items-center justify-center rounded-lg active:scale-[0.96] transition-[background-color,box-shadow,color,transform]",
+                    location.pathname === "/settings"
+                      ? "bg-accent text-accent-foreground"
+                      : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+                  )}
+                >
+                  <IconSettings className="h-4 w-4" />
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                {t("navigation.settings")}
+              </TooltipContent>
+            </Tooltip>
+          </div>
         </nav>
+        <SidebarFooterActions
+          collapsed
+          feedback={feedbackButton}
+          translate={translateButton}
+          search={searchButton}
+          collapse={collapseButton}
+        />
       </TooltipProvider>
     </div>
   ) : (
@@ -367,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">
@@ -446,7 +476,7 @@ export function Sidebar() {
           )}
         >
           <IconHierarchy2 size={14} className="shrink-0" />
-          <span>{t("navigation.agent")}</span>
+          <span>{t("settings.agentTitle")}</span>
         </Link>
 
         <Link
@@ -464,19 +494,20 @@ export function Sidebar() {
         </Link>
       </div>
 
-      {/* Tools */}
-      <div className="shrink-0 px-1.5 py-1.5">
-        <ExtensionsSidebarSection />
-      </div>
-
       {/* Footer */}
       <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/app/routes/_app.extensions._index.tsx

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

package/corpus/templates/forms/changelog/2026-07-23-agent-settings-are-clearly-labeled-manage-agent-in-the-sideb.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-23
+---
+
+Agent settings are clearly labeled Manage agent in the sidebar.

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/forms/netlify.toml

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

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">