@agent-native/core 0.120.1 → 0.120.3

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

@@ -9,11 +9,12 @@ import { useCodeMode } from "@agent-native/core/client/agent-chat";
 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 { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 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,
@@ -28,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";
@@ -73,6 +75,9 @@ function buildBrandingCustomizationMessage(request: string) {
 const navItems = [
   { icon: IconMessageCircle, labelKey: "navigation.ask", href: "/" },
   { icon: IconClipboardCheck, labelKey: "navigation.plan", href: "/plans" },
+];
+
+const bottomNavItems = [
   { icon: IconHierarchy2, labelKey: "settings.agentTitle", href: "/agent" },
   { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
 ];
@@ -144,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 {
@@ -242,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>
   );
 }
@@ -552,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
@@ -628,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} />
@@ -638,30 +684,51 @@ export function Sidebar({
         })}
       </nav>
 
-      {!collapsed && session ? (
-        <>
-          <div className="px-2 py-2">
-            <ExtensionsSidebarSection />
-          </div>
+      <nav className="grid shrink-0 gap-1 px-2 py-1">
+        {bottomNavItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = location.pathname.startsWith(item.href);
+          const link = (
+            <Link
+              to={item.href}
+              className={cn(
+                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
+                isActive
+                  ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                  : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
+                collapsed && "justify-center gap-0 px-0",
+              )}
+              aria-label={collapsed ? t(item.labelKey) : undefined}
+            >
+              <Icon className="h-4 w-4 shrink-0" />
+              {collapsed ? (
+                <span className="sr-only">{t(item.labelKey)}</span>
+              ) : (
+                t(item.labelKey)
+              )}
+            </Link>
+          );
+          return collapsed ? (
+            <Tooltip key={item.href}>
+              <TooltipTrigger asChild>{link}</TooltipTrigger>
+              <TooltipContent side="right">{t(item.labelKey)}</TooltipContent>
+            </Tooltip>
+          ) : (
+            <div key={item.href}>{link}</div>
+          );
+        })}
+      </nav>
 
-          <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>
-        </>
+      {!collapsed && session ? (
+        <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"
@@ -674,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/app/routes/extensions._index.tsx

@@ -1,4 +1,4 @@
-import { ExtensionsListPage } from "@agent-native/core/client/extensions";
+import { Navigate } from "react-router";
 
 import { APP_TITLE } from "@/lib/app-config";
 
@@ -7,5 +7,5 @@ export function meta() {
 }
 
 export default function ExtensionsRoute() {
-  return <ExtensionsListPage />;
+  return <Navigate to="/settings#extensions" replace />;
 }

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/plan/netlify.toml

@@ -6,6 +6,7 @@ functions = "templates/plan/.netlify/functions-internal"
 
 [build.environment]
 GA_MEASUREMENT_ID = "G-ESF7FYXGN9"
+GTM_CONTAINER_ID = "GTM-N3WSTXZ"
 NITRO_PRESET = "netlify"
 NPM_CONFIG_PRODUCTION = "false"
 AGENT_CHAT_DURABLE_BACKGROUND = "true"

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

@@ -1,9 +1,10 @@
 import { appPath } from "@agent-native/core/client/api-path";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
-import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
-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,
@@ -11,6 +12,7 @@ import {
   IconSettings,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
+  IconSearch,
 } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router";
 
@@ -28,6 +30,9 @@ const navItems = [
     labelKey: "navigation.designSystems",
     href: "/design-systems",
   },
+];
+
+const bottomNavItems = [
   { icon: IconHierarchy2, labelKey: "settings.agentTitle", href: "/agent" },
   { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
 ];
@@ -48,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;
@@ -92,6 +132,36 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
             );
           })}
         </nav>
+        <nav className="flex shrink-0 flex-col items-center gap-1 py-1">
+          {bottomNavItems.map((item) => {
+            const Icon = item.icon;
+            return (
+              <Tooltip key={item.href} delayDuration={0}>
+                <TooltipTrigger asChild>
+                  <Link
+                    to={item.href}
+                    aria-label={t(item.labelKey)}
+                    className={cn(
+                      "flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
+                      isItemActive(item.href) &&
+                        "bg-sidebar-accent text-sidebar-accent-foreground",
+                    )}
+                  >
+                    <Icon className="h-4 w-4 shrink-0" />
+                  </Link>
+                </TooltipTrigger>
+                <TooltipContent side="right">{t(item.labelKey)}</TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </nav>
+        <SidebarFooterActions
+          collapsed
+          feedback={feedbackButton}
+          translate={translateButton}
+          search={searchButton}
+          collapse={collapseButton}
+        />
       </aside>
     );
   }
@@ -116,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">
@@ -156,9 +212,27 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
         </nav>
 
         <div className="mt-auto shrink-0">
-          <div className="px-2 py-1">
-            <ExtensionsSidebarSection />
-          </div>
+          <nav className="space-y-1 px-2 py-1">
+            {bottomNavItems.map((item) => {
+              const Icon = item.icon;
+              const isActive = isItemActive(item.href);
+              return (
+                <Link
+                  key={item.href}
+                  to={item.href}
+                  className={cn(
+                    "flex items-center gap-3 rounded-lg px-3 py-2 text-sm",
+                    isActive
+                      ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                      : "text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground",
+                  )}
+                >
+                  <Icon className="h-4 w-4 shrink-0" />
+                  {t(item.labelKey)}
+                </Link>
+              );
+            })}
+          </nav>
 
           <div className="px-3 py-2">
             <OrgSwitcher />
@@ -166,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/app/routes/extensions._index.tsx

@@ -1,5 +1,5 @@
-import { ExtensionsListPage } from "@agent-native/core/client/extensions";
+import { Navigate } from "react-router";
 
 export default function ExtensionsRoute() {
-  return <ExtensionsListPage />;
+  return <Navigate to="/settings#extensions" replace />;
 }

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/slides/netlify.toml

@@ -6,6 +6,7 @@ functions = "templates/slides/.netlify/functions-internal"
 
 [build.environment]
 GA_MEASUREMENT_ID = "G-ESF7FYXGN9"
+GTM_CONTAINER_ID = "GTM-N3WSTXZ"
 NITRO_PRESET = "netlify"
 NPM_CONFIG_PRODUCTION = "false"
 AGENT_CHAT_DURABLE_BACKGROUND = "true"

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

@@ -1,5 +1,4 @@
 import { appPath } from "@agent-native/core/client/api-path";
-import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import { useT } from "@agent-native/core/client/i18n";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
@@ -9,6 +8,7 @@ import {
   IconInbox,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
+  IconSettings,
 } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router";
 
@@ -26,6 +26,10 @@ const NAV_ITEMS = [
   { icon: IconForms, labelKey: "sidebar.navFields", href: "/fields" },
 ];
 
+const BOTTOM_NAV_ITEMS = [
+  { icon: IconSettings, labelKey: "header.pageSettings", href: "/settings" },
+];
+
 interface SidebarProps {
   collapsed?: boolean;
   collapsible?: boolean;
@@ -165,11 +169,38 @@ export function Sidebar({
           collapsed && "border-t border-sidebar-border py-2",
         )}
       >
-        {!collapsed ? (
-          <div className="border-t border-sidebar-border px-2 py-1">
-            <ExtensionsSidebarSection />
-          </div>
-        ) : null}
+        <nav
+          className={cn(
+            "grid gap-1",
+            collapsed
+              ? "px-1 py-1"
+              : "border-t border-sidebar-border px-3 py-2",
+          )}
+        >
+          {BOTTOM_NAV_ITEMS.map((item) => {
+            const Icon = item.icon;
+            const isActive = location.pathname.startsWith(item.href);
+            return (
+              <Link
+                key={item.href}
+                to={item.href}
+                aria-label={collapsed ? t(item.labelKey) : undefined}
+                className={cn(
+                  "flex items-center rounded-md text-sm",
+                  collapsed ? "h-9 justify-center px-0" : "gap-3 px-3 py-2",
+                  isActive
+                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                    : "text-sidebar-foreground hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground",
+                )}
+              >
+                <Icon className="size-4 shrink-0" />
+                <span className={collapsed ? "sr-only" : "truncate"}>
+                  {t(item.labelKey)}
+                </span>
+              </Link>
+            );
+          })}
+        </nav>
 
         <div
           className={cn(

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/app/routes/extensions._index.tsx

@@ -1,4 +1,4 @@
-import { ExtensionsListPage } from "@agent-native/core/client/extensions";
+import { Navigate } from "react-router";
 
 import messages from "@/i18n/en-US";
 import { APP_TITLE } from "@/lib/app-config";
@@ -8,5 +8,5 @@ export function meta() {
 }
 
 export default function ExtensionsRoute() {
-  return <ExtensionsListPage />;
+  return <Navigate to="/settings#extensions" replace />;
 }