@agent-native/core 0.120.2 → 0.120.4

package/corpus/templates/analytics/app/components/dashboard/DashboardHistoryPanel.tsx

@@ -108,10 +108,7 @@ export function DashboardHistoryPanel({
             ) : (
               <div className="space-y-1">
                 {revisions.map((revision) => (
-                  <div
-                    key={revision.id}
-                    className="rounded-lg border border-border bg-card p-3"
-                  >
+                  <div key={revision.id} className="rounded-lg bg-card p-3">
                     <div className="flex items-start justify-between gap-3">
                       <div className="min-w-0">
                         <p className="truncate text-xs font-medium">

package/corpus/templates/analytics/app/components/dashboard/DashboardPanelSkeleton.tsx

@@ -11,7 +11,7 @@ export function DashboardPanelSkeleton({
     <Skeleton
       {...props}
       className={cn(
-        "dashboard-panel-skeleton bg-muted-foreground/25",
+        "dashboard-panel-skeleton bg-muted-foreground/18",
         className,
       )}
     />

package/corpus/templates/analytics/app/components/dashboard/DataTable.tsx

@@ -217,7 +217,7 @@ export function DataTable({
   if (!title) return content;
 
   return (
-    <Card className="bg-card border-border/50">
+    <Card className="bg-card">
       <CardHeader>
         <CardTitle className="text-base">{title}</CardTitle>
       </CardHeader>

package/corpus/templates/analytics/app/components/dashboard/DateRangePicker.tsx

@@ -27,7 +27,7 @@ export function dateRangeToInterval(range: DateRange): number {
 
 export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
   return (
-    <div className="flex items-center gap-1 rounded-lg border border-border p-1">
+    <div className="flex items-center gap-1 rounded-lg bg-card p-1">
       {options.map((opt) => (
         <Button
           key={opt.value}
@@ -35,7 +35,7 @@ export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
           size="sm"
           className={cn(
             "h-7 px-3 text-xs",
-            value === opt.value && "bg-secondary text-secondary-foreground",
+            value === opt.value && "bg-accent text-accent-foreground",
           )}
           onClick={() => onChange(opt.value)}
         >

package/corpus/templates/analytics/app/components/dashboard/MetricCard.tsx

@@ -19,7 +19,7 @@ export function MetricCard({
   error,
 }: MetricCardProps) {
   return (
-    <Card className="bg-card border-border/50">
+    <Card className="bg-card">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium text-muted-foreground">
           {title}

package/corpus/templates/analytics/app/components/dashboard/RecentActivity.tsx

@@ -51,7 +51,7 @@ export function RecentActivity() {
   const t = useT();
 
   return (
-    <Card className="col-span-full lg:col-span-3 bg-card border-border/50">
+    <Card className="col-span-full lg:col-span-3 bg-card">
       <CardHeader>
         <CardTitle>{t("dashboard.recentSales")}</CardTitle>
         <CardDescription>

package/corpus/templates/analytics/app/components/dashboard/RevenueChart.tsx

@@ -30,7 +30,7 @@ export function RevenueChart() {
   const t = useT();
 
   return (
-    <Card className="col-span-full lg:col-span-4 bg-card border-border/50">
+    <Card className="col-span-full lg:col-span-4 bg-card">
       <CardHeader>
         <CardTitle>{t("dashboard.revenueOverTime")}</CardTitle>
       </CardHeader>

package/corpus/templates/analytics/app/components/dashboard/RevenueComparisonChart.tsx

@@ -76,7 +76,7 @@ export function RevenueComparisonChart({
   }));
 
   return (
-    <Card className="bg-card border-border/50">
+    <Card className="bg-card">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-base">{title}</CardTitle>
       </CardHeader>

package/corpus/templates/analytics/app/components/dashboard/SqlChart.tsx

@@ -12,6 +12,7 @@ import {
   IconChevronRight,
   IconAlertTriangle,
   IconInfoCircle,
+  IconRefresh,
   IconTrendingUp,
   IconTrendingDown,
 } from "@tabler/icons-react";
@@ -174,6 +175,27 @@ const PARTIAL_DAY_KEY_PREFIX = "__sql_chart_partial_day";
 const TABLE_PANEL_MIN_HEIGHT_CLASS = "min-h-[386px]";
 const TABLE_PANEL_SKELETON_ROWS = 10;
 
+export function formatSqlChartError(error: unknown): string {
+  const message =
+    error instanceof Error
+      ? error.message
+      : typeof error === "string"
+        ? error
+        : String(error ?? "");
+  const readableMessage = message
+    .replace(/<[^>]*>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+
+  if (/inactivity timeout|too much time has passed/i.test(readableMessage)) {
+    return "This chart took too long to load. Try again.";
+  }
+  if (/internal server error/i.test(readableMessage)) {
+    return "This chart could not be loaded. Try again.";
+  }
+  return readableMessage || "This chart could not be loaded. Try again.";
+}
+
 function formatYValue(
   value: number,
   formatter?: "number" | "currency" | "percent",
@@ -1108,6 +1130,7 @@ export function SqlChart({
     isLoading,
     isFetching,
     error: queryError,
+    refetch,
   } = useSqlQuery(
     ["sql-chart", panel.id, sql, panel.source],
     sql,
@@ -1117,14 +1140,11 @@ export function SqlChart({
   );
 
   const rawRows = result?.rows ?? [];
-  const queryErrorMessage =
-    queryError instanceof Error
-      ? queryError.message
-      : queryError
-        ? String(queryError)
-        : undefined;
   const error =
-    rawRows.length === 0 ? (result?.error ?? queryErrorMessage) : undefined;
+    rawRows.length === 0
+      ? (result?.error ??
+        (queryError ? formatSqlChartError(queryError) : undefined))
+      : undefined;
 
   const { rows: queryRows, forcedYKeys } = useMemo(() => {
     if (panel.config?.pivot && rawRows.length) {
@@ -1209,9 +1229,21 @@ export function SqlChart({
   if (error) {
     return (
       <div
-        className={`flex flex-1 items-center justify-center px-4 ${placeholderPadY} ${placeholderMinH}`}
+        className={`flex flex-1 flex-col items-center justify-center gap-3 px-4 ${placeholderPadY} ${placeholderMinH}`}
+        role="alert"
       >
-        <p className="text-sm text-red-400 text-center break-all">{error}</p>
+        <p className="text-center text-sm text-red-400 break-all">
+          {formatSqlChartError(error)}
+        </p>
+        <Button
+          type="button"
+          variant="secondary"
+          size="sm"
+          onClick={() => void refetch()}
+        >
+          <IconRefresh className="mr-2 h-3.5 w-3.5" />
+          {t("sqlDashboard.refresh")}
+        </Button>
       </div>
     );
   }

package/corpus/templates/analytics/app/components/dashboard/StatsCard.tsx

@@ -20,7 +20,7 @@ export function StatsCard({
   trend,
 }: StatsCardProps) {
   return (
-    <Card className="bg-card border-border/50 shadow-sm">
+    <Card className="bg-card shadow-sm">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium text-muted-foreground">
           {title}

package/corpus/templates/analytics/app/components/dashboard/TimeSeriesChart.tsx

@@ -49,7 +49,7 @@ export function TimeSeriesChart({
   };
 
   return (
-    <Card className="bg-card border-border/50">
+    <Card className="bg-card">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-base">{title}</CardTitle>
       </CardHeader>

package/corpus/templates/analytics/app/components/layout/CommandPalette.tsx

@@ -381,9 +381,11 @@ export function CommandPalette() {
     const openHandler = () => setOpen(true);
     document.addEventListener("keydown", handler);
     window.addEventListener("analytics:open-command-palette", openHandler);
+    window.addEventListener("agent-native:open-command-menu", openHandler);
     return () => {
       document.removeEventListener("keydown", handler);
       window.removeEventListener("analytics:open-command-palette", openHandler);
+      window.removeEventListener("agent-native:open-command-menu", openHandler);
     };
   }, []);
 

package/corpus/templates/analytics/app/components/layout/Layout.tsx

@@ -2,6 +2,7 @@ import {
   AgentSidebar,
   GuidedQuestionFlow,
   focusAgentChat,
+  isAgentChatHomeHandoffActive,
   markAgentChatHomeHandoff,
   navigateWithAgentChatViewTransition,
   useAgentChatHomeHandoff,
@@ -19,6 +20,7 @@ import {
   ANALYTICS_CHAT_STORAGE_KEY,
   markAnalyticsChatActivity,
 } from "@/lib/chat-handoff";
+import { isDashboardReportScreenshot } from "@/lib/dashboard-report-capture";
 import { TAB_ID } from "@/lib/tab-id";
 
 import { Header } from "./Header";
@@ -33,12 +35,30 @@ interface LayoutProps {
 const BARE_ROUTES = new Set(["/chart"]);
 
 export function Layout({ children }: LayoutProps) {
+  const location = useLocation();
+
+  if (isDashboardReportScreenshot(location.search)) {
+    return <DashboardReportLayout>{children}</DashboardReportLayout>;
+  }
+
+  return <InteractiveLayout>{children}</InteractiveLayout>;
+}
+
+function DashboardReportLayout({ children }: LayoutProps) {
+  return (
+    <HeaderActionsProvider>
+      <main className="agent-native-app-main min-h-screen bg-background p-6 text-foreground md:p-8">
+        {children}
+      </main>
+    </HeaderActionsProvider>
+  );
+}
+
+function InteractiveLayout({ children }: LayoutProps) {
   useNavigationState();
   const location = useLocation();
   const navigate = useNavigate();
   const t = useT();
-  const reportScreenshot =
-    new URLSearchParams(location.search).get("reportScreenshot") === "1";
 
   // Analytics stages the active primary resource as composer context —
   // dashboards (`/dashboards/:id`, legacy `/adhoc/:id`) and ad-hoc analyses
@@ -102,12 +122,15 @@ export function Layout({ children }: LayoutProps) {
   const chatHomeHandoffActive = useAgentChatHomeHandoff({
     storageKey: ANALYTICS_CHAT_STORAGE_KEY,
     activePath: location.pathname,
-    enabled: !isAskRoute && !reportScreenshot,
+    enabled: !isAskRoute,
   });
+  const chatHomeHandoffPending = isAgentChatHomeHandoffActive(
+    ANALYTICS_CHAT_STORAGE_KEY,
+  );
   useAgentChatHomeHandoffLinks({
     storageKey: ANALYTICS_CHAT_STORAGE_KEY,
     chatPath: "/ask",
-    enabled: !reportScreenshot,
+    enabled: true,
     requireActiveHandoff: true,
   });
   useEffect(() => {
@@ -135,16 +158,6 @@ export function Layout({ children }: LayoutProps) {
     return <>{children}</>;
   }
 
-  if (reportScreenshot) {
-    return (
-      <HeaderActionsProvider>
-        <main className="agent-native-app-main min-h-screen bg-background p-6 text-foreground md:p-8">
-          {children}
-        </main>
-      </HeaderActionsProvider>
-    );
-  }
-
   const contentFrame = (
     <div className="flex h-full flex-1 flex-col overflow-hidden">
       <MobileNav showNewChat={isAskRoute} />
@@ -195,6 +208,7 @@ export function Layout({ children }: LayoutProps) {
             position="right"
             defaultOpen={false}
             chatViewTransition
+            chatViewTransitionHandoff={chatHomeHandoffPending}
             storageKey={ANALYTICS_CHAT_STORAGE_KEY}
             browserTabId={TAB_ID}
             openOnChatRunning={chatHomeHandoffActive}

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

@@ -26,6 +26,7 @@ import {
   IconPlayerPlay,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
+  IconArrowUpRight,
 } from "@tabler/icons-react";
 import {
   useQuery,
@@ -94,8 +95,10 @@ import {
   useChangeVersions,
 } from "@agent-native/core/client/hooks";
 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,
@@ -184,6 +187,7 @@ const bottomItems = [
     icon: IconHierarchy2,
     labelKey: "settings.agentTitle",
     href: "/agent",
+    showExternalLinkIcon: true,
   },
   { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
 ];
@@ -1263,7 +1267,13 @@ function persistedAnalyticsThreadId() {
   }
 }
 
-function AnalyticsChatsSection({ isAskRoute }: { isAskRoute: boolean }) {
+function AnalyticsChatsSection({
+  isAskRoute,
+  open,
+}: {
+  isAskRoute: boolean;
+  open: boolean;
+}) {
   const navigate = useNavigate();
   const t = useT();
   const {
@@ -1365,57 +1375,63 @@ function AnalyticsChatsSection({ isAskRoute }: { isAskRoute: boolean }) {
   }
 
   return (
-    <div className="ms-4 min-w-0 space-y-0.5">
-      {chatsLoading &&
-        visibleThreads.length === 0 &&
-        Array.from({ length: 3 }).map((_, i) => (
-          <div
-            key={`chat-skeleton-${i}`}
-            className="flex items-center gap-2 px-3 py-1"
-          >
-            <Skeleton
-              className={cn(
-                "h-3.5 w-3.5 shrink-0 rounded-sm",
-                SIDEBAR_SKELETON_CLASS,
-              )}
-            />
-            <Skeleton
-              className={cn("h-3 rounded", SIDEBAR_SKELETON_CLASS)}
-              style={{ width: `${60 + ((i * 17) % 30)}%` }}
-            />
-          </div>
-        ))}
-      <ChatHistoryRail
-        items={chatItems}
-        activeId={displayedActiveThreadId}
-        onSelect={(threadId) => openThread(threadId)}
-        onNewChat={() => void handleNewChat()}
-        railLabels={{
-          newChat: t("chat.newChat"),
-          showMore: t("sidebar.showMore", {
-            count: Math.max(0, visibleThreads.length - SIDEBAR_PREVIEW_COUNT),
-          }),
-          showLess: t("sidebar.showLess"),
-        }}
-        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 min-w-0 space-y-0.5">
+        {chatsLoading &&
+          visibleThreads.length === 0 &&
+          Array.from({ length: 3 }).map((_, i) => (
+            <div
+              key={`chat-skeleton-${i}`}
+              className="flex items-center gap-2 px-3 py-1"
+            >
+              <Skeleton
+                className={cn(
+                  "h-3.5 w-3.5 shrink-0 rounded-sm",
+                  SIDEBAR_SKELETON_CLASS,
+                )}
+              />
+              <Skeleton
+                className={cn("h-3 rounded", SIDEBAR_SKELETON_CLASS)}
+                style={{ width: `${60 + ((i * 17) % 30)}%` }}
+              />
+            </div>
+          ))}
+        <ChatHistoryRail
+          items={chatItems}
+          activeId={displayedActiveThreadId}
+          onSelect={(threadId) => openThread(threadId)}
+          onNewChat={() => void handleNewChat()}
+          railLabels={{
+            newChat: t("chat.newChat"),
+            showMore: t("sidebar.showMore", {
+              count: Math.max(0, visibleThreads.length - SIDEBAR_PREVIEW_COUNT),
+            }),
+            showLess: t("sidebar.showLess"),
+          }}
+          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>
   );
 }
@@ -2096,6 +2112,63 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     },
   ];
 
+  const footerSearch = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={openCommandMenu}
+          aria-label={t("sidebar.search")}
+          className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-sidebar-accent/50 hover:text-foreground"
+        >
+          <IconSearch className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        {t("sidebar.searchShortcut", {
+          shortcut: `${shortcutModifierLabel()}+K`,
+        })}
+      </TooltipContent>
+    </Tooltip>
+  );
+  const footerTranslate = (
+    <LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
+  );
+  const footerCollapse = !mobile ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={() => setSidebarCollapsed(!effectiveCollapsed)}
+          aria-label={
+            effectiveCollapsed
+              ? t("sidebar.expandSidebar")
+              : t("sidebar.collapseSidebar")
+          }
+          className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-sidebar-accent/50 hover:text-foreground"
+        >
+          {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="top">
+        {effectiveCollapsed
+          ? t("sidebar.expandSidebar")
+          : t("sidebar.collapseSidebar")}
+      </TooltipContent>
+    </Tooltip>
+  ) : null;
+  const footerFeedback = (
+    <FeedbackButton
+      variant={effectiveCollapsed ? "icon" : "sidebar"}
+      side="right"
+      className={effectiveCollapsed ? "h-8 w-8" : "min-w-0"}
+    />
+  );
+
   return (
     <div
       className="relative flex h-full min-w-0 flex-col overflow-hidden border-r border-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out"
@@ -2111,24 +2184,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
       )}
       {effectiveCollapsed ? (
         <>
-          <div className="flex h-12 shrink-0 items-center justify-center border-b border-border px-1">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={() => setSidebarCollapsed(false)}
-                  aria-label={t("sidebar.expandSidebar")}
-                  className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors 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>
-          </div>
-
           <nav className="flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto px-1 py-2">
             {collapsedNavItems.map((item) => {
               const Icon = item.icon;
@@ -2154,6 +2209,13 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
               );
             })}
           </nav>
+          <SidebarFooterActions
+            collapsed
+            feedback={footerFeedback}
+            translate={footerTranslate}
+            search={footerSearch}
+            collapse={footerCollapse}
+          />
         </>
       ) : (
         <>
@@ -2178,23 +2240,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                 {t("navigation.brand")}
               </span>
             </Link>
-            {!mobile && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={() => setSidebarCollapsed(true)}
-                    aria-label={t("sidebar.collapseSidebar")}
-                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-sidebar-accent/50 hover:text-foreground"
-                  >
-                    <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="right">
-                  {t("sidebar.collapseSidebar")}
-                </TooltipContent>
-              </Tooltip>
-            )}
           </div>
           <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden py-2">
             <nav className="grid min-w-0 items-start px-2 text-sm font-medium lg:px-4 space-y-1">
@@ -2248,7 +2293,9 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                     />
                   </button>
                 </div>
-                {askOpen && <AnalyticsChatsSection isAskRoute={isAskRoute} />}
+                {askOpen && isAskRoute ? (
+                  <AnalyticsChatsSection isAskRoute open />
+                ) : null}
               </div>
 
               {/* Sessions link */}
@@ -2525,7 +2572,15 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                       )}
                     >
                       <Icon className="h-4 w-4" />
-                      {t(item.labelKey)}
+                      <span className="flex min-w-0 items-center gap-1">
+                        <span className="truncate">{t(item.labelKey)}</span>
+                        {item.showExternalLinkIcon && (
+                          <IconArrowUpRight
+                            aria-hidden="true"
+                            className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70"
+                          />
+                        )}
+                      </span>
                     </Link>
                   );
                 })}
@@ -2533,42 +2588,15 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
 
               <div className="space-y-2 pt-2">
                 <OrgSwitcher />
+                <DevDatabaseLink />
                 <TooltipProvider delayDuration={200}>
-                  <div className="flex items-center justify-end gap-1">
-                    <DevDatabaseLink />
-                    <FeedbackButton className="min-w-0 flex-1" />
-                    <div className="flex shrink-0 items-center gap-0.5">
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <button
-                            onClick={() =>
-                              window.dispatchEvent(
-                                new CustomEvent(
-                                  "analytics:open-command-palette",
-                                ),
-                              )
-                            }
-                            aria-label={t("sidebar.search")}
-                            className="flex items-center justify-center rounded-lg p-2 text-muted-foreground transition-colors hover:text-primary cursor-pointer hover:bg-sidebar-accent/50"
-                          >
-                            <IconSearch className="h-4 w-4" />
-                          </button>
-                        </TooltipTrigger>
-                        <TooltipContent side="top">
-                          <p>
-                            {t("sidebar.searchShortcut", {
-                              shortcut: `${shortcutModifierLabel()}+K`,
-                            })}
-                          </p>
-                        </TooltipContent>
-                      </Tooltip>
-                      <LanguagePicker
-                        variant="icon"
-                        label={t("settings.languageLabel")}
-                        className="[&_[data-language-picker-trigger]]:rounded-lg [&_[data-language-picker-trigger]]:border-0 [&_[data-language-picker-trigger]]:bg-transparent [&_[data-language-picker-trigger]]:text-muted-foreground [&_[data-language-picker-trigger]]:hover:bg-sidebar-accent/50 [&_[data-language-picker-trigger]]:hover:text-primary"
-                      />
-                    </div>
-                  </div>
+                  <SidebarFooterActions
+                    feedback={footerFeedback}
+                    translate={footerTranslate}
+                    search={footerSearch}
+                    collapse={footerCollapse}
+                    className="px-0 py-0"
+                  />
                 </TooltipProvider>
               </div>
             </div>