@agent-native/core 0.120.2 → 0.120.3

package/src/client/agent-page/AgentTabsPage.tsx

@@ -5,6 +5,7 @@ import {
   IconExternalLink,
   IconFolder,
   IconHistory,
+  IconHelpCircle,
   IconHierarchy2,
   IconNotes,
   IconPlugConnected,
@@ -421,7 +422,19 @@ interface AccessUrls {
   agentCardUrl: string;
 }
 
-function CopyField({ label, value }: { label: string; value: string }) {
+export const AGENT_ACCESS_DOCS_HREF = {
+  mcp: "https://agent-native.com/docs/mcp-protocol",
+  a2a: "https://agent-native.com/docs/a2a-protocol",
+} as const;
+
+interface CopyFieldProps {
+  label: string;
+  value: string;
+  docsHref?: string;
+  docsLabel?: string;
+}
+
+function CopyField({ label, value, docsHref, docsLabel }: CopyFieldProps) {
   const [copied, setCopied] = useState(false);
   const copy = async () => {
     try {
@@ -435,8 +448,20 @@ function CopyField({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex min-w-0 items-center gap-2 rounded-md border border-border bg-muted/20 p-2">
       <div className="min-w-0 flex-1">
-        <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
+        <div className="flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">
           {label}
+          {docsHref && (
+            <a
+              href={docsHref}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={docsLabel ?? `Open ${label} documentation`}
+              title={docsLabel ?? `Open ${label} documentation`}
+              className="inline-flex size-4 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <IconHelpCircle className="size-3" />
+            </a>
+          )}
         </div>
         <code className="mt-1 block truncate text-xs text-foreground">
           {value}
@@ -530,9 +555,19 @@ function AccessTab({
       <div className="space-y-6">
         {urls ? (
           <>
-            <CopyField label="MCP URL" value={urls.mcpUrl} />
+            <CopyField
+              label="MCP URL"
+              value={urls.mcpUrl}
+              docsHref={AGENT_ACCESS_DOCS_HREF.mcp}
+              docsLabel="Open MCP documentation"
+            />
             {agentCardAvailable && (
-              <CopyField label="A2A agent card" value={urls.agentCardUrl} />
+              <CopyField
+                label="A2A agent card"
+                value={urls.agentCardUrl}
+                docsHref={AGENT_ACCESS_DOCS_HREF.a2a}
+                docsLabel="Open A2A documentation"
+              />
             )}
             <section className="space-y-3 border-t border-border/70 pt-6">
               <div>

package/src/client/analytics.ts

@@ -14,6 +14,7 @@ import {
   installErrorCapture,
   type CapturedExceptionEvent,
 } from "./error-capture.js";
+import { isDynamicImportFailureMessage } from "./route-chunk-recovery.js";
 import type {
   SessionReplayOptions,
   SessionReplayStartResult,
@@ -677,6 +678,18 @@ function shouldDropBrowserSentryNoise(event: Sentry.Event): boolean {
     typeof event.tags?.url === "string" ? event.tags.url : undefined;
   const requestUrl = (event.request?.url ?? taggedUrl ?? "").toLowerCase();
   const isDocsPage = isAgentNativeDocsUrl(requestUrl);
+  // React Router's stale-chunk recovery handles these failures by reloading
+  // the page. Keep the external Sentry stream aligned with first-party
+  // capture, which already drops the prevented browser event.
+  if (
+    exceptionValues.some((value) =>
+      isDynamicImportFailureMessage(
+        `${value.type ?? ""}: ${value.value ?? ""}`,
+      ),
+    )
+  ) {
+    return true;
+  }
   // A server-owned run can emit an expected run_timeout while handing off to
   // its continuation. AssistantChat retries these transitions automatically;
   // only locally timed-out or ultimately unrecoverable runs should create a

package/src/client/error-capture.ts

@@ -383,7 +383,7 @@ function shouldIgnoreAutoCapturedError(normalized: {
     /\binjectScriptAdjust\.js\b/i.test(stack);
   if (
     hasExtensionFrame &&
-    /^(?:TypeError:\s*)?Failed to fetch$/i.test(message)
+    /^(?:TypeError:\s*)?Failed to fetch(?:\s*\([^)]*\))?$/i.test(message)
   ) {
     return true;
   }
@@ -614,6 +614,10 @@ export function installErrorCapture(
   if (runtime.config.captureGlobalErrors) {
     const onError = (event: ErrorEvent) => {
       try {
+        // Route-chunk recovery and other host listeners may intentionally
+        // prevent a browser error after handling it. Respect that decision so
+        // the same transient failure is not stored as an application issue.
+        if (event.defaultPrevented) return;
         const normalized = normalizeGlobalErrorEvent(event);
         if (shouldIgnoreAutoCapturedError(normalized)) return;
         // Global errors are already logged by the session replay recorder, so
@@ -639,6 +643,7 @@ export function installErrorCapture(
   if (runtime.config.captureUnhandledRejections) {
     const onRejection = (event: PromiseRejectionEvent) => {
       try {
+        if (event.defaultPrevented) return;
         const reason = event?.reason;
         const normalized = normalizeCapturedError(reason);
         if (!normalized.type || normalized.type === "Error") {

package/src/client/extensions/ExtensionsListPage.tsx

@@ -203,10 +203,17 @@ export function ExtensionsListPage({
         embedded ? "min-h-[28rem]" : "h-full",
       )}
     >
-      <header className="flex h-12 items-center justify-between border-b px-4 shrink-0">
-        <div className="flex items-center gap-2">
-          <h1 className="text-sm font-semibold">{t("extensions.title")}</h1>
-        </div>
+      <header
+        className={cn(
+          "flex h-12 items-center justify-between px-4 shrink-0",
+          !embedded && "border-b",
+        )}
+      >
+        {!embedded ? (
+          <div className="flex items-center gap-2">
+            <h1 className="text-sm font-semibold">{t("extensions.title")}</h1>
+          </div>
+        ) : null}
         <div className="flex items-center gap-2">
           <Popover open={showCreate} onOpenChange={setShowCreate}>
             <PopoverTrigger asChild>
@@ -257,7 +264,7 @@ export function ExtensionsListPage({
               </DropdownMenuCheckboxItem>
             </DropdownMenuContent>
           </DropdownMenu>
-          <AgentToggleButton />
+          {!embedded ? <AgentToggleButton /> : null}
         </div>
       </header>
 

package/src/client/extensions/agent-native-extension-runtime.ts

@@ -127,7 +127,7 @@ const defaultThemeCss = `
   --border: 217.2 32.6% 17.5%;
   --primary: 217.2 91.2% 59.8%;
   --primary-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84% 60%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 210 40% 98%;
 }
 html, body {

package/src/client/navigation/index.ts

@@ -15,9 +15,11 @@ export {
   type UseSemanticNavigationStateResult,
 } from "../route-state.js";
 export {
+  COMMAND_MENU_OPEN_EVENT,
   CommandMenu,
   openAgentSidebar,
   openAgentSettings,
+  openCommandMenu,
   submitToAgent,
   useCommandMenuShortcut,
   type CommandMenuProps,

package/src/client/org/OrgSwitcher.tsx

@@ -102,7 +102,7 @@ const APP_SUBMENU_CONTENT_CLASS =
   "z-50 w-72 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 
 const SWITCHER_BUTTON_CLASS =
-  "flex w-full items-center gap-2 rounded-md border border-border/70 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60 cursor-pointer";
+  "flex w-full items-center gap-2 rounded-md border-0 bg-accent/50 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent/70 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60 cursor-pointer";
 
 const DEFAULT_ORGANIZATION_SETTINGS_PATH = "/settings#organization";
 const DEFAULT_PROFILE_PATH = "/settings#account";
@@ -151,33 +151,29 @@ function AppMenuLink({
   onNavigate: () => void;
 }) {
   const Icon = appMenuIcon(app);
+  const description =
+    app.status === "pending"
+      ? "Building"
+      : app.description?.trim() ||
+        (app.isDispatch ? "Workspace hub" : `${app.name} workspace`);
   return (
     <a
       href={app.href}
       onClick={onNavigate}
-      className={`flex items-center gap-2 rounded-sm px-2.5 py-2 text-xs outline-none hover:bg-accent focus:bg-accent ${
-        app.isDispatch ? "border border-primary/20 bg-primary/5" : ""
-      }`}
+      className="flex items-center gap-2 rounded-sm px-2.5 py-2 text-xs outline-none hover:bg-accent focus:bg-accent"
     >
-      <span
-        className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md ${
-          app.isDispatch
-            ? "bg-primary text-primary-foreground"
-            : "bg-muted text-muted-foreground"
-        }`}
-      >
+      <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
         <Icon className="h-3.5 w-3.5" />
       </span>
       <span className="min-w-0 flex-1">
         <span className="block truncate font-medium text-foreground">
           {app.name}
         </span>
-        <span className="block truncate text-[11px] text-muted-foreground">
-          {app.isDispatch
-            ? "Main hub"
-            : app.status === "pending"
-              ? "Building"
-              : "Open app"}
+        <span
+          className="block truncate text-[11px] text-muted-foreground"
+          title={description}
+        >
+          {description}
         </span>
       </span>
       <IconArrowUpRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
@@ -187,14 +183,12 @@ function AppMenuLink({
 
 function AppsSubmenu({
   apps,
-  isWorkspace,
   isLoading,
   dispatchHref,
   dispatchAllAppsHref,
   onNavigate,
 }: {
   apps: OrgSwitcherAppLink[];
-  isWorkspace: boolean;
   isLoading: boolean;
   dispatchHref: string;
   dispatchAllAppsHref: string;
@@ -241,17 +235,6 @@ function AppsSubmenu({
           collisionPadding={12}
           className={APP_SUBMENU_CONTENT_CLASS}
         >
-          <div className="px-2.5 py-1.5">
-            <div className="text-[10px] uppercase tracking-wide text-muted-foreground">
-              {isWorkspace ? "Workspace apps" : "Default apps"}
-            </div>
-            <div className="mt-0.5 text-[11px] text-muted-foreground">
-              {isWorkspace
-                ? "Dispatch is the workspace hub."
-                : "Dispatch is the home base."}
-            </div>
-          </div>
-
           <AppMenuLink app={dispatchApp} onNavigate={onNavigate} />
 
           {visibleNonDispatch.length > 0 && (
@@ -269,7 +252,7 @@ function AppsSubmenu({
                 onClick={onNavigate}
                 className="flex items-center gap-2 rounded-sm px-2.5 py-1.5 text-xs text-foreground outline-none hover:bg-accent focus:bg-accent"
               >
-                <IconMessageCircle className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                <IconApps className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                 <span className="flex-1">
                   {`View ${remainingCount} more in Dispatch`}
                 </span>
@@ -549,7 +532,6 @@ export function OrgSwitcher({
               <div className="my-1 h-px bg-border" />
               <AppsSubmenu
                 apps={appLinks.apps}
-                isWorkspace={appLinks.isWorkspace}
                 isLoading={appLinks.isLoading}
                 dispatchHref={appLinks.dispatchHref}
                 dispatchAllAppsHref={appLinks.dispatchAllAppsHref}

package/src/client/settings/ExtensionsSettingsContent.tsx

@@ -9,7 +9,7 @@ const ExtensionsListPage = lazy(() =>
 
 export function ExtensionsSettingsContent() {
   return (
-    <div className="mx-auto w-full max-w-5xl overflow-hidden rounded-lg border border-border bg-background">
+    <div className="mx-auto w-full max-w-5xl">
       <Suspense
         fallback={
           <div className="flex min-h-[28rem] items-center justify-center text-muted-foreground">

package/src/extensions/theme.ts

@@ -92,7 +92,7 @@ export function getThemeVars(_isDark?: boolean): string {
   --muted-foreground: 240 5% 64.9%;
   --accent: 240 3.7% 15.9%;
   --accent-foreground: 0 0% 98%;
-  --destructive: 0 84% 60%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 0 0% 98%;
   --border: 240 3.7% 15.9%;
   --input: 240 3.7% 15.9%;

package/src/localization/default-messages.ts

@@ -172,6 +172,7 @@ const messages = {
       workspaceControlPlane: "Workspace control plane",
       workspaceSubtitle_one: "Workspace · {{count}} app",
       workspaceSubtitle_other: "Workspace · {{count}} apps",
+      search: "Search",
       chats: "Chats",
       newChat: "New chat",
       newDispatchChat: "New Dispatch chat",
@@ -310,6 +311,7 @@ const messages = {
     newTerminal: "New terminal",
     panelOptions: "Agent panel options",
     collapseSidebar: "Collapse sidebar",
+    expandSidebar: "Expand sidebar",
     hideChats: "Hide chats",
     allChats: "All chats",
     settings: "Settings",

package/src/server/core-routes-plugin.ts

@@ -97,6 +97,7 @@ import {
   MCP_EMBED_CORS_ALLOW_HEADERS,
   shouldAllowMcpEmbedCredentials,
 } from "../shared/mcp-embed-headers.js";
+import { captureException } from "../tracking/error-capture.js";
 import { track } from "../tracking/index.js";
 import { registerBuiltinProviders } from "../tracking/providers.js";
 import { validateTrackPayload } from "../tracking/route.js";
@@ -140,7 +141,7 @@ import {
   type BuilderRelayCredentials,
   type BuilderPreviewRelayState,
 } from "./builder-browser.js";
-import { captureError } from "./capture-error.js";
+import { captureError, registerErrorCaptureProvider } from "./capture-error.js";
 import {
   getAllowedCorsOrigin,
   readCorsAllowedOrigins,
@@ -1197,6 +1198,14 @@ export function createCoreRoutesPlugin(
       // already registered the same key win.
       registerFrameworkSecrets();
       registerBuiltinProviders();
+      registerErrorCaptureProvider("agent-native-analytics", (error, context) =>
+        captureException(error, {
+          ...context,
+          handled: false,
+          runtime: "node",
+          source: "server",
+        }),
+      );
       registerBuiltinNotificationChannels();
 
       try {

package/src/server/framework-request-handler.ts

@@ -602,33 +602,24 @@ function registerMiddleware(
         status,
         error: err,
       });
-      // Forward 5xx to server-side Sentry — Nitro's own `error` hook may not
-      // fire here because we convert the throw into a normal JSON response,
-      // and a console.error alone is invisible in deployed environments.
-      // 4xx are user-input errors (validation, auth) and aren't worth
-      // alerting on. Lazy-loaded so the framework-request-handler module
-      // doesn't pull @sentry/node into bundles that don't need it.
+      // Forward 5xx to the configured server error providers — Nitro's own
+      // `error` hook may not fire here because we convert the throw into a
+      // normal JSON response, and a console.error alone is invisible in
+      // deployed environments. 4xx are user-input errors (validation, auth)
+      // and aren't worth alerting on.
       if (status >= 500) {
-        // Static `import` would create a cycle (sentry.ts imports auth.ts
-        // which imports… eventually, framework-request-handler.ts).
-        import("./sentry.js")
-          .then(({ captureRouteError, isServerSentryEnabled }) => {
-            if (!isServerSentryEnabled()) return;
-            captureRouteError(err, {
-              route: reqPath,
-              method: event.method,
-              userAgent: (() => {
-                try {
-                  return event.headers?.get("user-agent") ?? undefined;
-                } catch {
-                  return undefined;
-                }
-              })(),
-            });
-          })
-          .catch(() => {
-            // Sentry is observability — never let it break a response path.
-          });
+        captureError(err, {
+          route: reqPath,
+          method: event.method,
+          tags: { status_code: String(status) },
+          userAgent: (() => {
+            try {
+              return event.headers?.get("user-agent") ?? undefined;
+            } catch {
+              return undefined;
+            }
+          })(),
+        });
       }
       try {
         setResponseStatus(event, status);

package/src/styles/agent-native.css

@@ -310,6 +310,10 @@
   opacity: 1;
 }
 
+/* A named chat surface already morphs from its old geometry during a
+   full-page-chat handoff. Override only the initial style of that panel so it
+   does not slide in from the right underneath the morph. Keeping the normal
+   rules intact preserves ordinary sidebar open/close animation. */
 @starting-style {
   .agent-sidebar-panel[data-agent-sidebar-animation="desktop"][data-agent-sidebar-state="open"] {
     width: 0;
@@ -330,6 +334,15 @@
   .agent-sidebar-backdrop[data-agent-sidebar-animation="mobile"][data-agent-sidebar-state="open"] {
     opacity: 0;
   }
+
+  .agent-native-chat-view-transition.agent-sidebar-panel[data-agent-sidebar-animation="desktop"][data-agent-sidebar-chat-handoff="true"] {
+    width: var(--agent-sidebar-width);
+  }
+
+  .agent-native-chat-view-transition.agent-sidebar-panel[data-agent-sidebar-animation="desktop"][data-agent-sidebar-chat-handoff="true"]
+    > .agent-sidebar-panel-inner {
+    transform: translateX(0);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/templates/chat/app/components/layout/Layout.tsx

@@ -1,6 +1,7 @@
 import {
   AgentSidebar,
   focusAgentChat,
+  isAgentChatHomeHandoffActive,
   navigateWithAgentChatViewTransition,
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
@@ -57,6 +58,7 @@ export function Layout({ children }: LayoutProps) {
     activePath: location.pathname,
     enabled: !isChatRoute,
   });
+  const chatHomeHandoffPending = isAgentChatHomeHandoffActive("chat");
   useAgentChatHomeHandoffLinks({
     storageKey: "chat",
     isChatPath: (pathname) => pathname === "/" || pathname.startsWith("/chat/"),
@@ -164,6 +166,7 @@ export function Layout({ children }: LayoutProps) {
           <AgentSidebar
             position="right"
             chatViewTransition
+            chatViewTransitionHandoff={chatHomeHandoffPending}
             storageKey="chat"
             browserTabId={TAB_ID}
             openOnChatRunning={chatHomeHandoffActive}

package/src/templates/chat/app/components/layout/Sidebar.tsx

@@ -4,9 +4,11 @@ import {
   type ChatThreadSummary,
 } from "@agent-native/core/client/agent-chat";
 import { appPath } from "@agent-native/core/client/api-path";
-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,
@@ -16,6 +18,7 @@ import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
   IconMessageCircle,
+  IconSearch,
   IconSettings,
 } from "@tabler/icons-react";
 import { useEffect, useMemo } from "react";
@@ -126,7 +129,7 @@ function chatThreadPath(threadId: string) {
   return `/chat/${encodeURIComponent(threadId)}`;
 }
 
-function ChatThreadsSection() {
+function ChatThreadsSection({ open }: { open: boolean }) {
   const navigate = useNavigate();
   const location = useLocation();
   const t = useT();
@@ -230,36 +233,42 @@ function ChatThreadsSection() {
   }
 
   return (
-    <div className="mt-2 ms-4">
-      <ChatHistoryRail
-        items={chatItems}
-        activeId={displayedActiveThreadId}
-        onSelect={(threadId) => openThread(threadId)}
-        onNewChat={() => void handleNewChat()}
-        railLabels={{
-          newChat: t("chat.newChat"),
-          showMore: t("chat.chats"),
-          showLess: t("chat.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("chat.optionsFor", { title: item.titleText ?? "" }),
-          renameInput: (item) =>
-            t("chat.renameThread", { title: item.titleText ?? "" }),
-          rename: t("chat.renameChat"),
-          pin: t("chat.pinChat"),
-          unpin: t("chat.unpinChat"),
-          delete: t("chat.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={displayedActiveThreadId}
+          onSelect={(threadId) => openThread(threadId)}
+          onNewChat={() => void handleNewChat()}
+          railLabels={{
+            newChat: t("chat.newChat"),
+            showMore: t("chat.chats"),
+            showLess: t("chat.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("chat.optionsFor", { title: item.titleText ?? "" }),
+            renameInput: (item) =>
+              t("chat.renameThread", { title: item.titleText ?? "" }),
+            rename: t("chat.renameChat"),
+            pin: t("chat.pinChat"),
+            unpin: t("chat.unpinChat"),
+            delete: t("chat.archiveChat"),
+          }}
+          className="min-w-0"
+        />
+      </div>
     </div>
   );
 }
@@ -281,14 +290,14 @@ export function Sidebar({
     cn(
       "flex items-center text-sm transition-colors",
       collapsed
-        ? "relative h-10 w-full justify-center rounded-none border-s-2 px-0"
+        ? "relative h-10 w-full justify-center rounded-none px-0"
         : "h-9 rounded-md gap-3 px-3",
       isActive
         ? collapsed
-          ? "border-s-sidebar-accent-foreground/80 bg-sidebar-accent text-sidebar-accent-foreground"
+          ? "bg-sidebar-accent text-sidebar-accent-foreground"
           : "bg-sidebar-accent text-sidebar-accent-foreground"
         : collapsed
-          ? "border-s-transparent text-sidebar-foreground/70 hover:bg-sidebar-accent/55 hover:text-sidebar-accent-foreground"
+          ? "text-sidebar-foreground/70 hover:bg-sidebar-accent/55 hover:text-sidebar-accent-foreground"
           : "text-sidebar-foreground hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground",
     );
   const collapseButton = collapsible ? (
@@ -317,6 +326,31 @@ export function Sidebar({
       </TooltipContent>
     </Tooltip>
   ) : null;
+  const searchButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={openCommandMenu}
+          aria-label={t("root.commandSearch")}
+          className="flex size-8 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <IconSearch className="size-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
@@ -411,8 +445,8 @@ export function Sidebar({
                 ) : (
                   link
                 )}
-                {!collapsed && item.view === "chat" && isChatRoute ? (
-                  <ChatThreadsSection />
+                {!collapsed && item.view === "chat" ? (
+                  <ChatThreadsSection open={isChatRoute} />
                 ) : null}
               </div>
             );
@@ -465,14 +499,13 @@ export function Sidebar({
           />
         </div>
 
-        {!collapsed ? (
-          <div className="flex items-center justify-end gap-1 px-3 py-2">
-            <FeedbackButton className="min-w-0 flex-1" side="right" />
-            {collapseButton}
-          </div>
-        ) : collapseButton ? (
-          <div className="flex justify-center px-1 py-1">{collapseButton}</div>
-        ) : null}
+        <SidebarFooterActions
+          collapsed={collapsed}
+          feedback={feedbackButton}
+          translate={translateButton}
+          search={searchButton}
+          collapse={collapseButton}
+        />
       </div>
     </aside>
   );

package/src/templates/chat/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%;