@agent-native/core 0.120.2 → 0.120.4

package/corpus/templates/design/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 {
   IconPencil,
   IconTemplate,
@@ -11,6 +13,7 @@ import {
   IconSettings,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
+  IconSearch,
 } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router";
@@ -61,6 +64,59 @@ export function Sidebar() {
     }
   }, [collapsed]);
 
+  const collapseButton = (
+    <Tooltip delayDuration={0}>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={() => setCollapsed((value) => !value)}
+          className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
+          aria-label={
+            collapsed
+              ? t("navigation.expandSidebar")
+              : t("navigation.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("navigation.expandSidebar")
+          : t("navigation.collapseSidebar")}
+      </TooltipContent>
+    </Tooltip>
+  );
+  const searchButton = (
+    <Tooltip delayDuration={0}>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={openCommandMenu}
+          className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
+          aria-label={t("root.commandSearch")}
+        >
+          <IconSearch className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">{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 (
     <aside
       className={cn(
@@ -93,30 +149,6 @@ export function Sidebar() {
             </span>
           </div>
         )}
-        <Tooltip delayDuration={0}>
-          <TooltipTrigger asChild>
-            <button
-              onClick={() => setCollapsed((c) => !c)}
-              className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
-              aria-label={
-                collapsed
-                  ? t("navigation.expandSidebar")
-                  : t("navigation.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("navigation.expandSidebar")
-              : t("navigation.collapseSidebar")}
-          </TooltipContent>
-        </Tooltip>
       </div>
 
       <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
@@ -202,17 +234,20 @@ export function Sidebar() {
               <div className="px-3 py-2">
                 <OrgSwitcher reserveSpace />
               </div>
-
               <div className="px-3 py-2">
                 <DevDatabaseLink />
-                <div className="flex items-center justify-end gap-1">
-                  <FeedbackButton className="min-w-0 flex-1" />
-                  <ThemeToggle className="h-8 w-8 shrink-0" />
-                </div>
+                <ThemeToggle className="h-8 w-8 shrink-0" />
               </div>
             </div>
           )}
         </div>
+        <SidebarFooterActions
+          collapsed={collapsed}
+          feedback={feedbackButton}
+          translate={translateButton}
+          search={searchButton}
+          collapse={collapseButton}
+        />
       </div>
     </aside>
   );

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/lib/design-save-outbox.ts

@@ -37,6 +37,14 @@ export interface DrainDesignSaveOutboxResult {
    * transient/conflict errors that SHOULD be retried.
    */
   dropped: Array<{ entry: DesignSaveOutboxEntry; error: unknown }>;
+  /**
+   * Entries dropped because the server moved past their base version (a 409
+   * conflict). Distinct from `dropped`: the file still exists and nothing was
+   * lost to deletion, so the editor should rebase from the server rather than
+   * warn "changes discarded". Kept separate so a normal concurrent edit is
+   * never presented as a deleted file.
+   */
+  rebased: Array<{ entry: DesignSaveOutboxEntry; error: unknown }>;
 }
 
 /**
@@ -58,6 +66,24 @@ export function isTerminalSaveError(error: unknown): boolean {
   );
 }
 
+/**
+ * The server's update-file version conflict ("File changed since it was read…").
+ * Its frozen expectedVersionHash can never match on retry, so drop-and-rebase
+ * rather than loop forever. Matched by MESSAGE, not bare status 409, on purpose:
+ * the client-side "no known base version" / "changed elsewhere" 409 synthetics
+ * are intentionally retained by drainEntries, and the client-build-mismatch 409
+ * is a reload-then-retry.
+ */
+export function isConflictSaveError(error: unknown): boolean {
+  if (!error || typeof error !== "object") return false;
+  const candidate = error as { code?: unknown; message?: unknown };
+  if (candidate.code === "client_build_mismatch") return false;
+  return (
+    typeof candidate.message === "string" &&
+    /changed since it was read|re-read the file/i.test(candidate.message)
+  );
+}
+
 const DATABASE_NAME = "agent-native-design-save-outbox";
 const DATABASE_VERSION = 2;
 const ENTRY_STORE = "entries";
@@ -324,6 +350,7 @@ async function drainEntries(
     saved: [],
     failed: [],
     dropped: [],
+    rebased: [],
   };
   for (const entry of await storage.list(designId, actorScope)) {
     try {
@@ -374,6 +401,18 @@ async function drainEntries(
             `[design-save-outbox] dropped unrecoverable save for ${entry.actionName} ${entry.resourceId} (file no longer exists)`,
           );
         }
+      } else if (isConflictSaveError(error)) {
+        // Base version superseded — retry is futile and replaying the stale
+        // snapshot would clobber newer content. Drop into `rebased` (NOT
+        // `dropped`) so the editor rebases from the server instead of warning
+        // that the file was discarded/deleted.
+        await storage.deleteIfRevision(entry);
+        result.rebased.push({ entry, error });
+        if (typeof console !== "undefined") {
+          console.warn(
+            `[design-save-outbox] rebased superseded save for ${entry.actionName} ${entry.resourceId} (server content moved on)`,
+          );
+        }
       } else {
         result.failed.push({ entry, error });
       }

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