Improve Tools Hub filtering and plugin navigation

apps/app/src/components/plugin/PluginsOverview.test.tsx

@@ -414,6 +414,36 @@ describe("PluginsOverview", () => {
     expect(builtInPills[0]?.parentElement?.className).toContain("py-0");
   });
 
+  it("defaults to all plugins and can filter to built-in bb plugins", async () => {
+    installFetch(true, [
+      AUTOMATIONS_PLUGIN,
+      {
+        ...AUTOMATIONS_PLUGIN,
+        id: "local-plugin",
+        name: "Local plugin",
+        source: "path:/plugins/local-plugin",
+        provenance: "direct",
+      },
+    ]);
+    const { wrapper: QueryClientWrapper } = createQueryClientTestHarness();
+    render(
+      <MemoryRouter initialEntries={["/tools/plugins"]}>
+        <QueryClientWrapper>
+          <PluginsOverview />
+        </QueryClientWrapper>
+      </MemoryRouter>,
+    );
+
+    expect(await screen.findByText("Automations")).toBeTruthy();
+    expect(screen.getByText("Local plugin")).toBeTruthy();
+
+    fireEvent.pointerDown(screen.getByRole("button", { name: "Source" }));
+    fireEvent.click(screen.getByRole("menuitem", { name: "Built-in bb" }));
+
+    expect(screen.getByText("Automations")).toBeTruthy();
+    expect(screen.queryByText("Local plugin")).toBeNull();
+  });
+
   it("uses the same passive provenance tag for built-in and BB Official plugins", async () => {
     installFetch(true, [
       AUTOMATIONS_PLUGIN,

apps/app/src/components/plugin/PluginsOverview.tsx

@@ -9,6 +9,7 @@ import {
   ResourceCollectionPage,
   ResourceCollectionViewport,
   ResourceListState,
+  ResourceOptionMenu,
   ResourceSortMenu,
   ResourceToolbar,
   type ResourceCollectionMode,
@@ -31,6 +32,7 @@ import {
 } from "@/lib/route-paths";
 
 type PluginsCollectionMode = "installed" | "browse";
+type PluginSourceFilter = "all" | "builtin";
 
 function modeFromSearchParams(
   value: string | null,
@@ -69,6 +71,7 @@ export function PluginsOverview() {
   const [installedSortDirection, setInstalledSortDirection] = useState<
     "asc" | "desc"
   >("asc");
+  const [sourceFilter, setSourceFilter] = useState<PluginSourceFilter>("all");
   const [addDialog, setAddDialog] = useState<{
     open: boolean;
     initial: AddPluginInitial | null;
@@ -92,6 +95,9 @@ export function PluginsOverview() {
     () =>
       plugins
         .filter((plugin) => {
+          if (sourceFilter === "builtin" && plugin.provenance !== "builtin") {
+            return false;
+          }
           if (normalizedInstalledQuery.length === 0) return true;
           return [
             plugin.id,
@@ -114,11 +120,15 @@ export function PluginsOverview() {
           );
           return installedSortDirection === "asc" ? result : -result;
         }),
-    [installedSortDirection, normalizedInstalledQuery, plugins],
+    [installedSortDirection, normalizedInstalledQuery, plugins, sourceFilter],
   );
   const installedPagination = useResourcePagination(visiblePlugins, {
     pageSize: installedPageSize,
-    resetKey: [normalizedInstalledQuery, installedSortDirection].join("\u0000"),
+    resetKey: [
+      normalizedInstalledQuery,
+      sourceFilter,
+      installedSortDirection,
+    ].join("\u0000"),
   });
   const hasInstalledPagination =
     !listQuery.isError &&
@@ -188,16 +198,30 @@ export function PluginsOverview() {
             onSearchChange={setInstalledQuery}
             containedControls
             controls={
-              <ResourceSortMenu
-                value="alpha"
-                direction={installedSortDirection}
-                options={[{ id: "alpha", label: "Plugin name" }]}
-                onChange={() =>
-                  setInstalledSortDirection((current) =>
-                    current === "asc" ? "desc" : "asc",
-                  )
-                }
-              />
+              <>
+                <ResourceOptionMenu
+                  label="Source"
+                  icon="PackageReceive"
+                  value={sourceFilter}
+                  options={[
+                    { id: "all", label: "All plugins" },
+                    { id: "builtin", label: "Built-in bb" },
+                  ]}
+                  onChange={(value) =>
+                    setSourceFilter(value as PluginSourceFilter)
+                  }
+                />
+                <ResourceSortMenu
+                  value="alpha"
+                  direction={installedSortDirection}
+                  options={[{ id: "alpha", label: "Plugin name" }]}
+                  onChange={() =>
+                    setInstalledSortDirection((current) =>
+                      current === "asc" ? "desc" : "asc",
+                    )
+                  }
+                />
+              </>
             }
           />
         }
@@ -226,7 +250,11 @@ export function PluginsOverview() {
         ) : plugins.length > 0 && visiblePlugins.length === 0 ? (
           <ResourceListState
             state="empty"
-            message={`No plugins match "${installedQuery}"`}
+            message={
+              normalizedInstalledQuery.length > 0
+                ? `No plugins match "${installedQuery}"`
+                : "No plugins match this filter."
+            }
           />
         ) : (
           <InstalledPluginsTab plugins={installedPagination.items} />

apps/app/src/components/settings/PluginSettingsCompatibilityRoute.test.tsx

@@ -74,11 +74,18 @@ describe("PluginSettingsCompatibilityRoute", () => {
     expect(screen.queryByText("Tools plugin detail")).toBeNull();
   });
 
-  it("redirects legacy Settings plugin routes to Tools Hub when enabled", () => {
+  it("keeps plugin configuration in Settings while Tools Hub is enabled", () => {
     renderRoute("/settings/plugins/example", true);
 
-    expect(screen.getByText("Tools plugin detail")).toBeTruthy();
-    expect(screen.queryByText("Settings plugin detail")).toBeNull();
+    expect(screen.getByText("Settings plugin detail")).toBeTruthy();
+    expect(screen.queryByText("Tools plugin detail")).toBeNull();
+  });
+
+  it("redirects the legacy Settings plugin manager to Tools Hub when enabled", () => {
+    renderRoute("/settings/plugins", true);
+
+    expect(screen.getByText("Tools plugins")).toBeTruthy();
+    expect(screen.queryByText("Settings plugin manager")).toBeNull();
   });
 
   it("renders neither management surface while configuration is loading", () => {

apps/app/src/components/settings/PluginSettingsCompatibilityRoute.tsx

@@ -1,12 +1,12 @@
 import type { ReactNode } from "react";
 import { Navigate, useParams } from "react-router-dom";
 import { useSystemConfig } from "@/hooks/queries/system-queries";
-import {
-  getPluginDetailRoutePath,
-  getPluginsRoutePath,
-} from "@/lib/route-paths";
+import { getPluginsRoutePath } from "@/lib/route-paths";
 
-/** Keeps the existing Settings manager available while Tools Hub is off. */
+/**
+ * Replaces the legacy plugin manager with Tools Hub while preserving each
+ * plugin's Settings page.
+ */
 export function PluginSettingsCompatibilityRoute({
   children,
 }: {
@@ -18,15 +18,7 @@ export function PluginSettingsCompatibilityRoute({
 
   if (toolsHubEnabled === undefined) return null;
   if (!toolsHubEnabled) return children;
+  if (pluginId !== undefined) return children;
 
-  return (
-    <Navigate
-      to={
-        pluginId
-          ? getPluginDetailRoutePath({ pluginId })
-          : getPluginsRoutePath()
-      }
-      replace
-    />
-  );
+  return <Navigate to={getPluginsRoutePath()} replace />;
 }

apps/app/src/components/settings/settings-nav.test.tsx

@@ -10,6 +10,7 @@ import { createQueryClientTestHarness } from "@/test/queryClientTestHarness";
 import { useSettingsNavState } from "./settings-nav";
 
 const mocks = vi.hoisted(() => ({
+  usePluginList: vi.fn(),
   useSystemConfig: vi.fn(),
 }));
 
@@ -18,7 +19,7 @@ vi.mock("@/hooks/queries/system-queries", () => ({
 }));
 
 vi.mock("@/hooks/queries/plugin-settings-queries", () => ({
-  usePluginList: () => ({ data: { plugins: [] } }),
+  usePluginList: mocks.usePluginList,
 }));
 
 vi.mock("@/hooks/useHostDaemon", () => ({
@@ -43,6 +44,7 @@ afterEach(() => {
 });
 
 beforeEach(() => {
+  mocks.usePluginList.mockReturnValue({ data: { plugins: [] } });
   mocks.useSystemConfig.mockReset();
   mocks.useSystemConfig.mockReturnValue({
     data: {
@@ -109,6 +111,17 @@ describe("useSettingsNavState", () => {
   });
 
   it("removes plugin management from Settings while Tools Hub is enabled", () => {
+    mocks.usePluginList.mockReturnValue({
+      data: {
+        plugins: [
+          {
+            id: "connect",
+            enabled: true,
+            hasSettings: true,
+          },
+        ],
+      },
+    });
     mocks.useSystemConfig.mockReturnValue({
       data: {
         experiments: {
@@ -125,6 +138,8 @@ describe("useSettingsNavState", () => {
     expect(result.current.sections.map((section) => section.id)).not.toContain(
       "plugins",
     );
-    expect(result.current.pluginEntries).toEqual([]);
+    expect(result.current.pluginEntries.map((plugin) => plugin.id)).toEqual([
+      "connect",
+    ]);
   });
 });

apps/app/src/components/settings/settings-nav.tsx

@@ -88,8 +88,7 @@ export function useSettingsNavState(): SettingsNavState {
     settingsSections.map((section) => section.pluginId),
   );
   const pluginListQuery = usePluginList({
-    enabled:
-      !toolsHubEnabled && (pluginsEnabled || settingsSectionPluginIds.size > 0),
+    enabled: pluginsEnabled || settingsSectionPluginIds.size > 0,
   });
 
   const pluginMatch = matchPath(SETTINGS_PLUGIN_ROUTE_PATH, location.pathname);
@@ -130,13 +129,11 @@ export function useSettingsNavState(): SettingsNavState {
     }
     return true;
   });
-  const pluginEntries = toolsHubEnabled
-    ? []
-    : (pluginListQuery.data?.plugins ?? []).filter(
-        (plugin) =>
-          plugin.enabled &&
-          (plugin.hasSettings || settingsSectionPluginIds.has(plugin.id)),
-      );
+  const pluginEntries = (pluginListQuery.data?.plugins ?? []).filter(
+    (plugin) =>
+      plugin.enabled &&
+      (plugin.hasSettings || settingsSectionPluginIds.has(plugin.id)),
+  );
   return {
     activePluginId,
     activeProviderId,