From b8ebb730de0b46b59335d1c4a877bc023d1e3edd Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 2 Sep 2026 00:46:02 -0700
Subject: [PATCH 01/12] Unify customizable sidebar navigation

---
 .../plugin/PluginNavSidebarItems.test.tsx     | 416 +++++++----
 .../plugin/PluginNavSidebarItems.tsx          | 678 +++++++++++++-----
 .../plugin/pluginNavSidebarAtoms.test.ts      | 178 +++++
 .../plugin/pluginNavSidebarAtoms.ts           | 141 +++-
 .../plugin/pluginNavSidebarOrder.test.ts      | 222 ++++--
 .../plugin/pluginNavSidebarOrder.ts           | 122 +++-
 .../sidebar/BuiltInSidebarNavigation.tsx      | 140 +++-
 .../src/components/sidebar/ProjectList.tsx    | 174 +++--
 .../sidebar/ProjectListActionButtons.test.tsx |  57 ++
 9 files changed, 1636 insertions(+), 492 deletions(-)
 create mode 100644 apps/app/src/components/plugin/pluginNavSidebarAtoms.test.ts
 create mode 100644 apps/app/src/components/sidebar/ProjectListActionButtons.test.tsx

diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
index 55303fce25..342ccd0878 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
@@ -6,11 +6,13 @@ import {
   render,
   screen,
   waitFor,
+  within,
 } from "@testing-library/react";
 import { useEffect, type ComponentType } from "react";
 import { createStore, Provider } from "jotai";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter, useLocation } from "react-router-dom";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { CompactViewportOverrideProvider } from "@bb/shared-ui/hooks/use-compact-viewport";
 import { SidebarProvider } from "@/components/ui/sidebar.js";
 import {
@@ -18,12 +20,20 @@ import {
   setPluginSlotRegistrations,
   type PluginRegistrationSet,
 } from "@/lib/plugin-slots";
+import { getPluginPanelRoutePath } from "@/lib/route-paths";
 import {
   resetAllCrashedPluginSlotsForTest,
   resetCrashedPluginSlots,
 } from "./PluginSlotMount";
-import { PluginNavSidebarItems } from "./PluginNavSidebarItems";
-import { pluginNavPanelOrderAtom } from "./pluginNavSidebarAtoms";
+import {
+  type BuiltInSidebarNavEntry,
+  ExtensionsNavSidebarItem,
+  PluginNavSidebarItems,
+} from "./PluginNavSidebarItems";
+import {
+  pluginNavPanelOrderAtom,
+  pluginNavVisiblePanelKeysAtom,
+} from "./pluginNavSidebarAtoms";
 
 function registrationSet(
   overrides: Partial<PluginRegistrationSet>,
@@ -68,37 +78,83 @@ function registerPanel(
 
 function renderSidebarItems(
   options: {
-    toolsRoutePath?: string;
+    builtInEntries?: readonly BuiltInSidebarNavEntry[];
     storedOrder?: string[];
+    storedVisibleKeys?: string[] | null;
     compactViewport?: boolean;
   } = {},
 ) {
   const store = createStore();
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
   if (options.storedOrder) {
     store.set(pluginNavPanelOrderAtom, options.storedOrder);
   }
-  return render(
+  if ("storedVisibleKeys" in options) {
+    store.set(
+      pluginNavVisiblePanelKeysAtom,
+      options.storedVisibleKeys ?? null,
+    );
+  }
+  const view = render(
     <CompactViewportOverrideProvider
       isCompactViewport={options.compactViewport ?? false}
     >
-      <Provider store={store}>
-        <MemoryRouter initialEntries={["/"]}>
-          <SidebarProvider>
-            <PluginNavSidebarItems toolsRoutePath={options.toolsRoutePath} />
-          </SidebarProvider>
-        </MemoryRouter>
-      </Provider>
+      <QueryClientProvider client={queryClient}>
+        <Provider store={store}>
+          <MemoryRouter initialEntries={["/"]}>
+            <SidebarProvider>
+              <PluginNavSidebarItems
+                builtInEntries={options.builtInEntries}
+              />
+              <LocationProbe />
+            </SidebarProvider>
+          </MemoryRouter>
+        </Provider>
+      </QueryClientProvider>
     </CompactViewportOverrideProvider>,
   );
+  return { ...view, store };
+}
+
+function LocationProbe() {
+  return <output data-testid="location-path">{useLocation().pathname}</output>;
 }
 
-const ROW_LABELS = new Set(["Extensions", "Docs", "GitHub"]);
+function panelRowNames(labels: readonly string[] = ["Docs", "GitHub"]): string[] {
+  const rowLabels = new Set(labels);
+  const container = screen.queryByTestId("plugin-nav-sidebar-items");
+  if (!container) return [];
+  return Array.from(
+    container.querySelectorAll<HTMLElement>("[data-sidebar-navigation-item]"),
+  )
+    .map((row) => row.textContent?.trim() ?? "")
+    .filter((label) => rowLabels.has(label));
+}
 
-function panelRowNames(): string[] {
-  return screen
-    .getAllByRole("button")
-    .map((button) => button.textContent?.trim() ?? "")
-    .filter((label) => ROW_LABELS.has(label));
+function builtInEntry(
+  id: string,
+  title: string,
+  onActivate: () => void = vi.fn(),
+): BuiltInSidebarNavEntry {
+  return {
+    kind: "built-in",
+    pluginId: "__bb__",
+    id,
+    title,
+    icon: <span aria-hidden="true" />,
+    content: <button type="button">{title}</button>,
+    onActivate,
+  };
+}
+
+function customizeRows(): HTMLElement[] {
+  return Array.from(
+    screen
+      .getByRole("list", { name: "Sidebar navigation" })
+      .querySelectorAll<HTMLElement>("[data-plugin-nav-customize-item]"),
+  );
 }
 
 beforeEach(() => {
@@ -117,6 +173,27 @@ afterEach(() => {
 });
 
 describe("PluginNavSidebarItems", () => {
+  it("collapses the entire subsection with zero traditional plugins", () => {
+    renderSidebarItems();
+
+    expect(screen.queryByTestId("plugin-nav-sidebar-items")).toBeNull();
+    expect(screen.queryByText("Plugins")).toBeNull();
+  });
+
+  it("shows one plugin with a unified customization entry point and no section label", () => {
+    registerPanel("docs", "Docs");
+    renderSidebarItems();
+
+    expect(screen.queryByText("Plugins")).toBeNull();
+    expect(panelRowNames(["Docs"])).toEqual(["Docs"]);
+    expect(
+      screen.queryByTestId("plugin-nav-sidebar-overflow-toggle"),
+    ).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    ).not.toBeNull();
+  });
+
   it("keeps an accessory-less plugin row unchanged", () => {
     registerPanel("docs", "Docs");
 
@@ -214,6 +291,10 @@ describe("PluginNavSidebarItems", () => {
     expect(
       await screen.findByRole("menuitem", { name: "Hide from sidebar" }),
     ).not.toBeNull();
+    expect(screen.queryByRole("menuitem", { name: "Move to top" })).toBeNull();
+    expect(
+      screen.queryByRole("menuitem", { name: "Move to overflow" }),
+    ).toBeNull();
 
     expect(accessory?.getAttribute("data-sidebar-hover-actions-open")).toBe(
       "true",
@@ -257,158 +338,245 @@ describe("PluginNavSidebarItems", () => {
     expect(screen.queryByText("plugin tasks crashed")).toBeNull();
   });
 
-  it("moves a hidden panel into an expanded More disclosure and back", async () => {
-    registerPanel("docs", "Docs");
-    registerPanel("github", "GitHub");
+  it("shows only the first three plugins directly and lists every plugin in the menu", () => {
+    const labels = ["One", "Two", "Three", "Four", "Five", "Six"];
+    labels.forEach((label, index) => registerPanel(`plugin-${index}`, label));
 
     renderSidebarItems();
 
-    expect(panelRowNames()).toEqual(["Docs", "GitHub"]);
+    expect(panelRowNames(labels)).toEqual(labels.slice(0, 3));
     expect(
       screen.queryByTestId("plugin-nav-sidebar-overflow-toggle"),
     ).toBeNull();
 
-    fireEvent.pointerDown(
-      screen.getByRole("button", { name: "Docs panel options" }),
-      { button: 0 },
-    );
     fireEvent.click(
-      await screen.findByRole("menuitem", { name: "Hide from sidebar" }),
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
     );
+    expect(customizeRows().map((row) => row.textContent?.trim())).toEqual(
+      labels,
+    );
+    expect(
+      screen.queryByRole("button", { name: "Four panel options" }),
+    ).toBeNull();
+  });
 
-    await waitFor(() => {
-      expect(
-        screen.getByTestId("plugin-nav-sidebar-overflow-toggle").textContent,
-      ).toContain("More (1)");
+  it("keeps launch and visibility as distinct targets with a clear row hover state", async () => {
+    const labels = ["One", "Two", "Three", "Four"];
+    labels.forEach((label, index) => registerPanel(`plugin-${index}`, label));
+    const { store, unmount } = renderSidebarItems();
+
+    const trigger = screen.getByRole("button", {
+      name: "Customize sidebar navigation",
     });
-    expect(panelRowNames()).toEqual(["GitHub"]);
+    expect(trigger.querySelector("svg")).not.toBeNull();
+
+    fireEvent.click(trigger);
+    const choices = screen.getAllByRole("checkbox");
+    await waitFor(() =>
+      expect(
+        document.activeElement?.getAttribute(
+          "data-sidebar-navigation-customize-launch",
+        ),
+      ).toBe("plugin-0/main"),
+    );
+    expect(choices.map((choice) => choice.getAttribute("data-state"))).toEqual([
+      "checked",
+      "checked",
+      "checked",
+      "unchecked",
+    ]);
     expect(
-      window.localStorage.getItem("bb.sidebar.hiddenPluginPanels"),
-    ).toContain("docs/main");
+      document.querySelectorAll("[data-plugin-nav-customize-drag-handle]"),
+    ).toHaveLength(4);
+    expect(customizeRows()[0]?.classList.contains("hover:bg-state-hover")).toBe(
+      true,
+    );
 
-    fireEvent.click(screen.getByTestId("plugin-nav-sidebar-overflow-toggle"));
-    await waitFor(() => {
-      expect(panelRowNames()).toEqual(["GitHub", "Docs"]);
-    });
+    fireEvent.click(choices[0]!);
+    expect(
+      screen.getByRole("list", { name: "Sidebar navigation" }),
+    ).not.toBeNull();
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
+      "plugin-1/main",
+      "plugin-2/main",
+    ]);
+    expect(panelRowNames(labels)).toEqual(["Two", "Three"]);
 
-    fireEvent.pointerDown(
-      screen.getByRole("button", { name: "Docs panel options" }),
-      { button: 0 },
+    unmount();
+    renderSidebarItems();
+    expect(panelRowNames(labels)).toEqual(["Two", "Three"]);
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
     );
+
+    const hiddenRow = document.querySelector<HTMLElement>(
+      '[data-plugin-nav-customize-item="plugin-0/main"]',
+    );
+    expect(hiddenRow).not.toBeNull();
     fireEvent.click(
-      await screen.findByRole("menuitem", { name: "Show in sidebar" }),
+      within(hiddenRow as HTMLElement).getByRole("button", { name: "One" }),
     );
 
-    await waitFor(() => {
+    expect(screen.getByTestId("location-path").textContent).toBe(
+      getPluginPanelRoutePath({ pluginId: "plugin-0", path: "main" }),
+    );
+    await waitFor(() =>
       expect(
-        screen.queryByTestId("plugin-nav-sidebar-overflow-toggle"),
-      ).toBeNull();
-    });
-    expect(panelRowNames()).toEqual(["Docs", "GitHub"]);
+        screen.queryByRole("list", { name: "Sidebar navigation" }),
+      ).toBeNull(),
+    );
   });
 
-  it("collapses hidden panels behind the More toggle on a later mount", async () => {
+  it("seeds newly introduced built-ins without overriding existing plugin visibility", () => {
     registerPanel("docs", "Docs");
-    registerPanel("github", "GitHub");
-    window.localStorage.setItem(
-      "bb.sidebar.hiddenPluginPanels",
-      JSON.stringify(["docs/main"]),
-    );
-
-    renderSidebarItems();
-
-    expect(panelRowNames()).toEqual(["GitHub"]);
-    const toggle = screen.getByTestId("plugin-nav-sidebar-overflow-toggle");
-    expect(toggle.textContent).toContain("More (1)");
-
-    fireEvent.click(toggle);
-    await waitFor(() => {
-      expect(panelRowNames()).toEqual(["GitHub", "Docs"]);
+    registerPanel("tasks", "Tasks");
+    renderSidebarItems({
+      builtInEntries: [
+        builtInEntry("new-thread", "New thread"),
+        builtInEntry("search-threads", "Search threads"),
+      ],
+      storedOrder: ["tasks/main", "docs/main"],
+      storedVisibleKeys: ["docs/main"],
     });
-  });
 
-  it("hides the built-in Extensions row like a plugin row", async () => {
-    registerPanel("docs", "Docs");
+    expect(
+      Array.from(
+        screen
+          .getByTestId("plugin-nav-sidebar-items")
+          .querySelectorAll("[data-sidebar-navigation-item]"),
+      ).map((row) => row.getAttribute("data-sidebar-navigation-item")),
+    ).toEqual(["__bb__/new-thread", "__bb__/search-threads", "docs/main"]);
+  });
 
-    renderSidebarItems({ toolsRoutePath: "/extensions/skills" });
+  it("keeps Customize on the New thread row without stranding it when the row is hidden", () => {
+    renderSidebarItems({
+      builtInEntries: [
+        builtInEntry("new-thread", "New thread"),
+        builtInEntry("search-threads", "Search threads"),
+      ],
+    });
 
-    expect(panelRowNames()).toEqual(["Extensions", "Docs"]);
+    const trigger = screen.getByRole("button", {
+      name: "Customize sidebar navigation",
+    });
+    expect(
+      trigger
+        .closest("[data-sidebar-navigation-item]")
+        ?.getAttribute("data-sidebar-navigation-item"),
+    ).toBe("__bb__/new-thread");
 
-    fireEvent.pointerDown(
-      screen.getByRole("button", { name: "Extensions panel options" }),
-      { button: 0 },
-    );
+    fireEvent.click(trigger);
     fireEvent.click(
-      await screen.findByRole("menuitem", { name: "Hide from sidebar" }),
+      screen.getByRole("checkbox", { name: "Show New thread in sidebar" }),
     );
 
-    await waitFor(() => {
-      expect(panelRowNames()).toEqual(["Docs"]);
-    });
     expect(
-      screen.getByTestId("plugin-nav-sidebar-overflow-toggle").textContent,
-    ).toContain("More (1)");
+      screen.getByRole("list", { name: "Sidebar navigation" }),
+    ).not.toBeNull();
     expect(
-      window.localStorage.getItem("bb.sidebar.hiddenPluginPanels"),
-    ).toContain("__builtin__/tools");
+      screen
+        .getByRole("button", { name: "Customize sidebar navigation" })
+        .closest("[data-sidebar-navigation-item]"),
+    ).toBeNull();
   });
 
-  it("keeps Extensions on top for users who already reordered their plugin rows", () => {
-    registerPanel("docs", "Docs");
-    registerPanel("github", "GitHub");
-
+  it("applies one persisted mixed order to direct rows and the menu", () => {
+    const labels = ["One", "Two", "Three", "Four"];
+    labels.forEach((label, index) => registerPanel(`plugin-${index}`, label));
+    const newThread = builtInEntry("new-thread", "New thread");
+    const searchThreads = builtInEntry("search-threads", "Search threads");
     renderSidebarItems({
-      toolsRoutePath: "/extensions/skills",
-      storedOrder: ["github/main", "docs/main"],
+      builtInEntries: [newThread, searchThreads],
+      storedOrder: [
+        "plugin-3/main",
+        "__bb__/search-threads",
+        "plugin-1/main",
+        "__bb__/new-thread",
+        "plugin-0/main",
+        "plugin-2/main",
+      ],
+      storedVisibleKeys: [
+        "plugin-3/main",
+        "__bb__/search-threads",
+        "__bb__/new-thread",
+        "plugin-0/main",
+      ],
     });
 
-    expect(panelRowNames()).toEqual(["Extensions", "GitHub", "Docs"]);
+    expect(
+      Array.from(
+        screen
+          .getByTestId("plugin-nav-sidebar-items")
+          .querySelectorAll("[data-sidebar-navigation-item]"),
+      ).map((row) => row.getAttribute("data-sidebar-navigation-item")),
+    ).toEqual([
+      "plugin-3/main",
+      "__bb__/search-threads",
+      "__bb__/new-thread",
+      "plugin-0/main",
+    ]);
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    );
+    expect(customizeRows().map((row) => row.textContent?.trim())).toEqual([
+      "Four",
+      "Search threads",
+      "Two",
+      "New thread",
+      "One",
+      "Three",
+    ]);
+    expect(
+      screen
+        .getAllByRole("checkbox")
+        .map((choice) => choice.getAttribute("data-state")),
+    ).toEqual([
+      "checked",
+      "checked",
+      "unchecked",
+      "checked",
+      "checked",
+      "unchecked",
+    ]);
   });
 
-  it("keeps a saved order when plugin frontends register after the first render", async () => {
+  it("launches a built-in row from the menu without changing its visibility", async () => {
+    const onActivate = vi.fn();
     renderSidebarItems({
-      toolsRoutePath: "/extensions/skills",
-      storedOrder: ["github/main", "__builtin__/tools", "docs/main"],
+      builtInEntries: [builtInEntry("new-thread", "New thread", onActivate)],
     });
 
-    expect(panelRowNames()).toEqual(["Extensions"]);
-
-    registerPanel("docs", "Docs");
-    registerPanel("github", "GitHub");
-
-    await waitFor(() => {
-      expect(panelRowNames()).toEqual(["GitHub", "Extensions", "Docs"]);
-    });
-  });
-
-  it("saves no Extensions key while the row is absent", async () => {
-    registerPanel("docs", "Docs");
-
-    renderSidebarItems({ storedOrder: ["docs/main"] });
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    );
+    const row = customizeRows()[0];
+    expect(row).toBeDefined();
+    fireEvent.click(
+      within(row as HTMLElement).getByRole("button", { name: "New thread" }),
+    );
 
-    await waitFor(() => {
-      expect(panelRowNames()).toEqual(["Docs"]);
-    });
-    expect(
-      window.localStorage.getItem("bb.sidebar.pluginPanelOrder") ?? "",
-    ).not.toContain("__builtin__/tools");
+    expect(onActivate).toHaveBeenCalledTimes(1);
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("list", { name: "Sidebar navigation" }),
+      ).toBeNull(),
+    );
   });
+});
 
-  it("carries both Extensions glyphs so hover swaps without reflow", () => {
-    renderSidebarItems({ toolsRoutePath: "/extensions/plugins" });
-
-    const extensionsRow = screen
-      .getAllByRole("button")
-      .find((button) => button.textContent?.trim() === "Extensions");
-    expect(extensionsRow).toBeTruthy();
+describe("ExtensionsNavSidebarItem", () => {
+  it("is host-owned and has no plugin-panel options menu", () => {
+    render(
+      <MemoryRouter>
+        <ExtensionsNavSidebarItem routePath="/extensions/plugins" />
+      </MemoryRouter>,
+    );
 
-    const swap = extensionsRow?.querySelector(".bb-sidebar-row-icon-swap");
-    expect(swap).toBeTruthy();
-    expect(
-      swap?.querySelector('.bb-sidebar-row-icon-rest[data-icon="Toolbox"]'),
-    ).toBeTruthy();
+    const row = screen.getByRole("button", { name: "Extensions" });
+    expect(row.querySelector(".bb-sidebar-row-icon-swap")).not.toBeNull();
     expect(
-      swap?.querySelector('.bb-sidebar-row-icon-hover[data-icon="ToolCase"]'),
-    ).toBeTruthy();
+      screen.queryByRole("button", { name: "Extensions panel options" }),
+    ).toBeNull();
   });
 });
diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
index 6f5eb33ad6..4f0fcbe8b2 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
@@ -2,6 +2,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type CSSProperties,
   type MouseEvent as ReactMouseEvent,
@@ -11,11 +12,14 @@ import {
 import { useLocation, useNavigate } from "react-router-dom";
 import { useAtom } from "jotai";
 import { DndContext, type DragEndEvent } from "@dnd-kit/core";
+import { FilterHorizontalIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
 import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { Button } from "@bb/shared-ui/button";
+import { Checkbox } from "@bb/shared-ui/checkbox";
 import { Icon } from "@bb/shared-ui/icon";
 import {
   ContextMenu,
@@ -29,15 +33,28 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@bb/shared-ui/dropdown-menu";
-import { COARSE_POINTER_ICON_SIZE_CLASS } from "@bb/shared-ui/coarse-pointer-sizing";
+import {
+  COARSE_POINTER_ICON_SIZE_CLASS,
+  COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
+} from "@bb/shared-ui/coarse-pointer-sizing";
 import { useIsCompactViewport } from "@bb/shared-ui/hooks/use-compact-viewport";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@bb/shared-ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@bb/shared-ui/tooltip";
 import { PluginIcon } from "@/components/plugin/PluginIcon";
 import { PluginSlotMount } from "@/components/plugin/PluginSlotMount";
 import { PROJECT_LIST_ACTION_BUTTON_CLASS } from "@/components/sidebar/ProjectList";
-import { getPluginPanelRoutePath } from "@/lib/route-paths";
+import {
+  AUTOMATIONS_PLUGIN_ID,
+  getPluginPanelRoutePath,
+} from "@/lib/route-paths";
 import {
   usePluginNavPanelChrome,
   type PluginNavPanelChrome,
+  type PluginNavPanelChromeEntry,
 } from "@/lib/plugin-nav-panel-chrome";
 import { cn } from "@bb/shared-ui/lib/utils";
 import type { PluginNavPanelSlot } from "@/lib/plugin-slots";
@@ -56,110 +73,192 @@ import { useSidebarSortable } from "@/components/sidebar/sortableMotion";
 import { useSidebarReorderDnd } from "@/components/sidebar/useSidebarReorderDnd";
 import type { SidebarSortableDragBindings } from "@/components/sidebar/sortableMotion";
 import {
-  hiddenPluginNavPanelsAtom,
   pluginNavPanelOrderAtom,
+  pluginNavVisiblePanelKeysAtom,
 } from "./pluginNavSidebarAtoms";
 import {
-  arrangePluginNavPanels,
+  arrangePluginNavPanelPreferences,
+  BUILT_IN_SIDEBAR_NAVIGATION_KEYS,
   getPluginNavPanelKey,
   havePluginNavPanelOrdersDiverged,
-  hidePluginNavPanel,
   reorderPluginNavPanels,
-  seedLeadingNavPanelKeys,
-  showPluginNavPanel,
+  togglePluginNavPanelVisibility,
 } from "./pluginNavSidebarOrder";
 
-const BUILTIN_NAV_ROW_PLUGIN_ID = "__builtin__";
+export const PLUGIN_NAV_VISIBLE_LIMIT = 3;
 
-const TOOLS_NAV_ROW_KEY = getPluginNavPanelKey({
-  pluginId: BUILTIN_NAV_ROW_PLUGIN_ID,
-  id: "tools",
-});
+type PluginSidebarNavRow = {
+  kind: "plugin";
+  pluginId: string;
+  id: string;
+  title: string;
+  chrome: PluginNavPanelChrome;
+  panel: PluginNavPanelSlot | null;
+};
 
-type SidebarNavRow =
-  | {
-      kind: "tools";
-      pluginId: string;
-      id: string;
-      title: string;
-      routePath: string;
-    }
-  | {
-      kind: "plugin";
-      pluginId: string;
-      id: string;
-      title: string;
-      chrome: PluginNavPanelChrome;
-      panel: PluginNavPanelSlot | null;
-    };
-
-export function PluginNavSidebarItems({
-  toolsRoutePath,
-  ...props
-}: {
+export interface BuiltInSidebarNavEntry {
+  kind: "built-in";
+  pluginId: "__bb__";
+  id: string;
+  title: string;
+  icon: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+  onActivate: () => void;
+}
+
+type SidebarNavRow = PluginSidebarNavRow | BuiltInSidebarNavEntry;
+
+function isPluginSidebarNavRow(
+  row: SidebarNavRow,
+): row is PluginSidebarNavRow {
+  return row.kind === "plugin";
+}
+
+export function getTraditionalPluginNavPanelEntries(
+  entries: readonly PluginNavPanelChromeEntry[],
+): PluginNavPanelChromeEntry[] {
+  return entries.filter(
+    ({ chrome }) => chrome.pluginId !== AUTOMATIONS_PLUGIN_ID,
+  );
+}
+
+export function PluginNavSidebarItems(props: {
+  builtInEntries?: readonly BuiltInSidebarNavEntry[];
+  entries?: readonly PluginNavPanelChromeEntry[];
+  leadingOrderKeys?: readonly string[];
   onNavigate?: () => void;
   splitEnabled?: boolean;
-  toolsRoutePath?: string;
 }) {
-  const navPanels = usePluginNavPanelChrome();
-  const rows = useMemo<SidebarNavRow[]>(() => {
-    const pluginRows = navPanels.map<SidebarNavRow>(({ chrome, panel }) => ({
-      kind: "plugin",
-      pluginId: chrome.pluginId,
-      id: chrome.id,
-      title: chrome.title,
-      chrome,
-      panel,
-    }));
-    if (toolsRoutePath === undefined) return pluginRows;
-    return [
-      {
-        kind: "tools",
-        pluginId: BUILTIN_NAV_ROW_PLUGIN_ID,
-        id: "tools",
-        title: "Extensions",
-        routePath: toolsRoutePath,
-      },
-      ...pluginRows,
-    ];
-  }, [navPanels, toolsRoutePath]);
+  const discoveredEntries = usePluginNavPanelChrome();
+  const entries = props.entries ?? discoveredEntries;
+  const rows = useMemo<SidebarNavRow[]>(
+    () => [
+      ...(props.builtInEntries ?? []),
+      ...getTraditionalPluginNavPanelEntries(entries).map(
+        ({ chrome, panel }) => ({
+          kind: "plugin" as const,
+          pluginId: chrome.pluginId,
+          id: chrome.id,
+          title: chrome.title,
+          chrome,
+          panel,
+        }),
+      ),
+    ],
+    [entries, props.builtInEntries],
+  );
+  const leadingOrderKeys = useMemo(
+    () =>
+      props.leadingOrderKeys ??
+      (props.builtInEntries ?? []).map(getPluginNavPanelKey),
+    [props.builtInEntries, props.leadingOrderKeys],
+  );
   if (rows.length === 0) return null;
-  return <PluginNavSidebarItemList {...props} rows={rows} />;
+  return (
+    <PluginNavSidebarItemList
+      rows={rows}
+      leadingOrderKeys={leadingOrderKeys}
+      splitEnabled={props.splitEnabled ?? false}
+      {...(props.onNavigate ? { onNavigate: props.onNavigate } : {})}
+    />
+  );
 }
 
 function PluginNavSidebarItemList({
+  leadingOrderKeys,
   onNavigate,
   rows,
   splitEnabled = false,
 }: {
+  leadingOrderKeys: readonly string[];
   onNavigate?: () => void;
   rows: readonly SidebarNavRow[];
   splitEnabled?: boolean;
 }) {
   const location = useLocation();
+  const navigate = useNavigate();
   const [storedOrder, setStoredOrder] = useAtom(pluginNavPanelOrderAtom);
-  const [hiddenKeys, setHiddenKeys] = useAtom(hiddenPluginNavPanelsAtom);
-  const [isOverflowOpen, setIsOverflowOpen] = useState(false);
-
-  const { visible, hidden, normalizedOrder } = useMemo(() => {
-    const leadingKeys = rows.some((row) => row.kind === "tools")
-      ? [TOOLS_NAV_ROW_KEY]
-      : [];
-    return arrangePluginNavPanels({
-      panels: rows,
-      storedOrder: seedLeadingNavPanelKeys(storedOrder, leadingKeys),
-      hiddenKeys,
-    });
-  }, [hiddenKeys, rows, storedOrder]);
+  const [storedVisibleKeys, setStoredVisibleKeys] = useAtom(
+    pluginNavVisiblePanelKeysAtom,
+  );
+  const [isCustomizeOpen, setIsCustomizeOpen] = useState(false);
+  const builtInKeys = useMemo(
+    () =>
+      rows
+        .filter((row) => row.kind === "built-in")
+        .map(getPluginNavPanelKey),
+    [rows],
+  );
+  const newLeadingKeys = useMemo(
+    () => leadingOrderKeys.filter((key) => !storedOrder.includes(key)),
+    [leadingOrderKeys, storedOrder],
+  );
+  const {
+    ordered,
+    normalizedOrder,
+    normalizedVisibleKeys,
+    visible,
+    visibleKeys,
+  } = useMemo(
+    () =>
+      arrangePluginNavPanelPreferences({
+        panels: rows,
+        storedOrder:
+          newLeadingKeys.length === 0
+            ? storedOrder
+            : [...newLeadingKeys, ...storedOrder],
+        storedVisibleKeys:
+          storedVisibleKeys === null || newLeadingKeys.length === 0
+            ? storedVisibleKeys
+            : [...newLeadingKeys, ...storedVisibleKeys],
+        defaultVisibleCount:
+          builtInKeys.length + PLUGIN_NAV_VISIBLE_LIMIT,
+      }),
+    [
+      builtInKeys,
+      newLeadingKeys,
+      rows,
+      storedOrder,
+      storedVisibleKeys,
+    ],
+  );
 
   useEffect(() => {
     if (!havePluginNavPanelOrdersDiverged(storedOrder, normalizedOrder)) return;
     setStoredOrder(normalizedOrder);
   }, [normalizedOrder, setStoredOrder, storedOrder]);
 
-  const visibleKeys = useMemo(
-    () => visible.map(getPluginNavPanelKey),
-    [visible],
+  useEffect(() => {
+    if (
+      storedVisibleKeys === null ||
+      normalizedVisibleKeys === null ||
+      !havePluginNavPanelOrdersDiverged(
+        storedVisibleKeys,
+        normalizedVisibleKeys,
+      )
+    ) {
+      return;
+    }
+    setStoredVisibleKeys(normalizedVisibleKeys);
+  }, [normalizedVisibleKeys, setStoredVisibleKeys, storedVisibleKeys]);
+
+  const orderedKeys = useMemo(
+    () => ordered.map(getPluginNavPanelKey),
+    [ordered],
+  );
+
+  const setPanelVisible = useCallback(
+    (key: string, isVisible: boolean) => {
+      setStoredVisibleKeys(
+        togglePluginNavPanelVisibility(
+          normalizedVisibleKeys ?? visibleKeys,
+          key,
+          isVisible,
+        ),
+      );
+    },
+    [normalizedVisibleKeys, setStoredVisibleKeys, visibleKeys],
   );
 
   const handleDragEnd = useCallback(
@@ -171,11 +270,14 @@ function PluginNavSidebarItemList({
       ) {
         return;
       }
+      const activeGroupKeys = visibleKeys;
+      if (!activeGroupKeys.includes(event.active.id)) return;
+      if (!activeGroupKeys.includes(event.over.id)) return;
       const nextOrder = reorderPluginNavPanels({
         activeKey: event.active.id,
         overKey: event.over.id,
         order: normalizedOrder,
-        visibleKeys,
+        visibleKeys: activeGroupKeys,
       });
       if (nextOrder) setStoredOrder(nextOrder);
     },
@@ -185,104 +287,298 @@ function PluginNavSidebarItemList({
     onDragEnd: handleDragEnd,
   });
 
-  const handleHide = useCallback(
-    (key: string) => {
-      setHiddenKeys((current) => hidePluginNavPanel(current, key));
-    },
-    [setHiddenKeys],
-  );
-  const handleShow = useCallback(
-    (key: string) => {
-      setHiddenKeys((current) => showPluginNavPanel(current, key));
+  const handleCustomizeDragEnd = useCallback(
+    (activeKey: string, overKey: string) => {
+      const nextOrder = reorderPluginNavPanels({
+        activeKey,
+        overKey,
+        order: normalizedOrder,
+        visibleKeys: orderedKeys,
+      });
+      if (nextOrder) setStoredOrder(nextOrder);
     },
-    [setHiddenKeys],
+    [normalizedOrder, orderedKeys, setStoredOrder],
   );
 
-  const reorderDisabled = visible.length < 2;
+  const reorderDisabled = ordered.length < 2;
   const rowProps = {
     onNavigate,
     pathname: location.pathname,
     splitEnabled,
+    onHide: (key: string) => setPanelVisible(key, false),
   };
 
+  const handleActivate = useCallback(
+    (row: SidebarNavRow) => {
+      if (!isPluginSidebarNavRow(row)) {
+        row.onActivate();
+        return;
+      }
+      onNavigate?.();
+      void navigate(
+        getPluginPanelRoutePath({
+          pluginId: row.chrome.pluginId,
+          path: row.chrome.path,
+        }),
+      );
+    },
+    [navigate, onNavigate],
+  );
+
   return (
     <div
-      className="-mt-1.5 shrink-0 space-y-0.5 px-2 pb-2 group-data-[collapsible=icon]:hidden"
+      className="shrink-0 space-y-0.5 px-2 py-2 group-data-[collapsible=icon]:hidden"
       data-testid="plugin-nav-sidebar-items"
       onClickCapture={onClickCapture}
     >
+      {!visibleKeys.includes(BUILT_IN_SIDEBAR_NAVIGATION_KEYS.newThread) ? (
+        <div className="flex min-w-0 items-center justify-end">
+          <SidebarNavigationCustomizeMenu
+            isOpen={isCustomizeOpen}
+            rows={ordered}
+            visibleKeys={visibleKeys}
+            onActivate={handleActivate}
+            onDragEnd={handleCustomizeDragEnd}
+            onOpenChange={setIsCustomizeOpen}
+            onVisibleChange={setPanelVisible}
+          />
+        </div>
+      ) : null}
       <DndContext {...dndContextProps}>
         <SortableContext
           items={visibleKeys}
           strategy={verticalListSortingStrategy}
         >
-          {visible.map((row) => (
-            <SortableSidebarNavRow
-              key={getPluginNavPanelKey(row)}
-              row={row}
-              reorderDisabled={reorderDisabled}
-              onHide={handleHide}
-              {...rowProps}
-            />
-          ))}
+          {visible.map((row) =>
+            isPluginSidebarNavRow(row) ? (
+              <SortableSidebarNavRow
+                key={getPluginNavPanelKey(row)}
+                row={row}
+                reorderDisabled={reorderDisabled}
+                {...rowProps}
+              />
+            ) : (
+              <div
+                key={getPluginNavPanelKey(row)}
+                data-sidebar-navigation-item={getPluginNavPanelKey(row)}
+              >
+                {getPluginNavPanelKey(row) ===
+                BUILT_IN_SIDEBAR_NAVIGATION_KEYS.newThread ? (
+                  <div
+                    className="flex min-w-0 items-center gap-0.5"
+                    data-sidebar-navigation-primary-row
+                  >
+                    <div className="min-w-0 flex-1">{row.content}</div>
+                    <SidebarNavigationCustomizeMenu
+                      isOpen={isCustomizeOpen}
+                      rows={ordered}
+                      visibleKeys={visibleKeys}
+                      onActivate={handleActivate}
+                      onDragEnd={handleCustomizeDragEnd}
+                      onOpenChange={setIsCustomizeOpen}
+                      onVisibleChange={setPanelVisible}
+                    />
+                  </div>
+                ) : (
+                  row.content
+                )}
+              </div>
+            ),
+          )}
         </SortableContext>
       </DndContext>
-      {hidden.length > 0 ? (
-        <>
-          <PluginNavSidebarOverflowToggle
-            count={hidden.length}
-            isOpen={isOverflowOpen}
-            onToggle={() => setIsOverflowOpen((open) => !open)}
-          />
-          {isOverflowOpen
-            ? hidden.map((row) => (
-                <SidebarNavRowItem
-                  key={getPluginNavPanelKey(row)}
-                  row={row}
-                  isHidden
-                  onShow={handleShow}
-                  {...rowProps}
-                />
-              ))
-            : null}
-        </>
-      ) : null}
     </div>
   );
 }
 
-function PluginNavSidebarOverflowToggle({
-  count,
+function SidebarNavigationCustomizeMenu({
   isOpen,
-  onToggle,
+  onActivate,
+  onDragEnd,
+  onOpenChange,
+  onVisibleChange,
+  rows,
+  visibleKeys,
 }: {
-  count: number;
   isOpen: boolean;
-  onToggle: () => void;
+  onActivate: (row: SidebarNavRow) => void;
+  onDragEnd: (activeKey: string, overKey: string) => void;
+  onOpenChange: (isOpen: boolean) => void;
+  onVisibleChange: (key: string, visible: boolean) => void;
+  rows: readonly SidebarNavRow[];
+  visibleKeys: readonly string[];
 }) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const orderedKeys = useMemo(
+    () => rows.map(getPluginNavPanelKey),
+    [rows],
+  );
+  const visibleKeySet = useMemo(() => new Set(visibleKeys), [visibleKeys]);
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      if (
+        typeof event.active.id !== "string" ||
+        typeof event.over?.id !== "string"
+      ) {
+        return;
+      }
+      onDragEnd(event.active.id, event.over.id);
+    },
+    [onDragEnd],
+  );
+  const { dndContextProps, onClickCapture } = useSidebarReorderDnd({
+    onDragEnd: handleDragEnd,
+  });
+
   return (
-    <Button
-      type="button"
-      size="sm"
-      variant="ghost"
-      aria-expanded={isOpen}
-      className={cn(
-        PROJECT_LIST_ACTION_BUTTON_CLASS,
-        "w-full text-subtle-foreground/75",
-      )}
-      onClick={onToggle}
-      data-testid="plugin-nav-sidebar-overflow-toggle"
+    <Popover open={isOpen} onOpenChange={onOpenChange}>
+      <span className="inline-flex shrink-0">
+        <Tooltip delayDuration={350} disableHoverableContent>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                aria-label="Customize sidebar navigation"
+                className={cn(
+                  COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
+                  "shrink-0 text-subtle-foreground opacity-60 ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground hover:opacity-100 focus-visible:ring-2 focus-visible:opacity-100 max-md:pointer-coarse:[&_svg]:size-5 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-foreground data-[state=open]:opacity-100",
+                )}
+                data-testid="sidebar-navigation-customize-trigger"
+              >
+                <HugeiconsIcon
+                  icon={FilterHorizontalIcon}
+                  aria-hidden="true"
+                />
+              </Button>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="px-2 py-1">
+            Customize sidebar navigation
+          </TooltipContent>
+        </Tooltip>
+      </span>
+      <PopoverContent
+        ref={contentRef}
+        side="right"
+        align="start"
+        sideOffset={8}
+        className="w-52 p-2"
+        mobileTitle="Sidebar navigation"
+        onClickCapture={onClickCapture}
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+          contentRef.current
+            ?.querySelector<HTMLElement>(
+              "[data-sidebar-navigation-customize-launch]",
+            )
+            ?.focus();
+        }}
+      >
+        <div className="px-2 py-1 text-sm font-medium leading-5 text-popover-foreground">
+          Sidebar navigation
+        </div>
+        <div role="list" aria-label="Sidebar navigation" className="space-y-0.5">
+          <DndContext {...dndContextProps}>
+            <SortableContext
+              items={orderedKeys}
+              strategy={verticalListSortingStrategy}
+            >
+              {rows.map((row) => {
+                const key = getPluginNavPanelKey(row);
+                return (
+                  <SortableSidebarNavigationCustomizeItem
+                    key={key}
+                    row={row}
+                    checked={visibleKeySet.has(key)}
+                    reorderDisabled={rows.length < 2}
+                    onActivate={() => {
+                      onActivate(row);
+                      onOpenChange(false);
+                    }}
+                    onCheckedChange={(checked) =>
+                      onVisibleChange(key, checked)
+                    }
+                  />
+                );
+              })}
+            </SortableContext>
+          </DndContext>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function SortableSidebarNavigationCustomizeItem({
+  checked,
+  onActivate,
+  onCheckedChange,
+  reorderDisabled,
+  row,
+}: {
+  checked: boolean;
+  onActivate: () => void;
+  onCheckedChange: (checked: boolean) => void;
+  reorderDisabled: boolean;
+  row: SidebarNavRow;
+}) {
+  const panelKey = getPluginNavPanelKey(row);
+  const { dragBindings, setNodeRef, style } = useSidebarSortable({
+    id: panelKey,
+    disabled: reorderDisabled,
+  });
+  const icon = isPluginSidebarNavRow(row) ? (
+    <PluginIcon pluginId={row.chrome.pluginId} icon={row.chrome.icon} />
+  ) : (
+    row.icon
+  );
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      role="listitem"
+      className="group flex min-h-7 items-center rounded-md px-1 text-xs text-popover-foreground hover:bg-state-hover focus-within:bg-state-hover"
+      data-plugin-nav-customize-item={panelKey}
     >
-      <Icon
-        name="ChevronRight"
-        className={cn(
-          "size-3 shrink-0 transition-transform duration-150",
-          isOpen && "rotate-90",
-        )}
-        aria-hidden="true"
+      <button
+        type="button"
+        ref={dragBindings.setActivatorNodeRef}
+        {...dragBindings.attributes}
+        {...dragBindings.listeners}
+        aria-label={`Reorder ${row.title}`}
+        className="flex size-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-sm text-subtle-foreground/60 hover:text-popover-foreground focus-visible:text-popover-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing"
+        onClick={(event) => event.stopPropagation()}
+        data-plugin-nav-customize-drag-handle={panelKey}
+      >
+        <Icon
+          name="DragDropVertical"
+          className={COARSE_POINTER_ICON_SIZE_CLASS}
+        />
+      </button>
+      <button
+        type="button"
+        disabled={!isPluginSidebarNavRow(row) && row.disabled}
+        className="flex min-h-7 min-w-0 flex-1 items-center gap-2 rounded-sm px-1 text-left outline-none disabled:opacity-50"
+        onClick={onActivate}
+        data-sidebar-navigation-customize-launch={panelKey}
+      >
+        <span className="flex size-4 shrink-0 items-center justify-center">
+          {icon}
+        </span>
+        <span className="min-w-0 flex-1 truncate">{row.title}</span>
+      </button>
+      <Checkbox
+        checked={checked}
+        aria-label={`Show ${row.title} in sidebar`}
+        onCheckedChange={(nextChecked) => onCheckedChange(nextChecked === true)}
+        onClick={(event) => event.stopPropagation()}
+        data-plugin-nav-customize-checkbox={panelKey}
+        className="mx-1 border-input data-[state=checked]:border-primary data-[state=checked]:bg-transparent data-[state=checked]:text-primary"
       />
-      <span className="min-w-0 truncate text-left">{`More (${count})`}</span>
-    </Button>
+    </div>
   );
 }
 
@@ -307,13 +603,11 @@ const SortableSidebarNavRow = function SortableSidebarNavRow({
 };
 
 interface SidebarNavRowItemProps {
-  row: SidebarNavRow;
+  row: PluginSidebarNavRow;
   pathname: string;
   onNavigate?: () => void;
   splitEnabled: boolean;
-  isHidden?: boolean;
   onHide?: (key: string) => void;
-  onShow?: (key: string) => void;
   dragBindings?: SidebarSortableDragBindings;
   rowRef?: (element: HTMLElement | null) => void;
   rowStyle?: CSSProperties;
@@ -324,9 +618,7 @@ function SidebarNavRowItem({
   splitEnabled,
   ...props
 }: SidebarNavRowItemProps) {
-  return row.kind === "tools" ? (
-    <ToolsNavSidebarItem {...props} row={row} />
-  ) : (
+  return (
     <PluginNavSidebarItem {...props} row={row} splitEnabled={splitEnabled} />
   );
 }
@@ -334,18 +626,16 @@ function SidebarNavRowItem({
 type PluginNavRowMenuSurface = "context" | "dropdown";
 
 function PluginNavRowVisibilityMenuItem({
-  isHidden,
   onSelect,
   surface,
 }: {
-  isHidden: boolean;
   onSelect: () => void;
   surface: PluginNavRowMenuSurface;
 }) {
   const content = (
     <>
-      <Icon name={isHidden ? "Eye" : "EyeOff"} aria-hidden="true" />
-      {isHidden ? "Show in sidebar" : "Hide from sidebar"}
+      <Icon name="EyeOff" aria-hidden="true" />
+      Hide from sidebar
     </>
   );
   return surface === "context" ? (
@@ -364,27 +654,65 @@ function ToolsNavSidebarItemIcon() {
   );
 }
 
-function ToolsNavSidebarItem({
-  row,
-  pathname: _pathname,
+export function ExtensionsNavSidebarItem({
+  routePath,
   onNavigate,
-  ...props
-}: Omit<SidebarNavRowItemProps, "row" | "splitEnabled"> & {
-  row: Extract<SidebarNavRow, { kind: "tools" }>;
+}: {
+  routePath: string;
+  onNavigate?: () => void;
 }) {
   const navigate = useNavigate();
   return (
-    <SidebarNavRowChrome
-      {...props}
-      rowKey={getPluginNavPanelKey(row)}
-      title={row.title}
-      icon={<ToolsNavSidebarItemIcon />}
-      isActive={false}
-      onSelect={() => {
+    <Button
+      type="button"
+      size="sm"
+      variant="ghost"
+      className={cn(PROJECT_LIST_ACTION_BUTTON_CLASS, "w-full")}
+      onClick={() => {
         onNavigate?.();
-        void navigate(row.routePath);
+        void navigate(routePath);
       }}
-    />
+    >
+      <ToolsNavSidebarItemIcon />
+      <span className="min-w-0 truncate text-left">Extensions</span>
+    </Button>
+  );
+}
+
+export function AutomationsNavSidebarItem({
+  chrome,
+  onNavigate,
+}: {
+  chrome: PluginNavPanelChrome;
+  onNavigate?: () => void;
+}) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const path = getPluginPanelRoutePath({
+    pluginId: chrome.pluginId,
+    path: chrome.path,
+  });
+  const isActive =
+    location.pathname === path || location.pathname.startsWith(`${path}/`);
+  return (
+    <Button
+      type="button"
+      size="sm"
+      variant="ghost"
+      className={cn(
+        PROJECT_LIST_ACTION_BUTTON_CLASS,
+        "w-full",
+        isActive && "bg-sidebar-accent text-sidebar-foreground",
+      )}
+      aria-current={isActive ? "page" : undefined}
+      onClick={() => {
+        onNavigate?.();
+        void navigate(path);
+      }}
+    >
+      <PluginIcon pluginId={chrome.pluginId} icon={chrome.icon} />
+      <span className="min-w-0 truncate text-left">{chrome.title}</span>
+    </Button>
   );
 }
 
@@ -394,9 +722,7 @@ function PluginNavSidebarItem({
   onNavigate,
   splitEnabled,
   ...props
-}: Omit<SidebarNavRowItemProps, "row"> & {
-  row: Extract<SidebarNavRow, { kind: "plugin" }>;
-}) {
+}: SidebarNavRowItemProps) {
   const { chrome, panel } = row;
   const navigate = useNavigate();
   const isCompactViewport = useIsCompactViewport();
@@ -410,6 +736,7 @@ function PluginNavSidebarItem({
     panelPath: chrome.path,
     subPath: "",
   } as const;
+  const rowKey = getPluginNavPanelKey(row);
   const { onPointerDown, openInSplit } = usePaneContentSplitDrag({
     content,
     enabled: splitEnabled,
@@ -433,7 +760,7 @@ function PluginNavSidebarItem({
   return (
     <SidebarNavRowChrome
       {...props}
-      rowKey={getPluginNavPanelKey(row)}
+      rowKey={rowKey}
       title={chrome.title}
       icon={<PluginIcon pluginId={chrome.pluginId} icon={chrome.icon} />}
       isActive={pathname === path || pathname.startsWith(`${path}/`)}
@@ -459,11 +786,9 @@ interface SidebarNavRowChromeProps {
   isActive: boolean;
   onSelect: (event: ReactMouseEvent<HTMLButtonElement>) => void;
   onPointerDown?: PointerEventHandler<HTMLElement>;
+  onHide?: (key: string) => void;
   splitMiniMap?: MiniMapSlot[] | null;
   accessory?: ReactNode;
-  isHidden?: boolean;
-  onHide?: (key: string) => void;
-  onShow?: (key: string) => void;
   dragBindings?: SidebarSortableDragBindings;
   rowRef?: (element: HTMLElement | null) => void;
   rowStyle?: CSSProperties;
@@ -476,11 +801,9 @@ function SidebarNavRowChrome({
   isActive,
   onSelect,
   onPointerDown,
+  onHide,
   splitMiniMap = null,
   accessory,
-  isHidden = false,
-  onHide,
-  onShow,
   dragBindings,
   rowRef,
   rowStyle,
@@ -491,8 +814,7 @@ function SidebarNavRowChrome({
   const visibilityItem = (surface: PluginNavRowMenuSurface): ReactNode => (
     <PluginNavRowVisibilityMenuItem
       surface={surface}
-      isHidden={isHidden}
-      onSelect={() => (isHidden ? onShow?.(rowKey) : onHide?.(rowKey))}
+      onSelect={() => onHide?.(rowKey)}
     />
   );
 
@@ -503,6 +825,7 @@ function SidebarNavRowChrome({
           ref={rowRef}
           style={rowStyle}
           className={cn(SIDEBAR_HOVER_ACTIONS_ROW_CLASS, "relative")}
+          data-sidebar-navigation-item={rowKey}
         >
           <Button
             type="button"
@@ -513,7 +836,6 @@ function SidebarNavRowChrome({
               "w-full pr-7",
               accessory && "pr-18",
               isActive && "bg-sidebar-accent text-sidebar-foreground",
-              isHidden && "text-subtle-foreground",
             )}
             aria-current={isActive ? "page" : undefined}
             ref={dragBindings?.setActivatorNodeRef}
diff --git a/apps/app/src/components/plugin/pluginNavSidebarAtoms.test.ts b/apps/app/src/components/plugin/pluginNavSidebarAtoms.test.ts
new file mode 100644
index 0000000000..e4fe1cb79f
--- /dev/null
+++ b/apps/app/src/components/plugin/pluginNavSidebarAtoms.test.ts
@@ -0,0 +1,178 @@
+// @vitest-environment jsdom
+
+import { createStore } from "jotai";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+afterEach(() => {
+  window.localStorage.clear();
+  vi.resetModules();
+});
+
+describe("pluginNavPanelOrderAtom migration", () => {
+  it("converts legacy hidden keys into positional overflow order", async () => {
+    window.localStorage.setItem(
+      "bb.sidebar.pluginPanelOrder",
+      JSON.stringify(["docs/main", "tasks/main", "github/main"]),
+    );
+    window.localStorage.setItem(
+      "bb.sidebar.hiddenPluginPanels",
+      JSON.stringify(["tasks/main", "docs/main"]),
+    );
+
+    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
+      await import("./pluginNavSidebarAtoms");
+    const store = createStore();
+
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
+      "github/main",
+      "docs/main",
+      "tasks/main",
+    ]);
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
+      "github/main",
+    ]);
+    expect(
+      window.localStorage.getItem("bb.sidebar.hiddenPluginPanels"),
+    ).toBeNull();
+  });
+
+  it("migrates visibility when it is read before order", async () => {
+    window.localStorage.setItem(
+      "bb.sidebar.pluginPanelOrder",
+      JSON.stringify(["docs/main", "tasks/main", "github/main"]),
+    );
+    window.localStorage.setItem(
+      "bb.sidebar.hiddenPluginPanels",
+      JSON.stringify(["tasks/main"]),
+    );
+
+    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
+      await import("./pluginNavSidebarAtoms");
+    const store = createStore();
+
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
+      "docs/main",
+      "github/main",
+    ]);
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
+      "docs/main",
+      "github/main",
+      "tasks/main",
+    ]);
+  });
+
+  it("migrates hidden Automations into the unified visibility preference", async () => {
+    window.localStorage.setItem(
+      "bb.sidebar.pluginPanelOrder",
+      JSON.stringify(["docs/main"]),
+    );
+    window.localStorage.setItem(
+      "bb.sidebar.hiddenPluginPanels",
+      JSON.stringify(["docs/main", "automations/main"]),
+    );
+
+    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
+      await import("./pluginNavSidebarAtoms");
+    const store = createStore();
+
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
+      "docs/main",
+      "__bb__/automations",
+    ]);
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([]);
+    expect(
+      window.localStorage.getItem("bb.sidebar.hiddenPluginPanels"),
+    ).toBeNull();
+  });
+
+  it("maps legacy built-in order and visibility keys to unified keys", async () => {
+    window.localStorage.setItem(
+      "bb.sidebar.pluginPanelOrder",
+      JSON.stringify(["__builtin__/tools", "automations/main", "docs/main"]),
+    );
+    window.localStorage.setItem(
+      "bb.sidebar.visiblePluginPanels",
+      JSON.stringify(["automations/main", "__builtin__/tools"]),
+    );
+
+    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
+      await import("./pluginNavSidebarAtoms");
+    const store = createStore();
+
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
+      "__bb__/extensions",
+      "__bb__/automations",
+      "docs/main",
+    ]);
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
+      "__bb__/automations",
+      "__bb__/extensions",
+    ]);
+  });
+
+  it("keeps fresh visibility unset so defaults can follow available rows", async () => {
+    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
+      await import("./pluginNavSidebarAtoms");
+    const store = createStore();
+
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([]);
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toBeNull();
+  });
+
+  it("does not overwrite an existing visibility preference during migration", async () => {
+    window.localStorage.setItem(
+      "bb.sidebar.pluginPanelOrder",
+      JSON.stringify(["docs/main", "tasks/main", "github/main"]),
+    );
+    window.localStorage.setItem(
+      "bb.sidebar.visiblePluginPanels",
+      JSON.stringify(["tasks/main"]),
+    );
+    window.localStorage.setItem(
+      "bb.sidebar.hiddenPluginPanels",
+      JSON.stringify(["docs/main"]),
+    );
+
+    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
+      await import("./pluginNavSidebarAtoms");
+    const store = createStore();
+
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
+      "tasks/main",
+      "github/main",
+      "docs/main",
+    ]);
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual(["tasks/main"]);
+  });
+
+  it("persists an explicit empty visible list", async () => {
+    const { pluginNavVisiblePanelKeysAtom } = await import(
+      "./pluginNavSidebarAtoms"
+    );
+    const store = createStore();
+
+    store.set(pluginNavVisiblePanelKeysAtom, []);
+
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([]);
+    expect(
+      window.localStorage.getItem("bb.sidebar.visiblePluginPanels"),
+    ).toBe("[]");
+  });
+
+  it("normalizes persisted visible keys without discarding unregistered keys", async () => {
+    window.localStorage.setItem(
+      "bb.sidebar.visiblePluginPanels",
+      JSON.stringify(["docs/main", "future/main", "docs/main"]),
+    );
+
+    const { pluginNavVisiblePanelKeysAtom } = await import(
+      "./pluginNavSidebarAtoms"
+    );
+    const store = createStore();
+
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
+      "docs/main",
+      "future/main",
+    ]);
+  });
+});
diff --git a/apps/app/src/components/plugin/pluginNavSidebarAtoms.ts b/apps/app/src/components/plugin/pluginNavSidebarAtoms.ts
index 036f1f9a41..63657d2167 100644
--- a/apps/app/src/components/plugin/pluginNavSidebarAtoms.ts
+++ b/apps/app/src/components/plugin/pluginNavSidebarAtoms.ts
@@ -1,19 +1,148 @@
 import { atomWithStorage } from "jotai/utils";
-import { createJsonLocalStorage } from "@/lib/browser-storage";
+import {
+  createJsonLocalStorage,
+  type SyncStorage,
+} from "@/lib/browser-storage";
+import { AUTOMATIONS_PLUGIN_ID } from "@/lib/route-paths";
+import {
+  BUILT_IN_SIDEBAR_NAVIGATION_KEYS,
+  migrateLegacyHiddenPluginNavPanelOrder,
+} from "./pluginNavSidebarOrder";
 
 const PLUGIN_NAV_PANEL_ORDER_STORAGE_KEY = "bb.sidebar.pluginPanelOrder";
+const VISIBLE_PLUGIN_NAV_PANELS_STORAGE_KEY =
+  "bb.sidebar.visiblePluginPanels";
 const HIDDEN_PLUGIN_NAV_PANELS_STORAGE_KEY = "bb.sidebar.hiddenPluginPanels";
+const LEGACY_EXTENSIONS_NAV_PANEL_KEY = "__builtin__/tools";
+
+function toSidebarNavigationKey(key: string): string {
+  if (key === LEGACY_EXTENSIONS_NAV_PANEL_KEY) {
+    return BUILT_IN_SIDEBAR_NAVIGATION_KEYS.extensions;
+  }
+  if (key.startsWith(`${AUTOMATIONS_PLUGIN_ID}/`)) {
+    return BUILT_IN_SIDEBAR_NAVIGATION_KEYS.automations;
+  }
+  return key;
+}
+
+function normalizeStringArray(value: unknown): string[] {
+  if (!Array.isArray(value)) return [];
+  return [
+    ...new Set(
+      value.filter((item): item is string => typeof item === "string"),
+    ),
+  ];
+}
+
+function normalizeSidebarNavigationKeys(value: unknown): string[] {
+  return [...new Set(normalizeStringArray(value).map(toSidebarNavigationKey))];
+}
+
+function normalizeVisiblePanelKeys(value: unknown): string[] | null {
+  return Array.isArray(value) ? normalizeSidebarNavigationKeys(value) : null;
+}
+
+function migrateLegacyPluginNavPreferences(
+  storage: SyncStorage<unknown>,
+  order: readonly string[],
+): string[] {
+  const normalizedOrder = normalizeSidebarNavigationKeys(order);
+  const legacyHiddenValue = storage.getItem(
+    HIDDEN_PLUGIN_NAV_PANELS_STORAGE_KEY,
+    null,
+  );
+  const legacyHidden = normalizeSidebarNavigationKeys(
+    legacyHiddenValue,
+  );
+  const migrated = migrateLegacyHiddenPluginNavPanelOrder(
+    normalizedOrder,
+    legacyHidden,
+  );
+  const storedVisibleKeys = normalizeVisiblePanelKeys(
+    storage.getItem(VISIBLE_PLUGIN_NAV_PANELS_STORAGE_KEY, null),
+  );
+  if (storedVisibleKeys === null && Array.isArray(legacyHiddenValue)) {
+    const hidden = new Set(legacyHidden);
+    storage.setItem(
+      VISIBLE_PLUGIN_NAV_PANELS_STORAGE_KEY,
+      migrated.filter((key) => !hidden.has(key)),
+    );
+  }
+  storage.setItem(PLUGIN_NAV_PANEL_ORDER_STORAGE_KEY, migrated);
+  storage.removeItem(HIDDEN_PLUGIN_NAV_PANELS_STORAGE_KEY);
+  return migrated;
+}
+
+function createPluginNavPanelOrderStorage(): SyncStorage<string[]> {
+  const storage = createJsonLocalStorage<unknown>();
+  return {
+    getItem(key, initialValue) {
+      const order = normalizeSidebarNavigationKeys(
+        storage.getItem(key, initialValue),
+      );
+      return migrateLegacyPluginNavPreferences(storage, order);
+    },
+    setItem(key, value) {
+      storage.setItem(key, normalizeSidebarNavigationKeys(value));
+    },
+    removeItem(key) {
+      storage.removeItem(key);
+    },
+    subscribe: (key, callback, initialValue) =>
+      storage.subscribe?.(
+        key,
+        (value) => callback(normalizeSidebarNavigationKeys(value)),
+        initialValue,
+      ),
+  };
+}
+
+function createPluginNavVisiblePanelKeysStorage(): SyncStorage<
+  string[] | null
+> {
+  const storage = createJsonLocalStorage<unknown>();
+  return {
+    getItem(key, initialValue) {
+      const storedVisibleKeys = normalizeVisiblePanelKeys(
+        storage.getItem(key, initialValue),
+      );
+      if (storedVisibleKeys !== null) return storedVisibleKeys;
+
+      const order = normalizeSidebarNavigationKeys(
+        storage.getItem(PLUGIN_NAV_PANEL_ORDER_STORAGE_KEY, []),
+      );
+      migrateLegacyPluginNavPreferences(storage, order);
+      return normalizeVisiblePanelKeys(storage.getItem(key, initialValue));
+    },
+    setItem(key, value) {
+      if (value === null) {
+        storage.removeItem(key);
+        return;
+      }
+      storage.setItem(key, normalizeSidebarNavigationKeys(value));
+    },
+    removeItem(key) {
+      storage.removeItem(key);
+    },
+    subscribe: (key, callback, initialValue) =>
+      storage.subscribe?.(
+        key,
+        (value) => callback(normalizeVisiblePanelKeys(value)),
+        initialValue,
+      ),
+  };
+}
 
 export const pluginNavPanelOrderAtom = atomWithStorage<string[]>(
   PLUGIN_NAV_PANEL_ORDER_STORAGE_KEY,
   [],
-  createJsonLocalStorage<string[]>(),
+  createPluginNavPanelOrderStorage(),
   { getOnInit: true },
 );
 
-export const hiddenPluginNavPanelsAtom = atomWithStorage<string[]>(
-  HIDDEN_PLUGIN_NAV_PANELS_STORAGE_KEY,
-  [],
-  createJsonLocalStorage<string[]>(),
+export const pluginNavVisiblePanelKeysAtom = atomWithStorage<string[] | null>(
+  VISIBLE_PLUGIN_NAV_PANELS_STORAGE_KEY,
+  null,
+  createPluginNavVisiblePanelKeysStorage(),
   { getOnInit: true },
 );
diff --git a/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts b/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts
index af433ed960..f3927f2174 100644
--- a/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts
+++ b/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts
@@ -1,9 +1,11 @@
 import { describe, expect, it } from "vitest";
 import {
+  arrangePluginNavPanelPreferences,
   arrangePluginNavPanels,
   getPluginNavPanelKey,
+  migrateLegacyHiddenPluginNavPanelOrder,
   reorderPluginNavPanels,
-  seedLeadingNavPanelKeys,
+  togglePluginNavPanelVisibility,
 } from "./pluginNavSidebarOrder";
 
 function panel(pluginId: string, id: string) {
@@ -16,13 +18,12 @@ const tasks = panel("tasks", "board");
 
 describe("arrangePluginNavPanels", () => {
   it("falls back to registry order before the user has reordered anything", () => {
-    const { visible, normalizedOrder } = arrangePluginNavPanels({
+    const { ordered, normalizedOrder } = arrangePluginNavPanels({
       panels: [github, docs, tasks],
       storedOrder: [],
-      hiddenKeys: [],
     });
 
-    expect(visible.map(getPluginNavPanelKey)).toEqual([
+    expect(ordered.map(getPluginNavPanelKey)).toEqual([
       "github/pulls",
       "docs/vault",
       "tasks/board",
@@ -34,28 +35,26 @@ describe("arrangePluginNavPanels", () => {
     ]);
   });
 
-  it("appends newly installed panels last instead of at the top of a customized list", () => {
-    const { visible } = arrangePluginNavPanels({
+  it("appends newly installed panels last", () => {
+    const { ordered } = arrangePluginNavPanels({
       panels: [github, docs, tasks],
       storedOrder: ["tasks/board", "github/pulls"],
-      hiddenKeys: [],
     });
 
-    expect(visible.map(getPluginNavPanelKey)).toEqual([
+    expect(ordered.map(getPluginNavPanelKey)).toEqual([
       "tasks/board",
       "github/pulls",
       "docs/vault",
     ]);
   });
 
-  it("renders no row for an unregistered key but keeps its slot in the order", () => {
-    const { visible, normalizedOrder } = arrangePluginNavPanels({
+  it("keeps unregistered keys in the normalized order", () => {
+    const { ordered, normalizedOrder } = arrangePluginNavPanels({
       panels: [github, docs],
       storedOrder: ["strudel/repl", "docs/vault", "github/pulls"],
-      hiddenKeys: [],
     });
 
-    expect(visible.map(getPluginNavPanelKey)).toEqual([
+    expect(ordered.map(getPluginNavPanelKey)).toEqual([
       "docs/vault",
       "github/pulls",
     ]);
@@ -65,115 +64,196 @@ describe("arrangePluginNavPanels", () => {
       "github/pulls",
     ]);
   });
+});
 
-  it("returns a late-registering panel to its stored slot", () => {
-    const { visible } = arrangePluginNavPanels({
-      panels: [github, docs, tasks],
-      storedOrder: ["tasks/board", "docs/vault", "github/pulls"],
-      hiddenKeys: [],
+describe("arrangePluginNavPanelPreferences", () => {
+  it("shows the first three ordered panels by default", () => {
+    const extra = panel("calendar", "agenda");
+    const result = arrangePluginNavPanelPreferences({
+      panels: [github, docs, tasks, extra],
+      storedOrder: ["tasks/board", "github/pulls"],
+      storedVisibleKeys: null,
+      defaultVisibleCount: 3,
     });
 
-    expect(visible.map(getPluginNavPanelKey)).toEqual([
+    expect(result.visible.map(getPluginNavPanelKey)).toEqual([
       "tasks/board",
+      "github/pulls",
       "docs/vault",
+    ]);
+    expect(result.overflow.map(getPluginNavPanelKey)).toEqual([
+      "calendar/agenda",
+    ]);
+    expect(result.visibleKeys).toEqual([
+      "tasks/board",
       "github/pulls",
+      "docs/vault",
     ]);
+    expect(result.normalizedVisibleKeys).toBeNull();
   });
 
-  it("splits hidden panels out while both lists keep the user's order", () => {
-    const { visible, hidden } = arrangePluginNavPanels({
+  it("keeps an explicit empty visible list meaningful", () => {
+    const result = arrangePluginNavPanelPreferences({
       panels: [github, docs, tasks],
-      storedOrder: ["tasks/board", "docs/vault", "github/pulls"],
-      hiddenKeys: ["docs/vault", "tasks/board"],
+      storedOrder: [],
+      storedVisibleKeys: [],
+      defaultVisibleCount: 3,
     });
 
-    expect(visible.map(getPluginNavPanelKey)).toEqual(["github/pulls"]);
-    expect(hidden.map(getPluginNavPanelKey)).toEqual([
+    expect(result.visible).toEqual([]);
+    expect(result.overflow.map(getPluginNavPanelKey)).toEqual([
+      "github/pulls",
+      "docs/vault",
       "tasks/board",
+    ]);
+    expect(result.normalizedVisibleKeys).toEqual([]);
+  });
+
+  it("preserves visibility for a temporarily unregistered panel", () => {
+    const result = arrangePluginNavPanelPreferences({
+      panels: [github, docs, tasks],
+      storedOrder: ["future/main", "docs/vault", "github/pulls"],
+      storedVisibleKeys: ["future/main", "github/pulls", "future/main"],
+      defaultVisibleCount: 3,
+    });
+
+    expect(result.visible.map(getPluginNavPanelKey)).toEqual(["github/pulls"]);
+    expect(result.overflow.map(getPluginNavPanelKey)).toEqual([
       "docs/vault",
+      "tasks/board",
+    ]);
+    expect(result.normalizedVisibleKeys).toEqual([
+      "future/main",
+      "github/pulls",
     ]);
   });
 
-  it("ignores duplicate stored keys so a corrupted list can't render a panel twice", () => {
-    const { visible } = arrangePluginNavPanels({
-      panels: [github, docs],
-      storedOrder: ["github/pulls", "github/pulls", "docs/vault"],
-      hiddenKeys: [],
+  it("places a newly installed unchecked panel in overflow", () => {
+    const result = arrangePluginNavPanelPreferences({
+      panels: [github, docs, tasks],
+      storedOrder: ["github/pulls", "docs/vault"],
+      storedVisibleKeys: ["github/pulls", "docs/vault"],
+      defaultVisibleCount: 3,
     });
 
-    expect(visible.map(getPluginNavPanelKey)).toEqual([
+    expect(result.visible.map(getPluginNavPanelKey)).toEqual([
+      "github/pulls",
+      "docs/vault",
+    ]);
+    expect(result.overflow.map(getPluginNavPanelKey)).toEqual(["tasks/board"]);
+    expect(result.normalizedOrder).toEqual([
       "github/pulls",
       "docs/vault",
+      "tasks/board",
+    ]);
+  });
+
+  it("uses the master order for both visible and overflow panels", () => {
+    const result = arrangePluginNavPanelPreferences({
+      panels: [github, docs, tasks],
+      storedOrder: ["tasks/board", "github/pulls", "docs/vault"],
+      storedVisibleKeys: ["docs/vault", "tasks/board"],
+      defaultVisibleCount: 3,
+    });
+
+    expect(result.visible.map(getPluginNavPanelKey)).toEqual([
+      "tasks/board",
+      "docs/vault",
+    ]);
+    expect(result.overflow.map(getPluginNavPanelKey)).toEqual([
+      "github/pulls",
     ]);
   });
 });
 
-describe("reorderPluginNavPanels", () => {
-  it("moves a visible row to the target slot", () => {
+describe("legacy hidden-panel migration", () => {
+  it("moves hidden keys behind visible keys while preserving both orders", () => {
     expect(
-      reorderPluginNavPanels({
-        activeKey: "tasks/board",
-        overKey: "github/pulls",
-        order: ["github/pulls", "docs/vault", "tasks/board"],
-        visibleKeys: ["github/pulls", "docs/vault", "tasks/board"],
-      }),
-    ).toEqual(["tasks/board", "github/pulls", "docs/vault"]);
+      migrateLegacyHiddenPluginNavPanelOrder(
+        ["tasks/board", "docs/vault", "github/pulls", "docs/vault"],
+        ["tasks/board", "docs/vault"],
+      ),
+    ).toEqual(["github/pulls", "tasks/board", "docs/vault"]);
   });
 
-  it("keeps hidden panels pinned to their index in the stored order", () => {
+  it("retains a hidden key missing from the stored order", () => {
     expect(
-      reorderPluginNavPanels({
-        activeKey: "tasks/board",
-        overKey: "github/pulls",
-        order: ["github/pulls", "docs/vault", "tasks/board"],
-        visibleKeys: ["github/pulls", "tasks/board"],
-      }),
-    ).toEqual(["tasks/board", "docs/vault", "github/pulls"]);
+      migrateLegacyHiddenPluginNavPanelOrder(
+        ["github/pulls"],
+        ["docs/vault"],
+      ),
+    ).toEqual(["github/pulls", "docs/vault"]);
   });
 
-  it("returns null when the drag lands where it started", () => {
+});
+
+describe("reorderPluginNavPanels", () => {
+  it("moves a row across an overflow boundary", () => {
+    const order = [
+      "one/main",
+      "two/main",
+      "three/main",
+      "four/main",
+      "five/main",
+      "six/main",
+      "seven/main",
+    ];
+
     expect(
       reorderPluginNavPanels({
-        activeKey: "github/pulls",
-        overKey: "github/pulls",
-        order: ["github/pulls", "docs/vault"],
-        visibleKeys: ["github/pulls", "docs/vault"],
+        activeKey: "one/main",
+        overKey: "six/main",
+        order,
+        visibleKeys: order,
       }),
-    ).toBeNull();
+    ).toEqual([
+      "two/main",
+      "three/main",
+      "four/main",
+      "five/main",
+      "six/main",
+      "one/main",
+      "seven/main",
+    ]);
   });
 
-  it("returns null when the drop target is not a visible row", () => {
+  it("returns null when the drag lands where it started", () => {
     expect(
       reorderPluginNavPanels({
         activeKey: "github/pulls",
-        overKey: "docs/vault",
+        overKey: "github/pulls",
         order: ["github/pulls", "docs/vault"],
-        visibleKeys: ["github/pulls"],
+        visibleKeys: ["github/pulls", "docs/vault"],
       }),
     ).toBeNull();
   });
 });
 
-describe("seedLeadingNavPanelKeys", () => {
-  it("leaves an untouched order empty so registry order still wins", () => {
-    expect(seedLeadingNavPanelKeys([], ["__builtin__/tools"])).toEqual([]);
-  });
+describe("togglePluginNavPanelVisibility", () => {
+  it("checks and unchecks panels without losing other keys", () => {
+    const checked = togglePluginNavPanelVisibility(
+      ["github/pulls", "future/main"],
+      "docs/vault",
+      true,
+    );
 
-  it("prepends a built-in key that a customized order predates", () => {
+    expect(checked).toEqual([
+      "github/pulls",
+      "future/main",
+      "docs/vault",
+    ]);
     expect(
-      seedLeadingNavPanelKeys(
-        ["github/pulls", "docs/vault"],
-        ["__builtin__/tools"],
-      ),
-    ).toEqual(["__builtin__/tools", "github/pulls", "docs/vault"]);
+      togglePluginNavPanelVisibility(checked, "github/pulls", false),
+    ).toEqual(["future/main", "docs/vault"]);
   });
 
-  it("keeps the user's slot for a built-in key they already moved", () => {
+  it("does not duplicate a checked panel", () => {
     expect(
-      seedLeadingNavPanelKeys(
-        ["github/pulls", "__builtin__/tools"],
-        ["__builtin__/tools"],
+      togglePluginNavPanelVisibility(
+        ["github/pulls", "github/pulls"],
+        "github/pulls",
+        true,
       ),
-    ).toEqual(["github/pulls", "__builtin__/tools"]);
+    ).toEqual(["github/pulls"]);
   });
 });
diff --git a/apps/app/src/components/plugin/pluginNavSidebarOrder.ts b/apps/app/src/components/plugin/pluginNavSidebarOrder.ts
index a8259963e4..bfd2a00beb 100644
--- a/apps/app/src/components/plugin/pluginNavSidebarOrder.ts
+++ b/apps/app/src/components/plugin/pluginNavSidebarOrder.ts
@@ -3,6 +3,20 @@ interface PluginNavPanelIdentity {
   id: string;
 }
 
+export const BUILT_IN_SIDEBAR_NAVIGATION_KEYS = {
+  newThread: "__bb__/new-thread",
+  searchThreads: "__bb__/search-threads",
+  extensions: "__bb__/extensions",
+  automations: "__bb__/automations",
+} as const;
+
+export const DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER = [
+  BUILT_IN_SIDEBAR_NAVIGATION_KEYS.newThread,
+  BUILT_IN_SIDEBAR_NAVIGATION_KEYS.searchThreads,
+  BUILT_IN_SIDEBAR_NAVIGATION_KEYS.extensions,
+  BUILT_IN_SIDEBAR_NAVIGATION_KEYS.automations,
+] as const;
+
 export function getPluginNavPanelKey(panel: PluginNavPanelIdentity): string {
   return `${panel.pluginId}/${panel.id}`;
 }
@@ -10,19 +24,32 @@ export function getPluginNavPanelKey(panel: PluginNavPanelIdentity): string {
 interface ArrangePluginNavPanelsArgs<TPanel extends PluginNavPanelIdentity> {
   panels: readonly TPanel[];
   storedOrder: readonly string[];
-  hiddenKeys: readonly string[];
 }
 
 interface ArrangedPluginNavPanels<TPanel extends PluginNavPanelIdentity> {
-  visible: TPanel[];
-  hidden: TPanel[];
+  ordered: TPanel[];
   normalizedOrder: string[];
 }
 
+interface ArrangePluginNavPanelPreferencesArgs<
+  TPanel extends PluginNavPanelIdentity,
+> extends ArrangePluginNavPanelsArgs<TPanel> {
+  storedVisibleKeys: readonly string[] | null;
+  defaultVisibleCount: number;
+}
+
+interface ArrangedPluginNavPanelPreferences<
+  TPanel extends PluginNavPanelIdentity,
+> extends ArrangedPluginNavPanels<TPanel> {
+  visible: TPanel[];
+  overflow: TPanel[];
+  visibleKeys: string[];
+  normalizedVisibleKeys: string[] | null;
+}
+
 export function arrangePluginNavPanels<TPanel extends PluginNavPanelIdentity>({
   panels,
   storedOrder,
-  hiddenKeys,
 }: ArrangePluginNavPanelsArgs<TPanel>): ArrangedPluginNavPanels<TPanel> {
   const byKey = new Map(
     panels.map((panel) => [getPluginNavPanelKey(panel), panel]),
@@ -45,15 +72,58 @@ export function arrangePluginNavPanels<TPanel extends PluginNavPanelIdentity>({
     ordered.push(panel);
   }
 
-  const hiddenSet = new Set(hiddenKeys);
-  const visible: TPanel[] = [];
-  const hidden: TPanel[] = [];
-  for (const panel of ordered) {
-    if (hiddenSet.has(getPluginNavPanelKey(panel))) hidden.push(panel);
-    else visible.push(panel);
-  }
+  return { ordered, normalizedOrder };
+}
+
+export function arrangePluginNavPanelPreferences<
+  TPanel extends PluginNavPanelIdentity,
+>({
+  panels,
+  storedOrder,
+  storedVisibleKeys,
+  defaultVisibleCount,
+}: ArrangePluginNavPanelPreferencesArgs<TPanel>): ArrangedPluginNavPanelPreferences<TPanel> {
+  const { ordered, normalizedOrder } = arrangePluginNavPanels({
+    panels,
+    storedOrder,
+  });
+  const normalizedVisibleKeys =
+    storedVisibleKeys === null
+      ? null
+      : [...new Set(storedVisibleKeys.filter((key) => key.length > 0))];
+  const visibleKeys =
+    normalizedVisibleKeys ??
+    ordered
+      .slice(0, Math.max(0, defaultVisibleCount))
+      .map(getPluginNavPanelKey);
+  const visibleSet = new Set(visibleKeys);
 
-  return { visible, hidden, normalizedOrder };
+  return {
+    ordered,
+    normalizedOrder,
+    visible: ordered.filter((panel) =>
+      visibleSet.has(getPluginNavPanelKey(panel)),
+    ),
+    overflow: ordered.filter(
+      (panel) => !visibleSet.has(getPluginNavPanelKey(panel)),
+    ),
+    visibleKeys: ordered
+      .map(getPluginNavPanelKey)
+      .filter((key) => visibleSet.has(key)),
+    normalizedVisibleKeys,
+  };
+}
+
+export function togglePluginNavPanelVisibility(
+  visibleKeys: readonly string[],
+  key: string,
+  visible: boolean,
+): string[] {
+  const normalized = [...new Set(visibleKeys.filter((item) => item.length > 0))];
+  if (visible) {
+    return normalized.includes(key) ? normalized : [...normalized, key];
+  }
+  return normalized.filter((item) => item !== key);
 }
 
 interface ReorderPluginNavPanelsArgs {
@@ -84,28 +154,18 @@ export function reorderPluginNavPanels({
   );
 }
 
-export function seedLeadingNavPanelKeys(
+export function migrateLegacyHiddenPluginNavPanelOrder(
   order: readonly string[],
-  leadingKeys: readonly string[],
-): string[] {
-  const next = [...order];
-  if (next.length === 0) return next;
-  const missing = leadingKeys.filter((key) => !next.includes(key));
-  return missing.length === 0 ? next : [...missing, ...next];
-}
-
-export function hidePluginNavPanel(
   hiddenKeys: readonly string[],
-  key: string,
-): string[] {
-  return hiddenKeys.includes(key) ? [...hiddenKeys] : [...hiddenKeys, key];
-}
-
-export function showPluginNavPanel(
-  hiddenKeys: readonly string[],
-  key: string,
 ): string[] {
-  return hiddenKeys.filter((hiddenKey) => hiddenKey !== key);
+  const uniqueOrder = [
+    ...new Set([...order, ...hiddenKeys].filter((key) => key.length > 0)),
+  ];
+  const hidden = new Set(hiddenKeys);
+  return [
+    ...uniqueOrder.filter((key) => !hidden.has(key)),
+    ...uniqueOrder.filter((key) => hidden.has(key)),
+  ];
 }
 
 export function havePluginNavPanelOrdersDiverged(
diff --git a/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx b/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
index ec40b35299..85c46fd70a 100644
--- a/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
+++ b/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
@@ -1,11 +1,33 @@
 import type { ComponentProps } from "react";
-import { PluginNavSidebarItems } from "@/components/plugin/PluginNavSidebarItems";
-import { ProjectListActionButtons } from "./ProjectList";
+import { useNavigate } from "react-router-dom";
+import {
+  AutomationsNavSidebarItem,
+  type BuiltInSidebarNavEntry,
+  ExtensionsNavSidebarItem,
+  getTraditionalPluginNavPanelEntries,
+  PluginNavSidebarItems,
+} from "@/components/plugin/PluginNavSidebarItems";
+import { useAppCommandRunner } from "@/components/commands/AppCommandProvider";
+import { PluginIcon } from "@/components/plugin/PluginIcon";
+import { Icon } from "@bb/shared-ui/icon";
+import { usePluginNavPanelChrome } from "@/lib/plugin-nav-panel-chrome";
+import {
+  AUTOMATIONS_PLUGIN_ID,
+  getPluginPanelRoutePath,
+} from "@/lib/route-paths";
+import {
+  ProjectListNewThreadAction,
+  ProjectListSearchThreadsAction,
+} from "./ProjectList";
+import { DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER } from "@/components/plugin/pluginNavSidebarOrder";
 
 export type BuiltInSidebarNavigationProps = ComponentProps<
-  typeof ProjectListActionButtons
+  typeof ProjectListNewThreadAction
 > &
-  ComponentProps<typeof PluginNavSidebarItems>;
+  ComponentProps<typeof ProjectListSearchThreadsAction> &
+  ComponentProps<typeof PluginNavSidebarItems> & {
+    toolsRoutePath?: string;
+  };
 
 export function BuiltInSidebarNavigation({
   newThreadSplit,
@@ -15,23 +37,113 @@ export function BuiltInSidebarNavigation({
   splitEnabled,
   toolsRoutePath,
 }: BuiltInSidebarNavigationProps) {
-  return (
-    <div className="contents" data-testid="built-in-sidebar-navigation">
-      <div
-        data-testid="app-sidebar-primary-actions"
-        className="shrink-0 px-2 py-2 group-data-[collapsible=icon]:hidden"
-      >
-        <ProjectListActionButtons
+  const navigate = useNavigate();
+  const commandRunner = useAppCommandRunner();
+  const pluginNavPanels = usePluginNavPanelChrome();
+  const automationsNavPanel = pluginNavPanels.find(
+    ({ chrome }) => chrome.pluginId === AUTOMATIONS_PLUGIN_ID,
+  );
+  const traditionalPluginNavPanels = getTraditionalPluginNavPanelEntries(
+    pluginNavPanels,
+  );
+  const builtInEntries: BuiltInSidebarNavEntry[] = [
+    {
+      kind: "built-in",
+      pluginId: "__bb__",
+      id: "new-thread",
+      title: "New thread",
+      icon: <Icon name="MessageSquarePlus" aria-hidden="true" />,
+      content: (
+        <ProjectListNewThreadAction
           splitEnabled={splitEnabled}
           newThreadSplit={newThreadSplit}
           onNewChat={onNewChat}
-          onSearchThreads={onSearchThreads}
         />
-      </div>
+      ),
+      disabled: onNewChat === undefined,
+      onActivate: () => onNewChat?.(),
+    },
+    {
+      kind: "built-in",
+      pluginId: "__bb__",
+      id: "search-threads",
+      title: "Search threads",
+      icon: <Icon name="Search" aria-hidden="true" />,
+      content: (
+        <ProjectListSearchThreadsAction onSearchThreads={onSearchThreads} />
+      ),
+      disabled: !commandRunner.isCommandAvailable("thread.search", null),
+      onActivate: () => {
+        onSearchThreads?.();
+        commandRunner.dispatch("thread.search", null);
+      },
+    },
+    ...(toolsRoutePath
+      ? [
+          {
+            kind: "built-in" as const,
+            pluginId: "__bb__" as const,
+            id: "extensions",
+            title: "Extensions",
+            icon: <Icon name="Toolbox" aria-hidden="true" />,
+            content: (
+              <ExtensionsNavSidebarItem
+                routePath={toolsRoutePath}
+                onNavigate={onNavigate}
+              />
+            ),
+            onActivate: () => {
+              onNavigate?.();
+              void navigate(toolsRoutePath);
+            },
+          },
+        ]
+      : []),
+    ...(automationsNavPanel
+      ? [
+          {
+            kind: "built-in" as const,
+            pluginId: "__bb__" as const,
+            id: "automations",
+            title: automationsNavPanel.chrome.title,
+            icon: (
+              <PluginIcon
+                pluginId={automationsNavPanel.chrome.pluginId}
+                icon={automationsNavPanel.chrome.icon}
+              />
+            ),
+            content: (
+              <AutomationsNavSidebarItem
+                chrome={automationsNavPanel.chrome}
+                onNavigate={onNavigate}
+              />
+            ),
+            onActivate: () => {
+              onNavigate?.();
+              void navigate(
+                getPluginPanelRoutePath({
+                  pluginId: automationsNavPanel.chrome.pluginId,
+                  path: automationsNavPanel.chrome.path,
+                }),
+              );
+            },
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <div
+      className="contents"
+      data-testid="built-in-sidebar-navigation"
+      data-sidebar-navigation-unified="true"
+    >
       <PluginNavSidebarItems
+        builtInEntries={builtInEntries}
+        entries={traditionalPluginNavPanels}
+        leadingOrderKeys={DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER}
         onNavigate={onNavigate}
         splitEnabled={splitEnabled}
-        toolsRoutePath={toolsRoutePath}
       />
     </div>
   );
diff --git a/apps/app/src/components/sidebar/ProjectList.tsx b/apps/app/src/components/sidebar/ProjectList.tsx
index dc8350a6e5..f15086e9df 100644
--- a/apps/app/src/components/sidebar/ProjectList.tsx
+++ b/apps/app/src/components/sidebar/ProjectList.tsx
@@ -48,7 +48,10 @@ import { BbHttpError } from "@bb/sdk/browser";
 import { useSetRootComposeProjectId } from "@/lib/root-compose-selection";
 import { cn } from "@bb/shared-ui/lib/utils";
 import { Button } from "@bb/shared-ui/button";
-import { AppCommandShortcutHint } from "@/components/commands/AppCommandShortcutHint";
+import {
+  AppCommandShortcutHint,
+  AppCommandShortcutPill,
+} from "@/components/commands/AppCommandShortcutHint";
 import {
   ThreadSectionCreateDialog,
   ThreadSectionRenameDialog,
@@ -157,16 +160,24 @@ interface ProjectListProps {
   isCreatingProject?: boolean;
 }
 
-interface ProjectListActionButtonsProps {
+interface ProjectListNewThreadActionProps {
   splitEnabled?: boolean;
   newThreadSplit?: {
     onPointerDown?: PointerEventHandler<HTMLElement>;
     openInSplit(): void;
   };
   onNewChat?: () => void;
+}
+
+interface ProjectListSearchThreadsActionProps {
   onSearchThreads?: () => void;
 }
 
+interface ProjectListActionButtonsProps
+  extends
+    ProjectListNewThreadActionProps,
+    ProjectListSearchThreadsActionProps {}
+
 interface ProjectListShellProps {
   children: ReactNode;
 }
@@ -213,11 +224,6 @@ export const PROJECT_LIST_ACTION_BUTTON_CLASS = cn(
   "min-w-0 cursor-pointer justify-start overflow-hidden font-normal ring-sidebar-ring focus-visible:ring-2 disabled:cursor-default disabled:opacity-70 max-md:pointer-coarse:[&_svg]:size-5",
 );
 
-const PROJECT_LIST_ACTION_ICON_BUTTON_CLASS = cn(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md text-sidebar-foreground/85 outline-none ring-sidebar-ring transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 disabled:cursor-default disabled:opacity-50",
-  COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
-);
-
 const PROJECT_LIST_SECTION_ACTION_BUTTON_CLASS = cn(
   "inline-flex items-center justify-center rounded-md text-muted-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-2 disabled:opacity-50",
   LIST_HOVER_TRANSITION,
@@ -754,79 +760,111 @@ function ProjectListNavigationLoadingRow({
   );
 }
 
-export function ProjectListActionButtons({
+export function ProjectListNewThreadAction({
   splitEnabled = false,
   newThreadSplit,
   onNewChat,
-  onSearchThreads,
-}: ProjectListActionButtonsProps) {
-  const commandRunner = useAppCommandRunner();
+}: ProjectListNewThreadActionProps) {
   const isNewChatDisabled = !onNewChat;
   const newThreadShortcut = useAppCommandShortcut("thread.new");
-  const threadSearchShortcut = useAppCommandShortcut("thread.search");
   const newThreadSplitIndicator = usePaneContentSplitIndicator(
     { kind: "new-thread" },
     splitEnabled,
   );
 
   return (
-    <div className="space-y-1">
-      <div className="flex min-w-0 items-center gap-0.5">
-        <Button
-          type="button"
-          size="sm"
-          variant="ghost"
-          className={cn(PROJECT_LIST_ACTION_BUTTON_CLASS, "flex-1")}
-          onPointerDown={newThreadSplit?.onPointerDown}
-          onClick={(event) => {
-            if (event.metaKey || event.ctrlKey) {
-              newThreadSplit?.openInSplit();
-              return;
-            }
-            onNewChat?.();
-          }}
-          disabled={isNewChatDisabled}
-          aria-label={
-            newThreadShortcut
-              ? `New thread (${newThreadShortcut.label})`
-              : "New thread"
-          }
-          aria-keyshortcuts={newThreadShortcut?.ariaKeyshortcuts}
-        >
-          <Icon name="MessageSquarePlus" />
-          <span className="flex min-w-0 flex-1 items-center gap-1.5">
-            <span className="min-w-0 truncate text-left">New thread</span>
-            {newThreadSplitIndicator.miniMap ? (
-              <SplitPaneMiniMap
-                slots={newThreadSplitIndicator.miniMap}
-                label="New thread — open in split"
-              />
-            ) : null}
-            <AppCommandShortcutHint shortcut={newThreadShortcut} />
-          </span>
-        </Button>
-        <span className="flex shrink-0 items-center gap-1">
-          <AppCommandShortcutHint shortcut={threadSearchShortcut} />
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
-            aria-label={
-              threadSearchShortcut
-                ? `Search threads (${threadSearchShortcut.label})`
-                : "Search threads"
-            }
-            aria-keyshortcuts={threadSearchShortcut?.ariaKeyshortcuts}
-            className={PROJECT_LIST_ACTION_ICON_BUTTON_CLASS}
-            onClick={(event) => {
-              onSearchThreads?.();
-              commandRunner.dispatch("thread.search", event.currentTarget);
-            }}
-          >
-            <Icon name="Search" className={COARSE_POINTER_ICON_SIZE_CLASS} />
-          </Button>
+    <Button
+      type="button"
+      size="sm"
+      variant="ghost"
+      className={cn(PROJECT_LIST_ACTION_BUTTON_CLASS, "w-full")}
+      onPointerDown={newThreadSplit?.onPointerDown}
+      onClick={(event) => {
+        if (event.metaKey || event.ctrlKey) {
+          newThreadSplit?.openInSplit();
+          return;
+        }
+        onNewChat?.();
+      }}
+      disabled={isNewChatDisabled}
+      aria-label={
+        newThreadShortcut
+          ? `New thread (${newThreadShortcut.label})`
+          : "New thread"
+      }
+      aria-keyshortcuts={newThreadShortcut?.ariaKeyshortcuts}
+    >
+      <Icon name="MessageSquarePlus" />
+      <span className="flex min-w-0 flex-1 items-center gap-1.5">
+        <span className="min-w-0 flex-1 truncate text-left">New thread</span>
+        {newThreadSplitIndicator.miniMap ? (
+          <SplitPaneMiniMap
+            slots={newThreadSplitIndicator.miniMap}
+            label="New thread — open in split"
+          />
+        ) : null}
+        <AppCommandShortcutHint shortcut={newThreadShortcut} />
+      </span>
+    </Button>
+  );
+}
+
+export function ProjectListSearchThreadsAction({
+  onSearchThreads,
+}: ProjectListSearchThreadsActionProps) {
+  const commandRunner = useAppCommandRunner();
+  const threadSearchShortcut = useAppCommandShortcut("thread.search");
+
+  return (
+    <Button
+      type="button"
+      size="sm"
+      variant="ghost"
+      className={cn(
+        PROJECT_LIST_ACTION_BUTTON_CLASS,
+        "w-full pr-1 [&_kbd]:opacity-0 hover:[&_kbd]:opacity-60 focus:[&_kbd]:opacity-60",
+      )}
+      onClick={(event) => {
+        onSearchThreads?.();
+        commandRunner.dispatch("thread.search", event.currentTarget);
+      }}
+      aria-label={
+        threadSearchShortcut
+          ? `Search threads (${threadSearchShortcut.label})`
+          : "Search threads"
+      }
+      aria-keyshortcuts={threadSearchShortcut?.ariaKeyshortcuts}
+    >
+      <Icon name="Search" />
+      <span className="flex min-w-0 flex-1 items-center gap-1.5">
+        <span className="min-w-0 flex-1 truncate text-left">
+          Search threads
         </span>
-      </div>
+        {threadSearchShortcut ? (
+          <AppCommandShortcutPill
+            shortcut={threadSearchShortcut}
+            className="transition-opacity"
+          />
+        ) : null}
+      </span>
+    </Button>
+  );
+}
+
+export function ProjectListActionButtons({
+  splitEnabled = false,
+  newThreadSplit,
+  onNewChat,
+  onSearchThreads,
+}: ProjectListActionButtonsProps) {
+  return (
+    <div className="space-y-1">
+      <ProjectListNewThreadAction
+        splitEnabled={splitEnabled}
+        newThreadSplit={newThreadSplit}
+        onNewChat={onNewChat}
+      />
+      <ProjectListSearchThreadsAction onSearchThreads={onSearchThreads} />
     </div>
   );
 }
diff --git a/apps/app/src/components/sidebar/ProjectListActionButtons.test.tsx b/apps/app/src/components/sidebar/ProjectListActionButtons.test.tsx
new file mode 100644
index 0000000000..3749c85903
--- /dev/null
+++ b/apps/app/src/components/sidebar/ProjectListActionButtons.test.tsx
@@ -0,0 +1,57 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ProjectListSearchThreadsAction } from "./ProjectList";
+
+const mocks = vi.hoisted(() => ({
+  dispatch: vi.fn(),
+}));
+
+vi.mock("@/components/commands/AppCommandProvider", () => ({
+  useAppCommandRunner: () => ({
+    dispatch: mocks.dispatch,
+    isCommandAvailable: () => true,
+  }),
+  useAppCommandShortcut: (command: string) =>
+    command === "thread.search"
+      ? { ariaKeyshortcuts: "Meta+K", label: "⌘K" }
+      : null,
+  useIsAppCommandModifierHeld: () => false,
+}));
+
+afterEach(() => {
+  cleanup();
+  mocks.dispatch.mockReset();
+});
+
+describe("ProjectListSearchThreadsAction", () => {
+  it("reveals the trailing Search shortcut on hover or focus without changing activation", () => {
+    const onSearchThreads = vi.fn();
+    render(
+      <ProjectListSearchThreadsAction onSearchThreads={onSearchThreads} />,
+    );
+
+    const button = screen.getByRole("button", {
+      name: "Search threads (⌘K)",
+    });
+    const shortcut = screen.getByText("⌘K");
+    const label = screen.getByText("Search threads");
+
+    expect(button.getAttribute("aria-keyshortcuts")).toBe("Meta+K");
+    expect(shortcut.tagName).toBe("KBD");
+    expect(shortcut.getAttribute("aria-hidden")).toBe("true");
+    expect(label.classList.contains("flex-1")).toBe(true);
+    expect(shortcut.parentElement?.lastElementChild).toBe(shortcut);
+    expect(button.classList.contains("[&_kbd]:opacity-0")).toBe(true);
+    expect(button.classList.contains("hover:[&_kbd]:opacity-60")).toBe(true);
+    expect(button.classList.contains("focus:[&_kbd]:opacity-60")).toBe(true);
+    expect(button.classList.contains("pr-1")).toBe(true);
+    expect(shortcut.classList.contains("transition-opacity")).toBe(true);
+
+    fireEvent.click(button);
+
+    expect(onSearchThreads).toHaveBeenCalledOnce();
+    expect(mocks.dispatch).toHaveBeenCalledWith("thread.search", button);
+  });
+});

From a3aafc707d34a874e9f890b794bef00f7605c5a7 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 2 Sep 2026 01:43:35 -0700
Subject: [PATCH 02/12] Fix customizable navigation integration

---
 .../plugin/PluginNavSidebarItems.tsx          | 59 ++++++++-----------
 .../sidebar/BuiltInSidebarNavigation.tsx      | 16 ++---
 .../sidebar/SidebarNavigationRegion.test.tsx  |  1 +
 .../sidebar/SidebarOverview.stories.tsx       |  3 +-
 apps/app/src/lib/plugin-nav-panel-chrome.ts   |  2 +-
 5 files changed, 35 insertions(+), 46 deletions(-)

diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
index 4f0fcbe8b2..a7de66db23 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
@@ -43,7 +43,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@bb/shared-ui/popover";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@bb/shared-ui/tooltip";
 import { PluginIcon } from "@/components/plugin/PluginIcon";
 import { PluginSlotMount } from "@/components/plugin/PluginSlotMount";
 import { PROJECT_LIST_ACTION_BUTTON_CLASS } from "@/components/sidebar/ProjectList";
@@ -135,16 +134,14 @@ export function PluginNavSidebarItems(props: {
   const rows = useMemo<SidebarNavRow[]>(
     () => [
       ...(props.builtInEntries ?? []),
-      ...getTraditionalPluginNavPanelEntries(entries).map(
-        ({ chrome, panel }) => ({
-          kind: "plugin" as const,
-          pluginId: chrome.pluginId,
-          id: chrome.id,
-          title: chrome.title,
-          chrome,
-          panel,
-        }),
-      ),
+      ...entries.map(({ chrome, panel }) => ({
+        kind: "plugin" as const,
+        pluginId: chrome.pluginId,
+        id: chrome.id,
+        title: chrome.title,
+        chrome,
+        panel,
+      })),
     ],
     [entries, props.builtInEntries],
   );
@@ -433,31 +430,21 @@ function SidebarNavigationCustomizeMenu({
   return (
     <Popover open={isOpen} onOpenChange={onOpenChange}>
       <span className="inline-flex shrink-0">
-        <Tooltip delayDuration={350} disableHoverableContent>
-          <TooltipTrigger asChild>
-            <PopoverTrigger asChild>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                aria-label="Customize sidebar navigation"
-                className={cn(
-                  COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
-                  "shrink-0 text-subtle-foreground opacity-60 ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground hover:opacity-100 focus-visible:ring-2 focus-visible:opacity-100 max-md:pointer-coarse:[&_svg]:size-5 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-foreground data-[state=open]:opacity-100",
-                )}
-                data-testid="sidebar-navigation-customize-trigger"
-              >
-                <HugeiconsIcon
-                  icon={FilterHorizontalIcon}
-                  aria-hidden="true"
-                />
-              </Button>
-            </PopoverTrigger>
-          </TooltipTrigger>
-          <TooltipContent side="bottom" className="px-2 py-1">
-            Customize sidebar navigation
-          </TooltipContent>
-        </Tooltip>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            aria-label="Customize sidebar navigation"
+            className={cn(
+              COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
+              "shrink-0 text-subtle-foreground opacity-60 ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground hover:opacity-100 focus-visible:ring-2 focus-visible:opacity-100 max-md:pointer-coarse:[&_svg]:size-5 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-foreground data-[state=open]:opacity-100",
+            )}
+            data-testid="sidebar-navigation-customize-trigger"
+          >
+            <HugeiconsIcon icon={FilterHorizontalIcon} aria-hidden="true" />
+          </Button>
+        </PopoverTrigger>
       </span>
       <PopoverContent
         ref={contentRef}
diff --git a/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx b/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
index 85c46fd70a..d16b6af1e6 100644
--- a/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
+++ b/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
@@ -138,13 +138,15 @@ export function BuiltInSidebarNavigation({
       data-testid="built-in-sidebar-navigation"
       data-sidebar-navigation-unified="true"
     >
-      <PluginNavSidebarItems
-        builtInEntries={builtInEntries}
-        entries={traditionalPluginNavPanels}
-        leadingOrderKeys={DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER}
-        onNavigate={onNavigate}
-        splitEnabled={splitEnabled}
-      />
+      <div className="contents" data-testid="app-sidebar-primary-actions">
+        <PluginNavSidebarItems
+          builtInEntries={builtInEntries}
+          entries={traditionalPluginNavPanels}
+          leadingOrderKeys={DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER}
+          onNavigate={onNavigate}
+          splitEnabled={splitEnabled}
+        />
+      </div>
     </div>
   );
 }
diff --git a/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx b/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
index 491980c5fa..063c3814d9 100644
--- a/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
+++ b/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
@@ -30,6 +30,7 @@ vi.mock("@/components/commands/AppCommandProvider", () => ({
 }));
 vi.mock("@/components/plugin/PluginNavSidebarItems", () => ({
   PluginNavSidebarItems: () => <div>BB plugin destinations</div>,
+  getTraditionalPluginNavPanelEntries: (entries: readonly object[]) => entries,
 }));
 vi.mock("./usePaneContentSplitDrag", () => ({
   usePaneContentSplitActions: () => ({
diff --git a/apps/app/src/components/sidebar/SidebarOverview.stories.tsx b/apps/app/src/components/sidebar/SidebarOverview.stories.tsx
index 8e3fb16dec..c6671ce692 100644
--- a/apps/app/src/components/sidebar/SidebarOverview.stories.tsx
+++ b/apps/app/src/components/sidebar/SidebarOverview.stories.tsx
@@ -44,7 +44,6 @@ import {
 import {
   AUTOMATIONS_PLUGIN_ID,
   AUTOMATIONS_PLUGIN_PANEL_PATH,
-  getSkillsRoutePath,
 } from "@/lib/route-paths";
 import { splitLayoutAtom } from "@/lib/split-layout/atoms";
 import {
@@ -267,7 +266,7 @@ function SidebarFrame({ children }: SidebarFrameProps) {
             <ProjectListActionButtons onNewChat={noop} />
           </div>
           {}
-          <PluginNavSidebarItems toolsRoutePath={getSkillsRoutePath()} />
+          <PluginNavSidebarItems />
           <div className="min-h-0 flex-1 overflow-y-auto">{children}</div>
           <div className="shrink-0 border-t border-sidebar-border/70 px-2 py-2">
             <button
diff --git a/apps/app/src/lib/plugin-nav-panel-chrome.ts b/apps/app/src/lib/plugin-nav-panel-chrome.ts
index bef43f2a15..d43bdbaa2c 100644
--- a/apps/app/src/lib/plugin-nav-panel-chrome.ts
+++ b/apps/app/src/lib/plugin-nav-panel-chrome.ts
@@ -17,7 +17,7 @@ const pluginNavPanelChromeSchema = z.object({
 
 export type PluginNavPanelChrome = z.infer<typeof pluginNavPanelChromeSchema>;
 
-interface PluginNavPanelChromeEntry {
+export interface PluginNavPanelChromeEntry {
   chrome: PluginNavPanelChrome;
   panel: PluginNavPanelSlot | null;
 }

From 7fc66738122868fe880d3042b41c5b364e9814b2 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 2 Sep 2026 03:17:44 -0700
Subject: [PATCH 03/12] Complete sidebar navigation test mock

---
 .../app/src/components/sidebar/SidebarNavigationRegion.test.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx b/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
index 063c3814d9..6676cd89fe 100644
--- a/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
+++ b/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
@@ -29,6 +29,8 @@ vi.mock("@/components/commands/AppCommandProvider", () => ({
   useIsAppCommandModifierHeld: () => false,
 }));
 vi.mock("@/components/plugin/PluginNavSidebarItems", () => ({
+  AutomationsNavSidebarItem: () => <div>Automations</div>,
+  ExtensionsNavSidebarItem: () => <div>Extensions</div>,
   PluginNavSidebarItems: () => <div>BB plugin destinations</div>,
   getTraditionalPluginNavPanelEntries: (entries: readonly object[]) => entries,
 }));

From 9153d11a49bf8a71f69d987f6783afaa5e529f43 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 2 Sep 2026 07:31:04 -0700
Subject: [PATCH 04/12] Polish sidebar navigation affordances

---
 apps/app/src/components/plugin/PluginNavSidebarItems.tsx   | 3 ++-
 apps/app/src/components/sidebar/AppSidebar.tsx             | 2 +-
 apps/app/src/components/sidebar/ProjectList.tsx            | 7 ++-----
 .../components/sidebar/ProjectListActionButtons.test.tsx   | 7 ++-----
 4 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
index a7de66db23..dd4f055cc7 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
@@ -37,6 +37,7 @@ import {
   COARSE_POINTER_ICON_SIZE_CLASS,
   COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
 } from "@bb/shared-ui/coarse-pointer-sizing";
+import { CHROME_SECTION_LABEL_CLASS } from "@bb/shared-ui/chrome-style-tokens";
 import { useIsCompactViewport } from "@bb/shared-ui/hooks/use-compact-viewport";
 import {
   Popover,
@@ -463,7 +464,7 @@ function SidebarNavigationCustomizeMenu({
             ?.focus();
         }}
       >
-        <div className="px-2 py-1 text-sm font-medium leading-5 text-popover-foreground">
+        <div className={cn("px-2 py-1", CHROME_SECTION_LABEL_CLASS)}>
           Sidebar navigation
         </div>
         <div role="list" aria-label="Sidebar navigation" className="space-y-0.5">
diff --git a/apps/app/src/components/sidebar/AppSidebar.tsx b/apps/app/src/components/sidebar/AppSidebar.tsx
index b2ea2933e8..f0539421d6 100644
--- a/apps/app/src/components/sidebar/AppSidebar.tsx
+++ b/apps/app/src/components/sidebar/AppSidebar.tsx
@@ -235,7 +235,7 @@ export function AppSidebar({
         onNewChat={handleNewChat}
         onSearchThreads={closeOnMobile}
       />
-      <SidebarContent>
+      <SidebarContent className="border-t border-sidebar-border/70">
         <PluginThreadList
           replacement={threadListReplacement}
           original={originalThreadList}
diff --git a/apps/app/src/components/sidebar/ProjectList.tsx b/apps/app/src/components/sidebar/ProjectList.tsx
index f15086e9df..2566f59c28 100644
--- a/apps/app/src/components/sidebar/ProjectList.tsx
+++ b/apps/app/src/components/sidebar/ProjectList.tsx
@@ -822,7 +822,7 @@ export function ProjectListSearchThreadsAction({
       variant="ghost"
       className={cn(
         PROJECT_LIST_ACTION_BUTTON_CLASS,
-        "w-full pr-1 [&_kbd]:opacity-0 hover:[&_kbd]:opacity-60 focus:[&_kbd]:opacity-60",
+        "w-full pr-1 [&_kbd]:opacity-60",
       )}
       onClick={(event) => {
         onSearchThreads?.();
@@ -841,10 +841,7 @@ export function ProjectListSearchThreadsAction({
           Search threads
         </span>
         {threadSearchShortcut ? (
-          <AppCommandShortcutPill
-            shortcut={threadSearchShortcut}
-            className="transition-opacity"
-          />
+          <AppCommandShortcutPill shortcut={threadSearchShortcut} />
         ) : null}
       </span>
     </Button>
diff --git a/apps/app/src/components/sidebar/ProjectListActionButtons.test.tsx b/apps/app/src/components/sidebar/ProjectListActionButtons.test.tsx
index 3749c85903..78de37f80b 100644
--- a/apps/app/src/components/sidebar/ProjectListActionButtons.test.tsx
+++ b/apps/app/src/components/sidebar/ProjectListActionButtons.test.tsx
@@ -26,7 +26,7 @@ afterEach(() => {
 });
 
 describe("ProjectListSearchThreadsAction", () => {
-  it("reveals the trailing Search shortcut on hover or focus without changing activation", () => {
+  it("keeps the trailing Search shortcut visible without changing activation", () => {
     const onSearchThreads = vi.fn();
     render(
       <ProjectListSearchThreadsAction onSearchThreads={onSearchThreads} />,
@@ -43,11 +43,8 @@ describe("ProjectListSearchThreadsAction", () => {
     expect(shortcut.getAttribute("aria-hidden")).toBe("true");
     expect(label.classList.contains("flex-1")).toBe(true);
     expect(shortcut.parentElement?.lastElementChild).toBe(shortcut);
-    expect(button.classList.contains("[&_kbd]:opacity-0")).toBe(true);
-    expect(button.classList.contains("hover:[&_kbd]:opacity-60")).toBe(true);
-    expect(button.classList.contains("focus:[&_kbd]:opacity-60")).toBe(true);
+    expect(button.classList.contains("[&_kbd]:opacity-60")).toBe(true);
     expect(button.classList.contains("pr-1")).toBe(true);
-    expect(shortcut.classList.contains("transition-opacity")).toBe(true);
 
     fireEvent.click(button);
 

From 0737a1ff9831c0ebee04b13c55b7ae59fa6c645e Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 2 Sep 2026 07:55:50 -0700
Subject: [PATCH 05/12] Soften sidebar thread divider

---
 apps/app/src/components/sidebar/AppSidebar.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/app/src/components/sidebar/AppSidebar.tsx b/apps/app/src/components/sidebar/AppSidebar.tsx
index f0539421d6..50fe4972ea 100644
--- a/apps/app/src/components/sidebar/AppSidebar.tsx
+++ b/apps/app/src/components/sidebar/AppSidebar.tsx
@@ -235,7 +235,11 @@ export function AppSidebar({
         onNewChat={handleNewChat}
         onSearchThreads={closeOnMobile}
       />
-      <SidebarContent className="border-t border-sidebar-border/70">
+      <div
+        aria-hidden="true"
+        className="mx-2 shrink-0 border-t border-sidebar-border/40"
+      />
+      <SidebarContent>
         <PluginThreadList
           replacement={threadListReplacement}
           original={originalThreadList}

From 9edbca0a0c51f371f8e50d14991f944d5417bd16 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 2 Sep 2026 12:36:05 -0700
Subject: [PATCH 06/12] Add mobile sidebar customization mode

---
 .../plugin/PluginNavSidebarItems.test.tsx     | 155 ++++++-
 .../plugin/PluginNavSidebarItems.tsx          | 380 ++++++++++++++----
 .../app/src/components/sidebar/AppSidebar.tsx |  41 +-
 .../sidebar/BuiltInSidebarNavigation.tsx      |   4 +
 .../sidebar/SidebarNavigationRegion.tsx       |   4 +
 5 files changed, 484 insertions(+), 100 deletions(-)

diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
index 342ccd0878..43b8d5c8f6 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
@@ -8,7 +8,7 @@ import {
   waitFor,
   within,
 } from "@testing-library/react";
-import { useEffect, type ComponentType } from "react";
+import { useEffect, useState, type ComponentType } from "react";
 import { createStore, Provider } from "jotai";
 import { MemoryRouter, useLocation } from "react-router-dom";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -76,14 +76,42 @@ function registerPanel(
   );
 }
 
-function renderSidebarItems(
-  options: {
-    builtInEntries?: readonly BuiltInSidebarNavEntry[];
-    storedOrder?: string[];
-    storedVisibleKeys?: string[] | null;
-    compactViewport?: boolean;
-  } = {},
-) {
+interface RenderSidebarItemsOptions {
+  builtInEntries?: readonly BuiltInSidebarNavEntry[];
+  storedOrder?: string[];
+  storedVisibleKeys?: string[] | null;
+  compactViewport?: boolean;
+  compactCustomizeMode?: boolean;
+  onCompactCustomizeModeChange?: (isCustomizing: boolean) => void;
+}
+
+function PluginNavSidebarItemsHarness({
+  options,
+}: {
+  options: RenderSidebarItemsOptions;
+}) {
+  const [compactCustomizeMode, setCompactCustomizeMode] = useState(
+    options.compactCustomizeMode ?? false,
+  );
+  const compactControlProps = options.compactViewport
+    ? {
+        compactCustomizeMode,
+        onCompactCustomizeModeChange: (isCustomizing: boolean) => {
+          setCompactCustomizeMode(isCustomizing);
+          options.onCompactCustomizeModeChange?.(isCustomizing);
+        },
+      }
+    : {};
+
+  return (
+    <PluginNavSidebarItems
+      builtInEntries={options.builtInEntries}
+      {...compactControlProps}
+    />
+  );
+}
+
+function renderSidebarItems(options: RenderSidebarItemsOptions = {}) {
   const store = createStore();
   const queryClient = new QueryClient({
     defaultOptions: { queries: { retry: false } },
@@ -105,9 +133,7 @@ function renderSidebarItems(
         <Provider store={store}>
           <MemoryRouter initialEntries={["/"]}>
             <SidebarProvider>
-              <PluginNavSidebarItems
-                builtInEntries={options.builtInEntries}
-              />
+              <PluginNavSidebarItemsHarness options={options} />
               <LocationProbe />
             </SidebarProvider>
           </MemoryRouter>
@@ -318,6 +344,111 @@ describe("PluginNavSidebarItems", () => {
     ).toBeNull();
   });
 
+  it("uses an in-place customization mode instead of a drawer on compact viewports", () => {
+    const onCompactCustomizeModeChange = vi.fn();
+    renderSidebarItems({
+      compactViewport: true,
+      builtInEntries: [
+        builtInEntry("new-thread", "New thread"),
+        builtInEntry("search-threads", "Search threads"),
+      ],
+      onCompactCustomizeModeChange,
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    );
+
+    expect(onCompactCustomizeModeChange).toHaveBeenCalledWith(true);
+    expect(
+      screen.getByTestId("sidebar-navigation-customize-inline"),
+    ).not.toBeNull();
+    expect(screen.queryByRole("dialog")).toBeNull();
+    expect(screen.getByRole("button", { name: "Back to sidebar" })).toBe(
+      document.activeElement,
+    );
+    expect(
+      screen.queryByRole("button", { name: "Customize sidebar navigation" }),
+    ).toBeNull();
+    const firstCustomizeRow = customizeRows()[0];
+    const firstDragHandle = firstCustomizeRow?.querySelector<HTMLElement>(
+      "[data-plugin-nav-customize-drag-handle]",
+    );
+    const firstCheckbox = within(firstCustomizeRow as HTMLElement).getByRole(
+      "checkbox",
+    );
+    expect(
+      firstCustomizeRow?.classList.contains("max-md:pointer-coarse:h-9"),
+    ).toBe(true);
+    expect(
+      firstDragHandle?.classList.contains("max-md:pointer-coarse:h-9"),
+    ).toBe(true);
+    expect(
+      firstDragHandle?.classList.contains("max-md:pointer-coarse:w-9"),
+    ).toBe(true);
+    expect(
+      firstCheckbox
+        .closest("label")
+        ?.classList.contains("max-md:pointer-coarse:h-9"),
+    ).toBe(true);
+
+    fireEvent.click(screen.getByRole("button", { name: "Back to sidebar" }));
+
+    expect(onCompactCustomizeModeChange).toHaveBeenLastCalledWith(false);
+    expect(
+      screen.queryByTestId("sidebar-navigation-customize-inline"),
+    ).toBeNull();
+    expect(screen.getByRole("button", { name: "New thread" })).not.toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    ).toBe(document.activeElement);
+  });
+
+  it("keeps compact visibility changes in place and closes the mode when launching", () => {
+    const onActivate = vi.fn();
+    const { store } = renderSidebarItems({
+      compactViewport: true,
+      builtInEntries: [builtInEntry("new-thread", "New thread", onActivate)],
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    );
+    fireEvent.click(
+      screen.getByRole("checkbox", { name: "Show New thread in sidebar" }),
+    );
+
+    expect(
+      screen.getByTestId("sidebar-navigation-customize-inline"),
+    ).not.toBeNull();
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([]);
+
+    fireEvent.click(screen.getByRole("button", { name: "New thread" }));
+
+    expect(onActivate).toHaveBeenCalledTimes(1);
+    expect(
+      screen.queryByTestId("sidebar-navigation-customize-inline"),
+    ).toBeNull();
+    expect(screen.queryByRole("checkbox")).toBeNull();
+  });
+
+  it("keeps the desktop customization popover", () => {
+    renderSidebarItems({
+      builtInEntries: [builtInEntry("new-thread", "New thread")],
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    );
+
+    expect(
+      screen.getByRole("list", { name: "Sidebar navigation" }),
+    ).not.toBeNull();
+    expect(
+      screen.queryByTestId("sidebar-navigation-customize-inline"),
+    ).toBeNull();
+  });
+
   it("hides a crashed accessory and retries it after a plugin reload", () => {
     function CrashingAccessory(): never {
       throw new Error("accessory crashed");
diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
index dd4f055cc7..ae44cb0d44 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
@@ -1,6 +1,7 @@
 import {
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -34,6 +35,7 @@ import {
   DropdownMenuTrigger,
 } from "@bb/shared-ui/dropdown-menu";
 import {
+  COARSE_POINTER_COMPACT_ROW_HEIGHT_CLASS,
   COARSE_POINTER_ICON_SIZE_CLASS,
   COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
 } from "@bb/shared-ui/coarse-pointer-sizing";
@@ -125,8 +127,10 @@ export function getTraditionalPluginNavPanelEntries(
 
 export function PluginNavSidebarItems(props: {
   builtInEntries?: readonly BuiltInSidebarNavEntry[];
+  compactCustomizeMode?: boolean;
   entries?: readonly PluginNavPanelChromeEntry[];
   leadingOrderKeys?: readonly string[];
+  onCompactCustomizeModeChange?: (isCustomizing: boolean) => void;
   onNavigate?: () => void;
   splitEnabled?: boolean;
 }) {
@@ -158,29 +162,65 @@ export function PluginNavSidebarItems(props: {
       rows={rows}
       leadingOrderKeys={leadingOrderKeys}
       splitEnabled={props.splitEnabled ?? false}
+      {...(props.compactCustomizeMode === undefined
+        ? {}
+        : { compactCustomizeMode: props.compactCustomizeMode })}
+      {...(props.onCompactCustomizeModeChange
+        ? {
+            onCompactCustomizeModeChange:
+              props.onCompactCustomizeModeChange,
+          }
+        : {})}
       {...(props.onNavigate ? { onNavigate: props.onNavigate } : {})}
     />
   );
 }
 
 function PluginNavSidebarItemList({
+  compactCustomizeMode,
   leadingOrderKeys,
+  onCompactCustomizeModeChange,
   onNavigate,
   rows,
   splitEnabled = false,
 }: {
+  compactCustomizeMode?: boolean;
   leadingOrderKeys: readonly string[];
+  onCompactCustomizeModeChange?: (isCustomizing: boolean) => void;
   onNavigate?: () => void;
   rows: readonly SidebarNavRow[];
   splitEnabled?: boolean;
 }) {
   const location = useLocation();
   const navigate = useNavigate();
+  const isCompactViewport = useIsCompactViewport();
   const [storedOrder, setStoredOrder] = useAtom(pluginNavPanelOrderAtom);
   const [storedVisibleKeys, setStoredVisibleKeys] = useAtom(
     pluginNavVisiblePanelKeysAtom,
   );
-  const [isCustomizeOpen, setIsCustomizeOpen] = useState(false);
+  const [uncontrolledCustomizeOpen, setUncontrolledCustomizeOpen] =
+    useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const restoreCustomizeTriggerFocusRef = useRef(false);
+  const isCustomizeOpen =
+    isCompactViewport && compactCustomizeMode !== undefined
+      ? compactCustomizeMode
+      : uncontrolledCustomizeOpen;
+  const setIsCustomizeOpen = useCallback(
+    (isOpen: boolean) => {
+      if (!isCompactViewport || compactCustomizeMode === undefined) {
+        setUncontrolledCustomizeOpen(isOpen);
+      }
+      if (isCompactViewport) {
+        onCompactCustomizeModeChange?.(isOpen);
+      }
+    },
+    [
+      compactCustomizeMode,
+      isCompactViewport,
+      onCompactCustomizeModeChange,
+    ],
+  );
   const builtInKeys = useMemo(
     () =>
       rows
@@ -323,8 +363,43 @@ function PluginNavSidebarItemList({
     [navigate, onNavigate],
   );
 
+  useEffect(() => {
+    if (isCustomizeOpen || !restoreCustomizeTriggerFocusRef.current) return;
+    restoreCustomizeTriggerFocusRef.current = false;
+    containerRef.current
+      ?.querySelector<HTMLElement>(
+        '[data-testid="sidebar-navigation-customize-trigger"]',
+      )
+      ?.focus();
+  }, [isCustomizeOpen]);
+
+  if (isCompactViewport && isCustomizeOpen) {
+    return (
+      <div
+        ref={containerRef}
+        className="flex min-h-0 flex-1 flex-col px-2 py-2 group-data-[collapsible=icon]:hidden"
+        data-testid="plugin-nav-sidebar-items"
+        data-sidebar-navigation-customize-mode="true"
+      >
+        <SidebarNavigationInlineCustomizeMode
+          rows={ordered}
+          visibleKeys={visibleKeys}
+          onActivate={handleActivate}
+          onBack={() => {
+            restoreCustomizeTriggerFocusRef.current = true;
+            setIsCustomizeOpen(false);
+          }}
+          onExit={() => setIsCustomizeOpen(false)}
+          onDragEnd={handleCustomizeDragEnd}
+          onVisibleChange={setPanelVisible}
+        />
+      </div>
+    );
+  }
+
   return (
     <div
+      ref={containerRef}
       className="shrink-0 space-y-0.5 px-2 py-2 group-data-[collapsible=icon]:hidden"
       data-testid="plugin-nav-sidebar-items"
       onClickCapture={onClickCapture}
@@ -389,6 +464,70 @@ function PluginNavSidebarItemList({
   );
 }
 
+function SidebarNavigationInlineCustomizeMode({
+  onActivate,
+  onBack,
+  onDragEnd,
+  onExit,
+  onVisibleChange,
+  rows,
+  visibleKeys,
+}: {
+  onActivate: (row: SidebarNavRow) => void;
+  onBack: () => void;
+  onDragEnd: (activeKey: string, overKey: string) => void;
+  onExit: () => void;
+  onVisibleChange: (key: string, visible: boolean) => void;
+  rows: readonly SidebarNavRow[];
+  visibleKeys: readonly string[];
+}) {
+  const backButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    backButtonRef.current?.focus();
+  }, []);
+
+  return (
+    <div
+      className="flex min-h-0 flex-1 flex-col"
+      data-testid="sidebar-navigation-customize-inline"
+    >
+      <div className="flex shrink-0 items-center gap-1">
+        <Button
+          ref={backButtonRef}
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label="Back to sidebar"
+          className={cn(
+            COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
+            "shrink-0 text-muted-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-2",
+          )}
+          onClick={onBack}
+        >
+          <Icon name="ChevronLeft" aria-hidden="true" />
+        </Button>
+        <div className={cn("min-w-0 flex-1 px-1", CHROME_SECTION_LABEL_CLASS)}>
+          Sidebar
+        </div>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto pt-1">
+        <SidebarNavigationCustomizeList
+          rows={rows}
+          visibleKeys={visibleKeys}
+          surface="sidebar"
+          onActivate={(row) => {
+            onActivate(row);
+            onExit();
+          }}
+          onDragEnd={onDragEnd}
+          onVisibleChange={onVisibleChange}
+        />
+      </div>
+    </div>
+  );
+}
+
 function SidebarNavigationCustomizeMenu({
   isOpen,
   onActivate,
@@ -406,46 +545,36 @@ function SidebarNavigationCustomizeMenu({
   rows: readonly SidebarNavRow[];
   visibleKeys: readonly string[];
 }) {
+  const isCompactViewport = useIsCompactViewport();
   const contentRef = useRef<HTMLDivElement>(null);
-  const orderedKeys = useMemo(
-    () => rows.map(getPluginNavPanelKey),
-    [rows],
-  );
-  const visibleKeySet = useMemo(() => new Set(visibleKeys), [visibleKeys]);
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      if (
-        typeof event.active.id !== "string" ||
-        typeof event.over?.id !== "string"
-      ) {
-        return;
-      }
-      onDragEnd(event.active.id, event.over.id);
-    },
-    [onDragEnd],
+  const trigger = (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      aria-label="Customize sidebar navigation"
+      aria-expanded={isCompactViewport ? isOpen : undefined}
+      className={cn(
+        COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
+        "shrink-0 text-subtle-foreground opacity-60 ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground hover:opacity-100 focus-visible:ring-2 focus-visible:opacity-100 max-md:pointer-coarse:[&_svg]:size-5 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-foreground data-[state=open]:opacity-100",
+      )}
+      data-testid="sidebar-navigation-customize-trigger"
+      {...(isCompactViewport
+        ? { onClick: () => onOpenChange(true) }
+        : {})}
+    >
+      <HugeiconsIcon icon={FilterHorizontalIcon} aria-hidden="true" />
+    </Button>
   );
-  const { dndContextProps, onClickCapture } = useSidebarReorderDnd({
-    onDragEnd: handleDragEnd,
-  });
+
+  if (isCompactViewport) {
+    return <span className="inline-flex shrink-0">{trigger}</span>;
+  }
 
   return (
     <Popover open={isOpen} onOpenChange={onOpenChange}>
       <span className="inline-flex shrink-0">
-        <PopoverTrigger asChild>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            aria-label="Customize sidebar navigation"
-            className={cn(
-              COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
-              "shrink-0 text-subtle-foreground opacity-60 ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground hover:opacity-100 focus-visible:ring-2 focus-visible:opacity-100 max-md:pointer-coarse:[&_svg]:size-5 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-foreground data-[state=open]:opacity-100",
-            )}
-            data-testid="sidebar-navigation-customize-trigger"
-          >
-            <HugeiconsIcon icon={FilterHorizontalIcon} aria-hidden="true" />
-          </Button>
-        </PopoverTrigger>
+        <PopoverTrigger asChild>{trigger}</PopoverTrigger>
       </span>
       <PopoverContent
         ref={contentRef}
@@ -453,8 +582,7 @@ function SidebarNavigationCustomizeMenu({
         align="start"
         sideOffset={8}
         className="w-52 p-2"
-        mobileTitle="Sidebar navigation"
-        onClickCapture={onClickCapture}
+        mobileTitle="Sidebar"
         onOpenAutoFocus={(event) => {
           event.preventDefault();
           contentRef.current
@@ -465,54 +593,110 @@ function SidebarNavigationCustomizeMenu({
         }}
       >
         <div className={cn("px-2 py-1", CHROME_SECTION_LABEL_CLASS)}>
-          Sidebar navigation
-        </div>
-        <div role="list" aria-label="Sidebar navigation" className="space-y-0.5">
-          <DndContext {...dndContextProps}>
-            <SortableContext
-              items={orderedKeys}
-              strategy={verticalListSortingStrategy}
-            >
-              {rows.map((row) => {
-                const key = getPluginNavPanelKey(row);
-                return (
-                  <SortableSidebarNavigationCustomizeItem
-                    key={key}
-                    row={row}
-                    checked={visibleKeySet.has(key)}
-                    reorderDisabled={rows.length < 2}
-                    onActivate={() => {
-                      onActivate(row);
-                      onOpenChange(false);
-                    }}
-                    onCheckedChange={(checked) =>
-                      onVisibleChange(key, checked)
-                    }
-                  />
-                );
-              })}
-            </SortableContext>
-          </DndContext>
+          Sidebar
         </div>
+        <SidebarNavigationCustomizeList
+          rows={rows}
+          visibleKeys={visibleKeys}
+          onActivate={(row) => {
+            onActivate(row);
+            onOpenChange(false);
+          }}
+          onDragEnd={onDragEnd}
+          onVisibleChange={onVisibleChange}
+        />
       </PopoverContent>
     </Popover>
   );
 }
 
+function SidebarNavigationCustomizeList({
+  onActivate,
+  onDragEnd,
+  onVisibleChange,
+  rows,
+  surface = "popover",
+  visibleKeys,
+}: {
+  onActivate: (row: SidebarNavRow) => void;
+  onDragEnd: (activeKey: string, overKey: string) => void;
+  onVisibleChange: (key: string, visible: boolean) => void;
+  rows: readonly SidebarNavRow[];
+  surface?: "popover" | "sidebar";
+  visibleKeys: readonly string[];
+}) {
+  const orderedKeys = useMemo(
+    () => rows.map(getPluginNavPanelKey),
+    [rows],
+  );
+  const visibleKeySet = useMemo(() => new Set(visibleKeys), [visibleKeys]);
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      if (
+        typeof event.active.id !== "string" ||
+        typeof event.over?.id !== "string"
+      ) {
+        return;
+      }
+      onDragEnd(event.active.id, event.over.id);
+    },
+    [onDragEnd],
+  );
+  const { dndContextProps, onClickCapture } = useSidebarReorderDnd({
+    onDragEnd: handleDragEnd,
+  });
+
+  return (
+    <div
+      role="list"
+      aria-label="Sidebar navigation"
+      className="space-y-0.5"
+      onClickCapture={onClickCapture}
+    >
+      <DndContext {...dndContextProps}>
+        <SortableContext
+          items={orderedKeys}
+          strategy={verticalListSortingStrategy}
+        >
+          {rows.map((row) => {
+            const key = getPluginNavPanelKey(row);
+            return (
+              <SortableSidebarNavigationCustomizeItem
+                key={key}
+                row={row}
+                checked={visibleKeySet.has(key)}
+                reorderDisabled={rows.length < 2}
+                surface={surface}
+                onActivate={() => onActivate(row)}
+                onCheckedChange={(checked) =>
+                  onVisibleChange(key, checked)
+                }
+              />
+            );
+          })}
+        </SortableContext>
+      </DndContext>
+    </div>
+  );
+}
+
 function SortableSidebarNavigationCustomizeItem({
   checked,
   onActivate,
   onCheckedChange,
   reorderDisabled,
   row,
+  surface,
 }: {
   checked: boolean;
   onActivate: () => void;
   onCheckedChange: (checked: boolean) => void;
   reorderDisabled: boolean;
   row: SidebarNavRow;
+  surface: "popover" | "sidebar";
 }) {
   const panelKey = getPluginNavPanelKey(row);
+  const checkboxId = useId();
   const { dragBindings, setNodeRef, style } = useSidebarSortable({
     id: panelKey,
     disabled: reorderDisabled,
@@ -528,7 +712,15 @@ function SortableSidebarNavigationCustomizeItem({
       ref={setNodeRef}
       style={style}
       role="listitem"
-      className="group flex min-h-7 items-center rounded-md px-1 text-xs text-popover-foreground hover:bg-state-hover focus-within:bg-state-hover"
+      className={cn(
+        "group flex min-h-7 items-center rounded-md px-1 text-xs",
+        surface === "sidebar"
+          ? cn(
+              COARSE_POINTER_COMPACT_ROW_HEIGHT_CLASS,
+              "text-sidebar-foreground hover:bg-sidebar-accent focus-within:bg-sidebar-accent",
+            )
+          : "text-popover-foreground hover:bg-state-hover focus-within:bg-state-hover",
+      )}
       data-plugin-nav-customize-item={panelKey}
     >
       <button
@@ -537,7 +729,15 @@ function SortableSidebarNavigationCustomizeItem({
         {...dragBindings.attributes}
         {...dragBindings.listeners}
         aria-label={`Reorder ${row.title}`}
-        className="flex size-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-sm text-subtle-foreground/60 hover:text-popover-foreground focus-visible:text-popover-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing"
+        className={cn(
+          "flex size-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-sm text-subtle-foreground/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
+          surface === "sidebar"
+            ? cn(
+                COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
+                "hover:text-sidebar-foreground focus-visible:text-sidebar-foreground",
+              )
+            : "hover:text-popover-foreground focus-visible:text-popover-foreground",
+        )}
         onClick={(event) => event.stopPropagation()}
         data-plugin-nav-customize-drag-handle={panelKey}
       >
@@ -549,7 +749,12 @@ function SortableSidebarNavigationCustomizeItem({
       <button
         type="button"
         disabled={!isPluginSidebarNavRow(row) && row.disabled}
-        className="flex min-h-7 min-w-0 flex-1 items-center gap-2 rounded-sm px-1 text-left outline-none disabled:opacity-50"
+        className={cn(
+          "flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-sm px-1 text-left outline-none disabled:cursor-default disabled:opacity-50",
+          surface === "sidebar"
+            ? COARSE_POINTER_COMPACT_ROW_HEIGHT_CLASS
+            : "min-h-7",
+        )}
         onClick={onActivate}
         data-sidebar-navigation-customize-launch={panelKey}
       >
@@ -558,14 +763,37 @@ function SortableSidebarNavigationCustomizeItem({
         </span>
         <span className="min-w-0 flex-1 truncate">{row.title}</span>
       </button>
-      <Checkbox
-        checked={checked}
-        aria-label={`Show ${row.title} in sidebar`}
-        onCheckedChange={(nextChecked) => onCheckedChange(nextChecked === true)}
-        onClick={(event) => event.stopPropagation()}
-        data-plugin-nav-customize-checkbox={panelKey}
-        className="mx-1 border-input data-[state=checked]:border-primary data-[state=checked]:bg-transparent data-[state=checked]:text-primary"
-      />
+      {surface === "sidebar" ? (
+        <label
+          htmlFor={checkboxId}
+          className={cn(
+            COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
+            "flex shrink-0 cursor-pointer items-center justify-center",
+          )}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <Checkbox
+            id={checkboxId}
+            checked={checked}
+            aria-label={`Show ${row.title} in sidebar`}
+            onCheckedChange={(nextChecked) =>
+              onCheckedChange(nextChecked === true)
+            }
+            data-plugin-nav-customize-checkbox={panelKey}
+          />
+        </label>
+      ) : (
+        <Checkbox
+          checked={checked}
+          aria-label={`Show ${row.title} in sidebar`}
+          onCheckedChange={(nextChecked) =>
+            onCheckedChange(nextChecked === true)
+          }
+          onClick={(event) => event.stopPropagation()}
+          data-plugin-nav-customize-checkbox={panelKey}
+          className="mx-1"
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/app/src/components/sidebar/AppSidebar.tsx b/apps/app/src/components/sidebar/AppSidebar.tsx
index 50fe4972ea..0b35c61c12 100644
--- a/apps/app/src/components/sidebar/AppSidebar.tsx
+++ b/apps/app/src/components/sidebar/AppSidebar.tsx
@@ -13,6 +13,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useCloseMobileSidebar,
+  useSidebar,
 } from "@/components/ui/sidebar.js";
 import { ProjectList } from "./ProjectList";
 import { PluginThreadList } from "./PluginThreadList";
@@ -85,6 +86,8 @@ export function AppSidebar({
     label: "New thread",
   });
   const closeOnMobile = useCloseMobileSidebar();
+  const { isCompactViewport, openMobile } = useSidebar();
+  const [compactCustomizeMode, setCompactCustomizeMode] = useState(false);
   const [desktopInfo] = useState(getBbDesktopInfo);
   const [threadShortcutKeysById, setThreadShortcutKeysById] = useState<
     ReadonlyMap<string, SidebarThreadShortcutPresentation>
@@ -171,6 +174,13 @@ export function AppSidebar({
   );
 
   const isHiddenHostedBody = mobileHosted?.hidden === true;
+  const isCompactCustomizeModeActive =
+    isCompactViewport && compactCustomizeMode;
+  useEffect(() => {
+    if (!isCompactViewport || !openMobile || isHiddenHostedBody) {
+      setCompactCustomizeMode(false);
+    }
+  }, [isCompactViewport, isHiddenHostedBody, openMobile]);
   const activateVisibleThreadShortcut = useCallback(
     (index: number) =>
       isHiddenHostedBody ? false : activateThreadShortcut(index),
@@ -228,6 +238,8 @@ export function AppSidebar({
         </div>
       ) : null}
       <SidebarNavigationRegion
+        compactCustomizeMode={isCompactCustomizeModeActive}
+        onCompactCustomizeModeChange={setCompactCustomizeMode}
         onNavigate={closeOnMobile}
         splitEnabled
         toolsRoutePath={toolsRoutePath}
@@ -235,18 +247,23 @@ export function AppSidebar({
         onNewChat={handleNewChat}
         onSearchThreads={closeOnMobile}
       />
-      <div
-        aria-hidden="true"
-        className="mx-2 shrink-0 border-t border-sidebar-border/40"
-      />
-      <SidebarContent>
-        <PluginThreadList
-          replacement={threadListReplacement}
-          original={originalThreadList}
-          searchQuery=""
-          onNavigate={closeOnMobile}
-        />
-      </SidebarContent>
+      {!isCompactCustomizeModeActive ? (
+        <>
+          <div
+            aria-hidden="true"
+            className="mx-2 my-2 shrink-0 border-t border-sidebar-border/25"
+            data-testid="app-sidebar-navigation-divider"
+          />
+          <SidebarContent>
+            <PluginThreadList
+              replacement={threadListReplacement}
+              original={originalThreadList}
+              searchQuery=""
+              onNavigate={closeOnMobile}
+            />
+          </SidebarContent>
+        </>
+      ) : null}
       <SidebarFooter className="relative">
         <OverflowFade placement="above" tone="sidebar" size="sm" />
         {}
diff --git a/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx b/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
index d16b6af1e6..99d2aa2c7c 100644
--- a/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
+++ b/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
@@ -30,7 +30,9 @@ export type BuiltInSidebarNavigationProps = ComponentProps<
   };
 
 export function BuiltInSidebarNavigation({
+  compactCustomizeMode,
   newThreadSplit,
+  onCompactCustomizeModeChange,
   onNavigate,
   onNewChat,
   onSearchThreads,
@@ -141,8 +143,10 @@ export function BuiltInSidebarNavigation({
       <div className="contents" data-testid="app-sidebar-primary-actions">
         <PluginNavSidebarItems
           builtInEntries={builtInEntries}
+          compactCustomizeMode={compactCustomizeMode}
           entries={traditionalPluginNavPanels}
           leadingOrderKeys={DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER}
+          onCompactCustomizeModeChange={onCompactCustomizeModeChange}
           onNavigate={onNavigate}
           splitEnabled={splitEnabled}
         />
diff --git a/apps/app/src/components/sidebar/SidebarNavigationRegion.tsx b/apps/app/src/components/sidebar/SidebarNavigationRegion.tsx
index 46db44e50e..3435d359a2 100644
--- a/apps/app/src/components/sidebar/SidebarNavigationRegion.tsx
+++ b/apps/app/src/components/sidebar/SidebarNavigationRegion.tsx
@@ -12,6 +12,7 @@ import type {
 } from "@get-bb/plugin-sdk";
 import { useLocation, useNavigate } from "react-router-dom";
 import { toast } from "sonner";
+import { cn } from "@bb/shared-ui/lib/utils";
 import {
   useAppCommandRunner,
   useAppCommandShortcut,
@@ -233,6 +234,9 @@ export function SidebarNavigationRegion(props: BuiltInSidebarNavigationProps) {
     <nav
       aria-label="Sidebar navigation"
       data-testid="sidebar-navigation-region"
+      className={cn(
+        props.compactCustomizeMode && "flex min-h-0 flex-1 flex-col",
+      )}
     >
       <PluginReplacementSlot
         replacement={replacement}

From db29df16bce6e05248841c1d195fb528f0793b3b Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 2 Sep 2026 15:10:44 -0700
Subject: [PATCH 07/12] Rename sidebar customization title

---
 apps/app/src/components/plugin/PluginNavSidebarItems.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
index ae44cb0d44..ea6a7b5ef2 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
@@ -508,7 +508,7 @@ function SidebarNavigationInlineCustomizeMode({
           <Icon name="ChevronLeft" aria-hidden="true" />
         </Button>
         <div className={cn("min-w-0 flex-1 px-1", CHROME_SECTION_LABEL_CLASS)}>
-          Sidebar
+          Customize sidebar
         </div>
       </div>
       <div className="min-h-0 flex-1 overflow-y-auto pt-1">
@@ -582,7 +582,7 @@ function SidebarNavigationCustomizeMenu({
         align="start"
         sideOffset={8}
         className="w-52 p-2"
-        mobileTitle="Sidebar"
+        mobileTitle="Customize sidebar"
         onOpenAutoFocus={(event) => {
           event.preventDefault();
           contentRef.current
@@ -593,7 +593,7 @@ function SidebarNavigationCustomizeMenu({
         }}
       >
         <div className={cn("px-2 py-1", CHROME_SECTION_LABEL_CLASS)}>
-          Sidebar
+          Customize sidebar
         </div>
         <SidebarNavigationCustomizeList
           rows={rows}

From 20bdcdce134da5770f2190355a61747dc6430480 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 2 Sep 2026 16:47:37 -0700
Subject: [PATCH 08/12] Reveal search shortcut contextually

---
 .../src/components/sidebar/ProjectList.tsx    |  6 ++++--
 .../sidebar/ProjectListActionButtons.test.tsx | 21 ++++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/components/sidebar/ProjectList.tsx b/apps/app/src/components/sidebar/ProjectList.tsx
index 2566f59c28..a5245aaabc 100644
--- a/apps/app/src/components/sidebar/ProjectList.tsx
+++ b/apps/app/src/components/sidebar/ProjectList.tsx
@@ -822,7 +822,7 @@ export function ProjectListSearchThreadsAction({
       variant="ghost"
       className={cn(
         PROJECT_LIST_ACTION_BUTTON_CLASS,
-        "w-full pr-1 [&_kbd]:opacity-60",
+        "group/search-threads w-full pr-1",
       )}
       onClick={(event) => {
         onSearchThreads?.();
@@ -841,7 +841,9 @@ export function ProjectListSearchThreadsAction({
           Search threads
         </span>
         {threadSearchShortcut ? (
-          <AppCommandShortcutPill shortcut={threadSearchShortcut} />
+          <span className="inline-flex shrink-0 opacity-0 transition-opacity group-hover/search-threads:opacity-100 group-focus-visible/search-threads:opacity-100 max-md:pointer-coarse:hidden">
+            <AppCommandShortcutPill shortcut={threadSearchShortcut} />
+          </span>
         ) : null}
       </span>
     </Button>
diff --git a/apps/app/src/components/sidebar/ProjectListActionButtons.test.tsx b/apps/app/src/components/sidebar/ProjectListActionButtons.test.tsx
index 78de37f80b..ee39779a1f 100644
--- a/apps/app/src/components/sidebar/ProjectListActionButtons.test.tsx
+++ b/apps/app/src/components/sidebar/ProjectListActionButtons.test.tsx
@@ -26,7 +26,7 @@ afterEach(() => {
 });
 
 describe("ProjectListSearchThreadsAction", () => {
-  it("keeps the trailing Search shortcut visible without changing activation", () => {
+  it("reveals the reserved trailing Search shortcut on hover or focus without changing activation", () => {
     const onSearchThreads = vi.fn();
     render(
       <ProjectListSearchThreadsAction onSearchThreads={onSearchThreads} />,
@@ -42,8 +42,23 @@ describe("ProjectListSearchThreadsAction", () => {
     expect(shortcut.tagName).toBe("KBD");
     expect(shortcut.getAttribute("aria-hidden")).toBe("true");
     expect(label.classList.contains("flex-1")).toBe(true);
-    expect(shortcut.parentElement?.lastElementChild).toBe(shortcut);
-    expect(button.classList.contains("[&_kbd]:opacity-60")).toBe(true);
+    const shortcutSlot = shortcut.parentElement;
+    expect(shortcutSlot?.lastElementChild).toBe(shortcut);
+    expect(button.classList.contains("group/search-threads")).toBe(true);
+    expect(shortcutSlot?.classList.contains("opacity-0")).toBe(true);
+    expect(
+      shortcutSlot?.classList.contains(
+        "group-hover/search-threads:opacity-100",
+      ),
+    ).toBe(true);
+    expect(
+      shortcutSlot?.classList.contains(
+        "group-focus-visible/search-threads:opacity-100",
+      ),
+    ).toBe(true);
+    expect(
+      shortcutSlot?.classList.contains("max-md:pointer-coarse:hidden"),
+    ).toBe(true);
     expect(button.classList.contains("pr-1")).toBe(true);
 
     fireEvent.click(button);

From 150e60aefd4be1fa7b38f7922002dca036398b7a Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 2 Sep 2026 17:46:54 -0700
Subject: [PATCH 09/12] Slim sidebar navigation hierarchy layer

---
 .../plugin/PluginNavSidebarItems.test.tsx     | 561 +++--------
 .../plugin/PluginNavSidebarItems.tsx          | 884 ++++--------------
 .../plugin/pluginNavSidebarAtoms.test.ts      | 178 ----
 .../plugin/pluginNavSidebarAtoms.ts           | 141 +--
 .../plugin/pluginNavSidebarOrder.test.ts      | 222 ++---
 .../plugin/pluginNavSidebarOrder.ts           | 122 +--
 .../app/src/components/sidebar/AppSidebar.tsx |  42 +-
 .../sidebar/BuiltInSidebarNavigation.tsx      | 152 +--
 .../src/components/sidebar/ProjectList.tsx    |   5 +-
 .../sidebar/SidebarNavigationRegion.test.tsx  |   3 -
 .../sidebar/SidebarNavigationRegion.tsx       |   4 -
 .../sidebar/SidebarOverview.stories.tsx       |   3 +-
 apps/app/src/lib/plugin-nav-panel-chrome.ts   |   2 +-
 13 files changed, 447 insertions(+), 1872 deletions(-)
 delete mode 100644 apps/app/src/components/plugin/pluginNavSidebarAtoms.test.ts

diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
index 43b8d5c8f6..55303fce25 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
@@ -6,13 +6,11 @@ import {
   render,
   screen,
   waitFor,
-  within,
 } from "@testing-library/react";
-import { useEffect, useState, type ComponentType } from "react";
+import { useEffect, type ComponentType } from "react";
 import { createStore, Provider } from "jotai";
-import { MemoryRouter, useLocation } from "react-router-dom";
+import { MemoryRouter } from "react-router-dom";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { CompactViewportOverrideProvider } from "@bb/shared-ui/hooks/use-compact-viewport";
 import { SidebarProvider } from "@/components/ui/sidebar.js";
 import {
@@ -20,20 +18,12 @@ import {
   setPluginSlotRegistrations,
   type PluginRegistrationSet,
 } from "@/lib/plugin-slots";
-import { getPluginPanelRoutePath } from "@/lib/route-paths";
 import {
   resetAllCrashedPluginSlotsForTest,
   resetCrashedPluginSlots,
 } from "./PluginSlotMount";
-import {
-  type BuiltInSidebarNavEntry,
-  ExtensionsNavSidebarItem,
-  PluginNavSidebarItems,
-} from "./PluginNavSidebarItems";
-import {
-  pluginNavPanelOrderAtom,
-  pluginNavVisiblePanelKeysAtom,
-} from "./pluginNavSidebarAtoms";
+import { PluginNavSidebarItems } from "./PluginNavSidebarItems";
+import { pluginNavPanelOrderAtom } from "./pluginNavSidebarAtoms";
 
 function registrationSet(
   overrides: Partial<PluginRegistrationSet>,
@@ -76,111 +66,39 @@ function registerPanel(
   );
 }
 
-interface RenderSidebarItemsOptions {
-  builtInEntries?: readonly BuiltInSidebarNavEntry[];
-  storedOrder?: string[];
-  storedVisibleKeys?: string[] | null;
-  compactViewport?: boolean;
-  compactCustomizeMode?: boolean;
-  onCompactCustomizeModeChange?: (isCustomizing: boolean) => void;
-}
-
-function PluginNavSidebarItemsHarness({
-  options,
-}: {
-  options: RenderSidebarItemsOptions;
-}) {
-  const [compactCustomizeMode, setCompactCustomizeMode] = useState(
-    options.compactCustomizeMode ?? false,
-  );
-  const compactControlProps = options.compactViewport
-    ? {
-        compactCustomizeMode,
-        onCompactCustomizeModeChange: (isCustomizing: boolean) => {
-          setCompactCustomizeMode(isCustomizing);
-          options.onCompactCustomizeModeChange?.(isCustomizing);
-        },
-      }
-    : {};
-
-  return (
-    <PluginNavSidebarItems
-      builtInEntries={options.builtInEntries}
-      {...compactControlProps}
-    />
-  );
-}
-
-function renderSidebarItems(options: RenderSidebarItemsOptions = {}) {
+function renderSidebarItems(
+  options: {
+    toolsRoutePath?: string;
+    storedOrder?: string[];
+    compactViewport?: boolean;
+  } = {},
+) {
   const store = createStore();
-  const queryClient = new QueryClient({
-    defaultOptions: { queries: { retry: false } },
-  });
   if (options.storedOrder) {
     store.set(pluginNavPanelOrderAtom, options.storedOrder);
   }
-  if ("storedVisibleKeys" in options) {
-    store.set(
-      pluginNavVisiblePanelKeysAtom,
-      options.storedVisibleKeys ?? null,
-    );
-  }
-  const view = render(
+  return render(
     <CompactViewportOverrideProvider
       isCompactViewport={options.compactViewport ?? false}
     >
-      <QueryClientProvider client={queryClient}>
-        <Provider store={store}>
-          <MemoryRouter initialEntries={["/"]}>
-            <SidebarProvider>
-              <PluginNavSidebarItemsHarness options={options} />
-              <LocationProbe />
-            </SidebarProvider>
-          </MemoryRouter>
-        </Provider>
-      </QueryClientProvider>
+      <Provider store={store}>
+        <MemoryRouter initialEntries={["/"]}>
+          <SidebarProvider>
+            <PluginNavSidebarItems toolsRoutePath={options.toolsRoutePath} />
+          </SidebarProvider>
+        </MemoryRouter>
+      </Provider>
     </CompactViewportOverrideProvider>,
   );
-  return { ...view, store };
-}
-
-function LocationProbe() {
-  return <output data-testid="location-path">{useLocation().pathname}</output>;
 }
 
-function panelRowNames(labels: readonly string[] = ["Docs", "GitHub"]): string[] {
-  const rowLabels = new Set(labels);
-  const container = screen.queryByTestId("plugin-nav-sidebar-items");
-  if (!container) return [];
-  return Array.from(
-    container.querySelectorAll<HTMLElement>("[data-sidebar-navigation-item]"),
-  )
-    .map((row) => row.textContent?.trim() ?? "")
-    .filter((label) => rowLabels.has(label));
-}
+const ROW_LABELS = new Set(["Extensions", "Docs", "GitHub"]);
 
-function builtInEntry(
-  id: string,
-  title: string,
-  onActivate: () => void = vi.fn(),
-): BuiltInSidebarNavEntry {
-  return {
-    kind: "built-in",
-    pluginId: "__bb__",
-    id,
-    title,
-    icon: <span aria-hidden="true" />,
-    content: <button type="button">{title}</button>,
-    onActivate,
-  };
-}
-
-function customizeRows(): HTMLElement[] {
-  return Array.from(
-    screen
-      .getByRole("list", { name: "Sidebar navigation" })
-      .querySelectorAll<HTMLElement>("[data-plugin-nav-customize-item]"),
-  );
+function panelRowNames(): string[] {
+  return screen
+    .getAllByRole("button")
+    .map((button) => button.textContent?.trim() ?? "")
+    .filter((label) => ROW_LABELS.has(label));
 }
 
 beforeEach(() => {
@@ -199,27 +117,6 @@ afterEach(() => {
 });
 
 describe("PluginNavSidebarItems", () => {
-  it("collapses the entire subsection with zero traditional plugins", () => {
-    renderSidebarItems();
-
-    expect(screen.queryByTestId("plugin-nav-sidebar-items")).toBeNull();
-    expect(screen.queryByText("Plugins")).toBeNull();
-  });
-
-  it("shows one plugin with a unified customization entry point and no section label", () => {
-    registerPanel("docs", "Docs");
-    renderSidebarItems();
-
-    expect(screen.queryByText("Plugins")).toBeNull();
-    expect(panelRowNames(["Docs"])).toEqual(["Docs"]);
-    expect(
-      screen.queryByTestId("plugin-nav-sidebar-overflow-toggle"),
-    ).toBeNull();
-    expect(
-      screen.getByRole("button", { name: "Customize sidebar navigation" }),
-    ).not.toBeNull();
-  });
-
   it("keeps an accessory-less plugin row unchanged", () => {
     registerPanel("docs", "Docs");
 
@@ -317,10 +214,6 @@ describe("PluginNavSidebarItems", () => {
     expect(
       await screen.findByRole("menuitem", { name: "Hide from sidebar" }),
     ).not.toBeNull();
-    expect(screen.queryByRole("menuitem", { name: "Move to top" })).toBeNull();
-    expect(
-      screen.queryByRole("menuitem", { name: "Move to overflow" }),
-    ).toBeNull();
 
     expect(accessory?.getAttribute("data-sidebar-hover-actions-open")).toBe(
       "true",
@@ -344,111 +237,6 @@ describe("PluginNavSidebarItems", () => {
     ).toBeNull();
   });
 
-  it("uses an in-place customization mode instead of a drawer on compact viewports", () => {
-    const onCompactCustomizeModeChange = vi.fn();
-    renderSidebarItems({
-      compactViewport: true,
-      builtInEntries: [
-        builtInEntry("new-thread", "New thread"),
-        builtInEntry("search-threads", "Search threads"),
-      ],
-      onCompactCustomizeModeChange,
-    });
-
-    fireEvent.click(
-      screen.getByRole("button", { name: "Customize sidebar navigation" }),
-    );
-
-    expect(onCompactCustomizeModeChange).toHaveBeenCalledWith(true);
-    expect(
-      screen.getByTestId("sidebar-navigation-customize-inline"),
-    ).not.toBeNull();
-    expect(screen.queryByRole("dialog")).toBeNull();
-    expect(screen.getByRole("button", { name: "Back to sidebar" })).toBe(
-      document.activeElement,
-    );
-    expect(
-      screen.queryByRole("button", { name: "Customize sidebar navigation" }),
-    ).toBeNull();
-    const firstCustomizeRow = customizeRows()[0];
-    const firstDragHandle = firstCustomizeRow?.querySelector<HTMLElement>(
-      "[data-plugin-nav-customize-drag-handle]",
-    );
-    const firstCheckbox = within(firstCustomizeRow as HTMLElement).getByRole(
-      "checkbox",
-    );
-    expect(
-      firstCustomizeRow?.classList.contains("max-md:pointer-coarse:h-9"),
-    ).toBe(true);
-    expect(
-      firstDragHandle?.classList.contains("max-md:pointer-coarse:h-9"),
-    ).toBe(true);
-    expect(
-      firstDragHandle?.classList.contains("max-md:pointer-coarse:w-9"),
-    ).toBe(true);
-    expect(
-      firstCheckbox
-        .closest("label")
-        ?.classList.contains("max-md:pointer-coarse:h-9"),
-    ).toBe(true);
-
-    fireEvent.click(screen.getByRole("button", { name: "Back to sidebar" }));
-
-    expect(onCompactCustomizeModeChange).toHaveBeenLastCalledWith(false);
-    expect(
-      screen.queryByTestId("sidebar-navigation-customize-inline"),
-    ).toBeNull();
-    expect(screen.getByRole("button", { name: "New thread" })).not.toBeNull();
-    expect(
-      screen.getByRole("button", { name: "Customize sidebar navigation" }),
-    ).toBe(document.activeElement);
-  });
-
-  it("keeps compact visibility changes in place and closes the mode when launching", () => {
-    const onActivate = vi.fn();
-    const { store } = renderSidebarItems({
-      compactViewport: true,
-      builtInEntries: [builtInEntry("new-thread", "New thread", onActivate)],
-    });
-
-    fireEvent.click(
-      screen.getByRole("button", { name: "Customize sidebar navigation" }),
-    );
-    fireEvent.click(
-      screen.getByRole("checkbox", { name: "Show New thread in sidebar" }),
-    );
-
-    expect(
-      screen.getByTestId("sidebar-navigation-customize-inline"),
-    ).not.toBeNull();
-    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([]);
-
-    fireEvent.click(screen.getByRole("button", { name: "New thread" }));
-
-    expect(onActivate).toHaveBeenCalledTimes(1);
-    expect(
-      screen.queryByTestId("sidebar-navigation-customize-inline"),
-    ).toBeNull();
-    expect(screen.queryByRole("checkbox")).toBeNull();
-  });
-
-  it("keeps the desktop customization popover", () => {
-    renderSidebarItems({
-      builtInEntries: [builtInEntry("new-thread", "New thread")],
-    });
-
-    fireEvent.click(
-      screen.getByRole("button", { name: "Customize sidebar navigation" }),
-    );
-
-    expect(
-      screen.getByRole("list", { name: "Sidebar navigation" }),
-    ).not.toBeNull();
-    expect(
-      screen.queryByTestId("sidebar-navigation-customize-inline"),
-    ).toBeNull();
-  });
-
   it("hides a crashed accessory and retries it after a plugin reload", () => {
     function CrashingAccessory(): never {
       throw new Error("accessory crashed");
@@ -469,245 +257,158 @@ describe("PluginNavSidebarItems", () => {
     expect(screen.queryByText("plugin tasks crashed")).toBeNull();
   });
 
-  it("shows only the first three plugins directly and lists every plugin in the menu", () => {
-    const labels = ["One", "Two", "Three", "Four", "Five", "Six"];
-    labels.forEach((label, index) => registerPanel(`plugin-${index}`, label));
+  it("moves a hidden panel into an expanded More disclosure and back", async () => {
+    registerPanel("docs", "Docs");
+    registerPanel("github", "GitHub");
 
     renderSidebarItems();
 
-    expect(panelRowNames(labels)).toEqual(labels.slice(0, 3));
+    expect(panelRowNames()).toEqual(["Docs", "GitHub"]);
     expect(
       screen.queryByTestId("plugin-nav-sidebar-overflow-toggle"),
     ).toBeNull();
 
-    fireEvent.click(
-      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    fireEvent.pointerDown(
+      screen.getByRole("button", { name: "Docs panel options" }),
+      { button: 0 },
     );
-    expect(customizeRows().map((row) => row.textContent?.trim())).toEqual(
-      labels,
+    fireEvent.click(
+      await screen.findByRole("menuitem", { name: "Hide from sidebar" }),
     );
-    expect(
-      screen.queryByRole("button", { name: "Four panel options" }),
-    ).toBeNull();
-  });
-
-  it("keeps launch and visibility as distinct targets with a clear row hover state", async () => {
-    const labels = ["One", "Two", "Three", "Four"];
-    labels.forEach((label, index) => registerPanel(`plugin-${index}`, label));
-    const { store, unmount } = renderSidebarItems();
 
-    const trigger = screen.getByRole("button", {
-      name: "Customize sidebar navigation",
-    });
-    expect(trigger.querySelector("svg")).not.toBeNull();
-
-    fireEvent.click(trigger);
-    const choices = screen.getAllByRole("checkbox");
-    await waitFor(() =>
+    await waitFor(() => {
       expect(
-        document.activeElement?.getAttribute(
-          "data-sidebar-navigation-customize-launch",
-        ),
-      ).toBe("plugin-0/main"),
-    );
-    expect(choices.map((choice) => choice.getAttribute("data-state"))).toEqual([
-      "checked",
-      "checked",
-      "checked",
-      "unchecked",
-    ]);
-    expect(
-      document.querySelectorAll("[data-plugin-nav-customize-drag-handle]"),
-    ).toHaveLength(4);
-    expect(customizeRows()[0]?.classList.contains("hover:bg-state-hover")).toBe(
-      true,
-    );
-
-    fireEvent.click(choices[0]!);
+        screen.getByTestId("plugin-nav-sidebar-overflow-toggle").textContent,
+      ).toContain("More (1)");
+    });
+    expect(panelRowNames()).toEqual(["GitHub"]);
     expect(
-      screen.getByRole("list", { name: "Sidebar navigation" }),
-    ).not.toBeNull();
-    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
-      "plugin-1/main",
-      "plugin-2/main",
-    ]);
-    expect(panelRowNames(labels)).toEqual(["Two", "Three"]);
+      window.localStorage.getItem("bb.sidebar.hiddenPluginPanels"),
+    ).toContain("docs/main");
 
-    unmount();
-    renderSidebarItems();
-    expect(panelRowNames(labels)).toEqual(["Two", "Three"]);
-    fireEvent.click(
-      screen.getByRole("button", { name: "Customize sidebar navigation" }),
-    );
+    fireEvent.click(screen.getByTestId("plugin-nav-sidebar-overflow-toggle"));
+    await waitFor(() => {
+      expect(panelRowNames()).toEqual(["GitHub", "Docs"]);
+    });
 
-    const hiddenRow = document.querySelector<HTMLElement>(
-      '[data-plugin-nav-customize-item="plugin-0/main"]',
+    fireEvent.pointerDown(
+      screen.getByRole("button", { name: "Docs panel options" }),
+      { button: 0 },
     );
-    expect(hiddenRow).not.toBeNull();
     fireEvent.click(
-      within(hiddenRow as HTMLElement).getByRole("button", { name: "One" }),
+      await screen.findByRole("menuitem", { name: "Show in sidebar" }),
     );
 
-    expect(screen.getByTestId("location-path").textContent).toBe(
-      getPluginPanelRoutePath({ pluginId: "plugin-0", path: "main" }),
-    );
-    await waitFor(() =>
+    await waitFor(() => {
       expect(
-        screen.queryByRole("list", { name: "Sidebar navigation" }),
-      ).toBeNull(),
-    );
+        screen.queryByTestId("plugin-nav-sidebar-overflow-toggle"),
+      ).toBeNull();
+    });
+    expect(panelRowNames()).toEqual(["Docs", "GitHub"]);
   });
 
-  it("seeds newly introduced built-ins without overriding existing plugin visibility", () => {
+  it("collapses hidden panels behind the More toggle on a later mount", async () => {
     registerPanel("docs", "Docs");
-    registerPanel("tasks", "Tasks");
-    renderSidebarItems({
-      builtInEntries: [
-        builtInEntry("new-thread", "New thread"),
-        builtInEntry("search-threads", "Search threads"),
-      ],
-      storedOrder: ["tasks/main", "docs/main"],
-      storedVisibleKeys: ["docs/main"],
-    });
+    registerPanel("github", "GitHub");
+    window.localStorage.setItem(
+      "bb.sidebar.hiddenPluginPanels",
+      JSON.stringify(["docs/main"]),
+    );
 
-    expect(
-      Array.from(
-        screen
-          .getByTestId("plugin-nav-sidebar-items")
-          .querySelectorAll("[data-sidebar-navigation-item]"),
-      ).map((row) => row.getAttribute("data-sidebar-navigation-item")),
-    ).toEqual(["__bb__/new-thread", "__bb__/search-threads", "docs/main"]);
-  });
+    renderSidebarItems();
 
-  it("keeps Customize on the New thread row without stranding it when the row is hidden", () => {
-    renderSidebarItems({
-      builtInEntries: [
-        builtInEntry("new-thread", "New thread"),
-        builtInEntry("search-threads", "Search threads"),
-      ],
-    });
+    expect(panelRowNames()).toEqual(["GitHub"]);
+    const toggle = screen.getByTestId("plugin-nav-sidebar-overflow-toggle");
+    expect(toggle.textContent).toContain("More (1)");
 
-    const trigger = screen.getByRole("button", {
-      name: "Customize sidebar navigation",
+    fireEvent.click(toggle);
+    await waitFor(() => {
+      expect(panelRowNames()).toEqual(["GitHub", "Docs"]);
     });
-    expect(
-      trigger
-        .closest("[data-sidebar-navigation-item]")
-        ?.getAttribute("data-sidebar-navigation-item"),
-    ).toBe("__bb__/new-thread");
+  });
+
+  it("hides the built-in Extensions row like a plugin row", async () => {
+    registerPanel("docs", "Docs");
 
-    fireEvent.click(trigger);
+    renderSidebarItems({ toolsRoutePath: "/extensions/skills" });
+
+    expect(panelRowNames()).toEqual(["Extensions", "Docs"]);
+
+    fireEvent.pointerDown(
+      screen.getByRole("button", { name: "Extensions panel options" }),
+      { button: 0 },
+    );
     fireEvent.click(
-      screen.getByRole("checkbox", { name: "Show New thread in sidebar" }),
+      await screen.findByRole("menuitem", { name: "Hide from sidebar" }),
     );
 
+    await waitFor(() => {
+      expect(panelRowNames()).toEqual(["Docs"]);
+    });
     expect(
-      screen.getByRole("list", { name: "Sidebar navigation" }),
-    ).not.toBeNull();
+      screen.getByTestId("plugin-nav-sidebar-overflow-toggle").textContent,
+    ).toContain("More (1)");
     expect(
-      screen
-        .getByRole("button", { name: "Customize sidebar navigation" })
-        .closest("[data-sidebar-navigation-item]"),
-    ).toBeNull();
+      window.localStorage.getItem("bb.sidebar.hiddenPluginPanels"),
+    ).toContain("__builtin__/tools");
   });
 
-  it("applies one persisted mixed order to direct rows and the menu", () => {
-    const labels = ["One", "Two", "Three", "Four"];
-    labels.forEach((label, index) => registerPanel(`plugin-${index}`, label));
-    const newThread = builtInEntry("new-thread", "New thread");
-    const searchThreads = builtInEntry("search-threads", "Search threads");
+  it("keeps Extensions on top for users who already reordered their plugin rows", () => {
+    registerPanel("docs", "Docs");
+    registerPanel("github", "GitHub");
+
     renderSidebarItems({
-      builtInEntries: [newThread, searchThreads],
-      storedOrder: [
-        "plugin-3/main",
-        "__bb__/search-threads",
-        "plugin-1/main",
-        "__bb__/new-thread",
-        "plugin-0/main",
-        "plugin-2/main",
-      ],
-      storedVisibleKeys: [
-        "plugin-3/main",
-        "__bb__/search-threads",
-        "__bb__/new-thread",
-        "plugin-0/main",
-      ],
+      toolsRoutePath: "/extensions/skills",
+      storedOrder: ["github/main", "docs/main"],
     });
 
-    expect(
-      Array.from(
-        screen
-          .getByTestId("plugin-nav-sidebar-items")
-          .querySelectorAll("[data-sidebar-navigation-item]"),
-      ).map((row) => row.getAttribute("data-sidebar-navigation-item")),
-    ).toEqual([
-      "plugin-3/main",
-      "__bb__/search-threads",
-      "__bb__/new-thread",
-      "plugin-0/main",
-    ]);
-
-    fireEvent.click(
-      screen.getByRole("button", { name: "Customize sidebar navigation" }),
-    );
-    expect(customizeRows().map((row) => row.textContent?.trim())).toEqual([
-      "Four",
-      "Search threads",
-      "Two",
-      "New thread",
-      "One",
-      "Three",
-    ]);
-    expect(
-      screen
-        .getAllByRole("checkbox")
-        .map((choice) => choice.getAttribute("data-state")),
-    ).toEqual([
-      "checked",
-      "checked",
-      "unchecked",
-      "checked",
-      "checked",
-      "unchecked",
-    ]);
+    expect(panelRowNames()).toEqual(["Extensions", "GitHub", "Docs"]);
   });
 
-  it("launches a built-in row from the menu without changing its visibility", async () => {
-    const onActivate = vi.fn();
+  it("keeps a saved order when plugin frontends register after the first render", async () => {
     renderSidebarItems({
-      builtInEntries: [builtInEntry("new-thread", "New thread", onActivate)],
+      toolsRoutePath: "/extensions/skills",
+      storedOrder: ["github/main", "__builtin__/tools", "docs/main"],
     });
 
-    fireEvent.click(
-      screen.getByRole("button", { name: "Customize sidebar navigation" }),
-    );
-    const row = customizeRows()[0];
-    expect(row).toBeDefined();
-    fireEvent.click(
-      within(row as HTMLElement).getByRole("button", { name: "New thread" }),
-    );
+    expect(panelRowNames()).toEqual(["Extensions"]);
 
-    expect(onActivate).toHaveBeenCalledTimes(1);
-    await waitFor(() =>
-      expect(
-        screen.queryByRole("list", { name: "Sidebar navigation" }),
-      ).toBeNull(),
-    );
+    registerPanel("docs", "Docs");
+    registerPanel("github", "GitHub");
+
+    await waitFor(() => {
+      expect(panelRowNames()).toEqual(["GitHub", "Extensions", "Docs"]);
+    });
   });
-});
 
-describe("ExtensionsNavSidebarItem", () => {
-  it("is host-owned and has no plugin-panel options menu", () => {
-    render(
-      <MemoryRouter>
-        <ExtensionsNavSidebarItem routePath="/extensions/plugins" />
-      </MemoryRouter>,
-    );
+  it("saves no Extensions key while the row is absent", async () => {
+    registerPanel("docs", "Docs");
+
+    renderSidebarItems({ storedOrder: ["docs/main"] });
 
-    const row = screen.getByRole("button", { name: "Extensions" });
-    expect(row.querySelector(".bb-sidebar-row-icon-swap")).not.toBeNull();
+    await waitFor(() => {
+      expect(panelRowNames()).toEqual(["Docs"]);
+    });
     expect(
-      screen.queryByRole("button", { name: "Extensions panel options" }),
-    ).toBeNull();
+      window.localStorage.getItem("bb.sidebar.pluginPanelOrder") ?? "",
+    ).not.toContain("__builtin__/tools");
+  });
+
+  it("carries both Extensions glyphs so hover swaps without reflow", () => {
+    renderSidebarItems({ toolsRoutePath: "/extensions/plugins" });
+
+    const extensionsRow = screen
+      .getAllByRole("button")
+      .find((button) => button.textContent?.trim() === "Extensions");
+    expect(extensionsRow).toBeTruthy();
+
+    const swap = extensionsRow?.querySelector(".bb-sidebar-row-icon-swap");
+    expect(swap).toBeTruthy();
+    expect(
+      swap?.querySelector('.bb-sidebar-row-icon-rest[data-icon="Toolbox"]'),
+    ).toBeTruthy();
+    expect(
+      swap?.querySelector('.bb-sidebar-row-icon-hover[data-icon="ToolCase"]'),
+    ).toBeTruthy();
   });
 });
diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
index ea6a7b5ef2..6f5eb33ad6 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
@@ -1,9 +1,7 @@
 import {
   useCallback,
   useEffect,
-  useId,
   useMemo,
-  useRef,
   useState,
   type CSSProperties,
   type MouseEvent as ReactMouseEvent,
@@ -13,14 +11,11 @@ import {
 import { useLocation, useNavigate } from "react-router-dom";
 import { useAtom } from "jotai";
 import { DndContext, type DragEndEvent } from "@dnd-kit/core";
-import { FilterHorizontalIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
 import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { Button } from "@bb/shared-ui/button";
-import { Checkbox } from "@bb/shared-ui/checkbox";
 import { Icon } from "@bb/shared-ui/icon";
 import {
   ContextMenu,
@@ -34,29 +29,15 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@bb/shared-ui/dropdown-menu";
-import {
-  COARSE_POINTER_COMPACT_ROW_HEIGHT_CLASS,
-  COARSE_POINTER_ICON_SIZE_CLASS,
-  COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
-} from "@bb/shared-ui/coarse-pointer-sizing";
-import { CHROME_SECTION_LABEL_CLASS } from "@bb/shared-ui/chrome-style-tokens";
+import { COARSE_POINTER_ICON_SIZE_CLASS } from "@bb/shared-ui/coarse-pointer-sizing";
 import { useIsCompactViewport } from "@bb/shared-ui/hooks/use-compact-viewport";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@bb/shared-ui/popover";
 import { PluginIcon } from "@/components/plugin/PluginIcon";
 import { PluginSlotMount } from "@/components/plugin/PluginSlotMount";
 import { PROJECT_LIST_ACTION_BUTTON_CLASS } from "@/components/sidebar/ProjectList";
-import {
-  AUTOMATIONS_PLUGIN_ID,
-  getPluginPanelRoutePath,
-} from "@/lib/route-paths";
+import { getPluginPanelRoutePath } from "@/lib/route-paths";
 import {
   usePluginNavPanelChrome,
   type PluginNavPanelChrome,
-  type PluginNavPanelChromeEntry,
 } from "@/lib/plugin-nav-panel-chrome";
 import { cn } from "@bb/shared-ui/lib/utils";
 import type { PluginNavPanelSlot } from "@/lib/plugin-slots";
@@ -75,228 +56,110 @@ import { useSidebarSortable } from "@/components/sidebar/sortableMotion";
 import { useSidebarReorderDnd } from "@/components/sidebar/useSidebarReorderDnd";
 import type { SidebarSortableDragBindings } from "@/components/sidebar/sortableMotion";
 import {
+  hiddenPluginNavPanelsAtom,
   pluginNavPanelOrderAtom,
-  pluginNavVisiblePanelKeysAtom,
 } from "./pluginNavSidebarAtoms";
 import {
-  arrangePluginNavPanelPreferences,
-  BUILT_IN_SIDEBAR_NAVIGATION_KEYS,
+  arrangePluginNavPanels,
   getPluginNavPanelKey,
   havePluginNavPanelOrdersDiverged,
+  hidePluginNavPanel,
   reorderPluginNavPanels,
-  togglePluginNavPanelVisibility,
+  seedLeadingNavPanelKeys,
+  showPluginNavPanel,
 } from "./pluginNavSidebarOrder";
 
-export const PLUGIN_NAV_VISIBLE_LIMIT = 3;
+const BUILTIN_NAV_ROW_PLUGIN_ID = "__builtin__";
 
-type PluginSidebarNavRow = {
-  kind: "plugin";
-  pluginId: string;
-  id: string;
-  title: string;
-  chrome: PluginNavPanelChrome;
-  panel: PluginNavPanelSlot | null;
-};
+const TOOLS_NAV_ROW_KEY = getPluginNavPanelKey({
+  pluginId: BUILTIN_NAV_ROW_PLUGIN_ID,
+  id: "tools",
+});
 
-export interface BuiltInSidebarNavEntry {
-  kind: "built-in";
-  pluginId: "__bb__";
-  id: string;
-  title: string;
-  icon: ReactNode;
-  content: ReactNode;
-  disabled?: boolean;
-  onActivate: () => void;
-}
-
-type SidebarNavRow = PluginSidebarNavRow | BuiltInSidebarNavEntry;
-
-function isPluginSidebarNavRow(
-  row: SidebarNavRow,
-): row is PluginSidebarNavRow {
-  return row.kind === "plugin";
-}
-
-export function getTraditionalPluginNavPanelEntries(
-  entries: readonly PluginNavPanelChromeEntry[],
-): PluginNavPanelChromeEntry[] {
-  return entries.filter(
-    ({ chrome }) => chrome.pluginId !== AUTOMATIONS_PLUGIN_ID,
-  );
-}
-
-export function PluginNavSidebarItems(props: {
-  builtInEntries?: readonly BuiltInSidebarNavEntry[];
-  compactCustomizeMode?: boolean;
-  entries?: readonly PluginNavPanelChromeEntry[];
-  leadingOrderKeys?: readonly string[];
-  onCompactCustomizeModeChange?: (isCustomizing: boolean) => void;
+type SidebarNavRow =
+  | {
+      kind: "tools";
+      pluginId: string;
+      id: string;
+      title: string;
+      routePath: string;
+    }
+  | {
+      kind: "plugin";
+      pluginId: string;
+      id: string;
+      title: string;
+      chrome: PluginNavPanelChrome;
+      panel: PluginNavPanelSlot | null;
+    };
+
+export function PluginNavSidebarItems({
+  toolsRoutePath,
+  ...props
+}: {
   onNavigate?: () => void;
   splitEnabled?: boolean;
+  toolsRoutePath?: string;
 }) {
-  const discoveredEntries = usePluginNavPanelChrome();
-  const entries = props.entries ?? discoveredEntries;
-  const rows = useMemo<SidebarNavRow[]>(
-    () => [
-      ...(props.builtInEntries ?? []),
-      ...entries.map(({ chrome, panel }) => ({
-        kind: "plugin" as const,
-        pluginId: chrome.pluginId,
-        id: chrome.id,
-        title: chrome.title,
-        chrome,
-        panel,
-      })),
-    ],
-    [entries, props.builtInEntries],
-  );
-  const leadingOrderKeys = useMemo(
-    () =>
-      props.leadingOrderKeys ??
-      (props.builtInEntries ?? []).map(getPluginNavPanelKey),
-    [props.builtInEntries, props.leadingOrderKeys],
-  );
+  const navPanels = usePluginNavPanelChrome();
+  const rows = useMemo<SidebarNavRow[]>(() => {
+    const pluginRows = navPanels.map<SidebarNavRow>(({ chrome, panel }) => ({
+      kind: "plugin",
+      pluginId: chrome.pluginId,
+      id: chrome.id,
+      title: chrome.title,
+      chrome,
+      panel,
+    }));
+    if (toolsRoutePath === undefined) return pluginRows;
+    return [
+      {
+        kind: "tools",
+        pluginId: BUILTIN_NAV_ROW_PLUGIN_ID,
+        id: "tools",
+        title: "Extensions",
+        routePath: toolsRoutePath,
+      },
+      ...pluginRows,
+    ];
+  }, [navPanels, toolsRoutePath]);
   if (rows.length === 0) return null;
-  return (
-    <PluginNavSidebarItemList
-      rows={rows}
-      leadingOrderKeys={leadingOrderKeys}
-      splitEnabled={props.splitEnabled ?? false}
-      {...(props.compactCustomizeMode === undefined
-        ? {}
-        : { compactCustomizeMode: props.compactCustomizeMode })}
-      {...(props.onCompactCustomizeModeChange
-        ? {
-            onCompactCustomizeModeChange:
-              props.onCompactCustomizeModeChange,
-          }
-        : {})}
-      {...(props.onNavigate ? { onNavigate: props.onNavigate } : {})}
-    />
-  );
+  return <PluginNavSidebarItemList {...props} rows={rows} />;
 }
 
 function PluginNavSidebarItemList({
-  compactCustomizeMode,
-  leadingOrderKeys,
-  onCompactCustomizeModeChange,
   onNavigate,
   rows,
   splitEnabled = false,
 }: {
-  compactCustomizeMode?: boolean;
-  leadingOrderKeys: readonly string[];
-  onCompactCustomizeModeChange?: (isCustomizing: boolean) => void;
   onNavigate?: () => void;
   rows: readonly SidebarNavRow[];
   splitEnabled?: boolean;
 }) {
   const location = useLocation();
-  const navigate = useNavigate();
-  const isCompactViewport = useIsCompactViewport();
   const [storedOrder, setStoredOrder] = useAtom(pluginNavPanelOrderAtom);
-  const [storedVisibleKeys, setStoredVisibleKeys] = useAtom(
-    pluginNavVisiblePanelKeysAtom,
-  );
-  const [uncontrolledCustomizeOpen, setUncontrolledCustomizeOpen] =
-    useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const restoreCustomizeTriggerFocusRef = useRef(false);
-  const isCustomizeOpen =
-    isCompactViewport && compactCustomizeMode !== undefined
-      ? compactCustomizeMode
-      : uncontrolledCustomizeOpen;
-  const setIsCustomizeOpen = useCallback(
-    (isOpen: boolean) => {
-      if (!isCompactViewport || compactCustomizeMode === undefined) {
-        setUncontrolledCustomizeOpen(isOpen);
-      }
-      if (isCompactViewport) {
-        onCompactCustomizeModeChange?.(isOpen);
-      }
-    },
-    [
-      compactCustomizeMode,
-      isCompactViewport,
-      onCompactCustomizeModeChange,
-    ],
-  );
-  const builtInKeys = useMemo(
-    () =>
-      rows
-        .filter((row) => row.kind === "built-in")
-        .map(getPluginNavPanelKey),
-    [rows],
-  );
-  const newLeadingKeys = useMemo(
-    () => leadingOrderKeys.filter((key) => !storedOrder.includes(key)),
-    [leadingOrderKeys, storedOrder],
-  );
-  const {
-    ordered,
-    normalizedOrder,
-    normalizedVisibleKeys,
-    visible,
-    visibleKeys,
-  } = useMemo(
-    () =>
-      arrangePluginNavPanelPreferences({
-        panels: rows,
-        storedOrder:
-          newLeadingKeys.length === 0
-            ? storedOrder
-            : [...newLeadingKeys, ...storedOrder],
-        storedVisibleKeys:
-          storedVisibleKeys === null || newLeadingKeys.length === 0
-            ? storedVisibleKeys
-            : [...newLeadingKeys, ...storedVisibleKeys],
-        defaultVisibleCount:
-          builtInKeys.length + PLUGIN_NAV_VISIBLE_LIMIT,
-      }),
-    [
-      builtInKeys,
-      newLeadingKeys,
-      rows,
-      storedOrder,
-      storedVisibleKeys,
-    ],
-  );
+  const [hiddenKeys, setHiddenKeys] = useAtom(hiddenPluginNavPanelsAtom);
+  const [isOverflowOpen, setIsOverflowOpen] = useState(false);
+
+  const { visible, hidden, normalizedOrder } = useMemo(() => {
+    const leadingKeys = rows.some((row) => row.kind === "tools")
+      ? [TOOLS_NAV_ROW_KEY]
+      : [];
+    return arrangePluginNavPanels({
+      panels: rows,
+      storedOrder: seedLeadingNavPanelKeys(storedOrder, leadingKeys),
+      hiddenKeys,
+    });
+  }, [hiddenKeys, rows, storedOrder]);
 
   useEffect(() => {
     if (!havePluginNavPanelOrdersDiverged(storedOrder, normalizedOrder)) return;
     setStoredOrder(normalizedOrder);
   }, [normalizedOrder, setStoredOrder, storedOrder]);
 
-  useEffect(() => {
-    if (
-      storedVisibleKeys === null ||
-      normalizedVisibleKeys === null ||
-      !havePluginNavPanelOrdersDiverged(
-        storedVisibleKeys,
-        normalizedVisibleKeys,
-      )
-    ) {
-      return;
-    }
-    setStoredVisibleKeys(normalizedVisibleKeys);
-  }, [normalizedVisibleKeys, setStoredVisibleKeys, storedVisibleKeys]);
-
-  const orderedKeys = useMemo(
-    () => ordered.map(getPluginNavPanelKey),
-    [ordered],
-  );
-
-  const setPanelVisible = useCallback(
-    (key: string, isVisible: boolean) => {
-      setStoredVisibleKeys(
-        togglePluginNavPanelVisibility(
-          normalizedVisibleKeys ?? visibleKeys,
-          key,
-          isVisible,
-        ),
-      );
-    },
-    [normalizedVisibleKeys, setStoredVisibleKeys, visibleKeys],
+  const visibleKeys = useMemo(
+    () => visible.map(getPluginNavPanelKey),
+    [visible],
   );
 
   const handleDragEnd = useCallback(
@@ -308,14 +171,11 @@ function PluginNavSidebarItemList({
       ) {
         return;
       }
-      const activeGroupKeys = visibleKeys;
-      if (!activeGroupKeys.includes(event.active.id)) return;
-      if (!activeGroupKeys.includes(event.over.id)) return;
       const nextOrder = reorderPluginNavPanels({
         activeKey: event.active.id,
         overKey: event.over.id,
         order: normalizedOrder,
-        visibleKeys: activeGroupKeys,
+        visibleKeys,
       });
       if (nextOrder) setStoredOrder(nextOrder);
     },
@@ -325,476 +185,104 @@ function PluginNavSidebarItemList({
     onDragEnd: handleDragEnd,
   });
 
-  const handleCustomizeDragEnd = useCallback(
-    (activeKey: string, overKey: string) => {
-      const nextOrder = reorderPluginNavPanels({
-        activeKey,
-        overKey,
-        order: normalizedOrder,
-        visibleKeys: orderedKeys,
-      });
-      if (nextOrder) setStoredOrder(nextOrder);
+  const handleHide = useCallback(
+    (key: string) => {
+      setHiddenKeys((current) => hidePluginNavPanel(current, key));
+    },
+    [setHiddenKeys],
+  );
+  const handleShow = useCallback(
+    (key: string) => {
+      setHiddenKeys((current) => showPluginNavPanel(current, key));
     },
-    [normalizedOrder, orderedKeys, setStoredOrder],
+    [setHiddenKeys],
   );
 
-  const reorderDisabled = ordered.length < 2;
+  const reorderDisabled = visible.length < 2;
   const rowProps = {
     onNavigate,
     pathname: location.pathname,
     splitEnabled,
-    onHide: (key: string) => setPanelVisible(key, false),
   };
 
-  const handleActivate = useCallback(
-    (row: SidebarNavRow) => {
-      if (!isPluginSidebarNavRow(row)) {
-        row.onActivate();
-        return;
-      }
-      onNavigate?.();
-      void navigate(
-        getPluginPanelRoutePath({
-          pluginId: row.chrome.pluginId,
-          path: row.chrome.path,
-        }),
-      );
-    },
-    [navigate, onNavigate],
-  );
-
-  useEffect(() => {
-    if (isCustomizeOpen || !restoreCustomizeTriggerFocusRef.current) return;
-    restoreCustomizeTriggerFocusRef.current = false;
-    containerRef.current
-      ?.querySelector<HTMLElement>(
-        '[data-testid="sidebar-navigation-customize-trigger"]',
-      )
-      ?.focus();
-  }, [isCustomizeOpen]);
-
-  if (isCompactViewport && isCustomizeOpen) {
-    return (
-      <div
-        ref={containerRef}
-        className="flex min-h-0 flex-1 flex-col px-2 py-2 group-data-[collapsible=icon]:hidden"
-        data-testid="plugin-nav-sidebar-items"
-        data-sidebar-navigation-customize-mode="true"
-      >
-        <SidebarNavigationInlineCustomizeMode
-          rows={ordered}
-          visibleKeys={visibleKeys}
-          onActivate={handleActivate}
-          onBack={() => {
-            restoreCustomizeTriggerFocusRef.current = true;
-            setIsCustomizeOpen(false);
-          }}
-          onExit={() => setIsCustomizeOpen(false)}
-          onDragEnd={handleCustomizeDragEnd}
-          onVisibleChange={setPanelVisible}
-        />
-      </div>
-    );
-  }
-
   return (
     <div
-      ref={containerRef}
-      className="shrink-0 space-y-0.5 px-2 py-2 group-data-[collapsible=icon]:hidden"
+      className="-mt-1.5 shrink-0 space-y-0.5 px-2 pb-2 group-data-[collapsible=icon]:hidden"
       data-testid="plugin-nav-sidebar-items"
       onClickCapture={onClickCapture}
     >
-      {!visibleKeys.includes(BUILT_IN_SIDEBAR_NAVIGATION_KEYS.newThread) ? (
-        <div className="flex min-w-0 items-center justify-end">
-          <SidebarNavigationCustomizeMenu
-            isOpen={isCustomizeOpen}
-            rows={ordered}
-            visibleKeys={visibleKeys}
-            onActivate={handleActivate}
-            onDragEnd={handleCustomizeDragEnd}
-            onOpenChange={setIsCustomizeOpen}
-            onVisibleChange={setPanelVisible}
-          />
-        </div>
-      ) : null}
       <DndContext {...dndContextProps}>
         <SortableContext
           items={visibleKeys}
           strategy={verticalListSortingStrategy}
         >
-          {visible.map((row) =>
-            isPluginSidebarNavRow(row) ? (
-              <SortableSidebarNavRow
-                key={getPluginNavPanelKey(row)}
-                row={row}
-                reorderDisabled={reorderDisabled}
-                {...rowProps}
-              />
-            ) : (
-              <div
-                key={getPluginNavPanelKey(row)}
-                data-sidebar-navigation-item={getPluginNavPanelKey(row)}
-              >
-                {getPluginNavPanelKey(row) ===
-                BUILT_IN_SIDEBAR_NAVIGATION_KEYS.newThread ? (
-                  <div
-                    className="flex min-w-0 items-center gap-0.5"
-                    data-sidebar-navigation-primary-row
-                  >
-                    <div className="min-w-0 flex-1">{row.content}</div>
-                    <SidebarNavigationCustomizeMenu
-                      isOpen={isCustomizeOpen}
-                      rows={ordered}
-                      visibleKeys={visibleKeys}
-                      onActivate={handleActivate}
-                      onDragEnd={handleCustomizeDragEnd}
-                      onOpenChange={setIsCustomizeOpen}
-                      onVisibleChange={setPanelVisible}
-                    />
-                  </div>
-                ) : (
-                  row.content
-                )}
-              </div>
-            ),
-          )}
+          {visible.map((row) => (
+            <SortableSidebarNavRow
+              key={getPluginNavPanelKey(row)}
+              row={row}
+              reorderDisabled={reorderDisabled}
+              onHide={handleHide}
+              {...rowProps}
+            />
+          ))}
         </SortableContext>
       </DndContext>
+      {hidden.length > 0 ? (
+        <>
+          <PluginNavSidebarOverflowToggle
+            count={hidden.length}
+            isOpen={isOverflowOpen}
+            onToggle={() => setIsOverflowOpen((open) => !open)}
+          />
+          {isOverflowOpen
+            ? hidden.map((row) => (
+                <SidebarNavRowItem
+                  key={getPluginNavPanelKey(row)}
+                  row={row}
+                  isHidden
+                  onShow={handleShow}
+                  {...rowProps}
+                />
+              ))
+            : null}
+        </>
+      ) : null}
     </div>
   );
 }
 
-function SidebarNavigationInlineCustomizeMode({
-  onActivate,
-  onBack,
-  onDragEnd,
-  onExit,
-  onVisibleChange,
-  rows,
-  visibleKeys,
-}: {
-  onActivate: (row: SidebarNavRow) => void;
-  onBack: () => void;
-  onDragEnd: (activeKey: string, overKey: string) => void;
-  onExit: () => void;
-  onVisibleChange: (key: string, visible: boolean) => void;
-  rows: readonly SidebarNavRow[];
-  visibleKeys: readonly string[];
-}) {
-  const backButtonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    backButtonRef.current?.focus();
-  }, []);
-
-  return (
-    <div
-      className="flex min-h-0 flex-1 flex-col"
-      data-testid="sidebar-navigation-customize-inline"
-    >
-      <div className="flex shrink-0 items-center gap-1">
-        <Button
-          ref={backButtonRef}
-          type="button"
-          variant="ghost"
-          size="icon"
-          aria-label="Back to sidebar"
-          className={cn(
-            COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
-            "shrink-0 text-muted-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-2",
-          )}
-          onClick={onBack}
-        >
-          <Icon name="ChevronLeft" aria-hidden="true" />
-        </Button>
-        <div className={cn("min-w-0 flex-1 px-1", CHROME_SECTION_LABEL_CLASS)}>
-          Customize sidebar
-        </div>
-      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto pt-1">
-        <SidebarNavigationCustomizeList
-          rows={rows}
-          visibleKeys={visibleKeys}
-          surface="sidebar"
-          onActivate={(row) => {
-            onActivate(row);
-            onExit();
-          }}
-          onDragEnd={onDragEnd}
-          onVisibleChange={onVisibleChange}
-        />
-      </div>
-    </div>
-  );
-}
-
-function SidebarNavigationCustomizeMenu({
+function PluginNavSidebarOverflowToggle({
+  count,
   isOpen,
-  onActivate,
-  onDragEnd,
-  onOpenChange,
-  onVisibleChange,
-  rows,
-  visibleKeys,
+  onToggle,
 }: {
+  count: number;
   isOpen: boolean;
-  onActivate: (row: SidebarNavRow) => void;
-  onDragEnd: (activeKey: string, overKey: string) => void;
-  onOpenChange: (isOpen: boolean) => void;
-  onVisibleChange: (key: string, visible: boolean) => void;
-  rows: readonly SidebarNavRow[];
-  visibleKeys: readonly string[];
+  onToggle: () => void;
 }) {
-  const isCompactViewport = useIsCompactViewport();
-  const contentRef = useRef<HTMLDivElement>(null);
-  const trigger = (
+  return (
     <Button
       type="button"
+      size="sm"
       variant="ghost"
-      size="icon"
-      aria-label="Customize sidebar navigation"
-      aria-expanded={isCompactViewport ? isOpen : undefined}
+      aria-expanded={isOpen}
       className={cn(
-        COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
-        "shrink-0 text-subtle-foreground opacity-60 ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground hover:opacity-100 focus-visible:ring-2 focus-visible:opacity-100 max-md:pointer-coarse:[&_svg]:size-5 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-foreground data-[state=open]:opacity-100",
-      )}
-      data-testid="sidebar-navigation-customize-trigger"
-      {...(isCompactViewport
-        ? { onClick: () => onOpenChange(true) }
-        : {})}
-    >
-      <HugeiconsIcon icon={FilterHorizontalIcon} aria-hidden="true" />
-    </Button>
-  );
-
-  if (isCompactViewport) {
-    return <span className="inline-flex shrink-0">{trigger}</span>;
-  }
-
-  return (
-    <Popover open={isOpen} onOpenChange={onOpenChange}>
-      <span className="inline-flex shrink-0">
-        <PopoverTrigger asChild>{trigger}</PopoverTrigger>
-      </span>
-      <PopoverContent
-        ref={contentRef}
-        side="right"
-        align="start"
-        sideOffset={8}
-        className="w-52 p-2"
-        mobileTitle="Customize sidebar"
-        onOpenAutoFocus={(event) => {
-          event.preventDefault();
-          contentRef.current
-            ?.querySelector<HTMLElement>(
-              "[data-sidebar-navigation-customize-launch]",
-            )
-            ?.focus();
-        }}
-      >
-        <div className={cn("px-2 py-1", CHROME_SECTION_LABEL_CLASS)}>
-          Customize sidebar
-        </div>
-        <SidebarNavigationCustomizeList
-          rows={rows}
-          visibleKeys={visibleKeys}
-          onActivate={(row) => {
-            onActivate(row);
-            onOpenChange(false);
-          }}
-          onDragEnd={onDragEnd}
-          onVisibleChange={onVisibleChange}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function SidebarNavigationCustomizeList({
-  onActivate,
-  onDragEnd,
-  onVisibleChange,
-  rows,
-  surface = "popover",
-  visibleKeys,
-}: {
-  onActivate: (row: SidebarNavRow) => void;
-  onDragEnd: (activeKey: string, overKey: string) => void;
-  onVisibleChange: (key: string, visible: boolean) => void;
-  rows: readonly SidebarNavRow[];
-  surface?: "popover" | "sidebar";
-  visibleKeys: readonly string[];
-}) {
-  const orderedKeys = useMemo(
-    () => rows.map(getPluginNavPanelKey),
-    [rows],
-  );
-  const visibleKeySet = useMemo(() => new Set(visibleKeys), [visibleKeys]);
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      if (
-        typeof event.active.id !== "string" ||
-        typeof event.over?.id !== "string"
-      ) {
-        return;
-      }
-      onDragEnd(event.active.id, event.over.id);
-    },
-    [onDragEnd],
-  );
-  const { dndContextProps, onClickCapture } = useSidebarReorderDnd({
-    onDragEnd: handleDragEnd,
-  });
-
-  return (
-    <div
-      role="list"
-      aria-label="Sidebar navigation"
-      className="space-y-0.5"
-      onClickCapture={onClickCapture}
-    >
-      <DndContext {...dndContextProps}>
-        <SortableContext
-          items={orderedKeys}
-          strategy={verticalListSortingStrategy}
-        >
-          {rows.map((row) => {
-            const key = getPluginNavPanelKey(row);
-            return (
-              <SortableSidebarNavigationCustomizeItem
-                key={key}
-                row={row}
-                checked={visibleKeySet.has(key)}
-                reorderDisabled={rows.length < 2}
-                surface={surface}
-                onActivate={() => onActivate(row)}
-                onCheckedChange={(checked) =>
-                  onVisibleChange(key, checked)
-                }
-              />
-            );
-          })}
-        </SortableContext>
-      </DndContext>
-    </div>
-  );
-}
-
-function SortableSidebarNavigationCustomizeItem({
-  checked,
-  onActivate,
-  onCheckedChange,
-  reorderDisabled,
-  row,
-  surface,
-}: {
-  checked: boolean;
-  onActivate: () => void;
-  onCheckedChange: (checked: boolean) => void;
-  reorderDisabled: boolean;
-  row: SidebarNavRow;
-  surface: "popover" | "sidebar";
-}) {
-  const panelKey = getPluginNavPanelKey(row);
-  const checkboxId = useId();
-  const { dragBindings, setNodeRef, style } = useSidebarSortable({
-    id: panelKey,
-    disabled: reorderDisabled,
-  });
-  const icon = isPluginSidebarNavRow(row) ? (
-    <PluginIcon pluginId={row.chrome.pluginId} icon={row.chrome.icon} />
-  ) : (
-    row.icon
-  );
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      role="listitem"
-      className={cn(
-        "group flex min-h-7 items-center rounded-md px-1 text-xs",
-        surface === "sidebar"
-          ? cn(
-              COARSE_POINTER_COMPACT_ROW_HEIGHT_CLASS,
-              "text-sidebar-foreground hover:bg-sidebar-accent focus-within:bg-sidebar-accent",
-            )
-          : "text-popover-foreground hover:bg-state-hover focus-within:bg-state-hover",
+        PROJECT_LIST_ACTION_BUTTON_CLASS,
+        "w-full text-subtle-foreground/75",
       )}
-      data-plugin-nav-customize-item={panelKey}
+      onClick={onToggle}
+      data-testid="plugin-nav-sidebar-overflow-toggle"
     >
-      <button
-        type="button"
-        ref={dragBindings.setActivatorNodeRef}
-        {...dragBindings.attributes}
-        {...dragBindings.listeners}
-        aria-label={`Reorder ${row.title}`}
-        className={cn(
-          "flex size-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-sm text-subtle-foreground/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
-          surface === "sidebar"
-            ? cn(
-                COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
-                "hover:text-sidebar-foreground focus-visible:text-sidebar-foreground",
-              )
-            : "hover:text-popover-foreground focus-visible:text-popover-foreground",
-        )}
-        onClick={(event) => event.stopPropagation()}
-        data-plugin-nav-customize-drag-handle={panelKey}
-      >
-        <Icon
-          name="DragDropVertical"
-          className={COARSE_POINTER_ICON_SIZE_CLASS}
-        />
-      </button>
-      <button
-        type="button"
-        disabled={!isPluginSidebarNavRow(row) && row.disabled}
+      <Icon
+        name="ChevronRight"
         className={cn(
-          "flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-sm px-1 text-left outline-none disabled:cursor-default disabled:opacity-50",
-          surface === "sidebar"
-            ? COARSE_POINTER_COMPACT_ROW_HEIGHT_CLASS
-            : "min-h-7",
+          "size-3 shrink-0 transition-transform duration-150",
+          isOpen && "rotate-90",
         )}
-        onClick={onActivate}
-        data-sidebar-navigation-customize-launch={panelKey}
-      >
-        <span className="flex size-4 shrink-0 items-center justify-center">
-          {icon}
-        </span>
-        <span className="min-w-0 flex-1 truncate">{row.title}</span>
-      </button>
-      {surface === "sidebar" ? (
-        <label
-          htmlFor={checkboxId}
-          className={cn(
-            COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
-            "flex shrink-0 cursor-pointer items-center justify-center",
-          )}
-          onClick={(event) => event.stopPropagation()}
-        >
-          <Checkbox
-            id={checkboxId}
-            checked={checked}
-            aria-label={`Show ${row.title} in sidebar`}
-            onCheckedChange={(nextChecked) =>
-              onCheckedChange(nextChecked === true)
-            }
-            data-plugin-nav-customize-checkbox={panelKey}
-          />
-        </label>
-      ) : (
-        <Checkbox
-          checked={checked}
-          aria-label={`Show ${row.title} in sidebar`}
-          onCheckedChange={(nextChecked) =>
-            onCheckedChange(nextChecked === true)
-          }
-          onClick={(event) => event.stopPropagation()}
-          data-plugin-nav-customize-checkbox={panelKey}
-          className="mx-1"
-        />
-      )}
-    </div>
+        aria-hidden="true"
+      />
+      <span className="min-w-0 truncate text-left">{`More (${count})`}</span>
+    </Button>
   );
 }
 
@@ -819,11 +307,13 @@ const SortableSidebarNavRow = function SortableSidebarNavRow({
 };
 
 interface SidebarNavRowItemProps {
-  row: PluginSidebarNavRow;
+  row: SidebarNavRow;
   pathname: string;
   onNavigate?: () => void;
   splitEnabled: boolean;
+  isHidden?: boolean;
   onHide?: (key: string) => void;
+  onShow?: (key: string) => void;
   dragBindings?: SidebarSortableDragBindings;
   rowRef?: (element: HTMLElement | null) => void;
   rowStyle?: CSSProperties;
@@ -834,7 +324,9 @@ function SidebarNavRowItem({
   splitEnabled,
   ...props
 }: SidebarNavRowItemProps) {
-  return (
+  return row.kind === "tools" ? (
+    <ToolsNavSidebarItem {...props} row={row} />
+  ) : (
     <PluginNavSidebarItem {...props} row={row} splitEnabled={splitEnabled} />
   );
 }
@@ -842,16 +334,18 @@ function SidebarNavRowItem({
 type PluginNavRowMenuSurface = "context" | "dropdown";
 
 function PluginNavRowVisibilityMenuItem({
+  isHidden,
   onSelect,
   surface,
 }: {
+  isHidden: boolean;
   onSelect: () => void;
   surface: PluginNavRowMenuSurface;
 }) {
   const content = (
     <>
-      <Icon name="EyeOff" aria-hidden="true" />
-      Hide from sidebar
+      <Icon name={isHidden ? "Eye" : "EyeOff"} aria-hidden="true" />
+      {isHidden ? "Show in sidebar" : "Hide from sidebar"}
     </>
   );
   return surface === "context" ? (
@@ -870,65 +364,27 @@ function ToolsNavSidebarItemIcon() {
   );
 }
 
-export function ExtensionsNavSidebarItem({
-  routePath,
+function ToolsNavSidebarItem({
+  row,
+  pathname: _pathname,
   onNavigate,
-}: {
-  routePath: string;
-  onNavigate?: () => void;
+  ...props
+}: Omit<SidebarNavRowItemProps, "row" | "splitEnabled"> & {
+  row: Extract<SidebarNavRow, { kind: "tools" }>;
 }) {
   const navigate = useNavigate();
   return (
-    <Button
-      type="button"
-      size="sm"
-      variant="ghost"
-      className={cn(PROJECT_LIST_ACTION_BUTTON_CLASS, "w-full")}
-      onClick={() => {
-        onNavigate?.();
-        void navigate(routePath);
-      }}
-    >
-      <ToolsNavSidebarItemIcon />
-      <span className="min-w-0 truncate text-left">Extensions</span>
-    </Button>
-  );
-}
-
-export function AutomationsNavSidebarItem({
-  chrome,
-  onNavigate,
-}: {
-  chrome: PluginNavPanelChrome;
-  onNavigate?: () => void;
-}) {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const path = getPluginPanelRoutePath({
-    pluginId: chrome.pluginId,
-    path: chrome.path,
-  });
-  const isActive =
-    location.pathname === path || location.pathname.startsWith(`${path}/`);
-  return (
-    <Button
-      type="button"
-      size="sm"
-      variant="ghost"
-      className={cn(
-        PROJECT_LIST_ACTION_BUTTON_CLASS,
-        "w-full",
-        isActive && "bg-sidebar-accent text-sidebar-foreground",
-      )}
-      aria-current={isActive ? "page" : undefined}
-      onClick={() => {
+    <SidebarNavRowChrome
+      {...props}
+      rowKey={getPluginNavPanelKey(row)}
+      title={row.title}
+      icon={<ToolsNavSidebarItemIcon />}
+      isActive={false}
+      onSelect={() => {
         onNavigate?.();
-        void navigate(path);
+        void navigate(row.routePath);
       }}
-    >
-      <PluginIcon pluginId={chrome.pluginId} icon={chrome.icon} />
-      <span className="min-w-0 truncate text-left">{chrome.title}</span>
-    </Button>
+    />
   );
 }
 
@@ -938,7 +394,9 @@ function PluginNavSidebarItem({
   onNavigate,
   splitEnabled,
   ...props
-}: SidebarNavRowItemProps) {
+}: Omit<SidebarNavRowItemProps, "row"> & {
+  row: Extract<SidebarNavRow, { kind: "plugin" }>;
+}) {
   const { chrome, panel } = row;
   const navigate = useNavigate();
   const isCompactViewport = useIsCompactViewport();
@@ -952,7 +410,6 @@ function PluginNavSidebarItem({
     panelPath: chrome.path,
     subPath: "",
   } as const;
-  const rowKey = getPluginNavPanelKey(row);
   const { onPointerDown, openInSplit } = usePaneContentSplitDrag({
     content,
     enabled: splitEnabled,
@@ -976,7 +433,7 @@ function PluginNavSidebarItem({
   return (
     <SidebarNavRowChrome
       {...props}
-      rowKey={rowKey}
+      rowKey={getPluginNavPanelKey(row)}
       title={chrome.title}
       icon={<PluginIcon pluginId={chrome.pluginId} icon={chrome.icon} />}
       isActive={pathname === path || pathname.startsWith(`${path}/`)}
@@ -1002,9 +459,11 @@ interface SidebarNavRowChromeProps {
   isActive: boolean;
   onSelect: (event: ReactMouseEvent<HTMLButtonElement>) => void;
   onPointerDown?: PointerEventHandler<HTMLElement>;
-  onHide?: (key: string) => void;
   splitMiniMap?: MiniMapSlot[] | null;
   accessory?: ReactNode;
+  isHidden?: boolean;
+  onHide?: (key: string) => void;
+  onShow?: (key: string) => void;
   dragBindings?: SidebarSortableDragBindings;
   rowRef?: (element: HTMLElement | null) => void;
   rowStyle?: CSSProperties;
@@ -1017,9 +476,11 @@ function SidebarNavRowChrome({
   isActive,
   onSelect,
   onPointerDown,
-  onHide,
   splitMiniMap = null,
   accessory,
+  isHidden = false,
+  onHide,
+  onShow,
   dragBindings,
   rowRef,
   rowStyle,
@@ -1030,7 +491,8 @@ function SidebarNavRowChrome({
   const visibilityItem = (surface: PluginNavRowMenuSurface): ReactNode => (
     <PluginNavRowVisibilityMenuItem
       surface={surface}
-      onSelect={() => onHide?.(rowKey)}
+      isHidden={isHidden}
+      onSelect={() => (isHidden ? onShow?.(rowKey) : onHide?.(rowKey))}
     />
   );
 
@@ -1041,7 +503,6 @@ function SidebarNavRowChrome({
           ref={rowRef}
           style={rowStyle}
           className={cn(SIDEBAR_HOVER_ACTIONS_ROW_CLASS, "relative")}
-          data-sidebar-navigation-item={rowKey}
         >
           <Button
             type="button"
@@ -1052,6 +513,7 @@ function SidebarNavRowChrome({
               "w-full pr-7",
               accessory && "pr-18",
               isActive && "bg-sidebar-accent text-sidebar-foreground",
+              isHidden && "text-subtle-foreground",
             )}
             aria-current={isActive ? "page" : undefined}
             ref={dragBindings?.setActivatorNodeRef}
diff --git a/apps/app/src/components/plugin/pluginNavSidebarAtoms.test.ts b/apps/app/src/components/plugin/pluginNavSidebarAtoms.test.ts
deleted file mode 100644
index e4fe1cb79f..0000000000
--- a/apps/app/src/components/plugin/pluginNavSidebarAtoms.test.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-// @vitest-environment jsdom
-
-import { createStore } from "jotai";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-afterEach(() => {
-  window.localStorage.clear();
-  vi.resetModules();
-});
-
-describe("pluginNavPanelOrderAtom migration", () => {
-  it("converts legacy hidden keys into positional overflow order", async () => {
-    window.localStorage.setItem(
-      "bb.sidebar.pluginPanelOrder",
-      JSON.stringify(["docs/main", "tasks/main", "github/main"]),
-    );
-    window.localStorage.setItem(
-      "bb.sidebar.hiddenPluginPanels",
-      JSON.stringify(["tasks/main", "docs/main"]),
-    );
-
-    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
-      await import("./pluginNavSidebarAtoms");
-    const store = createStore();
-
-    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
-      "github/main",
-      "docs/main",
-      "tasks/main",
-    ]);
-    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
-      "github/main",
-    ]);
-    expect(
-      window.localStorage.getItem("bb.sidebar.hiddenPluginPanels"),
-    ).toBeNull();
-  });
-
-  it("migrates visibility when it is read before order", async () => {
-    window.localStorage.setItem(
-      "bb.sidebar.pluginPanelOrder",
-      JSON.stringify(["docs/main", "tasks/main", "github/main"]),
-    );
-    window.localStorage.setItem(
-      "bb.sidebar.hiddenPluginPanels",
-      JSON.stringify(["tasks/main"]),
-    );
-
-    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
-      await import("./pluginNavSidebarAtoms");
-    const store = createStore();
-
-    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
-      "docs/main",
-      "github/main",
-    ]);
-    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
-      "docs/main",
-      "github/main",
-      "tasks/main",
-    ]);
-  });
-
-  it("migrates hidden Automations into the unified visibility preference", async () => {
-    window.localStorage.setItem(
-      "bb.sidebar.pluginPanelOrder",
-      JSON.stringify(["docs/main"]),
-    );
-    window.localStorage.setItem(
-      "bb.sidebar.hiddenPluginPanels",
-      JSON.stringify(["docs/main", "automations/main"]),
-    );
-
-    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
-      await import("./pluginNavSidebarAtoms");
-    const store = createStore();
-
-    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
-      "docs/main",
-      "__bb__/automations",
-    ]);
-    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([]);
-    expect(
-      window.localStorage.getItem("bb.sidebar.hiddenPluginPanels"),
-    ).toBeNull();
-  });
-
-  it("maps legacy built-in order and visibility keys to unified keys", async () => {
-    window.localStorage.setItem(
-      "bb.sidebar.pluginPanelOrder",
-      JSON.stringify(["__builtin__/tools", "automations/main", "docs/main"]),
-    );
-    window.localStorage.setItem(
-      "bb.sidebar.visiblePluginPanels",
-      JSON.stringify(["automations/main", "__builtin__/tools"]),
-    );
-
-    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
-      await import("./pluginNavSidebarAtoms");
-    const store = createStore();
-
-    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
-      "__bb__/extensions",
-      "__bb__/automations",
-      "docs/main",
-    ]);
-    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
-      "__bb__/automations",
-      "__bb__/extensions",
-    ]);
-  });
-
-  it("keeps fresh visibility unset so defaults can follow available rows", async () => {
-    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
-      await import("./pluginNavSidebarAtoms");
-    const store = createStore();
-
-    expect(store.get(pluginNavPanelOrderAtom)).toEqual([]);
-    expect(store.get(pluginNavVisiblePanelKeysAtom)).toBeNull();
-  });
-
-  it("does not overwrite an existing visibility preference during migration", async () => {
-    window.localStorage.setItem(
-      "bb.sidebar.pluginPanelOrder",
-      JSON.stringify(["docs/main", "tasks/main", "github/main"]),
-    );
-    window.localStorage.setItem(
-      "bb.sidebar.visiblePluginPanels",
-      JSON.stringify(["tasks/main"]),
-    );
-    window.localStorage.setItem(
-      "bb.sidebar.hiddenPluginPanels",
-      JSON.stringify(["docs/main"]),
-    );
-
-    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
-      await import("./pluginNavSidebarAtoms");
-    const store = createStore();
-
-    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
-      "tasks/main",
-      "github/main",
-      "docs/main",
-    ]);
-    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual(["tasks/main"]);
-  });
-
-  it("persists an explicit empty visible list", async () => {
-    const { pluginNavVisiblePanelKeysAtom } = await import(
-      "./pluginNavSidebarAtoms"
-    );
-    const store = createStore();
-
-    store.set(pluginNavVisiblePanelKeysAtom, []);
-
-    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([]);
-    expect(
-      window.localStorage.getItem("bb.sidebar.visiblePluginPanels"),
-    ).toBe("[]");
-  });
-
-  it("normalizes persisted visible keys without discarding unregistered keys", async () => {
-    window.localStorage.setItem(
-      "bb.sidebar.visiblePluginPanels",
-      JSON.stringify(["docs/main", "future/main", "docs/main"]),
-    );
-
-    const { pluginNavVisiblePanelKeysAtom } = await import(
-      "./pluginNavSidebarAtoms"
-    );
-    const store = createStore();
-
-    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
-      "docs/main",
-      "future/main",
-    ]);
-  });
-});
diff --git a/apps/app/src/components/plugin/pluginNavSidebarAtoms.ts b/apps/app/src/components/plugin/pluginNavSidebarAtoms.ts
index 63657d2167..036f1f9a41 100644
--- a/apps/app/src/components/plugin/pluginNavSidebarAtoms.ts
+++ b/apps/app/src/components/plugin/pluginNavSidebarAtoms.ts
@@ -1,148 +1,19 @@
 import { atomWithStorage } from "jotai/utils";
-import {
-  createJsonLocalStorage,
-  type SyncStorage,
-} from "@/lib/browser-storage";
-import { AUTOMATIONS_PLUGIN_ID } from "@/lib/route-paths";
-import {
-  BUILT_IN_SIDEBAR_NAVIGATION_KEYS,
-  migrateLegacyHiddenPluginNavPanelOrder,
-} from "./pluginNavSidebarOrder";
+import { createJsonLocalStorage } from "@/lib/browser-storage";
 
 const PLUGIN_NAV_PANEL_ORDER_STORAGE_KEY = "bb.sidebar.pluginPanelOrder";
-const VISIBLE_PLUGIN_NAV_PANELS_STORAGE_KEY =
-  "bb.sidebar.visiblePluginPanels";
 const HIDDEN_PLUGIN_NAV_PANELS_STORAGE_KEY = "bb.sidebar.hiddenPluginPanels";
-const LEGACY_EXTENSIONS_NAV_PANEL_KEY = "__builtin__/tools";
-
-function toSidebarNavigationKey(key: string): string {
-  if (key === LEGACY_EXTENSIONS_NAV_PANEL_KEY) {
-    return BUILT_IN_SIDEBAR_NAVIGATION_KEYS.extensions;
-  }
-  if (key.startsWith(`${AUTOMATIONS_PLUGIN_ID}/`)) {
-    return BUILT_IN_SIDEBAR_NAVIGATION_KEYS.automations;
-  }
-  return key;
-}
-
-function normalizeStringArray(value: unknown): string[] {
-  if (!Array.isArray(value)) return [];
-  return [
-    ...new Set(
-      value.filter((item): item is string => typeof item === "string"),
-    ),
-  ];
-}
-
-function normalizeSidebarNavigationKeys(value: unknown): string[] {
-  return [...new Set(normalizeStringArray(value).map(toSidebarNavigationKey))];
-}
-
-function normalizeVisiblePanelKeys(value: unknown): string[] | null {
-  return Array.isArray(value) ? normalizeSidebarNavigationKeys(value) : null;
-}
-
-function migrateLegacyPluginNavPreferences(
-  storage: SyncStorage<unknown>,
-  order: readonly string[],
-): string[] {
-  const normalizedOrder = normalizeSidebarNavigationKeys(order);
-  const legacyHiddenValue = storage.getItem(
-    HIDDEN_PLUGIN_NAV_PANELS_STORAGE_KEY,
-    null,
-  );
-  const legacyHidden = normalizeSidebarNavigationKeys(
-    legacyHiddenValue,
-  );
-  const migrated = migrateLegacyHiddenPluginNavPanelOrder(
-    normalizedOrder,
-    legacyHidden,
-  );
-  const storedVisibleKeys = normalizeVisiblePanelKeys(
-    storage.getItem(VISIBLE_PLUGIN_NAV_PANELS_STORAGE_KEY, null),
-  );
-  if (storedVisibleKeys === null && Array.isArray(legacyHiddenValue)) {
-    const hidden = new Set(legacyHidden);
-    storage.setItem(
-      VISIBLE_PLUGIN_NAV_PANELS_STORAGE_KEY,
-      migrated.filter((key) => !hidden.has(key)),
-    );
-  }
-  storage.setItem(PLUGIN_NAV_PANEL_ORDER_STORAGE_KEY, migrated);
-  storage.removeItem(HIDDEN_PLUGIN_NAV_PANELS_STORAGE_KEY);
-  return migrated;
-}
-
-function createPluginNavPanelOrderStorage(): SyncStorage<string[]> {
-  const storage = createJsonLocalStorage<unknown>();
-  return {
-    getItem(key, initialValue) {
-      const order = normalizeSidebarNavigationKeys(
-        storage.getItem(key, initialValue),
-      );
-      return migrateLegacyPluginNavPreferences(storage, order);
-    },
-    setItem(key, value) {
-      storage.setItem(key, normalizeSidebarNavigationKeys(value));
-    },
-    removeItem(key) {
-      storage.removeItem(key);
-    },
-    subscribe: (key, callback, initialValue) =>
-      storage.subscribe?.(
-        key,
-        (value) => callback(normalizeSidebarNavigationKeys(value)),
-        initialValue,
-      ),
-  };
-}
-
-function createPluginNavVisiblePanelKeysStorage(): SyncStorage<
-  string[] | null
-> {
-  const storage = createJsonLocalStorage<unknown>();
-  return {
-    getItem(key, initialValue) {
-      const storedVisibleKeys = normalizeVisiblePanelKeys(
-        storage.getItem(key, initialValue),
-      );
-      if (storedVisibleKeys !== null) return storedVisibleKeys;
-
-      const order = normalizeSidebarNavigationKeys(
-        storage.getItem(PLUGIN_NAV_PANEL_ORDER_STORAGE_KEY, []),
-      );
-      migrateLegacyPluginNavPreferences(storage, order);
-      return normalizeVisiblePanelKeys(storage.getItem(key, initialValue));
-    },
-    setItem(key, value) {
-      if (value === null) {
-        storage.removeItem(key);
-        return;
-      }
-      storage.setItem(key, normalizeSidebarNavigationKeys(value));
-    },
-    removeItem(key) {
-      storage.removeItem(key);
-    },
-    subscribe: (key, callback, initialValue) =>
-      storage.subscribe?.(
-        key,
-        (value) => callback(normalizeVisiblePanelKeys(value)),
-        initialValue,
-      ),
-  };
-}
 
 export const pluginNavPanelOrderAtom = atomWithStorage<string[]>(
   PLUGIN_NAV_PANEL_ORDER_STORAGE_KEY,
   [],
-  createPluginNavPanelOrderStorage(),
+  createJsonLocalStorage<string[]>(),
   { getOnInit: true },
 );
 
-export const pluginNavVisiblePanelKeysAtom = atomWithStorage<string[] | null>(
-  VISIBLE_PLUGIN_NAV_PANELS_STORAGE_KEY,
-  null,
-  createPluginNavVisiblePanelKeysStorage(),
+export const hiddenPluginNavPanelsAtom = atomWithStorage<string[]>(
+  HIDDEN_PLUGIN_NAV_PANELS_STORAGE_KEY,
+  [],
+  createJsonLocalStorage<string[]>(),
   { getOnInit: true },
 );
diff --git a/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts b/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts
index f3927f2174..af433ed960 100644
--- a/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts
+++ b/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts
@@ -1,11 +1,9 @@
 import { describe, expect, it } from "vitest";
 import {
-  arrangePluginNavPanelPreferences,
   arrangePluginNavPanels,
   getPluginNavPanelKey,
-  migrateLegacyHiddenPluginNavPanelOrder,
   reorderPluginNavPanels,
-  togglePluginNavPanelVisibility,
+  seedLeadingNavPanelKeys,
 } from "./pluginNavSidebarOrder";
 
 function panel(pluginId: string, id: string) {
@@ -18,12 +16,13 @@ const tasks = panel("tasks", "board");
 
 describe("arrangePluginNavPanels", () => {
   it("falls back to registry order before the user has reordered anything", () => {
-    const { ordered, normalizedOrder } = arrangePluginNavPanels({
+    const { visible, normalizedOrder } = arrangePluginNavPanels({
       panels: [github, docs, tasks],
       storedOrder: [],
+      hiddenKeys: [],
     });
 
-    expect(ordered.map(getPluginNavPanelKey)).toEqual([
+    expect(visible.map(getPluginNavPanelKey)).toEqual([
       "github/pulls",
       "docs/vault",
       "tasks/board",
@@ -35,26 +34,28 @@ describe("arrangePluginNavPanels", () => {
     ]);
   });
 
-  it("appends newly installed panels last", () => {
-    const { ordered } = arrangePluginNavPanels({
+  it("appends newly installed panels last instead of at the top of a customized list", () => {
+    const { visible } = arrangePluginNavPanels({
       panels: [github, docs, tasks],
       storedOrder: ["tasks/board", "github/pulls"],
+      hiddenKeys: [],
     });
 
-    expect(ordered.map(getPluginNavPanelKey)).toEqual([
+    expect(visible.map(getPluginNavPanelKey)).toEqual([
       "tasks/board",
       "github/pulls",
       "docs/vault",
     ]);
   });
 
-  it("keeps unregistered keys in the normalized order", () => {
-    const { ordered, normalizedOrder } = arrangePluginNavPanels({
+  it("renders no row for an unregistered key but keeps its slot in the order", () => {
+    const { visible, normalizedOrder } = arrangePluginNavPanels({
       panels: [github, docs],
       storedOrder: ["strudel/repl", "docs/vault", "github/pulls"],
+      hiddenKeys: [],
     });
 
-    expect(ordered.map(getPluginNavPanelKey)).toEqual([
+    expect(visible.map(getPluginNavPanelKey)).toEqual([
       "docs/vault",
       "github/pulls",
     ]);
@@ -64,157 +65,70 @@ describe("arrangePluginNavPanels", () => {
       "github/pulls",
     ]);
   });
-});
 
-describe("arrangePluginNavPanelPreferences", () => {
-  it("shows the first three ordered panels by default", () => {
-    const extra = panel("calendar", "agenda");
-    const result = arrangePluginNavPanelPreferences({
-      panels: [github, docs, tasks, extra],
-      storedOrder: ["tasks/board", "github/pulls"],
-      storedVisibleKeys: null,
-      defaultVisibleCount: 3,
+  it("returns a late-registering panel to its stored slot", () => {
+    const { visible } = arrangePluginNavPanels({
+      panels: [github, docs, tasks],
+      storedOrder: ["tasks/board", "docs/vault", "github/pulls"],
+      hiddenKeys: [],
     });
 
-    expect(result.visible.map(getPluginNavPanelKey)).toEqual([
+    expect(visible.map(getPluginNavPanelKey)).toEqual([
       "tasks/board",
-      "github/pulls",
       "docs/vault",
-    ]);
-    expect(result.overflow.map(getPluginNavPanelKey)).toEqual([
-      "calendar/agenda",
-    ]);
-    expect(result.visibleKeys).toEqual([
-      "tasks/board",
       "github/pulls",
-      "docs/vault",
     ]);
-    expect(result.normalizedVisibleKeys).toBeNull();
   });
 
-  it("keeps an explicit empty visible list meaningful", () => {
-    const result = arrangePluginNavPanelPreferences({
+  it("splits hidden panels out while both lists keep the user's order", () => {
+    const { visible, hidden } = arrangePluginNavPanels({
       panels: [github, docs, tasks],
-      storedOrder: [],
-      storedVisibleKeys: [],
-      defaultVisibleCount: 3,
+      storedOrder: ["tasks/board", "docs/vault", "github/pulls"],
+      hiddenKeys: ["docs/vault", "tasks/board"],
     });
 
-    expect(result.visible).toEqual([]);
-    expect(result.overflow.map(getPluginNavPanelKey)).toEqual([
-      "github/pulls",
-      "docs/vault",
+    expect(visible.map(getPluginNavPanelKey)).toEqual(["github/pulls"]);
+    expect(hidden.map(getPluginNavPanelKey)).toEqual([
       "tasks/board",
-    ]);
-    expect(result.normalizedVisibleKeys).toEqual([]);
-  });
-
-  it("preserves visibility for a temporarily unregistered panel", () => {
-    const result = arrangePluginNavPanelPreferences({
-      panels: [github, docs, tasks],
-      storedOrder: ["future/main", "docs/vault", "github/pulls"],
-      storedVisibleKeys: ["future/main", "github/pulls", "future/main"],
-      defaultVisibleCount: 3,
-    });
-
-    expect(result.visible.map(getPluginNavPanelKey)).toEqual(["github/pulls"]);
-    expect(result.overflow.map(getPluginNavPanelKey)).toEqual([
       "docs/vault",
-      "tasks/board",
-    ]);
-    expect(result.normalizedVisibleKeys).toEqual([
-      "future/main",
-      "github/pulls",
     ]);
   });
 
-  it("places a newly installed unchecked panel in overflow", () => {
-    const result = arrangePluginNavPanelPreferences({
-      panels: [github, docs, tasks],
-      storedOrder: ["github/pulls", "docs/vault"],
-      storedVisibleKeys: ["github/pulls", "docs/vault"],
-      defaultVisibleCount: 3,
+  it("ignores duplicate stored keys so a corrupted list can't render a panel twice", () => {
+    const { visible } = arrangePluginNavPanels({
+      panels: [github, docs],
+      storedOrder: ["github/pulls", "github/pulls", "docs/vault"],
+      hiddenKeys: [],
     });
 
-    expect(result.visible.map(getPluginNavPanelKey)).toEqual([
-      "github/pulls",
-      "docs/vault",
-    ]);
-    expect(result.overflow.map(getPluginNavPanelKey)).toEqual(["tasks/board"]);
-    expect(result.normalizedOrder).toEqual([
+    expect(visible.map(getPluginNavPanelKey)).toEqual([
       "github/pulls",
       "docs/vault",
-      "tasks/board",
-    ]);
-  });
-
-  it("uses the master order for both visible and overflow panels", () => {
-    const result = arrangePluginNavPanelPreferences({
-      panels: [github, docs, tasks],
-      storedOrder: ["tasks/board", "github/pulls", "docs/vault"],
-      storedVisibleKeys: ["docs/vault", "tasks/board"],
-      defaultVisibleCount: 3,
-    });
-
-    expect(result.visible.map(getPluginNavPanelKey)).toEqual([
-      "tasks/board",
-      "docs/vault",
-    ]);
-    expect(result.overflow.map(getPluginNavPanelKey)).toEqual([
-      "github/pulls",
     ]);
   });
 });
 
-describe("legacy hidden-panel migration", () => {
-  it("moves hidden keys behind visible keys while preserving both orders", () => {
-    expect(
-      migrateLegacyHiddenPluginNavPanelOrder(
-        ["tasks/board", "docs/vault", "github/pulls", "docs/vault"],
-        ["tasks/board", "docs/vault"],
-      ),
-    ).toEqual(["github/pulls", "tasks/board", "docs/vault"]);
-  });
-
-  it("retains a hidden key missing from the stored order", () => {
+describe("reorderPluginNavPanels", () => {
+  it("moves a visible row to the target slot", () => {
     expect(
-      migrateLegacyHiddenPluginNavPanelOrder(
-        ["github/pulls"],
-        ["docs/vault"],
-      ),
-    ).toEqual(["github/pulls", "docs/vault"]);
+      reorderPluginNavPanels({
+        activeKey: "tasks/board",
+        overKey: "github/pulls",
+        order: ["github/pulls", "docs/vault", "tasks/board"],
+        visibleKeys: ["github/pulls", "docs/vault", "tasks/board"],
+      }),
+    ).toEqual(["tasks/board", "github/pulls", "docs/vault"]);
   });
 
-});
-
-describe("reorderPluginNavPanels", () => {
-  it("moves a row across an overflow boundary", () => {
-    const order = [
-      "one/main",
-      "two/main",
-      "three/main",
-      "four/main",
-      "five/main",
-      "six/main",
-      "seven/main",
-    ];
-
+  it("keeps hidden panels pinned to their index in the stored order", () => {
     expect(
       reorderPluginNavPanels({
-        activeKey: "one/main",
-        overKey: "six/main",
-        order,
-        visibleKeys: order,
+        activeKey: "tasks/board",
+        overKey: "github/pulls",
+        order: ["github/pulls", "docs/vault", "tasks/board"],
+        visibleKeys: ["github/pulls", "tasks/board"],
       }),
-    ).toEqual([
-      "two/main",
-      "three/main",
-      "four/main",
-      "five/main",
-      "six/main",
-      "one/main",
-      "seven/main",
-    ]);
+    ).toEqual(["tasks/board", "docs/vault", "github/pulls"]);
   });
 
   it("returns null when the drag lands where it started", () => {
@@ -227,33 +141,39 @@ describe("reorderPluginNavPanels", () => {
       }),
     ).toBeNull();
   });
+
+  it("returns null when the drop target is not a visible row", () => {
+    expect(
+      reorderPluginNavPanels({
+        activeKey: "github/pulls",
+        overKey: "docs/vault",
+        order: ["github/pulls", "docs/vault"],
+        visibleKeys: ["github/pulls"],
+      }),
+    ).toBeNull();
+  });
 });
 
-describe("togglePluginNavPanelVisibility", () => {
-  it("checks and unchecks panels without losing other keys", () => {
-    const checked = togglePluginNavPanelVisibility(
-      ["github/pulls", "future/main"],
-      "docs/vault",
-      true,
-    );
+describe("seedLeadingNavPanelKeys", () => {
+  it("leaves an untouched order empty so registry order still wins", () => {
+    expect(seedLeadingNavPanelKeys([], ["__builtin__/tools"])).toEqual([]);
+  });
 
-    expect(checked).toEqual([
-      "github/pulls",
-      "future/main",
-      "docs/vault",
-    ]);
+  it("prepends a built-in key that a customized order predates", () => {
     expect(
-      togglePluginNavPanelVisibility(checked, "github/pulls", false),
-    ).toEqual(["future/main", "docs/vault"]);
+      seedLeadingNavPanelKeys(
+        ["github/pulls", "docs/vault"],
+        ["__builtin__/tools"],
+      ),
+    ).toEqual(["__builtin__/tools", "github/pulls", "docs/vault"]);
   });
 
-  it("does not duplicate a checked panel", () => {
+  it("keeps the user's slot for a built-in key they already moved", () => {
     expect(
-      togglePluginNavPanelVisibility(
-        ["github/pulls", "github/pulls"],
-        "github/pulls",
-        true,
+      seedLeadingNavPanelKeys(
+        ["github/pulls", "__builtin__/tools"],
+        ["__builtin__/tools"],
       ),
-    ).toEqual(["github/pulls"]);
+    ).toEqual(["github/pulls", "__builtin__/tools"]);
   });
 });
diff --git a/apps/app/src/components/plugin/pluginNavSidebarOrder.ts b/apps/app/src/components/plugin/pluginNavSidebarOrder.ts
index bfd2a00beb..a8259963e4 100644
--- a/apps/app/src/components/plugin/pluginNavSidebarOrder.ts
+++ b/apps/app/src/components/plugin/pluginNavSidebarOrder.ts
@@ -3,20 +3,6 @@ interface PluginNavPanelIdentity {
   id: string;
 }
 
-export const BUILT_IN_SIDEBAR_NAVIGATION_KEYS = {
-  newThread: "__bb__/new-thread",
-  searchThreads: "__bb__/search-threads",
-  extensions: "__bb__/extensions",
-  automations: "__bb__/automations",
-} as const;
-
-export const DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER = [
-  BUILT_IN_SIDEBAR_NAVIGATION_KEYS.newThread,
-  BUILT_IN_SIDEBAR_NAVIGATION_KEYS.searchThreads,
-  BUILT_IN_SIDEBAR_NAVIGATION_KEYS.extensions,
-  BUILT_IN_SIDEBAR_NAVIGATION_KEYS.automations,
-] as const;
-
 export function getPluginNavPanelKey(panel: PluginNavPanelIdentity): string {
   return `${panel.pluginId}/${panel.id}`;
 }
@@ -24,32 +10,19 @@ export function getPluginNavPanelKey(panel: PluginNavPanelIdentity): string {
 interface ArrangePluginNavPanelsArgs<TPanel extends PluginNavPanelIdentity> {
   panels: readonly TPanel[];
   storedOrder: readonly string[];
+  hiddenKeys: readonly string[];
 }
 
 interface ArrangedPluginNavPanels<TPanel extends PluginNavPanelIdentity> {
-  ordered: TPanel[];
-  normalizedOrder: string[];
-}
-
-interface ArrangePluginNavPanelPreferencesArgs<
-  TPanel extends PluginNavPanelIdentity,
-> extends ArrangePluginNavPanelsArgs<TPanel> {
-  storedVisibleKeys: readonly string[] | null;
-  defaultVisibleCount: number;
-}
-
-interface ArrangedPluginNavPanelPreferences<
-  TPanel extends PluginNavPanelIdentity,
-> extends ArrangedPluginNavPanels<TPanel> {
   visible: TPanel[];
-  overflow: TPanel[];
-  visibleKeys: string[];
-  normalizedVisibleKeys: string[] | null;
+  hidden: TPanel[];
+  normalizedOrder: string[];
 }
 
 export function arrangePluginNavPanels<TPanel extends PluginNavPanelIdentity>({
   panels,
   storedOrder,
+  hiddenKeys,
 }: ArrangePluginNavPanelsArgs<TPanel>): ArrangedPluginNavPanels<TPanel> {
   const byKey = new Map(
     panels.map((panel) => [getPluginNavPanelKey(panel), panel]),
@@ -72,58 +45,15 @@ export function arrangePluginNavPanels<TPanel extends PluginNavPanelIdentity>({
     ordered.push(panel);
   }
 
-  return { ordered, normalizedOrder };
-}
-
-export function arrangePluginNavPanelPreferences<
-  TPanel extends PluginNavPanelIdentity,
->({
-  panels,
-  storedOrder,
-  storedVisibleKeys,
-  defaultVisibleCount,
-}: ArrangePluginNavPanelPreferencesArgs<TPanel>): ArrangedPluginNavPanelPreferences<TPanel> {
-  const { ordered, normalizedOrder } = arrangePluginNavPanels({
-    panels,
-    storedOrder,
-  });
-  const normalizedVisibleKeys =
-    storedVisibleKeys === null
-      ? null
-      : [...new Set(storedVisibleKeys.filter((key) => key.length > 0))];
-  const visibleKeys =
-    normalizedVisibleKeys ??
-    ordered
-      .slice(0, Math.max(0, defaultVisibleCount))
-      .map(getPluginNavPanelKey);
-  const visibleSet = new Set(visibleKeys);
-
-  return {
-    ordered,
-    normalizedOrder,
-    visible: ordered.filter((panel) =>
-      visibleSet.has(getPluginNavPanelKey(panel)),
-    ),
-    overflow: ordered.filter(
-      (panel) => !visibleSet.has(getPluginNavPanelKey(panel)),
-    ),
-    visibleKeys: ordered
-      .map(getPluginNavPanelKey)
-      .filter((key) => visibleSet.has(key)),
-    normalizedVisibleKeys,
-  };
-}
-
-export function togglePluginNavPanelVisibility(
-  visibleKeys: readonly string[],
-  key: string,
-  visible: boolean,
-): string[] {
-  const normalized = [...new Set(visibleKeys.filter((item) => item.length > 0))];
-  if (visible) {
-    return normalized.includes(key) ? normalized : [...normalized, key];
+  const hiddenSet = new Set(hiddenKeys);
+  const visible: TPanel[] = [];
+  const hidden: TPanel[] = [];
+  for (const panel of ordered) {
+    if (hiddenSet.has(getPluginNavPanelKey(panel))) hidden.push(panel);
+    else visible.push(panel);
   }
-  return normalized.filter((item) => item !== key);
+
+  return { visible, hidden, normalizedOrder };
 }
 
 interface ReorderPluginNavPanelsArgs {
@@ -154,18 +84,28 @@ export function reorderPluginNavPanels({
   );
 }
 
-export function migrateLegacyHiddenPluginNavPanelOrder(
+export function seedLeadingNavPanelKeys(
   order: readonly string[],
+  leadingKeys: readonly string[],
+): string[] {
+  const next = [...order];
+  if (next.length === 0) return next;
+  const missing = leadingKeys.filter((key) => !next.includes(key));
+  return missing.length === 0 ? next : [...missing, ...next];
+}
+
+export function hidePluginNavPanel(
   hiddenKeys: readonly string[],
+  key: string,
+): string[] {
+  return hiddenKeys.includes(key) ? [...hiddenKeys] : [...hiddenKeys, key];
+}
+
+export function showPluginNavPanel(
+  hiddenKeys: readonly string[],
+  key: string,
 ): string[] {
-  const uniqueOrder = [
-    ...new Set([...order, ...hiddenKeys].filter((key) => key.length > 0)),
-  ];
-  const hidden = new Set(hiddenKeys);
-  return [
-    ...uniqueOrder.filter((key) => !hidden.has(key)),
-    ...uniqueOrder.filter((key) => hidden.has(key)),
-  ];
+  return hiddenKeys.filter((hiddenKey) => hiddenKey !== key);
 }
 
 export function havePluginNavPanelOrdersDiverged(
diff --git a/apps/app/src/components/sidebar/AppSidebar.tsx b/apps/app/src/components/sidebar/AppSidebar.tsx
index 0b35c61c12..4bbfacf5b7 100644
--- a/apps/app/src/components/sidebar/AppSidebar.tsx
+++ b/apps/app/src/components/sidebar/AppSidebar.tsx
@@ -13,7 +13,6 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useCloseMobileSidebar,
-  useSidebar,
 } from "@/components/ui/sidebar.js";
 import { ProjectList } from "./ProjectList";
 import { PluginThreadList } from "./PluginThreadList";
@@ -86,8 +85,6 @@ export function AppSidebar({
     label: "New thread",
   });
   const closeOnMobile = useCloseMobileSidebar();
-  const { isCompactViewport, openMobile } = useSidebar();
-  const [compactCustomizeMode, setCompactCustomizeMode] = useState(false);
   const [desktopInfo] = useState(getBbDesktopInfo);
   const [threadShortcutKeysById, setThreadShortcutKeysById] = useState<
     ReadonlyMap<string, SidebarThreadShortcutPresentation>
@@ -174,13 +171,6 @@ export function AppSidebar({
   );
 
   const isHiddenHostedBody = mobileHosted?.hidden === true;
-  const isCompactCustomizeModeActive =
-    isCompactViewport && compactCustomizeMode;
-  useEffect(() => {
-    if (!isCompactViewport || !openMobile || isHiddenHostedBody) {
-      setCompactCustomizeMode(false);
-    }
-  }, [isCompactViewport, isHiddenHostedBody, openMobile]);
   const activateVisibleThreadShortcut = useCallback(
     (index: number) =>
       isHiddenHostedBody ? false : activateThreadShortcut(index),
@@ -238,8 +228,6 @@ export function AppSidebar({
         </div>
       ) : null}
       <SidebarNavigationRegion
-        compactCustomizeMode={isCompactCustomizeModeActive}
-        onCompactCustomizeModeChange={setCompactCustomizeMode}
         onNavigate={closeOnMobile}
         splitEnabled
         toolsRoutePath={toolsRoutePath}
@@ -247,23 +235,19 @@ export function AppSidebar({
         onNewChat={handleNewChat}
         onSearchThreads={closeOnMobile}
       />
-      {!isCompactCustomizeModeActive ? (
-        <>
-          <div
-            aria-hidden="true"
-            className="mx-2 my-2 shrink-0 border-t border-sidebar-border/25"
-            data-testid="app-sidebar-navigation-divider"
-          />
-          <SidebarContent>
-            <PluginThreadList
-              replacement={threadListReplacement}
-              original={originalThreadList}
-              searchQuery=""
-              onNavigate={closeOnMobile}
-            />
-          </SidebarContent>
-        </>
-      ) : null}
+      <div
+        aria-hidden="true"
+        className="mx-2 my-2 shrink-0 border-t border-sidebar-border/25"
+        data-testid="app-sidebar-navigation-divider"
+      />
+      <SidebarContent>
+        <PluginThreadList
+          replacement={threadListReplacement}
+          original={originalThreadList}
+          searchQuery=""
+          onNavigate={closeOnMobile}
+        />
+      </SidebarContent>
       <SidebarFooter className="relative">
         <OverflowFade placement="above" tone="sidebar" size="sm" />
         {}
diff --git a/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx b/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
index 99d2aa2c7c..ec40b35299 100644
--- a/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
+++ b/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
@@ -1,156 +1,38 @@
 import type { ComponentProps } from "react";
-import { useNavigate } from "react-router-dom";
-import {
-  AutomationsNavSidebarItem,
-  type BuiltInSidebarNavEntry,
-  ExtensionsNavSidebarItem,
-  getTraditionalPluginNavPanelEntries,
-  PluginNavSidebarItems,
-} from "@/components/plugin/PluginNavSidebarItems";
-import { useAppCommandRunner } from "@/components/commands/AppCommandProvider";
-import { PluginIcon } from "@/components/plugin/PluginIcon";
-import { Icon } from "@bb/shared-ui/icon";
-import { usePluginNavPanelChrome } from "@/lib/plugin-nav-panel-chrome";
-import {
-  AUTOMATIONS_PLUGIN_ID,
-  getPluginPanelRoutePath,
-} from "@/lib/route-paths";
-import {
-  ProjectListNewThreadAction,
-  ProjectListSearchThreadsAction,
-} from "./ProjectList";
-import { DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER } from "@/components/plugin/pluginNavSidebarOrder";
+import { PluginNavSidebarItems } from "@/components/plugin/PluginNavSidebarItems";
+import { ProjectListActionButtons } from "./ProjectList";
 
 export type BuiltInSidebarNavigationProps = ComponentProps<
-  typeof ProjectListNewThreadAction
+  typeof ProjectListActionButtons
 > &
-  ComponentProps<typeof ProjectListSearchThreadsAction> &
-  ComponentProps<typeof PluginNavSidebarItems> & {
-    toolsRoutePath?: string;
-  };
+  ComponentProps<typeof PluginNavSidebarItems>;
 
 export function BuiltInSidebarNavigation({
-  compactCustomizeMode,
   newThreadSplit,
-  onCompactCustomizeModeChange,
   onNavigate,
   onNewChat,
   onSearchThreads,
   splitEnabled,
   toolsRoutePath,
 }: BuiltInSidebarNavigationProps) {
-  const navigate = useNavigate();
-  const commandRunner = useAppCommandRunner();
-  const pluginNavPanels = usePluginNavPanelChrome();
-  const automationsNavPanel = pluginNavPanels.find(
-    ({ chrome }) => chrome.pluginId === AUTOMATIONS_PLUGIN_ID,
-  );
-  const traditionalPluginNavPanels = getTraditionalPluginNavPanelEntries(
-    pluginNavPanels,
-  );
-  const builtInEntries: BuiltInSidebarNavEntry[] = [
-    {
-      kind: "built-in",
-      pluginId: "__bb__",
-      id: "new-thread",
-      title: "New thread",
-      icon: <Icon name="MessageSquarePlus" aria-hidden="true" />,
-      content: (
-        <ProjectListNewThreadAction
+  return (
+    <div className="contents" data-testid="built-in-sidebar-navigation">
+      <div
+        data-testid="app-sidebar-primary-actions"
+        className="shrink-0 px-2 py-2 group-data-[collapsible=icon]:hidden"
+      >
+        <ProjectListActionButtons
           splitEnabled={splitEnabled}
           newThreadSplit={newThreadSplit}
           onNewChat={onNewChat}
-        />
-      ),
-      disabled: onNewChat === undefined,
-      onActivate: () => onNewChat?.(),
-    },
-    {
-      kind: "built-in",
-      pluginId: "__bb__",
-      id: "search-threads",
-      title: "Search threads",
-      icon: <Icon name="Search" aria-hidden="true" />,
-      content: (
-        <ProjectListSearchThreadsAction onSearchThreads={onSearchThreads} />
-      ),
-      disabled: !commandRunner.isCommandAvailable("thread.search", null),
-      onActivate: () => {
-        onSearchThreads?.();
-        commandRunner.dispatch("thread.search", null);
-      },
-    },
-    ...(toolsRoutePath
-      ? [
-          {
-            kind: "built-in" as const,
-            pluginId: "__bb__" as const,
-            id: "extensions",
-            title: "Extensions",
-            icon: <Icon name="Toolbox" aria-hidden="true" />,
-            content: (
-              <ExtensionsNavSidebarItem
-                routePath={toolsRoutePath}
-                onNavigate={onNavigate}
-              />
-            ),
-            onActivate: () => {
-              onNavigate?.();
-              void navigate(toolsRoutePath);
-            },
-          },
-        ]
-      : []),
-    ...(automationsNavPanel
-      ? [
-          {
-            kind: "built-in" as const,
-            pluginId: "__bb__" as const,
-            id: "automations",
-            title: automationsNavPanel.chrome.title,
-            icon: (
-              <PluginIcon
-                pluginId={automationsNavPanel.chrome.pluginId}
-                icon={automationsNavPanel.chrome.icon}
-              />
-            ),
-            content: (
-              <AutomationsNavSidebarItem
-                chrome={automationsNavPanel.chrome}
-                onNavigate={onNavigate}
-              />
-            ),
-            onActivate: () => {
-              onNavigate?.();
-              void navigate(
-                getPluginPanelRoutePath({
-                  pluginId: automationsNavPanel.chrome.pluginId,
-                  path: automationsNavPanel.chrome.path,
-                }),
-              );
-            },
-          },
-        ]
-      : []),
-  ];
-
-  return (
-    <div
-      className="contents"
-      data-testid="built-in-sidebar-navigation"
-      data-sidebar-navigation-unified="true"
-    >
-      <div className="contents" data-testid="app-sidebar-primary-actions">
-        <PluginNavSidebarItems
-          builtInEntries={builtInEntries}
-          compactCustomizeMode={compactCustomizeMode}
-          entries={traditionalPluginNavPanels}
-          leadingOrderKeys={DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER}
-          onCompactCustomizeModeChange={onCompactCustomizeModeChange}
-          onNavigate={onNavigate}
-          splitEnabled={splitEnabled}
+          onSearchThreads={onSearchThreads}
         />
       </div>
+      <PluginNavSidebarItems
+        onNavigate={onNavigate}
+        splitEnabled={splitEnabled}
+        toolsRoutePath={toolsRoutePath}
+      />
     </div>
   );
 }
diff --git a/apps/app/src/components/sidebar/ProjectList.tsx b/apps/app/src/components/sidebar/ProjectList.tsx
index a5245aaabc..e9d6e8c38d 100644
--- a/apps/app/src/components/sidebar/ProjectList.tsx
+++ b/apps/app/src/components/sidebar/ProjectList.tsx
@@ -174,8 +174,7 @@ interface ProjectListSearchThreadsActionProps {
 }
 
 interface ProjectListActionButtonsProps
-  extends
-    ProjectListNewThreadActionProps,
+  extends ProjectListNewThreadActionProps,
     ProjectListSearchThreadsActionProps {}
 
 interface ProjectListShellProps {
@@ -796,7 +795,7 @@ export function ProjectListNewThreadAction({
     >
       <Icon name="MessageSquarePlus" />
       <span className="flex min-w-0 flex-1 items-center gap-1.5">
-        <span className="min-w-0 flex-1 truncate text-left">New thread</span>
+        <span className="min-w-0 truncate text-left">New thread</span>
         {newThreadSplitIndicator.miniMap ? (
           <SplitPaneMiniMap
             slots={newThreadSplitIndicator.miniMap}
diff --git a/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx b/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
index 6676cd89fe..491980c5fa 100644
--- a/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
+++ b/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
@@ -29,10 +29,7 @@ vi.mock("@/components/commands/AppCommandProvider", () => ({
   useIsAppCommandModifierHeld: () => false,
 }));
 vi.mock("@/components/plugin/PluginNavSidebarItems", () => ({
-  AutomationsNavSidebarItem: () => <div>Automations</div>,
-  ExtensionsNavSidebarItem: () => <div>Extensions</div>,
   PluginNavSidebarItems: () => <div>BB plugin destinations</div>,
-  getTraditionalPluginNavPanelEntries: (entries: readonly object[]) => entries,
 }));
 vi.mock("./usePaneContentSplitDrag", () => ({
   usePaneContentSplitActions: () => ({
diff --git a/apps/app/src/components/sidebar/SidebarNavigationRegion.tsx b/apps/app/src/components/sidebar/SidebarNavigationRegion.tsx
index 3435d359a2..46db44e50e 100644
--- a/apps/app/src/components/sidebar/SidebarNavigationRegion.tsx
+++ b/apps/app/src/components/sidebar/SidebarNavigationRegion.tsx
@@ -12,7 +12,6 @@ import type {
 } from "@get-bb/plugin-sdk";
 import { useLocation, useNavigate } from "react-router-dom";
 import { toast } from "sonner";
-import { cn } from "@bb/shared-ui/lib/utils";
 import {
   useAppCommandRunner,
   useAppCommandShortcut,
@@ -234,9 +233,6 @@ export function SidebarNavigationRegion(props: BuiltInSidebarNavigationProps) {
     <nav
       aria-label="Sidebar navigation"
       data-testid="sidebar-navigation-region"
-      className={cn(
-        props.compactCustomizeMode && "flex min-h-0 flex-1 flex-col",
-      )}
     >
       <PluginReplacementSlot
         replacement={replacement}
diff --git a/apps/app/src/components/sidebar/SidebarOverview.stories.tsx b/apps/app/src/components/sidebar/SidebarOverview.stories.tsx
index c6671ce692..8e3fb16dec 100644
--- a/apps/app/src/components/sidebar/SidebarOverview.stories.tsx
+++ b/apps/app/src/components/sidebar/SidebarOverview.stories.tsx
@@ -44,6 +44,7 @@ import {
 import {
   AUTOMATIONS_PLUGIN_ID,
   AUTOMATIONS_PLUGIN_PANEL_PATH,
+  getSkillsRoutePath,
 } from "@/lib/route-paths";
 import { splitLayoutAtom } from "@/lib/split-layout/atoms";
 import {
@@ -266,7 +267,7 @@ function SidebarFrame({ children }: SidebarFrameProps) {
             <ProjectListActionButtons onNewChat={noop} />
           </div>
           {}
-          <PluginNavSidebarItems />
+          <PluginNavSidebarItems toolsRoutePath={getSkillsRoutePath()} />
           <div className="min-h-0 flex-1 overflow-y-auto">{children}</div>
           <div className="shrink-0 border-t border-sidebar-border/70 px-2 py-2">
             <button
diff --git a/apps/app/src/lib/plugin-nav-panel-chrome.ts b/apps/app/src/lib/plugin-nav-panel-chrome.ts
index d43bdbaa2c..bef43f2a15 100644
--- a/apps/app/src/lib/plugin-nav-panel-chrome.ts
+++ b/apps/app/src/lib/plugin-nav-panel-chrome.ts
@@ -17,7 +17,7 @@ const pluginNavPanelChromeSchema = z.object({
 
 export type PluginNavPanelChrome = z.infer<typeof pluginNavPanelChromeSchema>;
 
-export interface PluginNavPanelChromeEntry {
+interface PluginNavPanelChromeEntry {
   chrome: PluginNavPanelChrome;
   panel: PluginNavPanelSlot | null;
 }

From 8b93f3e10aa0941a1761038b0936498afee28123 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 2 Sep 2026 17:51:02 -0700
Subject: [PATCH 10/12] Add customizable sidebar navigation

---
 .../plugin/PluginNavSidebarItems.test.tsx     | 561 ++++++++---
 .../plugin/PluginNavSidebarItems.tsx          | 883 ++++++++++++++----
 .../plugin/pluginNavSidebarAtoms.test.ts      | 178 ++++
 .../plugin/pluginNavSidebarAtoms.ts           | 141 ++-
 .../plugin/pluginNavSidebarOrder.test.ts      | 226 +++--
 .../plugin/pluginNavSidebarOrder.ts           | 118 ++-
 .../app/src/components/sidebar/AppSidebar.tsx |  42 +-
 .../sidebar/BuiltInSidebarNavigation.tsx      | 152 ++-
 .../src/components/sidebar/ProjectList.tsx    |   5 +-
 .../sidebar/SidebarNavigationRegion.test.tsx  |   3 +
 .../sidebar/SidebarNavigationRegion.tsx       |   4 +
 .../sidebar/SidebarOverview.stories.tsx       |   3 +-
 apps/app/src/lib/plugin-nav-panel-chrome.ts   |   2 +-
 13 files changed, 1871 insertions(+), 447 deletions(-)
 create mode 100644 apps/app/src/components/plugin/pluginNavSidebarAtoms.test.ts

diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
index 55303fce25..43b8d5c8f6 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
@@ -6,11 +6,13 @@ import {
   render,
   screen,
   waitFor,
+  within,
 } from "@testing-library/react";
-import { useEffect, type ComponentType } from "react";
+import { useEffect, useState, type ComponentType } from "react";
 import { createStore, Provider } from "jotai";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter, useLocation } from "react-router-dom";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { CompactViewportOverrideProvider } from "@bb/shared-ui/hooks/use-compact-viewport";
 import { SidebarProvider } from "@/components/ui/sidebar.js";
 import {
@@ -18,12 +20,20 @@ import {
   setPluginSlotRegistrations,
   type PluginRegistrationSet,
 } from "@/lib/plugin-slots";
+import { getPluginPanelRoutePath } from "@/lib/route-paths";
 import {
   resetAllCrashedPluginSlotsForTest,
   resetCrashedPluginSlots,
 } from "./PluginSlotMount";
-import { PluginNavSidebarItems } from "./PluginNavSidebarItems";
-import { pluginNavPanelOrderAtom } from "./pluginNavSidebarAtoms";
+import {
+  type BuiltInSidebarNavEntry,
+  ExtensionsNavSidebarItem,
+  PluginNavSidebarItems,
+} from "./PluginNavSidebarItems";
+import {
+  pluginNavPanelOrderAtom,
+  pluginNavVisiblePanelKeysAtom,
+} from "./pluginNavSidebarAtoms";
 
 function registrationSet(
   overrides: Partial<PluginRegistrationSet>,
@@ -66,39 +76,111 @@ function registerPanel(
   );
 }
 
-function renderSidebarItems(
-  options: {
-    toolsRoutePath?: string;
-    storedOrder?: string[];
-    compactViewport?: boolean;
-  } = {},
-) {
+interface RenderSidebarItemsOptions {
+  builtInEntries?: readonly BuiltInSidebarNavEntry[];
+  storedOrder?: string[];
+  storedVisibleKeys?: string[] | null;
+  compactViewport?: boolean;
+  compactCustomizeMode?: boolean;
+  onCompactCustomizeModeChange?: (isCustomizing: boolean) => void;
+}
+
+function PluginNavSidebarItemsHarness({
+  options,
+}: {
+  options: RenderSidebarItemsOptions;
+}) {
+  const [compactCustomizeMode, setCompactCustomizeMode] = useState(
+    options.compactCustomizeMode ?? false,
+  );
+  const compactControlProps = options.compactViewport
+    ? {
+        compactCustomizeMode,
+        onCompactCustomizeModeChange: (isCustomizing: boolean) => {
+          setCompactCustomizeMode(isCustomizing);
+          options.onCompactCustomizeModeChange?.(isCustomizing);
+        },
+      }
+    : {};
+
+  return (
+    <PluginNavSidebarItems
+      builtInEntries={options.builtInEntries}
+      {...compactControlProps}
+    />
+  );
+}
+
+function renderSidebarItems(options: RenderSidebarItemsOptions = {}) {
   const store = createStore();
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
   if (options.storedOrder) {
     store.set(pluginNavPanelOrderAtom, options.storedOrder);
   }
-  return render(
+  if ("storedVisibleKeys" in options) {
+    store.set(
+      pluginNavVisiblePanelKeysAtom,
+      options.storedVisibleKeys ?? null,
+    );
+  }
+  const view = render(
     <CompactViewportOverrideProvider
       isCompactViewport={options.compactViewport ?? false}
     >
-      <Provider store={store}>
-        <MemoryRouter initialEntries={["/"]}>
-          <SidebarProvider>
-            <PluginNavSidebarItems toolsRoutePath={options.toolsRoutePath} />
-          </SidebarProvider>
-        </MemoryRouter>
-      </Provider>
+      <QueryClientProvider client={queryClient}>
+        <Provider store={store}>
+          <MemoryRouter initialEntries={["/"]}>
+            <SidebarProvider>
+              <PluginNavSidebarItemsHarness options={options} />
+              <LocationProbe />
+            </SidebarProvider>
+          </MemoryRouter>
+        </Provider>
+      </QueryClientProvider>
     </CompactViewportOverrideProvider>,
   );
+  return { ...view, store };
+}
+
+function LocationProbe() {
+  return <output data-testid="location-path">{useLocation().pathname}</output>;
 }
 
-const ROW_LABELS = new Set(["Extensions", "Docs", "GitHub"]);
+function panelRowNames(labels: readonly string[] = ["Docs", "GitHub"]): string[] {
+  const rowLabels = new Set(labels);
+  const container = screen.queryByTestId("plugin-nav-sidebar-items");
+  if (!container) return [];
+  return Array.from(
+    container.querySelectorAll<HTMLElement>("[data-sidebar-navigation-item]"),
+  )
+    .map((row) => row.textContent?.trim() ?? "")
+    .filter((label) => rowLabels.has(label));
+}
 
-function panelRowNames(): string[] {
-  return screen
-    .getAllByRole("button")
-    .map((button) => button.textContent?.trim() ?? "")
-    .filter((label) => ROW_LABELS.has(label));
+function builtInEntry(
+  id: string,
+  title: string,
+  onActivate: () => void = vi.fn(),
+): BuiltInSidebarNavEntry {
+  return {
+    kind: "built-in",
+    pluginId: "__bb__",
+    id,
+    title,
+    icon: <span aria-hidden="true" />,
+    content: <button type="button">{title}</button>,
+    onActivate,
+  };
+}
+
+function customizeRows(): HTMLElement[] {
+  return Array.from(
+    screen
+      .getByRole("list", { name: "Sidebar navigation" })
+      .querySelectorAll<HTMLElement>("[data-plugin-nav-customize-item]"),
+  );
 }
 
 beforeEach(() => {
@@ -117,6 +199,27 @@ afterEach(() => {
 });
 
 describe("PluginNavSidebarItems", () => {
+  it("collapses the entire subsection with zero traditional plugins", () => {
+    renderSidebarItems();
+
+    expect(screen.queryByTestId("plugin-nav-sidebar-items")).toBeNull();
+    expect(screen.queryByText("Plugins")).toBeNull();
+  });
+
+  it("shows one plugin with a unified customization entry point and no section label", () => {
+    registerPanel("docs", "Docs");
+    renderSidebarItems();
+
+    expect(screen.queryByText("Plugins")).toBeNull();
+    expect(panelRowNames(["Docs"])).toEqual(["Docs"]);
+    expect(
+      screen.queryByTestId("plugin-nav-sidebar-overflow-toggle"),
+    ).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    ).not.toBeNull();
+  });
+
   it("keeps an accessory-less plugin row unchanged", () => {
     registerPanel("docs", "Docs");
 
@@ -214,6 +317,10 @@ describe("PluginNavSidebarItems", () => {
     expect(
       await screen.findByRole("menuitem", { name: "Hide from sidebar" }),
     ).not.toBeNull();
+    expect(screen.queryByRole("menuitem", { name: "Move to top" })).toBeNull();
+    expect(
+      screen.queryByRole("menuitem", { name: "Move to overflow" }),
+    ).toBeNull();
 
     expect(accessory?.getAttribute("data-sidebar-hover-actions-open")).toBe(
       "true",
@@ -237,6 +344,111 @@ describe("PluginNavSidebarItems", () => {
     ).toBeNull();
   });
 
+  it("uses an in-place customization mode instead of a drawer on compact viewports", () => {
+    const onCompactCustomizeModeChange = vi.fn();
+    renderSidebarItems({
+      compactViewport: true,
+      builtInEntries: [
+        builtInEntry("new-thread", "New thread"),
+        builtInEntry("search-threads", "Search threads"),
+      ],
+      onCompactCustomizeModeChange,
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    );
+
+    expect(onCompactCustomizeModeChange).toHaveBeenCalledWith(true);
+    expect(
+      screen.getByTestId("sidebar-navigation-customize-inline"),
+    ).not.toBeNull();
+    expect(screen.queryByRole("dialog")).toBeNull();
+    expect(screen.getByRole("button", { name: "Back to sidebar" })).toBe(
+      document.activeElement,
+    );
+    expect(
+      screen.queryByRole("button", { name: "Customize sidebar navigation" }),
+    ).toBeNull();
+    const firstCustomizeRow = customizeRows()[0];
+    const firstDragHandle = firstCustomizeRow?.querySelector<HTMLElement>(
+      "[data-plugin-nav-customize-drag-handle]",
+    );
+    const firstCheckbox = within(firstCustomizeRow as HTMLElement).getByRole(
+      "checkbox",
+    );
+    expect(
+      firstCustomizeRow?.classList.contains("max-md:pointer-coarse:h-9"),
+    ).toBe(true);
+    expect(
+      firstDragHandle?.classList.contains("max-md:pointer-coarse:h-9"),
+    ).toBe(true);
+    expect(
+      firstDragHandle?.classList.contains("max-md:pointer-coarse:w-9"),
+    ).toBe(true);
+    expect(
+      firstCheckbox
+        .closest("label")
+        ?.classList.contains("max-md:pointer-coarse:h-9"),
+    ).toBe(true);
+
+    fireEvent.click(screen.getByRole("button", { name: "Back to sidebar" }));
+
+    expect(onCompactCustomizeModeChange).toHaveBeenLastCalledWith(false);
+    expect(
+      screen.queryByTestId("sidebar-navigation-customize-inline"),
+    ).toBeNull();
+    expect(screen.getByRole("button", { name: "New thread" })).not.toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    ).toBe(document.activeElement);
+  });
+
+  it("keeps compact visibility changes in place and closes the mode when launching", () => {
+    const onActivate = vi.fn();
+    const { store } = renderSidebarItems({
+      compactViewport: true,
+      builtInEntries: [builtInEntry("new-thread", "New thread", onActivate)],
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    );
+    fireEvent.click(
+      screen.getByRole("checkbox", { name: "Show New thread in sidebar" }),
+    );
+
+    expect(
+      screen.getByTestId("sidebar-navigation-customize-inline"),
+    ).not.toBeNull();
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([]);
+
+    fireEvent.click(screen.getByRole("button", { name: "New thread" }));
+
+    expect(onActivate).toHaveBeenCalledTimes(1);
+    expect(
+      screen.queryByTestId("sidebar-navigation-customize-inline"),
+    ).toBeNull();
+    expect(screen.queryByRole("checkbox")).toBeNull();
+  });
+
+  it("keeps the desktop customization popover", () => {
+    renderSidebarItems({
+      builtInEntries: [builtInEntry("new-thread", "New thread")],
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    );
+
+    expect(
+      screen.getByRole("list", { name: "Sidebar navigation" }),
+    ).not.toBeNull();
+    expect(
+      screen.queryByTestId("sidebar-navigation-customize-inline"),
+    ).toBeNull();
+  });
+
   it("hides a crashed accessory and retries it after a plugin reload", () => {
     function CrashingAccessory(): never {
       throw new Error("accessory crashed");
@@ -257,158 +469,245 @@ describe("PluginNavSidebarItems", () => {
     expect(screen.queryByText("plugin tasks crashed")).toBeNull();
   });
 
-  it("moves a hidden panel into an expanded More disclosure and back", async () => {
-    registerPanel("docs", "Docs");
-    registerPanel("github", "GitHub");
+  it("shows only the first three plugins directly and lists every plugin in the menu", () => {
+    const labels = ["One", "Two", "Three", "Four", "Five", "Six"];
+    labels.forEach((label, index) => registerPanel(`plugin-${index}`, label));
 
     renderSidebarItems();
 
-    expect(panelRowNames()).toEqual(["Docs", "GitHub"]);
+    expect(panelRowNames(labels)).toEqual(labels.slice(0, 3));
     expect(
       screen.queryByTestId("plugin-nav-sidebar-overflow-toggle"),
     ).toBeNull();
 
-    fireEvent.pointerDown(
-      screen.getByRole("button", { name: "Docs panel options" }),
-      { button: 0 },
-    );
     fireEvent.click(
-      await screen.findByRole("menuitem", { name: "Hide from sidebar" }),
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
     );
+    expect(customizeRows().map((row) => row.textContent?.trim())).toEqual(
+      labels,
+    );
+    expect(
+      screen.queryByRole("button", { name: "Four panel options" }),
+    ).toBeNull();
+  });
 
-    await waitFor(() => {
-      expect(
-        screen.getByTestId("plugin-nav-sidebar-overflow-toggle").textContent,
-      ).toContain("More (1)");
+  it("keeps launch and visibility as distinct targets with a clear row hover state", async () => {
+    const labels = ["One", "Two", "Three", "Four"];
+    labels.forEach((label, index) => registerPanel(`plugin-${index}`, label));
+    const { store, unmount } = renderSidebarItems();
+
+    const trigger = screen.getByRole("button", {
+      name: "Customize sidebar navigation",
     });
-    expect(panelRowNames()).toEqual(["GitHub"]);
+    expect(trigger.querySelector("svg")).not.toBeNull();
+
+    fireEvent.click(trigger);
+    const choices = screen.getAllByRole("checkbox");
+    await waitFor(() =>
+      expect(
+        document.activeElement?.getAttribute(
+          "data-sidebar-navigation-customize-launch",
+        ),
+      ).toBe("plugin-0/main"),
+    );
+    expect(choices.map((choice) => choice.getAttribute("data-state"))).toEqual([
+      "checked",
+      "checked",
+      "checked",
+      "unchecked",
+    ]);
     expect(
-      window.localStorage.getItem("bb.sidebar.hiddenPluginPanels"),
-    ).toContain("docs/main");
+      document.querySelectorAll("[data-plugin-nav-customize-drag-handle]"),
+    ).toHaveLength(4);
+    expect(customizeRows()[0]?.classList.contains("hover:bg-state-hover")).toBe(
+      true,
+    );
 
-    fireEvent.click(screen.getByTestId("plugin-nav-sidebar-overflow-toggle"));
-    await waitFor(() => {
-      expect(panelRowNames()).toEqual(["GitHub", "Docs"]);
-    });
+    fireEvent.click(choices[0]!);
+    expect(
+      screen.getByRole("list", { name: "Sidebar navigation" }),
+    ).not.toBeNull();
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
+      "plugin-1/main",
+      "plugin-2/main",
+    ]);
+    expect(panelRowNames(labels)).toEqual(["Two", "Three"]);
 
-    fireEvent.pointerDown(
-      screen.getByRole("button", { name: "Docs panel options" }),
-      { button: 0 },
+    unmount();
+    renderSidebarItems();
+    expect(panelRowNames(labels)).toEqual(["Two", "Three"]);
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
     );
+
+    const hiddenRow = document.querySelector<HTMLElement>(
+      '[data-plugin-nav-customize-item="plugin-0/main"]',
+    );
+    expect(hiddenRow).not.toBeNull();
     fireEvent.click(
-      await screen.findByRole("menuitem", { name: "Show in sidebar" }),
+      within(hiddenRow as HTMLElement).getByRole("button", { name: "One" }),
     );
 
-    await waitFor(() => {
+    expect(screen.getByTestId("location-path").textContent).toBe(
+      getPluginPanelRoutePath({ pluginId: "plugin-0", path: "main" }),
+    );
+    await waitFor(() =>
       expect(
-        screen.queryByTestId("plugin-nav-sidebar-overflow-toggle"),
-      ).toBeNull();
-    });
-    expect(panelRowNames()).toEqual(["Docs", "GitHub"]);
+        screen.queryByRole("list", { name: "Sidebar navigation" }),
+      ).toBeNull(),
+    );
   });
 
-  it("collapses hidden panels behind the More toggle on a later mount", async () => {
+  it("seeds newly introduced built-ins without overriding existing plugin visibility", () => {
     registerPanel("docs", "Docs");
-    registerPanel("github", "GitHub");
-    window.localStorage.setItem(
-      "bb.sidebar.hiddenPluginPanels",
-      JSON.stringify(["docs/main"]),
-    );
-
-    renderSidebarItems();
-
-    expect(panelRowNames()).toEqual(["GitHub"]);
-    const toggle = screen.getByTestId("plugin-nav-sidebar-overflow-toggle");
-    expect(toggle.textContent).toContain("More (1)");
-
-    fireEvent.click(toggle);
-    await waitFor(() => {
-      expect(panelRowNames()).toEqual(["GitHub", "Docs"]);
+    registerPanel("tasks", "Tasks");
+    renderSidebarItems({
+      builtInEntries: [
+        builtInEntry("new-thread", "New thread"),
+        builtInEntry("search-threads", "Search threads"),
+      ],
+      storedOrder: ["tasks/main", "docs/main"],
+      storedVisibleKeys: ["docs/main"],
     });
-  });
 
-  it("hides the built-in Extensions row like a plugin row", async () => {
-    registerPanel("docs", "Docs");
+    expect(
+      Array.from(
+        screen
+          .getByTestId("plugin-nav-sidebar-items")
+          .querySelectorAll("[data-sidebar-navigation-item]"),
+      ).map((row) => row.getAttribute("data-sidebar-navigation-item")),
+    ).toEqual(["__bb__/new-thread", "__bb__/search-threads", "docs/main"]);
+  });
 
-    renderSidebarItems({ toolsRoutePath: "/extensions/skills" });
+  it("keeps Customize on the New thread row without stranding it when the row is hidden", () => {
+    renderSidebarItems({
+      builtInEntries: [
+        builtInEntry("new-thread", "New thread"),
+        builtInEntry("search-threads", "Search threads"),
+      ],
+    });
 
-    expect(panelRowNames()).toEqual(["Extensions", "Docs"]);
+    const trigger = screen.getByRole("button", {
+      name: "Customize sidebar navigation",
+    });
+    expect(
+      trigger
+        .closest("[data-sidebar-navigation-item]")
+        ?.getAttribute("data-sidebar-navigation-item"),
+    ).toBe("__bb__/new-thread");
 
-    fireEvent.pointerDown(
-      screen.getByRole("button", { name: "Extensions panel options" }),
-      { button: 0 },
-    );
+    fireEvent.click(trigger);
     fireEvent.click(
-      await screen.findByRole("menuitem", { name: "Hide from sidebar" }),
+      screen.getByRole("checkbox", { name: "Show New thread in sidebar" }),
     );
 
-    await waitFor(() => {
-      expect(panelRowNames()).toEqual(["Docs"]);
-    });
     expect(
-      screen.getByTestId("plugin-nav-sidebar-overflow-toggle").textContent,
-    ).toContain("More (1)");
+      screen.getByRole("list", { name: "Sidebar navigation" }),
+    ).not.toBeNull();
     expect(
-      window.localStorage.getItem("bb.sidebar.hiddenPluginPanels"),
-    ).toContain("__builtin__/tools");
+      screen
+        .getByRole("button", { name: "Customize sidebar navigation" })
+        .closest("[data-sidebar-navigation-item]"),
+    ).toBeNull();
   });
 
-  it("keeps Extensions on top for users who already reordered their plugin rows", () => {
-    registerPanel("docs", "Docs");
-    registerPanel("github", "GitHub");
-
+  it("applies one persisted mixed order to direct rows and the menu", () => {
+    const labels = ["One", "Two", "Three", "Four"];
+    labels.forEach((label, index) => registerPanel(`plugin-${index}`, label));
+    const newThread = builtInEntry("new-thread", "New thread");
+    const searchThreads = builtInEntry("search-threads", "Search threads");
     renderSidebarItems({
-      toolsRoutePath: "/extensions/skills",
-      storedOrder: ["github/main", "docs/main"],
+      builtInEntries: [newThread, searchThreads],
+      storedOrder: [
+        "plugin-3/main",
+        "__bb__/search-threads",
+        "plugin-1/main",
+        "__bb__/new-thread",
+        "plugin-0/main",
+        "plugin-2/main",
+      ],
+      storedVisibleKeys: [
+        "plugin-3/main",
+        "__bb__/search-threads",
+        "__bb__/new-thread",
+        "plugin-0/main",
+      ],
     });
 
-    expect(panelRowNames()).toEqual(["Extensions", "GitHub", "Docs"]);
+    expect(
+      Array.from(
+        screen
+          .getByTestId("plugin-nav-sidebar-items")
+          .querySelectorAll("[data-sidebar-navigation-item]"),
+      ).map((row) => row.getAttribute("data-sidebar-navigation-item")),
+    ).toEqual([
+      "plugin-3/main",
+      "__bb__/search-threads",
+      "__bb__/new-thread",
+      "plugin-0/main",
+    ]);
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    );
+    expect(customizeRows().map((row) => row.textContent?.trim())).toEqual([
+      "Four",
+      "Search threads",
+      "Two",
+      "New thread",
+      "One",
+      "Three",
+    ]);
+    expect(
+      screen
+        .getAllByRole("checkbox")
+        .map((choice) => choice.getAttribute("data-state")),
+    ).toEqual([
+      "checked",
+      "checked",
+      "unchecked",
+      "checked",
+      "checked",
+      "unchecked",
+    ]);
   });
 
-  it("keeps a saved order when plugin frontends register after the first render", async () => {
+  it("launches a built-in row from the menu without changing its visibility", async () => {
+    const onActivate = vi.fn();
     renderSidebarItems({
-      toolsRoutePath: "/extensions/skills",
-      storedOrder: ["github/main", "__builtin__/tools", "docs/main"],
+      builtInEntries: [builtInEntry("new-thread", "New thread", onActivate)],
     });
 
-    expect(panelRowNames()).toEqual(["Extensions"]);
-
-    registerPanel("docs", "Docs");
-    registerPanel("github", "GitHub");
-
-    await waitFor(() => {
-      expect(panelRowNames()).toEqual(["GitHub", "Extensions", "Docs"]);
-    });
-  });
-
-  it("saves no Extensions key while the row is absent", async () => {
-    registerPanel("docs", "Docs");
-
-    renderSidebarItems({ storedOrder: ["docs/main"] });
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    );
+    const row = customizeRows()[0];
+    expect(row).toBeDefined();
+    fireEvent.click(
+      within(row as HTMLElement).getByRole("button", { name: "New thread" }),
+    );
 
-    await waitFor(() => {
-      expect(panelRowNames()).toEqual(["Docs"]);
-    });
-    expect(
-      window.localStorage.getItem("bb.sidebar.pluginPanelOrder") ?? "",
-    ).not.toContain("__builtin__/tools");
+    expect(onActivate).toHaveBeenCalledTimes(1);
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("list", { name: "Sidebar navigation" }),
+      ).toBeNull(),
+    );
   });
+});
 
-  it("carries both Extensions glyphs so hover swaps without reflow", () => {
-    renderSidebarItems({ toolsRoutePath: "/extensions/plugins" });
-
-    const extensionsRow = screen
-      .getAllByRole("button")
-      .find((button) => button.textContent?.trim() === "Extensions");
-    expect(extensionsRow).toBeTruthy();
+describe("ExtensionsNavSidebarItem", () => {
+  it("is host-owned and has no plugin-panel options menu", () => {
+    render(
+      <MemoryRouter>
+        <ExtensionsNavSidebarItem routePath="/extensions/plugins" />
+      </MemoryRouter>,
+    );
 
-    const swap = extensionsRow?.querySelector(".bb-sidebar-row-icon-swap");
-    expect(swap).toBeTruthy();
+    const row = screen.getByRole("button", { name: "Extensions" });
+    expect(row.querySelector(".bb-sidebar-row-icon-swap")).not.toBeNull();
     expect(
-      swap?.querySelector('.bb-sidebar-row-icon-rest[data-icon="Toolbox"]'),
-    ).toBeTruthy();
-    expect(
-      swap?.querySelector('.bb-sidebar-row-icon-hover[data-icon="ToolCase"]'),
-    ).toBeTruthy();
+      screen.queryByRole("button", { name: "Extensions panel options" }),
+    ).toBeNull();
   });
 });
diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
index 6f5eb33ad6..be64573537 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
@@ -1,7 +1,9 @@
 import {
   useCallback,
   useEffect,
+  useId,
   useMemo,
+  useRef,
   useState,
   type CSSProperties,
   type MouseEvent as ReactMouseEvent,
@@ -11,11 +13,14 @@ import {
 import { useLocation, useNavigate } from "react-router-dom";
 import { useAtom } from "jotai";
 import { DndContext, type DragEndEvent } from "@dnd-kit/core";
+import { FilterHorizontalIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
 import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { Button } from "@bb/shared-ui/button";
+import { Checkbox } from "@bb/shared-ui/checkbox";
 import { Icon } from "@bb/shared-ui/icon";
 import {
   ContextMenu,
@@ -29,15 +34,29 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@bb/shared-ui/dropdown-menu";
-import { COARSE_POINTER_ICON_SIZE_CLASS } from "@bb/shared-ui/coarse-pointer-sizing";
+import {
+  COARSE_POINTER_COMPACT_ROW_HEIGHT_CLASS,
+  COARSE_POINTER_ICON_SIZE_CLASS,
+  COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
+} from "@bb/shared-ui/coarse-pointer-sizing";
+import { CHROME_SECTION_LABEL_CLASS } from "@bb/shared-ui/chrome-style-tokens";
 import { useIsCompactViewport } from "@bb/shared-ui/hooks/use-compact-viewport";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@bb/shared-ui/popover";
 import { PluginIcon } from "@/components/plugin/PluginIcon";
 import { PluginSlotMount } from "@/components/plugin/PluginSlotMount";
 import { PROJECT_LIST_ACTION_BUTTON_CLASS } from "@/components/sidebar/ProjectList";
-import { getPluginPanelRoutePath } from "@/lib/route-paths";
+import {
+  AUTOMATIONS_PLUGIN_ID,
+  getPluginPanelRoutePath,
+} from "@/lib/route-paths";
 import {
   usePluginNavPanelChrome,
   type PluginNavPanelChrome,
+  type PluginNavPanelChromeEntry,
 } from "@/lib/plugin-nav-panel-chrome";
 import { cn } from "@bb/shared-ui/lib/utils";
 import type { PluginNavPanelSlot } from "@/lib/plugin-slots";
@@ -56,110 +75,228 @@ import { useSidebarSortable } from "@/components/sidebar/sortableMotion";
 import { useSidebarReorderDnd } from "@/components/sidebar/useSidebarReorderDnd";
 import type { SidebarSortableDragBindings } from "@/components/sidebar/sortableMotion";
 import {
-  hiddenPluginNavPanelsAtom,
   pluginNavPanelOrderAtom,
+  pluginNavVisiblePanelKeysAtom,
 } from "./pluginNavSidebarAtoms";
 import {
-  arrangePluginNavPanels,
+  arrangePluginNavPanelPreferences,
+  BUILT_IN_SIDEBAR_NAVIGATION_KEYS,
   getPluginNavPanelKey,
   havePluginNavPanelOrdersDiverged,
-  hidePluginNavPanel,
   reorderPluginNavPanels,
-  seedLeadingNavPanelKeys,
-  showPluginNavPanel,
+  togglePluginNavPanelVisibility,
 } from "./pluginNavSidebarOrder";
 
-const BUILTIN_NAV_ROW_PLUGIN_ID = "__builtin__";
+const PLUGIN_NAV_VISIBLE_LIMIT = 3;
 
-const TOOLS_NAV_ROW_KEY = getPluginNavPanelKey({
-  pluginId: BUILTIN_NAV_ROW_PLUGIN_ID,
-  id: "tools",
-});
+type PluginSidebarNavRow = {
+  kind: "plugin";
+  pluginId: string;
+  id: string;
+  title: string;
+  chrome: PluginNavPanelChrome;
+  panel: PluginNavPanelSlot | null;
+};
 
-type SidebarNavRow =
-  | {
-      kind: "tools";
-      pluginId: string;
-      id: string;
-      title: string;
-      routePath: string;
-    }
-  | {
-      kind: "plugin";
-      pluginId: string;
-      id: string;
-      title: string;
-      chrome: PluginNavPanelChrome;
-      panel: PluginNavPanelSlot | null;
-    };
-
-export function PluginNavSidebarItems({
-  toolsRoutePath,
-  ...props
-}: {
+export interface BuiltInSidebarNavEntry {
+  kind: "built-in";
+  pluginId: "__bb__";
+  id: string;
+  title: string;
+  icon: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+  onActivate: () => void;
+}
+
+type SidebarNavRow = PluginSidebarNavRow | BuiltInSidebarNavEntry;
+
+function isPluginSidebarNavRow(
+  row: SidebarNavRow,
+): row is PluginSidebarNavRow {
+  return row.kind === "plugin";
+}
+
+export function getTraditionalPluginNavPanelEntries(
+  entries: readonly PluginNavPanelChromeEntry[],
+): PluginNavPanelChromeEntry[] {
+  return entries.filter(
+    ({ chrome }) => chrome.pluginId !== AUTOMATIONS_PLUGIN_ID,
+  );
+}
+
+export function PluginNavSidebarItems(props: {
+  builtInEntries?: readonly BuiltInSidebarNavEntry[];
+  compactCustomizeMode?: boolean;
+  entries?: readonly PluginNavPanelChromeEntry[];
+  leadingOrderKeys?: readonly string[];
+  onCompactCustomizeModeChange?: (isCustomizing: boolean) => void;
   onNavigate?: () => void;
   splitEnabled?: boolean;
-  toolsRoutePath?: string;
 }) {
-  const navPanels = usePluginNavPanelChrome();
-  const rows = useMemo<SidebarNavRow[]>(() => {
-    const pluginRows = navPanels.map<SidebarNavRow>(({ chrome, panel }) => ({
-      kind: "plugin",
-      pluginId: chrome.pluginId,
-      id: chrome.id,
-      title: chrome.title,
-      chrome,
-      panel,
-    }));
-    if (toolsRoutePath === undefined) return pluginRows;
-    return [
-      {
-        kind: "tools",
-        pluginId: BUILTIN_NAV_ROW_PLUGIN_ID,
-        id: "tools",
-        title: "Extensions",
-        routePath: toolsRoutePath,
-      },
-      ...pluginRows,
-    ];
-  }, [navPanels, toolsRoutePath]);
+  const discoveredEntries = usePluginNavPanelChrome();
+  const entries = props.entries ?? discoveredEntries;
+  const rows = useMemo<SidebarNavRow[]>(
+    () => [
+      ...(props.builtInEntries ?? []),
+      ...entries.map(({ chrome, panel }) => ({
+        kind: "plugin" as const,
+        pluginId: chrome.pluginId,
+        id: chrome.id,
+        title: chrome.title,
+        chrome,
+        panel,
+      })),
+    ],
+    [entries, props.builtInEntries],
+  );
+  const leadingOrderKeys = useMemo(
+    () =>
+      props.leadingOrderKeys ??
+      (props.builtInEntries ?? []).map(getPluginNavPanelKey),
+    [props.builtInEntries, props.leadingOrderKeys],
+  );
   if (rows.length === 0) return null;
-  return <PluginNavSidebarItemList {...props} rows={rows} />;
+  return (
+    <PluginNavSidebarItemList
+      rows={rows}
+      leadingOrderKeys={leadingOrderKeys}
+      splitEnabled={props.splitEnabled ?? false}
+      {...(props.compactCustomizeMode === undefined
+        ? {}
+        : { compactCustomizeMode: props.compactCustomizeMode })}
+      {...(props.onCompactCustomizeModeChange
+        ? {
+            onCompactCustomizeModeChange:
+              props.onCompactCustomizeModeChange,
+          }
+        : {})}
+      {...(props.onNavigate ? { onNavigate: props.onNavigate } : {})}
+    />
+  );
 }
 
 function PluginNavSidebarItemList({
+  compactCustomizeMode,
+  leadingOrderKeys,
+  onCompactCustomizeModeChange,
   onNavigate,
   rows,
   splitEnabled = false,
 }: {
+  compactCustomizeMode?: boolean;
+  leadingOrderKeys: readonly string[];
+  onCompactCustomizeModeChange?: (isCustomizing: boolean) => void;
   onNavigate?: () => void;
   rows: readonly SidebarNavRow[];
   splitEnabled?: boolean;
 }) {
   const location = useLocation();
+  const navigate = useNavigate();
+  const isCompactViewport = useIsCompactViewport();
   const [storedOrder, setStoredOrder] = useAtom(pluginNavPanelOrderAtom);
-  const [hiddenKeys, setHiddenKeys] = useAtom(hiddenPluginNavPanelsAtom);
-  const [isOverflowOpen, setIsOverflowOpen] = useState(false);
-
-  const { visible, hidden, normalizedOrder } = useMemo(() => {
-    const leadingKeys = rows.some((row) => row.kind === "tools")
-      ? [TOOLS_NAV_ROW_KEY]
-      : [];
-    return arrangePluginNavPanels({
-      panels: rows,
-      storedOrder: seedLeadingNavPanelKeys(storedOrder, leadingKeys),
-      hiddenKeys,
-    });
-  }, [hiddenKeys, rows, storedOrder]);
+  const [storedVisibleKeys, setStoredVisibleKeys] = useAtom(
+    pluginNavVisiblePanelKeysAtom,
+  );
+  const [uncontrolledCustomizeOpen, setUncontrolledCustomizeOpen] =
+    useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const restoreCustomizeTriggerFocusRef = useRef(false);
+  const isCustomizeOpen =
+    isCompactViewport && compactCustomizeMode !== undefined
+      ? compactCustomizeMode
+      : uncontrolledCustomizeOpen;
+  const setIsCustomizeOpen = useCallback(
+    (isOpen: boolean) => {
+      if (!isCompactViewport || compactCustomizeMode === undefined) {
+        setUncontrolledCustomizeOpen(isOpen);
+      }
+      if (isCompactViewport) {
+        onCompactCustomizeModeChange?.(isOpen);
+      }
+    },
+    [
+      compactCustomizeMode,
+      isCompactViewport,
+      onCompactCustomizeModeChange,
+    ],
+  );
+  const builtInKeys = useMemo(
+    () =>
+      rows
+        .filter((row) => row.kind === "built-in")
+        .map(getPluginNavPanelKey),
+    [rows],
+  );
+  const newLeadingKeys = useMemo(
+    () => leadingOrderKeys.filter((key) => !storedOrder.includes(key)),
+    [leadingOrderKeys, storedOrder],
+  );
+  const {
+    ordered,
+    normalizedOrder,
+    normalizedVisibleKeys,
+    visible,
+    visibleKeys,
+  } = useMemo(
+    () =>
+      arrangePluginNavPanelPreferences({
+        panels: rows,
+        storedOrder:
+          newLeadingKeys.length === 0
+            ? storedOrder
+            : [...newLeadingKeys, ...storedOrder],
+        storedVisibleKeys:
+          storedVisibleKeys === null || newLeadingKeys.length === 0
+            ? storedVisibleKeys
+            : [...newLeadingKeys, ...storedVisibleKeys],
+        defaultVisibleCount:
+          builtInKeys.length + PLUGIN_NAV_VISIBLE_LIMIT,
+      }),
+    [
+      builtInKeys,
+      newLeadingKeys,
+      rows,
+      storedOrder,
+      storedVisibleKeys,
+    ],
+  );
 
   useEffect(() => {
     if (!havePluginNavPanelOrdersDiverged(storedOrder, normalizedOrder)) return;
     setStoredOrder(normalizedOrder);
   }, [normalizedOrder, setStoredOrder, storedOrder]);
 
-  const visibleKeys = useMemo(
-    () => visible.map(getPluginNavPanelKey),
-    [visible],
+  useEffect(() => {
+    if (
+      storedVisibleKeys === null ||
+      normalizedVisibleKeys === null ||
+      !havePluginNavPanelOrdersDiverged(
+        storedVisibleKeys,
+        normalizedVisibleKeys,
+      )
+    ) {
+      return;
+    }
+    setStoredVisibleKeys(normalizedVisibleKeys);
+  }, [normalizedVisibleKeys, setStoredVisibleKeys, storedVisibleKeys]);
+
+  const orderedKeys = useMemo(
+    () => ordered.map(getPluginNavPanelKey),
+    [ordered],
+  );
+
+  const setPanelVisible = useCallback(
+    (key: string, isVisible: boolean) => {
+      setStoredVisibleKeys(
+        togglePluginNavPanelVisibility(
+          normalizedVisibleKeys ?? visibleKeys,
+          key,
+          isVisible,
+        ),
+      );
+    },
+    [normalizedVisibleKeys, setStoredVisibleKeys, visibleKeys],
   );
 
   const handleDragEnd = useCallback(
@@ -171,11 +308,14 @@ function PluginNavSidebarItemList({
       ) {
         return;
       }
+      const activeGroupKeys = visibleKeys;
+      if (!activeGroupKeys.includes(event.active.id)) return;
+      if (!activeGroupKeys.includes(event.over.id)) return;
       const nextOrder = reorderPluginNavPanels({
         activeKey: event.active.id,
         overKey: event.over.id,
         order: normalizedOrder,
-        visibleKeys,
+        visibleKeys: activeGroupKeys,
       });
       if (nextOrder) setStoredOrder(nextOrder);
     },
@@ -185,104 +325,475 @@ function PluginNavSidebarItemList({
     onDragEnd: handleDragEnd,
   });
 
-  const handleHide = useCallback(
-    (key: string) => {
-      setHiddenKeys((current) => hidePluginNavPanel(current, key));
-    },
-    [setHiddenKeys],
-  );
-  const handleShow = useCallback(
-    (key: string) => {
-      setHiddenKeys((current) => showPluginNavPanel(current, key));
+  const handleCustomizeDragEnd = useCallback(
+    (activeKey: string, overKey: string) => {
+      const nextOrder = reorderPluginNavPanels({
+        activeKey,
+        overKey,
+        order: normalizedOrder,
+        visibleKeys: orderedKeys,
+      });
+      if (nextOrder) setStoredOrder(nextOrder);
     },
-    [setHiddenKeys],
+    [normalizedOrder, orderedKeys, setStoredOrder],
   );
 
-  const reorderDisabled = visible.length < 2;
+  const reorderDisabled = ordered.length < 2;
   const rowProps = {
     onNavigate,
     pathname: location.pathname,
     splitEnabled,
+    onHide: (key: string) => setPanelVisible(key, false),
   };
 
+  const handleActivate = useCallback(
+    (row: SidebarNavRow) => {
+      if (!isPluginSidebarNavRow(row)) {
+        row.onActivate();
+        return;
+      }
+      onNavigate?.();
+      void navigate(
+        getPluginPanelRoutePath({
+          pluginId: row.chrome.pluginId,
+          path: row.chrome.path,
+        }),
+      );
+    },
+    [navigate, onNavigate],
+  );
+
+  useEffect(() => {
+    if (isCustomizeOpen || !restoreCustomizeTriggerFocusRef.current) return;
+    restoreCustomizeTriggerFocusRef.current = false;
+    containerRef.current
+      ?.querySelector<HTMLElement>(
+        '[data-testid="sidebar-navigation-customize-trigger"]',
+      )
+      ?.focus();
+  }, [isCustomizeOpen]);
+
+  if (isCompactViewport && isCustomizeOpen) {
+    return (
+      <div
+        ref={containerRef}
+        className="flex min-h-0 flex-1 flex-col px-2 py-2 group-data-[collapsible=icon]:hidden"
+        data-testid="plugin-nav-sidebar-items"
+        data-sidebar-navigation-customize-mode="true"
+      >
+        <SidebarNavigationInlineCustomizeMode
+          rows={ordered}
+          visibleKeys={visibleKeys}
+          onActivate={handleActivate}
+          onBack={() => {
+            restoreCustomizeTriggerFocusRef.current = true;
+            setIsCustomizeOpen(false);
+          }}
+          onExit={() => setIsCustomizeOpen(false)}
+          onDragEnd={handleCustomizeDragEnd}
+          onVisibleChange={setPanelVisible}
+        />
+      </div>
+    );
+  }
+
   return (
     <div
-      className="-mt-1.5 shrink-0 space-y-0.5 px-2 pb-2 group-data-[collapsible=icon]:hidden"
+      ref={containerRef}
+      className="shrink-0 space-y-0.5 px-2 py-2 group-data-[collapsible=icon]:hidden"
       data-testid="plugin-nav-sidebar-items"
       onClickCapture={onClickCapture}
     >
+      {!visibleKeys.includes(BUILT_IN_SIDEBAR_NAVIGATION_KEYS.newThread) ? (
+        <div className="flex min-w-0 items-center justify-end">
+          <SidebarNavigationCustomizeMenu
+            isOpen={isCustomizeOpen}
+            rows={ordered}
+            visibleKeys={visibleKeys}
+            onActivate={handleActivate}
+            onDragEnd={handleCustomizeDragEnd}
+            onOpenChange={setIsCustomizeOpen}
+            onVisibleChange={setPanelVisible}
+          />
+        </div>
+      ) : null}
       <DndContext {...dndContextProps}>
         <SortableContext
           items={visibleKeys}
           strategy={verticalListSortingStrategy}
         >
-          {visible.map((row) => (
-            <SortableSidebarNavRow
-              key={getPluginNavPanelKey(row)}
-              row={row}
-              reorderDisabled={reorderDisabled}
-              onHide={handleHide}
-              {...rowProps}
-            />
-          ))}
+          {visible.map((row) =>
+            isPluginSidebarNavRow(row) ? (
+              <SortableSidebarNavRow
+                key={getPluginNavPanelKey(row)}
+                row={row}
+                reorderDisabled={reorderDisabled}
+                {...rowProps}
+              />
+            ) : (
+              <div
+                key={getPluginNavPanelKey(row)}
+                data-sidebar-navigation-item={getPluginNavPanelKey(row)}
+              >
+                {getPluginNavPanelKey(row) ===
+                BUILT_IN_SIDEBAR_NAVIGATION_KEYS.newThread ? (
+                  <div
+                    className="flex min-w-0 items-center gap-0.5"
+                    data-sidebar-navigation-primary-row
+                  >
+                    <div className="min-w-0 flex-1">{row.content}</div>
+                    <SidebarNavigationCustomizeMenu
+                      isOpen={isCustomizeOpen}
+                      rows={ordered}
+                      visibleKeys={visibleKeys}
+                      onActivate={handleActivate}
+                      onDragEnd={handleCustomizeDragEnd}
+                      onOpenChange={setIsCustomizeOpen}
+                      onVisibleChange={setPanelVisible}
+                    />
+                  </div>
+                ) : (
+                  row.content
+                )}
+              </div>
+            ),
+          )}
         </SortableContext>
       </DndContext>
-      {hidden.length > 0 ? (
-        <>
-          <PluginNavSidebarOverflowToggle
-            count={hidden.length}
-            isOpen={isOverflowOpen}
-            onToggle={() => setIsOverflowOpen((open) => !open)}
-          />
-          {isOverflowOpen
-            ? hidden.map((row) => (
-                <SidebarNavRowItem
-                  key={getPluginNavPanelKey(row)}
-                  row={row}
-                  isHidden
-                  onShow={handleShow}
-                  {...rowProps}
-                />
-              ))
-            : null}
-        </>
-      ) : null}
     </div>
   );
 }
 
-function PluginNavSidebarOverflowToggle({
-  count,
+function SidebarNavigationInlineCustomizeMode({
+  onActivate,
+  onBack,
+  onDragEnd,
+  onExit,
+  onVisibleChange,
+  rows,
+  visibleKeys,
+}: {
+  onActivate: (row: SidebarNavRow) => void;
+  onBack: () => void;
+  onDragEnd: (activeKey: string, overKey: string) => void;
+  onExit: () => void;
+  onVisibleChange: (key: string, visible: boolean) => void;
+  rows: readonly SidebarNavRow[];
+  visibleKeys: readonly string[];
+}) {
+  const backButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    backButtonRef.current?.focus();
+  }, []);
+
+  return (
+    <div
+      className="flex min-h-0 flex-1 flex-col"
+      data-testid="sidebar-navigation-customize-inline"
+    >
+      <div className="flex shrink-0 items-center gap-1">
+        <Button
+          ref={backButtonRef}
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label="Back to sidebar"
+          className={cn(
+            COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
+            "shrink-0 text-muted-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-2",
+          )}
+          onClick={onBack}
+        >
+          <Icon name="ChevronLeft" aria-hidden="true" />
+        </Button>
+        <div className={cn("min-w-0 flex-1 px-1", CHROME_SECTION_LABEL_CLASS)}>
+          Customize sidebar
+        </div>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto pt-1">
+        <SidebarNavigationCustomizeList
+          rows={rows}
+          visibleKeys={visibleKeys}
+          surface="sidebar"
+          onActivate={(row) => {
+            onActivate(row);
+            onExit();
+          }}
+          onDragEnd={onDragEnd}
+          onVisibleChange={onVisibleChange}
+        />
+      </div>
+    </div>
+  );
+}
+
+function SidebarNavigationCustomizeMenu({
   isOpen,
-  onToggle,
+  onActivate,
+  onDragEnd,
+  onOpenChange,
+  onVisibleChange,
+  rows,
+  visibleKeys,
 }: {
-  count: number;
   isOpen: boolean;
-  onToggle: () => void;
+  onActivate: (row: SidebarNavRow) => void;
+  onDragEnd: (activeKey: string, overKey: string) => void;
+  onOpenChange: (isOpen: boolean) => void;
+  onVisibleChange: (key: string, visible: boolean) => void;
+  rows: readonly SidebarNavRow[];
+  visibleKeys: readonly string[];
 }) {
-  return (
+  const isCompactViewport = useIsCompactViewport();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const trigger = (
     <Button
       type="button"
-      size="sm"
       variant="ghost"
-      aria-expanded={isOpen}
+      size="icon"
+      aria-label="Customize sidebar navigation"
+      aria-expanded={isCompactViewport ? isOpen : undefined}
       className={cn(
-        PROJECT_LIST_ACTION_BUTTON_CLASS,
-        "w-full text-subtle-foreground/75",
+        COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
+        "shrink-0 text-subtle-foreground opacity-60 ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground hover:opacity-100 focus-visible:ring-2 focus-visible:opacity-100 max-md:pointer-coarse:[&_svg]:size-5 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-foreground data-[state=open]:opacity-100",
       )}
-      onClick={onToggle}
-      data-testid="plugin-nav-sidebar-overflow-toggle"
+      data-testid="sidebar-navigation-customize-trigger"
+      {...(isCompactViewport
+        ? { onClick: () => onOpenChange(true) }
+        : {})}
     >
-      <Icon
-        name="ChevronRight"
+      <HugeiconsIcon icon={FilterHorizontalIcon} aria-hidden="true" />
+    </Button>
+  );
+
+  if (isCompactViewport) {
+    return <span className="inline-flex shrink-0">{trigger}</span>;
+  }
+
+  return (
+    <Popover open={isOpen} onOpenChange={onOpenChange}>
+      <span className="inline-flex shrink-0">
+        <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      </span>
+      <PopoverContent
+        ref={contentRef}
+        side="right"
+        align="start"
+        sideOffset={8}
+        className="w-52 p-2"
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+          contentRef.current
+            ?.querySelector<HTMLElement>(
+              "[data-sidebar-navigation-customize-launch]",
+            )
+            ?.focus();
+        }}
+      >
+        <div className={cn("px-2 py-1", CHROME_SECTION_LABEL_CLASS)}>
+          Customize sidebar
+        </div>
+        <SidebarNavigationCustomizeList
+          rows={rows}
+          visibleKeys={visibleKeys}
+          onActivate={(row) => {
+            onActivate(row);
+            onOpenChange(false);
+          }}
+          onDragEnd={onDragEnd}
+          onVisibleChange={onVisibleChange}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function SidebarNavigationCustomizeList({
+  onActivate,
+  onDragEnd,
+  onVisibleChange,
+  rows,
+  surface = "popover",
+  visibleKeys,
+}: {
+  onActivate: (row: SidebarNavRow) => void;
+  onDragEnd: (activeKey: string, overKey: string) => void;
+  onVisibleChange: (key: string, visible: boolean) => void;
+  rows: readonly SidebarNavRow[];
+  surface?: "popover" | "sidebar";
+  visibleKeys: readonly string[];
+}) {
+  const orderedKeys = useMemo(
+    () => rows.map(getPluginNavPanelKey),
+    [rows],
+  );
+  const visibleKeySet = useMemo(() => new Set(visibleKeys), [visibleKeys]);
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      if (
+        typeof event.active.id !== "string" ||
+        typeof event.over?.id !== "string"
+      ) {
+        return;
+      }
+      onDragEnd(event.active.id, event.over.id);
+    },
+    [onDragEnd],
+  );
+  const { dndContextProps, onClickCapture } = useSidebarReorderDnd({
+    onDragEnd: handleDragEnd,
+  });
+
+  return (
+    <div
+      role="list"
+      aria-label="Sidebar navigation"
+      className="space-y-0.5"
+      onClickCapture={onClickCapture}
+    >
+      <DndContext {...dndContextProps}>
+        <SortableContext
+          items={orderedKeys}
+          strategy={verticalListSortingStrategy}
+        >
+          {rows.map((row) => {
+            const key = getPluginNavPanelKey(row);
+            return (
+              <SortableSidebarNavigationCustomizeItem
+                key={key}
+                row={row}
+                checked={visibleKeySet.has(key)}
+                reorderDisabled={rows.length < 2}
+                surface={surface}
+                onActivate={() => onActivate(row)}
+                onCheckedChange={(checked) =>
+                  onVisibleChange(key, checked)
+                }
+              />
+            );
+          })}
+        </SortableContext>
+      </DndContext>
+    </div>
+  );
+}
+
+function SortableSidebarNavigationCustomizeItem({
+  checked,
+  onActivate,
+  onCheckedChange,
+  reorderDisabled,
+  row,
+  surface,
+}: {
+  checked: boolean;
+  onActivate: () => void;
+  onCheckedChange: (checked: boolean) => void;
+  reorderDisabled: boolean;
+  row: SidebarNavRow;
+  surface: "popover" | "sidebar";
+}) {
+  const panelKey = getPluginNavPanelKey(row);
+  const checkboxId = useId();
+  const { dragBindings, setNodeRef, style } = useSidebarSortable({
+    id: panelKey,
+    disabled: reorderDisabled,
+  });
+  const icon = isPluginSidebarNavRow(row) ? (
+    <PluginIcon pluginId={row.chrome.pluginId} icon={row.chrome.icon} />
+  ) : (
+    row.icon
+  );
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      role="listitem"
+      className={cn(
+        "group flex min-h-7 items-center rounded-md px-1 text-xs",
+        surface === "sidebar"
+          ? cn(
+              COARSE_POINTER_COMPACT_ROW_HEIGHT_CLASS,
+              "text-sidebar-foreground hover:bg-sidebar-accent focus-within:bg-sidebar-accent",
+            )
+          : "text-popover-foreground hover:bg-state-hover focus-within:bg-state-hover",
+      )}
+      data-plugin-nav-customize-item={panelKey}
+    >
+      <button
+        type="button"
+        ref={dragBindings.setActivatorNodeRef}
+        {...dragBindings.attributes}
+        {...dragBindings.listeners}
+        aria-label={`Reorder ${row.title}`}
         className={cn(
-          "size-3 shrink-0 transition-transform duration-150",
-          isOpen && "rotate-90",
+          "flex size-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-sm text-subtle-foreground/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
+          surface === "sidebar"
+            ? cn(
+                COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
+                "hover:text-sidebar-foreground focus-visible:text-sidebar-foreground",
+              )
+            : "hover:text-popover-foreground focus-visible:text-popover-foreground",
         )}
-        aria-hidden="true"
-      />
-      <span className="min-w-0 truncate text-left">{`More (${count})`}</span>
-    </Button>
+        onClick={(event) => event.stopPropagation()}
+        data-plugin-nav-customize-drag-handle={panelKey}
+      >
+        <Icon
+          name="DragDropVertical"
+          className={COARSE_POINTER_ICON_SIZE_CLASS}
+        />
+      </button>
+      <button
+        type="button"
+        disabled={!isPluginSidebarNavRow(row) && row.disabled}
+        className={cn(
+          "flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-sm px-1 text-left outline-none disabled:cursor-default disabled:opacity-50",
+          surface === "sidebar"
+            ? COARSE_POINTER_COMPACT_ROW_HEIGHT_CLASS
+            : "min-h-7",
+        )}
+        onClick={onActivate}
+        data-sidebar-navigation-customize-launch={panelKey}
+      >
+        <span className="flex size-4 shrink-0 items-center justify-center">
+          {icon}
+        </span>
+        <span className="min-w-0 flex-1 truncate">{row.title}</span>
+      </button>
+      {surface === "sidebar" ? (
+        <label
+          htmlFor={checkboxId}
+          className={cn(
+            COARSE_POINTER_ROW_ACTION_SIZE_CLASS,
+            "flex shrink-0 cursor-pointer items-center justify-center",
+          )}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <Checkbox
+            id={checkboxId}
+            checked={checked}
+            aria-label={`Show ${row.title} in sidebar`}
+            onCheckedChange={(nextChecked) =>
+              onCheckedChange(nextChecked === true)
+            }
+            data-plugin-nav-customize-checkbox={panelKey}
+          />
+        </label>
+      ) : (
+        <Checkbox
+          checked={checked}
+          aria-label={`Show ${row.title} in sidebar`}
+          onCheckedChange={(nextChecked) =>
+            onCheckedChange(nextChecked === true)
+          }
+          onClick={(event) => event.stopPropagation()}
+          data-plugin-nav-customize-checkbox={panelKey}
+          className="mx-1"
+        />
+      )}
+    </div>
   );
 }
 
@@ -307,13 +818,11 @@ const SortableSidebarNavRow = function SortableSidebarNavRow({
 };
 
 interface SidebarNavRowItemProps {
-  row: SidebarNavRow;
+  row: PluginSidebarNavRow;
   pathname: string;
   onNavigate?: () => void;
   splitEnabled: boolean;
-  isHidden?: boolean;
   onHide?: (key: string) => void;
-  onShow?: (key: string) => void;
   dragBindings?: SidebarSortableDragBindings;
   rowRef?: (element: HTMLElement | null) => void;
   rowStyle?: CSSProperties;
@@ -324,9 +833,7 @@ function SidebarNavRowItem({
   splitEnabled,
   ...props
 }: SidebarNavRowItemProps) {
-  return row.kind === "tools" ? (
-    <ToolsNavSidebarItem {...props} row={row} />
-  ) : (
+  return (
     <PluginNavSidebarItem {...props} row={row} splitEnabled={splitEnabled} />
   );
 }
@@ -334,18 +841,16 @@ function SidebarNavRowItem({
 type PluginNavRowMenuSurface = "context" | "dropdown";
 
 function PluginNavRowVisibilityMenuItem({
-  isHidden,
   onSelect,
   surface,
 }: {
-  isHidden: boolean;
   onSelect: () => void;
   surface: PluginNavRowMenuSurface;
 }) {
   const content = (
     <>
-      <Icon name={isHidden ? "Eye" : "EyeOff"} aria-hidden="true" />
-      {isHidden ? "Show in sidebar" : "Hide from sidebar"}
+      <Icon name="EyeOff" aria-hidden="true" />
+      Hide from sidebar
     </>
   );
   return surface === "context" ? (
@@ -364,27 +869,65 @@ function ToolsNavSidebarItemIcon() {
   );
 }
 
-function ToolsNavSidebarItem({
-  row,
-  pathname: _pathname,
+export function ExtensionsNavSidebarItem({
+  routePath,
   onNavigate,
-  ...props
-}: Omit<SidebarNavRowItemProps, "row" | "splitEnabled"> & {
-  row: Extract<SidebarNavRow, { kind: "tools" }>;
+}: {
+  routePath: string;
+  onNavigate?: () => void;
 }) {
   const navigate = useNavigate();
   return (
-    <SidebarNavRowChrome
-      {...props}
-      rowKey={getPluginNavPanelKey(row)}
-      title={row.title}
-      icon={<ToolsNavSidebarItemIcon />}
-      isActive={false}
-      onSelect={() => {
+    <Button
+      type="button"
+      size="sm"
+      variant="ghost"
+      className={cn(PROJECT_LIST_ACTION_BUTTON_CLASS, "w-full")}
+      onClick={() => {
         onNavigate?.();
-        void navigate(row.routePath);
+        void navigate(routePath);
       }}
-    />
+    >
+      <ToolsNavSidebarItemIcon />
+      <span className="min-w-0 truncate text-left">Extensions</span>
+    </Button>
+  );
+}
+
+export function AutomationsNavSidebarItem({
+  chrome,
+  onNavigate,
+}: {
+  chrome: PluginNavPanelChrome;
+  onNavigate?: () => void;
+}) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const path = getPluginPanelRoutePath({
+    pluginId: chrome.pluginId,
+    path: chrome.path,
+  });
+  const isActive =
+    location.pathname === path || location.pathname.startsWith(`${path}/`);
+  return (
+    <Button
+      type="button"
+      size="sm"
+      variant="ghost"
+      className={cn(
+        PROJECT_LIST_ACTION_BUTTON_CLASS,
+        "w-full",
+        isActive && "bg-sidebar-accent text-sidebar-foreground",
+      )}
+      aria-current={isActive ? "page" : undefined}
+      onClick={() => {
+        onNavigate?.();
+        void navigate(path);
+      }}
+    >
+      <PluginIcon pluginId={chrome.pluginId} icon={chrome.icon} />
+      <span className="min-w-0 truncate text-left">{chrome.title}</span>
+    </Button>
   );
 }
 
@@ -394,9 +937,7 @@ function PluginNavSidebarItem({
   onNavigate,
   splitEnabled,
   ...props
-}: Omit<SidebarNavRowItemProps, "row"> & {
-  row: Extract<SidebarNavRow, { kind: "plugin" }>;
-}) {
+}: SidebarNavRowItemProps) {
   const { chrome, panel } = row;
   const navigate = useNavigate();
   const isCompactViewport = useIsCompactViewport();
@@ -410,6 +951,7 @@ function PluginNavSidebarItem({
     panelPath: chrome.path,
     subPath: "",
   } as const;
+  const rowKey = getPluginNavPanelKey(row);
   const { onPointerDown, openInSplit } = usePaneContentSplitDrag({
     content,
     enabled: splitEnabled,
@@ -433,7 +975,7 @@ function PluginNavSidebarItem({
   return (
     <SidebarNavRowChrome
       {...props}
-      rowKey={getPluginNavPanelKey(row)}
+      rowKey={rowKey}
       title={chrome.title}
       icon={<PluginIcon pluginId={chrome.pluginId} icon={chrome.icon} />}
       isActive={pathname === path || pathname.startsWith(`${path}/`)}
@@ -459,11 +1001,9 @@ interface SidebarNavRowChromeProps {
   isActive: boolean;
   onSelect: (event: ReactMouseEvent<HTMLButtonElement>) => void;
   onPointerDown?: PointerEventHandler<HTMLElement>;
+  onHide?: (key: string) => void;
   splitMiniMap?: MiniMapSlot[] | null;
   accessory?: ReactNode;
-  isHidden?: boolean;
-  onHide?: (key: string) => void;
-  onShow?: (key: string) => void;
   dragBindings?: SidebarSortableDragBindings;
   rowRef?: (element: HTMLElement | null) => void;
   rowStyle?: CSSProperties;
@@ -476,11 +1016,9 @@ function SidebarNavRowChrome({
   isActive,
   onSelect,
   onPointerDown,
+  onHide,
   splitMiniMap = null,
   accessory,
-  isHidden = false,
-  onHide,
-  onShow,
   dragBindings,
   rowRef,
   rowStyle,
@@ -491,8 +1029,7 @@ function SidebarNavRowChrome({
   const visibilityItem = (surface: PluginNavRowMenuSurface): ReactNode => (
     <PluginNavRowVisibilityMenuItem
       surface={surface}
-      isHidden={isHidden}
-      onSelect={() => (isHidden ? onShow?.(rowKey) : onHide?.(rowKey))}
+      onSelect={() => onHide?.(rowKey)}
     />
   );
 
@@ -503,6 +1040,7 @@ function SidebarNavRowChrome({
           ref={rowRef}
           style={rowStyle}
           className={cn(SIDEBAR_HOVER_ACTIONS_ROW_CLASS, "relative")}
+          data-sidebar-navigation-item={rowKey}
         >
           <Button
             type="button"
@@ -513,7 +1051,6 @@ function SidebarNavRowChrome({
               "w-full pr-7",
               accessory && "pr-18",
               isActive && "bg-sidebar-accent text-sidebar-foreground",
-              isHidden && "text-subtle-foreground",
             )}
             aria-current={isActive ? "page" : undefined}
             ref={dragBindings?.setActivatorNodeRef}
diff --git a/apps/app/src/components/plugin/pluginNavSidebarAtoms.test.ts b/apps/app/src/components/plugin/pluginNavSidebarAtoms.test.ts
new file mode 100644
index 0000000000..e4fe1cb79f
--- /dev/null
+++ b/apps/app/src/components/plugin/pluginNavSidebarAtoms.test.ts
@@ -0,0 +1,178 @@
+// @vitest-environment jsdom
+
+import { createStore } from "jotai";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+afterEach(() => {
+  window.localStorage.clear();
+  vi.resetModules();
+});
+
+describe("pluginNavPanelOrderAtom migration", () => {
+  it("converts legacy hidden keys into positional overflow order", async () => {
+    window.localStorage.setItem(
+      "bb.sidebar.pluginPanelOrder",
+      JSON.stringify(["docs/main", "tasks/main", "github/main"]),
+    );
+    window.localStorage.setItem(
+      "bb.sidebar.hiddenPluginPanels",
+      JSON.stringify(["tasks/main", "docs/main"]),
+    );
+
+    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
+      await import("./pluginNavSidebarAtoms");
+    const store = createStore();
+
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
+      "github/main",
+      "docs/main",
+      "tasks/main",
+    ]);
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
+      "github/main",
+    ]);
+    expect(
+      window.localStorage.getItem("bb.sidebar.hiddenPluginPanels"),
+    ).toBeNull();
+  });
+
+  it("migrates visibility when it is read before order", async () => {
+    window.localStorage.setItem(
+      "bb.sidebar.pluginPanelOrder",
+      JSON.stringify(["docs/main", "tasks/main", "github/main"]),
+    );
+    window.localStorage.setItem(
+      "bb.sidebar.hiddenPluginPanels",
+      JSON.stringify(["tasks/main"]),
+    );
+
+    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
+      await import("./pluginNavSidebarAtoms");
+    const store = createStore();
+
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
+      "docs/main",
+      "github/main",
+    ]);
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
+      "docs/main",
+      "github/main",
+      "tasks/main",
+    ]);
+  });
+
+  it("migrates hidden Automations into the unified visibility preference", async () => {
+    window.localStorage.setItem(
+      "bb.sidebar.pluginPanelOrder",
+      JSON.stringify(["docs/main"]),
+    );
+    window.localStorage.setItem(
+      "bb.sidebar.hiddenPluginPanels",
+      JSON.stringify(["docs/main", "automations/main"]),
+    );
+
+    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
+      await import("./pluginNavSidebarAtoms");
+    const store = createStore();
+
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
+      "docs/main",
+      "__bb__/automations",
+    ]);
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([]);
+    expect(
+      window.localStorage.getItem("bb.sidebar.hiddenPluginPanels"),
+    ).toBeNull();
+  });
+
+  it("maps legacy built-in order and visibility keys to unified keys", async () => {
+    window.localStorage.setItem(
+      "bb.sidebar.pluginPanelOrder",
+      JSON.stringify(["__builtin__/tools", "automations/main", "docs/main"]),
+    );
+    window.localStorage.setItem(
+      "bb.sidebar.visiblePluginPanels",
+      JSON.stringify(["automations/main", "__builtin__/tools"]),
+    );
+
+    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
+      await import("./pluginNavSidebarAtoms");
+    const store = createStore();
+
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
+      "__bb__/extensions",
+      "__bb__/automations",
+      "docs/main",
+    ]);
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
+      "__bb__/automations",
+      "__bb__/extensions",
+    ]);
+  });
+
+  it("keeps fresh visibility unset so defaults can follow available rows", async () => {
+    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
+      await import("./pluginNavSidebarAtoms");
+    const store = createStore();
+
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([]);
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toBeNull();
+  });
+
+  it("does not overwrite an existing visibility preference during migration", async () => {
+    window.localStorage.setItem(
+      "bb.sidebar.pluginPanelOrder",
+      JSON.stringify(["docs/main", "tasks/main", "github/main"]),
+    );
+    window.localStorage.setItem(
+      "bb.sidebar.visiblePluginPanels",
+      JSON.stringify(["tasks/main"]),
+    );
+    window.localStorage.setItem(
+      "bb.sidebar.hiddenPluginPanels",
+      JSON.stringify(["docs/main"]),
+    );
+
+    const { pluginNavPanelOrderAtom, pluginNavVisiblePanelKeysAtom } =
+      await import("./pluginNavSidebarAtoms");
+    const store = createStore();
+
+    expect(store.get(pluginNavPanelOrderAtom)).toEqual([
+      "tasks/main",
+      "github/main",
+      "docs/main",
+    ]);
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual(["tasks/main"]);
+  });
+
+  it("persists an explicit empty visible list", async () => {
+    const { pluginNavVisiblePanelKeysAtom } = await import(
+      "./pluginNavSidebarAtoms"
+    );
+    const store = createStore();
+
+    store.set(pluginNavVisiblePanelKeysAtom, []);
+
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([]);
+    expect(
+      window.localStorage.getItem("bb.sidebar.visiblePluginPanels"),
+    ).toBe("[]");
+  });
+
+  it("normalizes persisted visible keys without discarding unregistered keys", async () => {
+    window.localStorage.setItem(
+      "bb.sidebar.visiblePluginPanels",
+      JSON.stringify(["docs/main", "future/main", "docs/main"]),
+    );
+
+    const { pluginNavVisiblePanelKeysAtom } = await import(
+      "./pluginNavSidebarAtoms"
+    );
+    const store = createStore();
+
+    expect(store.get(pluginNavVisiblePanelKeysAtom)).toEqual([
+      "docs/main",
+      "future/main",
+    ]);
+  });
+});
diff --git a/apps/app/src/components/plugin/pluginNavSidebarAtoms.ts b/apps/app/src/components/plugin/pluginNavSidebarAtoms.ts
index 036f1f9a41..63657d2167 100644
--- a/apps/app/src/components/plugin/pluginNavSidebarAtoms.ts
+++ b/apps/app/src/components/plugin/pluginNavSidebarAtoms.ts
@@ -1,19 +1,148 @@
 import { atomWithStorage } from "jotai/utils";
-import { createJsonLocalStorage } from "@/lib/browser-storage";
+import {
+  createJsonLocalStorage,
+  type SyncStorage,
+} from "@/lib/browser-storage";
+import { AUTOMATIONS_PLUGIN_ID } from "@/lib/route-paths";
+import {
+  BUILT_IN_SIDEBAR_NAVIGATION_KEYS,
+  migrateLegacyHiddenPluginNavPanelOrder,
+} from "./pluginNavSidebarOrder";
 
 const PLUGIN_NAV_PANEL_ORDER_STORAGE_KEY = "bb.sidebar.pluginPanelOrder";
+const VISIBLE_PLUGIN_NAV_PANELS_STORAGE_KEY =
+  "bb.sidebar.visiblePluginPanels";
 const HIDDEN_PLUGIN_NAV_PANELS_STORAGE_KEY = "bb.sidebar.hiddenPluginPanels";
+const LEGACY_EXTENSIONS_NAV_PANEL_KEY = "__builtin__/tools";
+
+function toSidebarNavigationKey(key: string): string {
+  if (key === LEGACY_EXTENSIONS_NAV_PANEL_KEY) {
+    return BUILT_IN_SIDEBAR_NAVIGATION_KEYS.extensions;
+  }
+  if (key.startsWith(`${AUTOMATIONS_PLUGIN_ID}/`)) {
+    return BUILT_IN_SIDEBAR_NAVIGATION_KEYS.automations;
+  }
+  return key;
+}
+
+function normalizeStringArray(value: unknown): string[] {
+  if (!Array.isArray(value)) return [];
+  return [
+    ...new Set(
+      value.filter((item): item is string => typeof item === "string"),
+    ),
+  ];
+}
+
+function normalizeSidebarNavigationKeys(value: unknown): string[] {
+  return [...new Set(normalizeStringArray(value).map(toSidebarNavigationKey))];
+}
+
+function normalizeVisiblePanelKeys(value: unknown): string[] | null {
+  return Array.isArray(value) ? normalizeSidebarNavigationKeys(value) : null;
+}
+
+function migrateLegacyPluginNavPreferences(
+  storage: SyncStorage<unknown>,
+  order: readonly string[],
+): string[] {
+  const normalizedOrder = normalizeSidebarNavigationKeys(order);
+  const legacyHiddenValue = storage.getItem(
+    HIDDEN_PLUGIN_NAV_PANELS_STORAGE_KEY,
+    null,
+  );
+  const legacyHidden = normalizeSidebarNavigationKeys(
+    legacyHiddenValue,
+  );
+  const migrated = migrateLegacyHiddenPluginNavPanelOrder(
+    normalizedOrder,
+    legacyHidden,
+  );
+  const storedVisibleKeys = normalizeVisiblePanelKeys(
+    storage.getItem(VISIBLE_PLUGIN_NAV_PANELS_STORAGE_KEY, null),
+  );
+  if (storedVisibleKeys === null && Array.isArray(legacyHiddenValue)) {
+    const hidden = new Set(legacyHidden);
+    storage.setItem(
+      VISIBLE_PLUGIN_NAV_PANELS_STORAGE_KEY,
+      migrated.filter((key) => !hidden.has(key)),
+    );
+  }
+  storage.setItem(PLUGIN_NAV_PANEL_ORDER_STORAGE_KEY, migrated);
+  storage.removeItem(HIDDEN_PLUGIN_NAV_PANELS_STORAGE_KEY);
+  return migrated;
+}
+
+function createPluginNavPanelOrderStorage(): SyncStorage<string[]> {
+  const storage = createJsonLocalStorage<unknown>();
+  return {
+    getItem(key, initialValue) {
+      const order = normalizeSidebarNavigationKeys(
+        storage.getItem(key, initialValue),
+      );
+      return migrateLegacyPluginNavPreferences(storage, order);
+    },
+    setItem(key, value) {
+      storage.setItem(key, normalizeSidebarNavigationKeys(value));
+    },
+    removeItem(key) {
+      storage.removeItem(key);
+    },
+    subscribe: (key, callback, initialValue) =>
+      storage.subscribe?.(
+        key,
+        (value) => callback(normalizeSidebarNavigationKeys(value)),
+        initialValue,
+      ),
+  };
+}
+
+function createPluginNavVisiblePanelKeysStorage(): SyncStorage<
+  string[] | null
+> {
+  const storage = createJsonLocalStorage<unknown>();
+  return {
+    getItem(key, initialValue) {
+      const storedVisibleKeys = normalizeVisiblePanelKeys(
+        storage.getItem(key, initialValue),
+      );
+      if (storedVisibleKeys !== null) return storedVisibleKeys;
+
+      const order = normalizeSidebarNavigationKeys(
+        storage.getItem(PLUGIN_NAV_PANEL_ORDER_STORAGE_KEY, []),
+      );
+      migrateLegacyPluginNavPreferences(storage, order);
+      return normalizeVisiblePanelKeys(storage.getItem(key, initialValue));
+    },
+    setItem(key, value) {
+      if (value === null) {
+        storage.removeItem(key);
+        return;
+      }
+      storage.setItem(key, normalizeSidebarNavigationKeys(value));
+    },
+    removeItem(key) {
+      storage.removeItem(key);
+    },
+    subscribe: (key, callback, initialValue) =>
+      storage.subscribe?.(
+        key,
+        (value) => callback(normalizeVisiblePanelKeys(value)),
+        initialValue,
+      ),
+  };
+}
 
 export const pluginNavPanelOrderAtom = atomWithStorage<string[]>(
   PLUGIN_NAV_PANEL_ORDER_STORAGE_KEY,
   [],
-  createJsonLocalStorage<string[]>(),
+  createPluginNavPanelOrderStorage(),
   { getOnInit: true },
 );
 
-export const hiddenPluginNavPanelsAtom = atomWithStorage<string[]>(
-  HIDDEN_PLUGIN_NAV_PANELS_STORAGE_KEY,
-  [],
-  createJsonLocalStorage<string[]>(),
+export const pluginNavVisiblePanelKeysAtom = atomWithStorage<string[] | null>(
+  VISIBLE_PLUGIN_NAV_PANELS_STORAGE_KEY,
+  null,
+  createPluginNavVisiblePanelKeysStorage(),
   { getOnInit: true },
 );
diff --git a/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts b/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts
index af433ed960..1326ddeb2d 100644
--- a/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts
+++ b/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts
@@ -1,9 +1,11 @@
 import { describe, expect, it } from "vitest";
 import {
+  arrangePluginNavPanelPreferences,
   arrangePluginNavPanels,
   getPluginNavPanelKey,
+  migrateLegacyHiddenPluginNavPanelOrder,
   reorderPluginNavPanels,
-  seedLeadingNavPanelKeys,
+  togglePluginNavPanelVisibility,
 } from "./pluginNavSidebarOrder";
 
 function panel(pluginId: string, id: string) {
@@ -16,13 +18,12 @@ const tasks = panel("tasks", "board");
 
 describe("arrangePluginNavPanels", () => {
   it("falls back to registry order before the user has reordered anything", () => {
-    const { visible, normalizedOrder } = arrangePluginNavPanels({
+    const { ordered, normalizedOrder } = arrangePluginNavPanels({
       panels: [github, docs, tasks],
       storedOrder: [],
-      hiddenKeys: [],
     });
 
-    expect(visible.map(getPluginNavPanelKey)).toEqual([
+    expect(ordered.map(getPluginNavPanelKey)).toEqual([
       "github/pulls",
       "docs/vault",
       "tasks/board",
@@ -34,28 +35,26 @@ describe("arrangePluginNavPanels", () => {
     ]);
   });
 
-  it("appends newly installed panels last instead of at the top of a customized list", () => {
-    const { visible } = arrangePluginNavPanels({
+  it("appends newly installed panels last", () => {
+    const { ordered } = arrangePluginNavPanels({
       panels: [github, docs, tasks],
       storedOrder: ["tasks/board", "github/pulls"],
-      hiddenKeys: [],
     });
 
-    expect(visible.map(getPluginNavPanelKey)).toEqual([
+    expect(ordered.map(getPluginNavPanelKey)).toEqual([
       "tasks/board",
       "github/pulls",
       "docs/vault",
     ]);
   });
 
-  it("renders no row for an unregistered key but keeps its slot in the order", () => {
-    const { visible, normalizedOrder } = arrangePluginNavPanels({
+  it("keeps unregistered keys in the normalized order", () => {
+    const { ordered, normalizedOrder } = arrangePluginNavPanels({
       panels: [github, docs],
       storedOrder: ["strudel/repl", "docs/vault", "github/pulls"],
-      hiddenKeys: [],
     });
 
-    expect(visible.map(getPluginNavPanelKey)).toEqual([
+    expect(ordered.map(getPluginNavPanelKey)).toEqual([
       "docs/vault",
       "github/pulls",
     ]);
@@ -65,115 +64,200 @@ describe("arrangePluginNavPanels", () => {
       "github/pulls",
     ]);
   });
+});
 
-  it("returns a late-registering panel to its stored slot", () => {
-    const { visible } = arrangePluginNavPanels({
-      panels: [github, docs, tasks],
-      storedOrder: ["tasks/board", "docs/vault", "github/pulls"],
-      hiddenKeys: [],
+describe("arrangePluginNavPanelPreferences", () => {
+  it("shows the first three ordered panels by default", () => {
+    const extra = panel("calendar", "agenda");
+    const result = arrangePluginNavPanelPreferences({
+      panels: [github, docs, tasks, extra],
+      storedOrder: ["tasks/board", "github/pulls"],
+      storedVisibleKeys: null,
+      defaultVisibleCount: 3,
     });
 
-    expect(visible.map(getPluginNavPanelKey)).toEqual([
+    expect(result.visible.map(getPluginNavPanelKey)).toEqual([
       "tasks/board",
+      "github/pulls",
       "docs/vault",
+    ]);
+    expect(result.ordered.map(getPluginNavPanelKey)).toEqual([
+      "tasks/board",
+      "github/pulls",
+      "docs/vault",
+      "calendar/agenda",
+    ]);
+    expect(result.visibleKeys).toEqual([
+      "tasks/board",
       "github/pulls",
+      "docs/vault",
     ]);
+    expect(result.normalizedVisibleKeys).toBeNull();
   });
 
-  it("splits hidden panels out while both lists keep the user's order", () => {
-    const { visible, hidden } = arrangePluginNavPanels({
+  it("keeps an explicit empty visible list meaningful", () => {
+    const result = arrangePluginNavPanelPreferences({
       panels: [github, docs, tasks],
-      storedOrder: ["tasks/board", "docs/vault", "github/pulls"],
-      hiddenKeys: ["docs/vault", "tasks/board"],
+      storedOrder: [],
+      storedVisibleKeys: [],
+      defaultVisibleCount: 3,
     });
 
-    expect(visible.map(getPluginNavPanelKey)).toEqual(["github/pulls"]);
-    expect(hidden.map(getPluginNavPanelKey)).toEqual([
+    expect(result.visible).toEqual([]);
+    expect(result.ordered.map(getPluginNavPanelKey)).toEqual([
+      "github/pulls",
+      "docs/vault",
       "tasks/board",
+    ]);
+    expect(result.normalizedVisibleKeys).toEqual([]);
+  });
+
+  it("preserves visibility for a temporarily unregistered panel", () => {
+    const result = arrangePluginNavPanelPreferences({
+      panels: [github, docs, tasks],
+      storedOrder: ["future/main", "docs/vault", "github/pulls"],
+      storedVisibleKeys: ["future/main", "github/pulls", "future/main"],
+      defaultVisibleCount: 3,
+    });
+
+    expect(result.visible.map(getPluginNavPanelKey)).toEqual(["github/pulls"]);
+    expect(result.ordered.map(getPluginNavPanelKey)).toEqual([
       "docs/vault",
+      "github/pulls",
+      "tasks/board",
+    ]);
+    expect(result.normalizedVisibleKeys).toEqual([
+      "future/main",
+      "github/pulls",
     ]);
   });
 
-  it("ignores duplicate stored keys so a corrupted list can't render a panel twice", () => {
-    const { visible } = arrangePluginNavPanels({
-      panels: [github, docs],
-      storedOrder: ["github/pulls", "github/pulls", "docs/vault"],
-      hiddenKeys: [],
+  it("keeps a newly installed panel unchecked", () => {
+    const result = arrangePluginNavPanelPreferences({
+      panels: [github, docs, tasks],
+      storedOrder: ["github/pulls", "docs/vault"],
+      storedVisibleKeys: ["github/pulls", "docs/vault"],
+      defaultVisibleCount: 3,
+    });
+
+    expect(result.visible.map(getPluginNavPanelKey)).toEqual([
+      "github/pulls",
+      "docs/vault",
+    ]);
+    expect(result.normalizedOrder).toEqual([
+      "github/pulls",
+      "docs/vault",
+      "tasks/board",
+    ]);
+  });
+
+  it("uses the master order for visible panels", () => {
+    const result = arrangePluginNavPanelPreferences({
+      panels: [github, docs, tasks],
+      storedOrder: ["tasks/board", "github/pulls", "docs/vault"],
+      storedVisibleKeys: ["docs/vault", "tasks/board"],
+      defaultVisibleCount: 3,
     });
 
-    expect(visible.map(getPluginNavPanelKey)).toEqual([
+    expect(result.visible.map(getPluginNavPanelKey)).toEqual([
+      "tasks/board",
+      "docs/vault",
+    ]);
+    expect(result.ordered.map(getPluginNavPanelKey)).toEqual([
+      "tasks/board",
       "github/pulls",
       "docs/vault",
     ]);
   });
 });
 
-describe("reorderPluginNavPanels", () => {
-  it("moves a visible row to the target slot", () => {
+describe("legacy hidden-panel migration", () => {
+  it("moves hidden keys behind visible keys while preserving both orders", () => {
     expect(
-      reorderPluginNavPanels({
-        activeKey: "tasks/board",
-        overKey: "github/pulls",
-        order: ["github/pulls", "docs/vault", "tasks/board"],
-        visibleKeys: ["github/pulls", "docs/vault", "tasks/board"],
-      }),
-    ).toEqual(["tasks/board", "github/pulls", "docs/vault"]);
+      migrateLegacyHiddenPluginNavPanelOrder(
+        ["tasks/board", "docs/vault", "github/pulls", "docs/vault"],
+        ["tasks/board", "docs/vault"],
+      ),
+    ).toEqual(["github/pulls", "tasks/board", "docs/vault"]);
   });
 
-  it("keeps hidden panels pinned to their index in the stored order", () => {
+  it("retains a hidden key missing from the stored order", () => {
     expect(
-      reorderPluginNavPanels({
-        activeKey: "tasks/board",
-        overKey: "github/pulls",
-        order: ["github/pulls", "docs/vault", "tasks/board"],
-        visibleKeys: ["github/pulls", "tasks/board"],
-      }),
-    ).toEqual(["tasks/board", "docs/vault", "github/pulls"]);
+      migrateLegacyHiddenPluginNavPanelOrder(
+        ["github/pulls"],
+        ["docs/vault"],
+      ),
+    ).toEqual(["github/pulls", "docs/vault"]);
   });
+});
+
+describe("reorderPluginNavPanels", () => {
+  it("moves a row across the full customization order", () => {
+    const order = [
+      "one/main",
+      "two/main",
+      "three/main",
+      "four/main",
+      "five/main",
+      "six/main",
+      "seven/main",
+    ];
 
-  it("returns null when the drag lands where it started", () => {
     expect(
       reorderPluginNavPanels({
-        activeKey: "github/pulls",
-        overKey: "github/pulls",
-        order: ["github/pulls", "docs/vault"],
-        visibleKeys: ["github/pulls", "docs/vault"],
+        activeKey: "one/main",
+        overKey: "six/main",
+        order,
+        visibleKeys: order,
       }),
-    ).toBeNull();
+    ).toEqual([
+      "two/main",
+      "three/main",
+      "four/main",
+      "five/main",
+      "six/main",
+      "one/main",
+      "seven/main",
+    ]);
   });
 
-  it("returns null when the drop target is not a visible row", () => {
+  it("returns null when the drag lands where it started", () => {
     expect(
       reorderPluginNavPanels({
         activeKey: "github/pulls",
-        overKey: "docs/vault",
+        overKey: "github/pulls",
         order: ["github/pulls", "docs/vault"],
-        visibleKeys: ["github/pulls"],
+        visibleKeys: ["github/pulls", "docs/vault"],
       }),
     ).toBeNull();
   });
 });
 
-describe("seedLeadingNavPanelKeys", () => {
-  it("leaves an untouched order empty so registry order still wins", () => {
-    expect(seedLeadingNavPanelKeys([], ["__builtin__/tools"])).toEqual([]);
-  });
+describe("togglePluginNavPanelVisibility", () => {
+  it("checks and unchecks panels without losing other keys", () => {
+    const checked = togglePluginNavPanelVisibility(
+      ["github/pulls", "future/main"],
+      "docs/vault",
+      true,
+    );
 
-  it("prepends a built-in key that a customized order predates", () => {
+    expect(checked).toEqual([
+      "github/pulls",
+      "future/main",
+      "docs/vault",
+    ]);
     expect(
-      seedLeadingNavPanelKeys(
-        ["github/pulls", "docs/vault"],
-        ["__builtin__/tools"],
-      ),
-    ).toEqual(["__builtin__/tools", "github/pulls", "docs/vault"]);
+      togglePluginNavPanelVisibility(checked, "github/pulls", false),
+    ).toEqual(["future/main", "docs/vault"]);
   });
 
-  it("keeps the user's slot for a built-in key they already moved", () => {
+  it("does not duplicate a checked panel", () => {
     expect(
-      seedLeadingNavPanelKeys(
-        ["github/pulls", "__builtin__/tools"],
-        ["__builtin__/tools"],
+      togglePluginNavPanelVisibility(
+        ["github/pulls", "github/pulls"],
+        "github/pulls",
+        true,
       ),
-    ).toEqual(["github/pulls", "__builtin__/tools"]);
+    ).toEqual(["github/pulls"]);
   });
 });
diff --git a/apps/app/src/components/plugin/pluginNavSidebarOrder.ts b/apps/app/src/components/plugin/pluginNavSidebarOrder.ts
index a8259963e4..bfa450418f 100644
--- a/apps/app/src/components/plugin/pluginNavSidebarOrder.ts
+++ b/apps/app/src/components/plugin/pluginNavSidebarOrder.ts
@@ -3,6 +3,20 @@ interface PluginNavPanelIdentity {
   id: string;
 }
 
+export const BUILT_IN_SIDEBAR_NAVIGATION_KEYS = {
+  newThread: "__bb__/new-thread",
+  searchThreads: "__bb__/search-threads",
+  extensions: "__bb__/extensions",
+  automations: "__bb__/automations",
+} as const;
+
+export const DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER = [
+  BUILT_IN_SIDEBAR_NAVIGATION_KEYS.newThread,
+  BUILT_IN_SIDEBAR_NAVIGATION_KEYS.searchThreads,
+  BUILT_IN_SIDEBAR_NAVIGATION_KEYS.extensions,
+  BUILT_IN_SIDEBAR_NAVIGATION_KEYS.automations,
+] as const;
+
 export function getPluginNavPanelKey(panel: PluginNavPanelIdentity): string {
   return `${panel.pluginId}/${panel.id}`;
 }
@@ -10,19 +24,31 @@ export function getPluginNavPanelKey(panel: PluginNavPanelIdentity): string {
 interface ArrangePluginNavPanelsArgs<TPanel extends PluginNavPanelIdentity> {
   panels: readonly TPanel[];
   storedOrder: readonly string[];
-  hiddenKeys: readonly string[];
 }
 
 interface ArrangedPluginNavPanels<TPanel extends PluginNavPanelIdentity> {
-  visible: TPanel[];
-  hidden: TPanel[];
+  ordered: TPanel[];
   normalizedOrder: string[];
 }
 
+interface ArrangePluginNavPanelPreferencesArgs<
+  TPanel extends PluginNavPanelIdentity,
+> extends ArrangePluginNavPanelsArgs<TPanel> {
+  storedVisibleKeys: readonly string[] | null;
+  defaultVisibleCount: number;
+}
+
+interface ArrangedPluginNavPanelPreferences<
+  TPanel extends PluginNavPanelIdentity,
+> extends ArrangedPluginNavPanels<TPanel> {
+  visible: TPanel[];
+  visibleKeys: string[];
+  normalizedVisibleKeys: string[] | null;
+}
+
 export function arrangePluginNavPanels<TPanel extends PluginNavPanelIdentity>({
   panels,
   storedOrder,
-  hiddenKeys,
 }: ArrangePluginNavPanelsArgs<TPanel>): ArrangedPluginNavPanels<TPanel> {
   const byKey = new Map(
     panels.map((panel) => [getPluginNavPanelKey(panel), panel]),
@@ -45,15 +71,55 @@ export function arrangePluginNavPanels<TPanel extends PluginNavPanelIdentity>({
     ordered.push(panel);
   }
 
-  const hiddenSet = new Set(hiddenKeys);
-  const visible: TPanel[] = [];
-  const hidden: TPanel[] = [];
-  for (const panel of ordered) {
-    if (hiddenSet.has(getPluginNavPanelKey(panel))) hidden.push(panel);
-    else visible.push(panel);
-  }
+  return { ordered, normalizedOrder };
+}
+
+export function arrangePluginNavPanelPreferences<
+  TPanel extends PluginNavPanelIdentity,
+>({
+  panels,
+  storedOrder,
+  storedVisibleKeys,
+  defaultVisibleCount,
+}: ArrangePluginNavPanelPreferencesArgs<TPanel>): ArrangedPluginNavPanelPreferences<TPanel> {
+  const { ordered, normalizedOrder } = arrangePluginNavPanels({
+    panels,
+    storedOrder,
+  });
+  const normalizedVisibleKeys =
+    storedVisibleKeys === null
+      ? null
+      : [...new Set(storedVisibleKeys.filter((key) => key.length > 0))];
+  const visibleKeys =
+    normalizedVisibleKeys ??
+    ordered
+      .slice(0, Math.max(0, defaultVisibleCount))
+      .map(getPluginNavPanelKey);
+  const visibleSet = new Set(visibleKeys);
 
-  return { visible, hidden, normalizedOrder };
+  return {
+    ordered,
+    normalizedOrder,
+    visible: ordered.filter((panel) =>
+      visibleSet.has(getPluginNavPanelKey(panel)),
+    ),
+    visibleKeys: ordered
+      .map(getPluginNavPanelKey)
+      .filter((key) => visibleSet.has(key)),
+    normalizedVisibleKeys,
+  };
+}
+
+export function togglePluginNavPanelVisibility(
+  visibleKeys: readonly string[],
+  key: string,
+  visible: boolean,
+): string[] {
+  const normalized = [...new Set(visibleKeys.filter((item) => item.length > 0))];
+  if (visible) {
+    return normalized.includes(key) ? normalized : [...normalized, key];
+  }
+  return normalized.filter((item) => item !== key);
 }
 
 interface ReorderPluginNavPanelsArgs {
@@ -84,28 +150,18 @@ export function reorderPluginNavPanels({
   );
 }
 
-export function seedLeadingNavPanelKeys(
+export function migrateLegacyHiddenPluginNavPanelOrder(
   order: readonly string[],
-  leadingKeys: readonly string[],
-): string[] {
-  const next = [...order];
-  if (next.length === 0) return next;
-  const missing = leadingKeys.filter((key) => !next.includes(key));
-  return missing.length === 0 ? next : [...missing, ...next];
-}
-
-export function hidePluginNavPanel(
   hiddenKeys: readonly string[],
-  key: string,
-): string[] {
-  return hiddenKeys.includes(key) ? [...hiddenKeys] : [...hiddenKeys, key];
-}
-
-export function showPluginNavPanel(
-  hiddenKeys: readonly string[],
-  key: string,
 ): string[] {
-  return hiddenKeys.filter((hiddenKey) => hiddenKey !== key);
+  const uniqueOrder = [
+    ...new Set([...order, ...hiddenKeys].filter((key) => key.length > 0)),
+  ];
+  const hidden = new Set(hiddenKeys);
+  return [
+    ...uniqueOrder.filter((key) => !hidden.has(key)),
+    ...uniqueOrder.filter((key) => hidden.has(key)),
+  ];
 }
 
 export function havePluginNavPanelOrdersDiverged(
diff --git a/apps/app/src/components/sidebar/AppSidebar.tsx b/apps/app/src/components/sidebar/AppSidebar.tsx
index 4bbfacf5b7..0b35c61c12 100644
--- a/apps/app/src/components/sidebar/AppSidebar.tsx
+++ b/apps/app/src/components/sidebar/AppSidebar.tsx
@@ -13,6 +13,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useCloseMobileSidebar,
+  useSidebar,
 } from "@/components/ui/sidebar.js";
 import { ProjectList } from "./ProjectList";
 import { PluginThreadList } from "./PluginThreadList";
@@ -85,6 +86,8 @@ export function AppSidebar({
     label: "New thread",
   });
   const closeOnMobile = useCloseMobileSidebar();
+  const { isCompactViewport, openMobile } = useSidebar();
+  const [compactCustomizeMode, setCompactCustomizeMode] = useState(false);
   const [desktopInfo] = useState(getBbDesktopInfo);
   const [threadShortcutKeysById, setThreadShortcutKeysById] = useState<
     ReadonlyMap<string, SidebarThreadShortcutPresentation>
@@ -171,6 +174,13 @@ export function AppSidebar({
   );
 
   const isHiddenHostedBody = mobileHosted?.hidden === true;
+  const isCompactCustomizeModeActive =
+    isCompactViewport && compactCustomizeMode;
+  useEffect(() => {
+    if (!isCompactViewport || !openMobile || isHiddenHostedBody) {
+      setCompactCustomizeMode(false);
+    }
+  }, [isCompactViewport, isHiddenHostedBody, openMobile]);
   const activateVisibleThreadShortcut = useCallback(
     (index: number) =>
       isHiddenHostedBody ? false : activateThreadShortcut(index),
@@ -228,6 +238,8 @@ export function AppSidebar({
         </div>
       ) : null}
       <SidebarNavigationRegion
+        compactCustomizeMode={isCompactCustomizeModeActive}
+        onCompactCustomizeModeChange={setCompactCustomizeMode}
         onNavigate={closeOnMobile}
         splitEnabled
         toolsRoutePath={toolsRoutePath}
@@ -235,19 +247,23 @@ export function AppSidebar({
         onNewChat={handleNewChat}
         onSearchThreads={closeOnMobile}
       />
-      <div
-        aria-hidden="true"
-        className="mx-2 my-2 shrink-0 border-t border-sidebar-border/25"
-        data-testid="app-sidebar-navigation-divider"
-      />
-      <SidebarContent>
-        <PluginThreadList
-          replacement={threadListReplacement}
-          original={originalThreadList}
-          searchQuery=""
-          onNavigate={closeOnMobile}
-        />
-      </SidebarContent>
+      {!isCompactCustomizeModeActive ? (
+        <>
+          <div
+            aria-hidden="true"
+            className="mx-2 my-2 shrink-0 border-t border-sidebar-border/25"
+            data-testid="app-sidebar-navigation-divider"
+          />
+          <SidebarContent>
+            <PluginThreadList
+              replacement={threadListReplacement}
+              original={originalThreadList}
+              searchQuery=""
+              onNavigate={closeOnMobile}
+            />
+          </SidebarContent>
+        </>
+      ) : null}
       <SidebarFooter className="relative">
         <OverflowFade placement="above" tone="sidebar" size="sm" />
         {}
diff --git a/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx b/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
index ec40b35299..99d2aa2c7c 100644
--- a/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
+++ b/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
@@ -1,38 +1,156 @@
 import type { ComponentProps } from "react";
-import { PluginNavSidebarItems } from "@/components/plugin/PluginNavSidebarItems";
-import { ProjectListActionButtons } from "./ProjectList";
+import { useNavigate } from "react-router-dom";
+import {
+  AutomationsNavSidebarItem,
+  type BuiltInSidebarNavEntry,
+  ExtensionsNavSidebarItem,
+  getTraditionalPluginNavPanelEntries,
+  PluginNavSidebarItems,
+} from "@/components/plugin/PluginNavSidebarItems";
+import { useAppCommandRunner } from "@/components/commands/AppCommandProvider";
+import { PluginIcon } from "@/components/plugin/PluginIcon";
+import { Icon } from "@bb/shared-ui/icon";
+import { usePluginNavPanelChrome } from "@/lib/plugin-nav-panel-chrome";
+import {
+  AUTOMATIONS_PLUGIN_ID,
+  getPluginPanelRoutePath,
+} from "@/lib/route-paths";
+import {
+  ProjectListNewThreadAction,
+  ProjectListSearchThreadsAction,
+} from "./ProjectList";
+import { DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER } from "@/components/plugin/pluginNavSidebarOrder";
 
 export type BuiltInSidebarNavigationProps = ComponentProps<
-  typeof ProjectListActionButtons
+  typeof ProjectListNewThreadAction
 > &
-  ComponentProps<typeof PluginNavSidebarItems>;
+  ComponentProps<typeof ProjectListSearchThreadsAction> &
+  ComponentProps<typeof PluginNavSidebarItems> & {
+    toolsRoutePath?: string;
+  };
 
 export function BuiltInSidebarNavigation({
+  compactCustomizeMode,
   newThreadSplit,
+  onCompactCustomizeModeChange,
   onNavigate,
   onNewChat,
   onSearchThreads,
   splitEnabled,
   toolsRoutePath,
 }: BuiltInSidebarNavigationProps) {
-  return (
-    <div className="contents" data-testid="built-in-sidebar-navigation">
-      <div
-        data-testid="app-sidebar-primary-actions"
-        className="shrink-0 px-2 py-2 group-data-[collapsible=icon]:hidden"
-      >
-        <ProjectListActionButtons
+  const navigate = useNavigate();
+  const commandRunner = useAppCommandRunner();
+  const pluginNavPanels = usePluginNavPanelChrome();
+  const automationsNavPanel = pluginNavPanels.find(
+    ({ chrome }) => chrome.pluginId === AUTOMATIONS_PLUGIN_ID,
+  );
+  const traditionalPluginNavPanels = getTraditionalPluginNavPanelEntries(
+    pluginNavPanels,
+  );
+  const builtInEntries: BuiltInSidebarNavEntry[] = [
+    {
+      kind: "built-in",
+      pluginId: "__bb__",
+      id: "new-thread",
+      title: "New thread",
+      icon: <Icon name="MessageSquarePlus" aria-hidden="true" />,
+      content: (
+        <ProjectListNewThreadAction
           splitEnabled={splitEnabled}
           newThreadSplit={newThreadSplit}
           onNewChat={onNewChat}
-          onSearchThreads={onSearchThreads}
+        />
+      ),
+      disabled: onNewChat === undefined,
+      onActivate: () => onNewChat?.(),
+    },
+    {
+      kind: "built-in",
+      pluginId: "__bb__",
+      id: "search-threads",
+      title: "Search threads",
+      icon: <Icon name="Search" aria-hidden="true" />,
+      content: (
+        <ProjectListSearchThreadsAction onSearchThreads={onSearchThreads} />
+      ),
+      disabled: !commandRunner.isCommandAvailable("thread.search", null),
+      onActivate: () => {
+        onSearchThreads?.();
+        commandRunner.dispatch("thread.search", null);
+      },
+    },
+    ...(toolsRoutePath
+      ? [
+          {
+            kind: "built-in" as const,
+            pluginId: "__bb__" as const,
+            id: "extensions",
+            title: "Extensions",
+            icon: <Icon name="Toolbox" aria-hidden="true" />,
+            content: (
+              <ExtensionsNavSidebarItem
+                routePath={toolsRoutePath}
+                onNavigate={onNavigate}
+              />
+            ),
+            onActivate: () => {
+              onNavigate?.();
+              void navigate(toolsRoutePath);
+            },
+          },
+        ]
+      : []),
+    ...(automationsNavPanel
+      ? [
+          {
+            kind: "built-in" as const,
+            pluginId: "__bb__" as const,
+            id: "automations",
+            title: automationsNavPanel.chrome.title,
+            icon: (
+              <PluginIcon
+                pluginId={automationsNavPanel.chrome.pluginId}
+                icon={automationsNavPanel.chrome.icon}
+              />
+            ),
+            content: (
+              <AutomationsNavSidebarItem
+                chrome={automationsNavPanel.chrome}
+                onNavigate={onNavigate}
+              />
+            ),
+            onActivate: () => {
+              onNavigate?.();
+              void navigate(
+                getPluginPanelRoutePath({
+                  pluginId: automationsNavPanel.chrome.pluginId,
+                  path: automationsNavPanel.chrome.path,
+                }),
+              );
+            },
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <div
+      className="contents"
+      data-testid="built-in-sidebar-navigation"
+      data-sidebar-navigation-unified="true"
+    >
+      <div className="contents" data-testid="app-sidebar-primary-actions">
+        <PluginNavSidebarItems
+          builtInEntries={builtInEntries}
+          compactCustomizeMode={compactCustomizeMode}
+          entries={traditionalPluginNavPanels}
+          leadingOrderKeys={DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER}
+          onCompactCustomizeModeChange={onCompactCustomizeModeChange}
+          onNavigate={onNavigate}
+          splitEnabled={splitEnabled}
         />
       </div>
-      <PluginNavSidebarItems
-        onNavigate={onNavigate}
-        splitEnabled={splitEnabled}
-        toolsRoutePath={toolsRoutePath}
-      />
     </div>
   );
 }
diff --git a/apps/app/src/components/sidebar/ProjectList.tsx b/apps/app/src/components/sidebar/ProjectList.tsx
index e9d6e8c38d..a5245aaabc 100644
--- a/apps/app/src/components/sidebar/ProjectList.tsx
+++ b/apps/app/src/components/sidebar/ProjectList.tsx
@@ -174,7 +174,8 @@ interface ProjectListSearchThreadsActionProps {
 }
 
 interface ProjectListActionButtonsProps
-  extends ProjectListNewThreadActionProps,
+  extends
+    ProjectListNewThreadActionProps,
     ProjectListSearchThreadsActionProps {}
 
 interface ProjectListShellProps {
@@ -795,7 +796,7 @@ export function ProjectListNewThreadAction({
     >
       <Icon name="MessageSquarePlus" />
       <span className="flex min-w-0 flex-1 items-center gap-1.5">
-        <span className="min-w-0 truncate text-left">New thread</span>
+        <span className="min-w-0 flex-1 truncate text-left">New thread</span>
         {newThreadSplitIndicator.miniMap ? (
           <SplitPaneMiniMap
             slots={newThreadSplitIndicator.miniMap}
diff --git a/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx b/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
index 491980c5fa..6676cd89fe 100644
--- a/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
+++ b/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
@@ -29,7 +29,10 @@ vi.mock("@/components/commands/AppCommandProvider", () => ({
   useIsAppCommandModifierHeld: () => false,
 }));
 vi.mock("@/components/plugin/PluginNavSidebarItems", () => ({
+  AutomationsNavSidebarItem: () => <div>Automations</div>,
+  ExtensionsNavSidebarItem: () => <div>Extensions</div>,
   PluginNavSidebarItems: () => <div>BB plugin destinations</div>,
+  getTraditionalPluginNavPanelEntries: (entries: readonly object[]) => entries,
 }));
 vi.mock("./usePaneContentSplitDrag", () => ({
   usePaneContentSplitActions: () => ({
diff --git a/apps/app/src/components/sidebar/SidebarNavigationRegion.tsx b/apps/app/src/components/sidebar/SidebarNavigationRegion.tsx
index 46db44e50e..3435d359a2 100644
--- a/apps/app/src/components/sidebar/SidebarNavigationRegion.tsx
+++ b/apps/app/src/components/sidebar/SidebarNavigationRegion.tsx
@@ -12,6 +12,7 @@ import type {
 } from "@get-bb/plugin-sdk";
 import { useLocation, useNavigate } from "react-router-dom";
 import { toast } from "sonner";
+import { cn } from "@bb/shared-ui/lib/utils";
 import {
   useAppCommandRunner,
   useAppCommandShortcut,
@@ -233,6 +234,9 @@ export function SidebarNavigationRegion(props: BuiltInSidebarNavigationProps) {
     <nav
       aria-label="Sidebar navigation"
       data-testid="sidebar-navigation-region"
+      className={cn(
+        props.compactCustomizeMode && "flex min-h-0 flex-1 flex-col",
+      )}
     >
       <PluginReplacementSlot
         replacement={replacement}
diff --git a/apps/app/src/components/sidebar/SidebarOverview.stories.tsx b/apps/app/src/components/sidebar/SidebarOverview.stories.tsx
index 8e3fb16dec..c6671ce692 100644
--- a/apps/app/src/components/sidebar/SidebarOverview.stories.tsx
+++ b/apps/app/src/components/sidebar/SidebarOverview.stories.tsx
@@ -44,7 +44,6 @@ import {
 import {
   AUTOMATIONS_PLUGIN_ID,
   AUTOMATIONS_PLUGIN_PANEL_PATH,
-  getSkillsRoutePath,
 } from "@/lib/route-paths";
 import { splitLayoutAtom } from "@/lib/split-layout/atoms";
 import {
@@ -267,7 +266,7 @@ function SidebarFrame({ children }: SidebarFrameProps) {
             <ProjectListActionButtons onNewChat={noop} />
           </div>
           {}
-          <PluginNavSidebarItems toolsRoutePath={getSkillsRoutePath()} />
+          <PluginNavSidebarItems />
           <div className="min-h-0 flex-1 overflow-y-auto">{children}</div>
           <div className="shrink-0 border-t border-sidebar-border/70 px-2 py-2">
             <button
diff --git a/apps/app/src/lib/plugin-nav-panel-chrome.ts b/apps/app/src/lib/plugin-nav-panel-chrome.ts
index bef43f2a15..d43bdbaa2c 100644
--- a/apps/app/src/lib/plugin-nav-panel-chrome.ts
+++ b/apps/app/src/lib/plugin-nav-panel-chrome.ts
@@ -17,7 +17,7 @@ const pluginNavPanelChromeSchema = z.object({
 
 export type PluginNavPanelChrome = z.infer<typeof pluginNavPanelChromeSchema>;
 
-interface PluginNavPanelChromeEntry {
+export interface PluginNavPanelChromeEntry {
   chrome: PluginNavPanelChrome;
   panel: PluginNavPanelSlot | null;
 }

From 13057aa5b48a72a32a77dc8516830574a7589f83 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 2 Sep 2026 22:37:47 -0700
Subject: [PATCH 11/12] fix sidebar navigation review findings

---
 .../plugin/PluginNavSidebarItems.test.tsx     | 149 +++++++++++++++++-
 .../plugin/PluginNavSidebarItems.tsx          | 139 ++++++++--------
 .../plugin/pluginNavSidebarOrder.test.ts      |  36 +++++
 .../plugin/pluginNavSidebarOrder.ts           |  15 +-
 .../app/src/components/sidebar/AppSidebar.tsx |  37 +++--
 .../sidebar/BuiltInSidebarNavigation.tsx      |  56 ++-----
 .../sidebar/SidebarNavigationRegion.test.tsx  |  65 +++++++-
 7 files changed, 350 insertions(+), 147 deletions(-)

diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
index 43b8d5c8f6..5a610a0781 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
@@ -8,7 +8,12 @@ import {
   waitFor,
   within,
 } from "@testing-library/react";
-import { useEffect, useState, type ComponentType } from "react";
+import {
+  useEffect,
+  useState,
+  type ComponentType,
+  type MouseEvent as ReactMouseEvent,
+} from "react";
 import { createStore, Provider } from "jotai";
 import { MemoryRouter, useLocation } from "react-router-dom";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -20,7 +25,10 @@ import {
   setPluginSlotRegistrations,
   type PluginRegistrationSet,
 } from "@/lib/plugin-slots";
-import { getPluginPanelRoutePath } from "@/lib/route-paths";
+import {
+  AUTOMATIONS_PLUGIN_ID,
+  getPluginPanelRoutePath,
+} from "@/lib/route-paths";
 import {
   resetAllCrashedPluginSlotsForTest,
   resetCrashedPluginSlots,
@@ -34,6 +42,8 @@ import {
   pluginNavPanelOrderAtom,
   pluginNavVisiblePanelKeysAtom,
 } from "./pluginNavSidebarAtoms";
+import { splitLayoutAtom } from "@/lib/split-layout/atoms";
+import { countPanes, findPaneByContent } from "@/lib/split-layout";
 
 function registrationSet(
   overrides: Partial<PluginRegistrationSet>,
@@ -83,6 +93,7 @@ interface RenderSidebarItemsOptions {
   compactViewport?: boolean;
   compactCustomizeMode?: boolean;
   onCompactCustomizeModeChange?: (isCustomizing: boolean) => void;
+  splitEnabled?: boolean;
 }
 
 function PluginNavSidebarItemsHarness({
@@ -106,6 +117,7 @@ function PluginNavSidebarItemsHarness({
   return (
     <PluginNavSidebarItems
       builtInEntries={options.builtInEntries}
+      splitEnabled={options.splitEnabled}
       {...compactControlProps}
     />
   );
@@ -125,6 +137,16 @@ function renderSidebarItems(options: RenderSidebarItemsOptions = {}) {
       options.storedVisibleKeys ?? null,
     );
   }
+  if (options.splitEnabled) {
+    store.set(splitLayoutAtom, {
+      root: {
+        type: "pane",
+        paneId: "pane-1",
+        content: { kind: "new-thread" },
+      },
+      focusedPaneId: "pane-1",
+    });
+  }
   const view = render(
     <CompactViewportOverrideProvider
       isCompactViewport={options.compactViewport ?? false}
@@ -162,7 +184,9 @@ function panelRowNames(labels: readonly string[] = ["Docs", "GitHub"]): string[]
 function builtInEntry(
   id: string,
   title: string,
-  onActivate: () => void = vi.fn(),
+  onActivate: (
+    event: ReactMouseEvent<HTMLButtonElement>,
+  ) => void = vi.fn(),
 ): BuiltInSidebarNavEntry {
   return {
     kind: "built-in",
@@ -491,6 +515,39 @@ describe("PluginNavSidebarItems", () => {
     ).toBeNull();
   });
 
+  it("keeps built-ins visible without letting their order consume plugin slots", () => {
+    const labels = ["One", "Two", "Three", "Four"];
+    labels.forEach((label, index) => registerPanel(`plugin-${index}`, label));
+    renderSidebarItems({
+      builtInEntries: [
+        builtInEntry("new-thread", "New thread"),
+        builtInEntry("search-threads", "Search threads"),
+      ],
+      storedOrder: [
+        "plugin-0/main",
+        "__bb__/new-thread",
+        "plugin-1/main",
+        "__bb__/search-threads",
+        "plugin-2/main",
+        "plugin-3/main",
+      ],
+    });
+
+    expect(
+      Array.from(
+        screen
+          .getByTestId("plugin-nav-sidebar-items")
+          .querySelectorAll("[data-sidebar-navigation-item]"),
+      ).map((row) => row.getAttribute("data-sidebar-navigation-item")),
+    ).toEqual([
+      "plugin-0/main",
+      "__bb__/new-thread",
+      "plugin-1/main",
+      "__bb__/search-threads",
+      "plugin-2/main",
+    ]);
+  });
+
   it("keeps launch and visibility as distinct targets with a clear row hover state", async () => {
     const labels = ["One", "Two", "Three", "Four"];
     labels.forEach((label, index) => registerPanel(`plugin-${index}`, label));
@@ -694,6 +751,92 @@ describe("PluginNavSidebarItems", () => {
       ).toBeNull(),
     );
   });
+
+  it("preserves modifier-click when launching a built-in from Customize", async () => {
+    const onActivate = vi.fn();
+    renderSidebarItems({
+      builtInEntries: [builtInEntry("new-thread", "New thread", onActivate)],
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    );
+    fireEvent.click(screen.getByRole("button", { name: "New thread" }), {
+      metaKey: true,
+    });
+
+    expect(onActivate).toHaveBeenCalledOnce();
+    expect(onActivate.mock.calls[0]?.[0]).toMatchObject({ metaKey: true });
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("list", { name: "Sidebar navigation" }),
+      ).toBeNull(),
+    );
+  });
+
+  it("preserves modifier-click when launching a plugin from Customize", async () => {
+    registerPanel("docs", "Docs");
+    const { store } = renderSidebarItems({ splitEnabled: true });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Customize sidebar navigation" }),
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Docs" }), {
+      metaKey: true,
+    });
+
+    const layout = store.get(splitLayoutAtom);
+    expect(layout).not.toBeNull();
+    expect(countPanes(layout!.root)).toBe(2);
+    expect(
+      findPaneByContent(layout!.root, {
+        kind: "plugin-panel",
+        pluginId: "docs",
+        panelPath: "main",
+        subPath: "",
+      }),
+    ).not.toBeNull();
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("list", { name: "Sidebar navigation" }),
+      ).toBeNull(),
+    );
+  });
+
+  it("keeps Automations on the plugin row contract with a unified identity", () => {
+    registerPanel(AUTOMATIONS_PLUGIN_ID, "Automations", () => (
+      <span>Scheduled</span>
+    ));
+    const view = renderSidebarItems({ splitEnabled: true });
+
+    expect(
+      view.container.querySelector(
+        '[data-sidebar-navigation-item="__bb__/automations"]',
+      ),
+    ).not.toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Automations panel options" }),
+    ).not.toBeNull();
+    expect(
+      view.container.querySelector("[data-plugin-nav-sidebar-accessory]")
+        ?.textContent,
+    ).toBe("Scheduled");
+
+    fireEvent.click(screen.getByRole("button", { name: "Automations" }), {
+      metaKey: true,
+    });
+    const layout = view.store.get(splitLayoutAtom);
+    expect(layout).not.toBeNull();
+    expect(countPanes(layout!.root)).toBe(2);
+    expect(
+      findPaneByContent(layout!.root, {
+        kind: "plugin-panel",
+        pluginId: AUTOMATIONS_PLUGIN_ID,
+        panelPath: "main",
+        subPath: "",
+      }),
+    ).not.toBeNull();
+  });
 });
 
 describe("ExtensionsNavSidebarItem", () => {
diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
index ff7707623a..c7c435778a 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.tsx
@@ -60,7 +60,10 @@ import {
 } from "@/lib/plugin-nav-panel-chrome";
 import { cn } from "@bb/shared-ui/lib/utils";
 import type { PluginNavPanelSlot } from "@/lib/plugin-slots";
-import { usePaneContentSplitDrag } from "@/components/sidebar/usePaneContentSplitDrag";
+import {
+  usePaneContentSplitActions,
+  usePaneContentSplitDrag,
+} from "@/components/sidebar/usePaneContentSplitDrag";
 import { usePaneContentSplitIndicator } from "@/components/sidebar/paneContentSplitIndicator";
 import type { MiniMapSlot } from "@/components/sidebar/paneContentSplitIndicator";
 import { SplitPaneMiniMap } from "@/components/sidebar/SplitPaneMiniMap";
@@ -105,7 +108,7 @@ export interface BuiltInSidebarNavEntry {
   icon: ReactNode;
   content: ReactNode;
   disabled?: boolean;
-  onActivate: () => void;
+  onActivate: (event: ReactMouseEvent<HTMLButtonElement>) => void;
 }
 
 type SidebarNavRow = PluginSidebarNavRow | BuiltInSidebarNavEntry;
@@ -116,14 +119,6 @@ function isPluginSidebarNavRow(
   return row.kind === "plugin";
 }
 
-export function getTraditionalPluginNavPanelEntries(
-  entries: readonly PluginNavPanelChromeEntry[],
-): PluginNavPanelChromeEntry[] {
-  return entries.filter(
-    ({ chrome }) => chrome.pluginId !== AUTOMATIONS_PLUGIN_ID,
-  );
-}
-
 export function PluginNavSidebarItems(props: {
   builtInEntries?: readonly BuiltInSidebarNavEntry[];
   compactCustomizeMode?: boolean;
@@ -140,8 +135,14 @@ export function PluginNavSidebarItems(props: {
       ...(props.builtInEntries ?? []),
       ...entries.map(({ chrome, panel }) => ({
         kind: "plugin" as const,
-        pluginId: chrome.pluginId,
-        id: chrome.id,
+        pluginId:
+          chrome.pluginId === AUTOMATIONS_PLUGIN_ID
+            ? "__bb__"
+            : chrome.pluginId,
+        id:
+          chrome.pluginId === AUTOMATIONS_PLUGIN_ID
+            ? "automations"
+            : chrome.id,
         title: chrome.title,
         chrome,
         panel,
@@ -193,6 +194,7 @@ function PluginNavSidebarItemList({
   const location = useLocation();
   const navigate = useNavigate();
   const isCompactViewport = useIsCompactViewport();
+  const splitActions = usePaneContentSplitActions();
   const [storedOrder, setStoredOrder] = useAtom(pluginNavPanelOrderAtom);
   const [storedVisibleKeys, setStoredVisibleKeys] = useAtom(
     pluginNavVisiblePanelKeysAtom,
@@ -220,12 +222,12 @@ function PluginNavSidebarItemList({
       onCompactCustomizeModeChange,
     ],
   );
-  const builtInKeys = useMemo(
+  const defaultVisibleKeys = useMemo(
     () =>
-      rows
-        .filter((row) => row.kind === "built-in")
-        .map(getPluginNavPanelKey),
-    [rows],
+      leadingOrderKeys.filter((key) =>
+        rows.some((row) => getPluginNavPanelKey(row) === key),
+      ),
+    [leadingOrderKeys, rows],
   );
   const newLeadingKeys = useMemo(
     () => leadingOrderKeys.filter((key) => !storedOrder.includes(key)),
@@ -249,11 +251,11 @@ function PluginNavSidebarItemList({
           storedVisibleKeys === null || newLeadingKeys.length === 0
             ? storedVisibleKeys
             : [...newLeadingKeys, ...storedVisibleKeys],
-        defaultVisibleCount:
-          builtInKeys.length + PLUGIN_NAV_VISIBLE_LIMIT,
+        defaultVisibleKeys,
+        defaultVisibleCount: PLUGIN_NAV_VISIBLE_LIMIT,
       }),
     [
-      builtInKeys,
+      defaultVisibleKeys,
       newLeadingKeys,
       rows,
       storedOrder,
@@ -326,9 +328,18 @@ function PluginNavSidebarItemList({
         order: normalizedOrder,
         visibleIds: orderedKeys,
       });
-      if (nextOrder) setStoredOrder(nextOrder);
+      if (!nextOrder) return;
+      if (storedVisibleKeys === null) setStoredVisibleKeys(visibleKeys);
+      setStoredOrder(nextOrder);
     },
-    [normalizedOrder, orderedKeys, setStoredOrder],
+    [
+      normalizedOrder,
+      orderedKeys,
+      setStoredOrder,
+      setStoredVisibleKeys,
+      storedVisibleKeys,
+      visibleKeys,
+    ],
   );
 
   const reorderDisabled = ordered.length < 2;
@@ -340,9 +351,23 @@ function PluginNavSidebarItemList({
   };
 
   const handleActivate = useCallback(
-    (row: SidebarNavRow) => {
+    (row: SidebarNavRow, event: ReactMouseEvent<HTMLButtonElement>) => {
       if (!isPluginSidebarNavRow(row)) {
-        row.onActivate();
+        row.onActivate(event);
+        return;
+      }
+      if (event.metaKey || event.ctrlKey) {
+        splitActions.openInSplit({
+          content: {
+            kind: "plugin-panel",
+            pluginId: row.chrome.pluginId,
+            panelPath: row.chrome.path,
+            subPath: "",
+          },
+          enabled: splitEnabled,
+          label: row.title,
+          onNavigate,
+        });
         return;
       }
       onNavigate?.();
@@ -353,7 +378,7 @@ function PluginNavSidebarItemList({
         }),
       );
     },
-    [navigate, onNavigate],
+    [navigate, onNavigate, splitActions, splitEnabled],
   );
 
   useEffect(() => {
@@ -466,7 +491,10 @@ function SidebarNavigationInlineCustomizeMode({
   rows,
   visibleKeys,
 }: {
-  onActivate: (row: SidebarNavRow) => void;
+  onActivate: (
+    row: SidebarNavRow,
+    event: ReactMouseEvent<HTMLButtonElement>,
+  ) => void;
   onBack: () => void;
   onDragEnd: (activeKey: string, overKey: string) => void;
   onExit: () => void;
@@ -509,8 +537,8 @@ function SidebarNavigationInlineCustomizeMode({
           rows={rows}
           visibleKeys={visibleKeys}
           surface="sidebar"
-          onActivate={(row) => {
-            onActivate(row);
+          onActivate={(row, event) => {
+            onActivate(row, event);
             onExit();
           }}
           onDragEnd={onDragEnd}
@@ -531,7 +559,10 @@ function SidebarNavigationCustomizeMenu({
   visibleKeys,
 }: {
   isOpen: boolean;
-  onActivate: (row: SidebarNavRow) => void;
+  onActivate: (
+    row: SidebarNavRow,
+    event: ReactMouseEvent<HTMLButtonElement>,
+  ) => void;
   onDragEnd: (activeKey: string, overKey: string) => void;
   onOpenChange: (isOpen: boolean) => void;
   onVisibleChange: (key: string, visible: boolean) => void;
@@ -590,8 +621,8 @@ function SidebarNavigationCustomizeMenu({
         <SidebarNavigationCustomizeList
           rows={rows}
           visibleKeys={visibleKeys}
-          onActivate={(row) => {
-            onActivate(row);
+          onActivate={(row, event) => {
+            onActivate(row, event);
             onOpenChange(false);
           }}
           onDragEnd={onDragEnd}
@@ -610,7 +641,10 @@ function SidebarNavigationCustomizeList({
   surface = "popover",
   visibleKeys,
 }: {
-  onActivate: (row: SidebarNavRow) => void;
+  onActivate: (
+    row: SidebarNavRow,
+    event: ReactMouseEvent<HTMLButtonElement>,
+  ) => void;
   onDragEnd: (activeKey: string, overKey: string) => void;
   onVisibleChange: (key: string, visible: boolean) => void;
   rows: readonly SidebarNavRow[];
@@ -659,7 +693,7 @@ function SidebarNavigationCustomizeList({
                 checked={visibleKeySet.has(key)}
                 reorderDisabled={rows.length < 2}
                 surface={surface}
-                onActivate={() => onActivate(row)}
+                onActivate={(event) => onActivate(row, event)}
                 onCheckedChange={(checked) =>
                   onVisibleChange(key, checked)
                 }
@@ -681,7 +715,7 @@ function SortableSidebarNavigationCustomizeItem({
   surface,
 }: {
   checked: boolean;
-  onActivate: () => void;
+  onActivate: (event: ReactMouseEvent<HTMLButtonElement>) => void;
   onCheckedChange: (checked: boolean) => void;
   reorderDisabled: boolean;
   row: SidebarNavRow;
@@ -887,43 +921,6 @@ export function ExtensionsNavSidebarItem({
   );
 }
 
-export function AutomationsNavSidebarItem({
-  chrome,
-  onNavigate,
-}: {
-  chrome: PluginNavPanelChrome;
-  onNavigate?: () => void;
-}) {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const path = getPluginPanelRoutePath({
-    pluginId: chrome.pluginId,
-    path: chrome.path,
-  });
-  const isActive =
-    location.pathname === path || location.pathname.startsWith(`${path}/`);
-  return (
-    <Button
-      type="button"
-      size="sm"
-      variant="ghost"
-      className={cn(
-        PROJECT_LIST_ACTION_BUTTON_CLASS,
-        "w-full",
-        isActive && "bg-sidebar-accent text-sidebar-foreground",
-      )}
-      aria-current={isActive ? "page" : undefined}
-      onClick={() => {
-        onNavigate?.();
-        void navigate(path);
-      }}
-    >
-      <PluginIcon pluginId={chrome.pluginId} icon={chrome.icon} />
-      <span className="min-w-0 truncate text-left">{chrome.title}</span>
-    </Button>
-  );
-}
-
 function PluginNavSidebarItem({
   row,
   pathname,
diff --git a/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts b/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts
index b1f2a1d9a1..35e3f9403e 100644
--- a/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts
+++ b/apps/app/src/components/plugin/pluginNavSidebarOrder.test.ts
@@ -72,6 +72,7 @@ describe("arrangePluginNavPanelPreferences", () => {
       panels: [github, docs, tasks, extra],
       storedOrder: ["tasks/board", "github/pulls"],
       storedVisibleKeys: null,
+      defaultVisibleKeys: [],
       defaultVisibleCount: 3,
     });
 
@@ -99,6 +100,7 @@ describe("arrangePluginNavPanelPreferences", () => {
       panels: [github, docs, tasks],
       storedOrder: [],
       storedVisibleKeys: [],
+      defaultVisibleKeys: [],
       defaultVisibleCount: 3,
     });
 
@@ -116,6 +118,7 @@ describe("arrangePluginNavPanelPreferences", () => {
       panels: [github, docs, tasks],
       storedOrder: ["future/main", "docs/vault", "github/pulls"],
       storedVisibleKeys: ["future/main", "github/pulls", "future/main"],
+      defaultVisibleKeys: [],
       defaultVisibleCount: 3,
     });
 
@@ -136,6 +139,7 @@ describe("arrangePluginNavPanelPreferences", () => {
       panels: [github, docs, tasks],
       storedOrder: ["github/pulls", "docs/vault"],
       storedVisibleKeys: ["github/pulls", "docs/vault"],
+      defaultVisibleKeys: [],
       defaultVisibleCount: 3,
     });
 
@@ -155,6 +159,7 @@ describe("arrangePluginNavPanelPreferences", () => {
       panels: [github, docs, tasks],
       storedOrder: ["tasks/board", "github/pulls", "docs/vault"],
       storedVisibleKeys: ["docs/vault", "tasks/board"],
+      defaultVisibleKeys: [],
       defaultVisibleCount: 3,
     });
 
@@ -168,6 +173,37 @@ describe("arrangePluginNavPanelPreferences", () => {
       "docs/vault",
     ]);
   });
+
+  it("keeps every default destination visible while limiting optional plugins", () => {
+    const newThread = panel("__bb__", "new-thread");
+    const searchThreads = panel("__bb__", "search-threads");
+    const extra = panel("calendar", "agenda");
+    const result = arrangePluginNavPanelPreferences({
+      panels: [newThread, searchThreads, github, docs, tasks, extra],
+      storedOrder: [
+        "github/pulls",
+        "__bb__/new-thread",
+        "docs/vault",
+        "__bb__/search-threads",
+        "tasks/board",
+        "calendar/agenda",
+      ],
+      storedVisibleKeys: null,
+      defaultVisibleKeys: [
+        "__bb__/new-thread",
+        "__bb__/search-threads",
+      ],
+      defaultVisibleCount: 3,
+    });
+
+    expect(result.visibleKeys).toEqual([
+      "github/pulls",
+      "__bb__/new-thread",
+      "docs/vault",
+      "__bb__/search-threads",
+      "tasks/board",
+    ]);
+  });
 });
 
 describe("legacy hidden-panel migration", () => {
diff --git a/apps/app/src/components/plugin/pluginNavSidebarOrder.ts b/apps/app/src/components/plugin/pluginNavSidebarOrder.ts
index db1a3b6159..e9a8801d5b 100644
--- a/apps/app/src/components/plugin/pluginNavSidebarOrder.ts
+++ b/apps/app/src/components/plugin/pluginNavSidebarOrder.ts
@@ -37,6 +37,7 @@ interface ArrangePluginNavPanelPreferencesArgs<
   TPanel extends PluginNavPanelIdentity,
 > extends ArrangePluginNavPanelsArgs<TPanel> {
   storedVisibleKeys: readonly string[] | null;
+  defaultVisibleKeys: readonly string[];
   defaultVisibleCount: number;
 }
 
@@ -65,6 +66,7 @@ export function arrangePluginNavPanelPreferences<
   panels,
   storedOrder,
   storedVisibleKeys,
+  defaultVisibleKeys,
   defaultVisibleCount,
 }: ArrangePluginNavPanelPreferencesArgs<TPanel>): ArrangedPluginNavPanelPreferences<TPanel> {
   const { ordered, normalizedOrder } = arrangePluginNavPanels({
@@ -75,11 +77,16 @@ export function arrangePluginNavPanelPreferences<
     storedVisibleKeys === null
       ? null
       : [...new Set(storedVisibleKeys.filter((key) => key.length > 0))];
-  const visibleKeys =
-    normalizedVisibleKeys ??
-    ordered
+  const defaultVisibleKeySet = new Set(defaultVisibleKeys);
+  const visibleKeys = normalizedVisibleKeys ?? [
+    ...ordered
+      .filter((panel) => defaultVisibleKeySet.has(getPluginNavPanelKey(panel)))
+      .map(getPluginNavPanelKey),
+    ...ordered
+      .filter((panel) => !defaultVisibleKeySet.has(getPluginNavPanelKey(panel)))
       .slice(0, Math.max(0, defaultVisibleCount))
-      .map(getPluginNavPanelKey);
+      .map(getPluginNavPanelKey),
+  ];
   const visibleSet = new Set(visibleKeys);
 
   return {
diff --git a/apps/app/src/components/sidebar/AppSidebar.tsx b/apps/app/src/components/sidebar/AppSidebar.tsx
index 0b35c61c12..24e7ffa73d 100644
--- a/apps/app/src/components/sidebar/AppSidebar.tsx
+++ b/apps/app/src/components/sidebar/AppSidebar.tsx
@@ -247,23 +247,26 @@ export function AppSidebar({
         onNewChat={handleNewChat}
         onSearchThreads={closeOnMobile}
       />
-      {!isCompactCustomizeModeActive ? (
-        <>
-          <div
-            aria-hidden="true"
-            className="mx-2 my-2 shrink-0 border-t border-sidebar-border/25"
-            data-testid="app-sidebar-navigation-divider"
-          />
-          <SidebarContent>
-            <PluginThreadList
-              replacement={threadListReplacement}
-              original={originalThreadList}
-              searchQuery=""
-              onNavigate={closeOnMobile}
-            />
-          </SidebarContent>
-        </>
-      ) : null}
+      <div
+        aria-hidden="true"
+        className={cn(
+          "mx-2 my-2 shrink-0 border-t border-sidebar-border/25",
+          isCompactCustomizeModeActive && "hidden",
+        )}
+        data-testid="app-sidebar-navigation-divider"
+      />
+      <SidebarContent
+        className={cn(isCompactCustomizeModeActive && "hidden")}
+        aria-hidden={isCompactCustomizeModeActive ? true : undefined}
+        inert={isCompactCustomizeModeActive ? true : undefined}
+      >
+        <PluginThreadList
+          replacement={threadListReplacement}
+          original={originalThreadList}
+          searchQuery=""
+          onNavigate={closeOnMobile}
+        />
+      </SidebarContent>
       <SidebarFooter className="relative">
         <OverflowFade placement="above" tone="sidebar" size="sm" />
         {}
diff --git a/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx b/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
index 99d2aa2c7c..b3c38b7c62 100644
--- a/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
+++ b/apps/app/src/components/sidebar/BuiltInSidebarNavigation.tsx
@@ -1,20 +1,13 @@
-import type { ComponentProps } from "react";
+import type { ComponentProps, MouseEvent as ReactMouseEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import {
-  AutomationsNavSidebarItem,
   type BuiltInSidebarNavEntry,
   ExtensionsNavSidebarItem,
-  getTraditionalPluginNavPanelEntries,
   PluginNavSidebarItems,
 } from "@/components/plugin/PluginNavSidebarItems";
 import { useAppCommandRunner } from "@/components/commands/AppCommandProvider";
-import { PluginIcon } from "@/components/plugin/PluginIcon";
 import { Icon } from "@bb/shared-ui/icon";
 import { usePluginNavPanelChrome } from "@/lib/plugin-nav-panel-chrome";
-import {
-  AUTOMATIONS_PLUGIN_ID,
-  getPluginPanelRoutePath,
-} from "@/lib/route-paths";
 import {
   ProjectListNewThreadAction,
   ProjectListSearchThreadsAction,
@@ -42,12 +35,6 @@ export function BuiltInSidebarNavigation({
   const navigate = useNavigate();
   const commandRunner = useAppCommandRunner();
   const pluginNavPanels = usePluginNavPanelChrome();
-  const automationsNavPanel = pluginNavPanels.find(
-    ({ chrome }) => chrome.pluginId === AUTOMATIONS_PLUGIN_ID,
-  );
-  const traditionalPluginNavPanels = getTraditionalPluginNavPanelEntries(
-    pluginNavPanels,
-  );
   const builtInEntries: BuiltInSidebarNavEntry[] = [
     {
       kind: "built-in",
@@ -63,7 +50,13 @@ export function BuiltInSidebarNavigation({
         />
       ),
       disabled: onNewChat === undefined,
-      onActivate: () => onNewChat?.(),
+      onActivate: (event: ReactMouseEvent<HTMLButtonElement>) => {
+        if (event.metaKey || event.ctrlKey) {
+          newThreadSplit?.openInSplit();
+          return;
+        }
+        onNewChat?.();
+      },
     },
     {
       kind: "built-in",
@@ -101,37 +94,6 @@ export function BuiltInSidebarNavigation({
           },
         ]
       : []),
-    ...(automationsNavPanel
-      ? [
-          {
-            kind: "built-in" as const,
-            pluginId: "__bb__" as const,
-            id: "automations",
-            title: automationsNavPanel.chrome.title,
-            icon: (
-              <PluginIcon
-                pluginId={automationsNavPanel.chrome.pluginId}
-                icon={automationsNavPanel.chrome.icon}
-              />
-            ),
-            content: (
-              <AutomationsNavSidebarItem
-                chrome={automationsNavPanel.chrome}
-                onNavigate={onNavigate}
-              />
-            ),
-            onActivate: () => {
-              onNavigate?.();
-              void navigate(
-                getPluginPanelRoutePath({
-                  pluginId: automationsNavPanel.chrome.pluginId,
-                  path: automationsNavPanel.chrome.path,
-                }),
-              );
-            },
-          },
-        ]
-      : []),
   ];
 
   return (
@@ -144,7 +106,7 @@ export function BuiltInSidebarNavigation({
         <PluginNavSidebarItems
           builtInEntries={builtInEntries}
           compactCustomizeMode={compactCustomizeMode}
-          entries={traditionalPluginNavPanels}
+          entries={pluginNavPanels}
           leadingOrderKeys={DEFAULT_BUILT_IN_SIDEBAR_NAVIGATION_ORDER}
           onCompactCustomizeModeChange={onCompactCustomizeModeChange}
           onNavigate={onNavigate}
diff --git a/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx b/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
index 6676cd89fe..9fd41ea89e 100644
--- a/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
+++ b/apps/app/src/components/sidebar/SidebarNavigationRegion.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, type MouseEventHandler } from "react";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { MemoryRouter, useLocation } from "react-router-dom";
@@ -17,6 +17,7 @@ import { SidebarNavigationRegion } from "./SidebarNavigationRegion";
 
 const mocks = vi.hoisted(() => ({
   dispatch: vi.fn(),
+  openNewThreadInSplit: vi.fn(),
   onSearchThreads: vi.fn(),
 }));
 
@@ -29,10 +30,31 @@ vi.mock("@/components/commands/AppCommandProvider", () => ({
   useIsAppCommandModifierHeld: () => false,
 }));
 vi.mock("@/components/plugin/PluginNavSidebarItems", () => ({
-  AutomationsNavSidebarItem: () => <div>Automations</div>,
   ExtensionsNavSidebarItem: () => <div>Extensions</div>,
-  PluginNavSidebarItems: () => <div>BB plugin destinations</div>,
-  getTraditionalPluginNavPanelEntries: (entries: readonly object[]) => entries,
+  PluginNavSidebarItems: ({
+    builtInEntries = [],
+    entries = [],
+  }: {
+    builtInEntries?: Array<{
+      id: string;
+      title: string;
+      onActivate: MouseEventHandler<HTMLButtonElement>;
+    }>;
+    entries?: Array<{ chrome: { pluginId: string; title: string } }>;
+  }) => (
+    <div>
+      {builtInEntries.map((entry) => (
+        <button key={entry.id} type="button" onClick={entry.onActivate}>
+          {entry.title}
+        </button>
+      ))}
+      {entries.map(({ chrome }) => (
+        <div key={chrome.pluginId} data-testid="built-in-plugin-entry">
+          {chrome.title}
+        </div>
+      ))}
+    </div>
+  ),
 }));
 vi.mock("./usePaneContentSplitDrag", () => ({
   usePaneContentSplitActions: () => ({
@@ -106,7 +128,7 @@ function Harness({ onOwnerMount }: { onOwnerMount: () => void }) {
     <>
       <SidebarNavigationRegion
         splitEnabled
-        newThreadSplit={{ openInSplit: vi.fn() }}
+        newThreadSplit={{ openInSplit: mocks.openNewThreadInSplit }}
         onNavigate={vi.fn()}
         onNewChat={vi.fn()}
         onSearchThreads={mocks.onSearchThreads}
@@ -161,10 +183,43 @@ afterEach(() => {
   window.localStorage.clear();
   vi.restoreAllMocks();
   mocks.dispatch.mockReset();
+  mocks.openNewThreadInSplit.mockReset();
   mocks.onSearchThreads.mockReset();
 });
 
 describe("SidebarNavigationRegion", () => {
+  it("preserves modifier-click for New thread in BB navigation", () => {
+    renderHarness();
+
+    fireEvent.click(screen.getByRole("button", { name: "New thread" }), {
+      metaKey: true,
+    });
+
+    expect(mocks.openNewThreadInSplit).toHaveBeenCalledOnce();
+  });
+
+  it("passes Automations through the plugin navigation row path", () => {
+    setPluginSlotRegistrations(
+      "automations",
+      registrationSet({
+        navPanels: [
+          {
+            id: "automations",
+            title: "Automations",
+            icon: "Calendar",
+            path: "automations",
+            component: () => null,
+          },
+        ],
+      }),
+    );
+    renderHarness();
+
+    expect(screen.getByTestId("built-in-plugin-entry").textContent).toBe(
+      "Automations",
+    );
+  });
+
   it("routes Search through the quick palette without inline search UI", () => {
     registerFixture();
     renderHarness();

From 9f5e741aaefa8589bdfecfca1eb8f050f17e93b5 Mon Sep 17 00:00:00 2001
From: Bersabel Tadesse <brsabel.t@gmail.com>
Date: Wed, 2 Sep 2026 23:14:11 -0700
Subject: [PATCH 12/12] fix customize navigation test scope

---
 .../plugin/PluginNavSidebarItems.test.tsx      | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
index 5a610a0781..e9a9a01aa1 100644
--- a/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
+++ b/apps/app/src/components/plugin/PluginNavSidebarItems.test.tsx
@@ -761,9 +761,12 @@ describe("PluginNavSidebarItems", () => {
     fireEvent.click(
       screen.getByRole("button", { name: "Customize sidebar navigation" }),
     );
-    fireEvent.click(screen.getByRole("button", { name: "New thread" }), {
-      metaKey: true,
-    });
+    const row = customizeRows()[0];
+    expect(row).toBeDefined();
+    fireEvent.click(
+      within(row as HTMLElement).getByRole("button", { name: "New thread" }),
+      { metaKey: true },
+    );
 
     expect(onActivate).toHaveBeenCalledOnce();
     expect(onActivate.mock.calls[0]?.[0]).toMatchObject({ metaKey: true });
@@ -781,9 +784,12 @@ describe("PluginNavSidebarItems", () => {
     fireEvent.click(
       screen.getByRole("button", { name: "Customize sidebar navigation" }),
     );
-    fireEvent.click(screen.getByRole("button", { name: "Docs" }), {
-      metaKey: true,
-    });
+    const row = customizeRows()[0];
+    expect(row).toBeDefined();
+    fireEvent.click(
+      within(row as HTMLElement).getByRole("button", { name: "Docs" }),
+      { metaKey: true },
+    );
 
     const layout = store.get(splitLayoutAtom);
     expect(layout).not.toBeNull();