@agent-native/core 0.120.2 → 0.120.4

package/corpus/templates/plan/app/components/layout/Sidebar.tsx

@@ -10,9 +10,11 @@ import { agentNativePath, appPath } from "@agent-native/core/client/api-path";
 import { PromptComposer } from "@agent-native/core/client/composer";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
 import { useSession } from "@agent-native/core/client/hooks";
-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,
@@ -27,6 +29,7 @@ import {
   IconPlus,
   IconRefresh,
   IconSettings,
+  IconSearch,
 } from "@tabler/icons-react";
 import { useEffect, useMemo, useState, type MouseEvent } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
@@ -146,7 +149,13 @@ function persistedActiveThreadId() {
   }
 }
 
-function PlanChatsSection({ collapsed }: { collapsed: boolean }) {
+function PlanChatsSection({
+  collapsed,
+  open,
+}: {
+  collapsed: boolean;
+  open: boolean;
+}) {
   const navigate = useNavigate();
   const t = useT();
   const {
@@ -244,35 +253,41 @@ function PlanChatsSection({ collapsed }: { collapsed: boolean }) {
   }
 
   return (
-    <div className="mt-2 ms-4">
-      <ChatHistoryRail
-        items={chatItems}
-        activeId={activeThreadId}
-        onSelect={(threadId) => openThread(threadId)}
-        onNewChat={() => void handleNewChat()}
-        railLabels={{
-          newChat: t("sidebar.newChat"),
-          showMore: t("sidebar.chats"),
-          showLess: t("sidebar.chats"),
-        }}
-        renameMaxLength={160}
-        onTogglePin={(threadId) => {
-          const thread = visibleThreads.find((item) => item.id === threadId);
-          if (thread) void pinThread(threadId, !thread.pinnedAt);
-        }}
-        onRename={handleRenameThread}
-        onDelete={(threadId) => void handleArchiveThread(threadId)}
-        labels={{
-          options: (item) => `${t("sidebar.chats")}: ${item.titleText ?? ""}`,
-          renameInput: (item) =>
-            `${t("sidebar.renameChat")}: ${item.titleText ?? ""}`,
-          rename: t("sidebar.renameChat"),
-          pin: t("sidebar.pinChat"),
-          unpin: t("sidebar.unpinChat"),
-          delete: t("sidebar.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={(threadId) => openThread(threadId)}
+          onNewChat={() => void handleNewChat()}
+          railLabels={{
+            newChat: t("sidebar.newChat"),
+            showMore: t("sidebar.chats"),
+            showLess: t("sidebar.chats"),
+          }}
+          renameMaxLength={160}
+          onTogglePin={(threadId) => {
+            const thread = visibleThreads.find((item) => item.id === threadId);
+            if (thread) void pinThread(threadId, !thread.pinnedAt);
+          }}
+          onRename={handleRenameThread}
+          onDelete={(threadId) => void handleArchiveThread(threadId)}
+          labels={{
+            options: (item) => `${t("sidebar.chats")}: ${item.titleText ?? ""}`,
+            renameInput: (item) =>
+              `${t("sidebar.renameChat")}: ${item.titleText ?? ""}`,
+            rename: t("sidebar.renameChat"),
+            pin: t("sidebar.pinChat"),
+            unpin: t("sidebar.unpinChat"),
+            delete: t("sidebar.archiveChat"),
+          }}
+          className="min-w-0"
+        />
+      </div>
     </div>
   );
 }
@@ -554,6 +569,35 @@ export function Sidebar({
       </TooltipContent>
     </Tooltip>
   ) : null;
+  const searchButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          size="icon"
+          variant="ghost"
+          className="size-8 shrink-0 text-muted-foreground"
+          onClick={openCommandMenu}
+          aria-label={t("plansPage.overview.searchPlaceholder")}
+        >
+          <IconSearch className="size-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        {t("plansPage.overview.searchPlaceholder")}
+      </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 (
     <aside
@@ -630,7 +674,7 @@ export function Sidebar({
             <div key={item.href}>
               {link}
               {item.href === "/" && isActive ? (
-                <PlanChatsSection collapsed={collapsed} />
+                <PlanChatsSection collapsed={collapsed} open />
               ) : null}
               {item.href === "/plans" && isActive ? (
                 <PlansSidebarSection collapsed={collapsed} />
@@ -676,25 +720,15 @@ export function Sidebar({
       </nav>
 
       {!collapsed && session ? (
-        <>
-          <div className="space-y-2 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>
-            <OrgSwitcher />
-          </div>
-        </>
+        <div className="space-y-2 px-3 py-2">
+          <DevDatabaseLink />
+          <OrgSwitcher />
+        </div>
       ) : null}
 
       {!collapsed && !sessionLoading && !session ? (
         <div className="space-y-2 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>
           <Button
             type="button"
             size="sm"
@@ -707,23 +741,19 @@ export function Sidebar({
         </div>
       ) : null}
 
-      {collapsed && collapsible ? (
-        <div
-          className={cn(
-            "px-2 py-2",
-            collapsed ? "flex justify-center" : "flex justify-end",
-          )}
-        >
-          {collapseButton}
+      {!collapsed && sessionLoading ? (
+        <div className="px-3 py-2">
+          <DevDatabaseLink />
         </div>
       ) : null}
 
-      {!collapsed && sessionLoading && collapsible ? (
-        <div className="flex items-center justify-end gap-1 px-3 py-2">
-          <FeedbackButton className="min-w-0 flex-1" side="right" />
-          {collapseButton}
-        </div>
-      ) : null}
+      <SidebarFooterActions
+        collapsed={collapsed}
+        feedback={feedbackButton}
+        translate={translateButton}
+        search={searchButton}
+        collapse={collapseButton}
+      />
     </aside>
   );
 }

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

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

package/corpus/templates/plan/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/plan/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/slides/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 {
   IconStack2,
   IconHierarchy2,
@@ -10,6 +12,7 @@ import {
   IconSettings,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
+  IconSearch,
 } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router";
 
@@ -50,25 +53,60 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
       ? location.pathname === "/"
       : location.pathname.startsWith(href);
 
+  const collapseButton = onToggleCollapsed ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={onToggleCollapsed}
+          aria-label={
+            collapsed
+              ? t("sidebar.expandSidebar")
+              : t("sidebar.collapseSidebar")
+          }
+          className="flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
+        >
+          {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;
+  const searchButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={openCommandMenu}
+          aria-label={t("root.searchDecks")}
+          className="flex size-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.searchDecks")}</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"}
+    />
+  );
+
   if (collapsed) {
     return (
       <aside className="flex h-full w-12 shrink-0 flex-col items-center gap-1 overflow-hidden border-e border-border bg-sidebar py-2 text-sidebar-foreground transition-[width] duration-200 ease-out">
-        {onToggleCollapsed && (
-          <Tooltip delayDuration={0}>
-            <TooltipTrigger asChild>
-              <button
-                onClick={onToggleCollapsed}
-                aria-label={t("sidebar.expandSidebar")}
-                className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
-              >
-                <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right">
-              {t("sidebar.expandSidebar")}
-            </TooltipContent>
-          </Tooltip>
-        )}
         <nav className="flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto pt-1">
           {navItems.map((item) => {
             const Icon = item.icon;
@@ -117,6 +155,13 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
             );
           })}
         </nav>
+        <SidebarFooterActions
+          collapsed
+          feedback={feedbackButton}
+          translate={translateButton}
+          search={searchButton}
+          collapse={collapseButton}
+        />
       </aside>
     );
   }
@@ -141,20 +186,6 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
             {t("navigation.brand")}
           </span>
         </div>
-        {onToggleCollapsed && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={onToggleCollapsed}
-                aria-label={t("sidebar.collapseSidebar")}
-                className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
-              >
-                <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>{t("sidebar.collapseSidebar")}</TooltipContent>
-          </Tooltip>
-        )}
       </div>
 
       <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
@@ -209,8 +240,14 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
 
           <div className="px-3 py-2 empty:hidden">
             <DevDatabaseLink />
-            <FeedbackButton />
           </div>
+          <SidebarFooterActions
+            feedback={feedbackButton}
+            translate={translateButton}
+            search={searchButton}
+            collapse={collapseButton}
+            className="px-0 py-0"
+          />
         </div>
       </div>
     </aside>

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

@@ -42,7 +42,7 @@ button[title="Open agent sidebar"] {
   --accent: 0 0% 18%;
   --accent-foreground: 0 0% 93%;
 
-  --destructive: 0 72% 51%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 0 0% 100%;
 
   --border: 0 0% 24%;

package/corpus/templates/slides/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/slides/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/tasks/app/global.css

@@ -22,7 +22,7 @@
   --muted-foreground: 220 5% 45%;
   --accent: 220 10% 95%;
   --accent-foreground: 220 10% 15%;
-  --destructive: 0 84% 60%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 0 0% 98%;
   --border: 220 10% 90%;
   --input: 220 10% 90%;

package/corpus/templates/tasks/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/toolkit/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @agent-native/toolkit
 
+## 0.10.6
+
+### Patch Changes
+
+- 8afb252: Allow newly created empty collaborative editors to persist their first real user edit after the shared document finishes loading.
+
+## 0.10.5
+
+### Patch Changes
+
+- 0e2c19d: Use borderless accent styling for shared secondary controls and organization pickers.
+- 0e2c19d: Align shared chat history rails with left-aligned New Chat controls and animate chat-list expansion using intrinsic sizing.
+- 0e2c19d: Expose a shared command-menu open event and sidebar footer action composition primitive.
+
 ## 0.10.4
 
 ### Patch Changes

package/corpus/toolkit/README.md

@@ -45,7 +45,10 @@ import { VisibilityBadge } from "@agent-native/toolkit/sharing";
 import { Button } from "@agent-native/toolkit/ui/button";
 import { Toaster } from "@agent-native/toolkit/ui/sonner";
 import { useToast } from "@agent-native/toolkit/hooks/use-toast";
-import { useSetHeaderActions } from "@agent-native/toolkit/app-shell";
+import {
+  SidebarFooterActions,
+  useSetHeaderActions,
+} from "@agent-native/toolkit/app-shell";
 ```
 
 Import `@agent-native/toolkit/styles.css` after Tailwind to include Toolkit's
@@ -59,6 +62,10 @@ action in a footer row with the ellipsis disclosure on its right. The app
 continues to own thread persistence, sorting, routing, and mutations through
 Core.
 
+Use `SidebarFooterActions` for the shared left-sidebar utility row. Provide the
+app-owned controls through its slots; the rendered order is feedback, translate,
+search, then collapse, with the same order stacked in collapsed sidebars.
+
 Inside template apps, prefer local adapters such as `@/components/ui/button` so
 apps can replace their primitives without changing every callsite.
 

package/corpus/toolkit/agent-native.eject.json

@@ -94,7 +94,7 @@
       "strategy": "source-copy",
       "sourceEntries": ["src/app-shell"],
       "targetRoot": "app/components/agent-native/toolkit",
-      "dependencies": ["react"],
+      "dependencies": ["clsx", "react", "tailwind-merge"],
       "verification": ["pnpm typecheck"]
     },
     {

package/corpus/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/toolkit/src/app-shell/index.ts

@@ -1 +1,2 @@
 export * from "./header-actions.js";
+export * from "./sidebar-footer-actions.js";

package/corpus/toolkit/src/app-shell/sidebar-footer-actions.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../utils.js";
+
+export interface SidebarFooterActionsProps {
+  feedback?: ReactNode;
+  translate?: ReactNode;
+  search?: ReactNode;
+  collapse?: ReactNode;
+  collapsed?: boolean;
+  className?: string;
+}
+
+/**
+ * Keeps the shared left-sidebar utility order stable while apps provide their
+ * own controls and behavior.
+ */
+export function SidebarFooterActions({
+  feedback,
+  translate,
+  search,
+  collapse,
+  collapsed = false,
+  className,
+}: SidebarFooterActionsProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1",
+        collapsed ? "flex-col px-1 py-1" : "min-w-0 justify-end px-3 py-2",
+        className,
+      )}
+      data-sidebar-footer-actions
+    >
+      {feedback ? (
+        <div
+          className={cn("min-w-0", !collapsed && "flex-1")}
+          data-sidebar-footer-feedback
+        >
+          {feedback}
+        </div>
+      ) : null}
+      {translate ? <div data-sidebar-footer-translate>{translate}</div> : null}
+      {search ? <div data-sidebar-footer-search>{search}</div> : null}
+      {collapse ? <div data-sidebar-footer-collapse>{collapse}</div> : null}
+    </div>
+  );
+}

package/corpus/toolkit/src/chat-history.css

@@ -78,6 +78,56 @@
   color: hsl(38 92% 50%);
 }
 
+.an-chat-history-rail__collapse {
+  display: flow-root;
+  height: auto;
+  overflow: hidden;
+  overflow: clip;
+  opacity: 1;
+  clip-path: inset(0);
+  interpolate-size: allow-keywords;
+  transition:
+    height 200ms var(--ease-collapse),
+    opacity 150ms ease,
+    clip-path 200ms var(--ease-collapse);
+}
+
+.an-chat-history-rail__collapse[data-state="closed"] {
+  height: 0;
+  opacity: 0;
+  clip-path: inset(0 0 100% 0);
+  pointer-events: none;
+}
+
+@starting-style {
+  .an-chat-history-rail__collapse[data-state="open"] {
+    height: 0;
+    opacity: 0;
+    clip-path: inset(0 0 100% 0);
+  }
+}
+
+@supports not (interpolate-size: allow-keywords) {
+  .an-chat-history-rail__collapse {
+    height: auto;
+    max-height: 64rem;
+    transition:
+      max-height 200ms var(--ease-collapse),
+      opacity 150ms ease,
+      clip-path 200ms var(--ease-collapse);
+  }
+
+  .an-chat-history-rail__collapse[data-state="closed"] {
+    max-height: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .an-chat-history-rail__collapse {
+    transition: opacity 150ms ease;
+  }
+}
+
 .an-chat-history-rail__footer {
   display: flex;
   align-items: center;
@@ -118,7 +168,8 @@
 }
 
 .an-chat-history-rail__new-chat {
-  flex: 1 1 auto;
+  flex: 0 0 auto;
+  margin-inline-end: auto;
   gap: 8px;
   height: auto;
   min-width: 0;

package/corpus/toolkit/src/design-system/default-adapter.tsx

@@ -332,7 +332,7 @@ const DefaultSurface: DesignSystemComponents["Surface"] = ({
   const elementProps = {
     ...props,
     className: cn(
-      "rounded-lg border bg-card text-card-foreground",
+      "rounded-lg bg-card text-card-foreground",
       elevation === "none" && "shadow-none",
       elevation === "low" && "shadow-sm",
       elevation === "medium" && "shadow-md",