@agent-native/core 0.120.2 → 0.120.3

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"

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%;