Add the Cloud plugin and AI gateway

Author: ymichael

apps/app/src/components/layout/AppLayout.plugin-panel-header.test.tsx

@@ -28,6 +28,7 @@ vi.mock("@/hooks/queries/system-queries", () => ({
     data: {
       experiments: {
         claudeCodeMockCliTraffic: false,
+        cloudAi: false,
         newOnboarding: false,
         toolsHub: true,
       },

apps/app/src/components/layout/AppLayout.root-compose-project.test.tsx

@@ -24,6 +24,7 @@ vi.mock("@/hooks/queries/system-queries", () => ({
     data: {
       experiments: {
         claudeCodeMockCliTraffic: false,
+        cloudAi: false,
         newOnboarding: false,
         toolsHub: true,
       },

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

@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
 
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { createQueryClientTestHarness } from "@/test/queryClientTestHarness";
 import {
@@ -283,14 +284,16 @@ describe("PluginSettingsDetail settings gating", () => {
     });
     const { wrapper } = createQueryClientTestHarness();
     render(
-      <PluginSettingsDetail
-        plugin={{
-          ...rowPlugin("running"),
-          id: "connect",
-          provenance: "builtin",
-          hasSettings: false,
-        }}
-      />,
+      <MemoryRouter>
+        <PluginSettingsDetail
+          plugin={{
+            ...rowPlugin("running"),
+            id: "connect",
+            provenance: "builtin",
+            hasSettings: false,
+          }}
+        />
+      </MemoryRouter>,
       { wrapper },
     );
 

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

@@ -1,3 +1,6 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { useSystemConfig } from "@/hooks/queries/system-queries";
 import {
   usePluginSlots,
   type PluginSettingsSectionSlot,
@@ -8,15 +11,32 @@ import {
   ResourceDetailConfigurationSection,
 } from "@bb/shared-ui/resource-list";
 
+const CONNECT_PLUGIN_ID = "connect";
+const CLOUD_AI_SECTION_ID = "cloud-ai";
+
+function isSettingsSectionVisible(
+  section: PluginSettingsSectionSlot,
+  cloudAiEnabled: boolean,
+): boolean {
+  return !(
+    section.pluginId === CONNECT_PLUGIN_ID &&
+    section.id === CLOUD_AI_SECTION_ID &&
+    !cloudAiEnabled
+  );
+}
+
 /**
  * Plugin `settingsSection` slot mounts, rendered on that plugin's canonical
  * Plugins detail page below the host-rendered declarative form.
  * Each section is contained in its own per-plugin error boundary.
  */
 export function PluginSettingsSections({ pluginId }: { pluginId: string }) {
   const { settingsSections } = usePluginSlots();
+  const cloudAiEnabled = useSystemConfig().data?.experiments?.cloudAi === true;
   const sections = settingsSections.filter(
-    (section) => section.pluginId === pluginId,
+    (section) =>
+      section.pluginId === pluginId &&
+      isSettingsSectionVisible(section, cloudAiEnabled),
   );
   if (sections.length === 0) return null;
   return <PluginSettingsSectionList sections={sections} />;
@@ -27,16 +47,34 @@ function PluginSettingsSectionList({
 }: {
   sections: readonly PluginSettingsSectionSlot[];
 }) {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.hash.length <= 1) return;
+    let sectionId: string;
+    try {
+      sectionId = decodeURIComponent(location.hash.slice(1));
+    } catch {
+      return;
+    }
+    if (!sections.some((section) => section.id === sectionId)) return;
+    document.getElementById(sectionId)?.scrollIntoView({ block: "start" });
+  }, [location.hash, location.key, sections]);
+
   return (
     <div className="space-y-6" data-testid="plugin-settings-sections">
       {sections.map((section) => {
         const key = `${section.pluginId}/${section.id}/${section.generation}`;
-        return section.title === undefined ? (
-          <PluginSettingsSectionPanel key={key} section={section} />
-        ) : (
-          <ResourceDetailConfigurationSection key={key} label={section.title}>
-            <PluginSettingsSectionPanel section={section} />
-          </ResourceDetailConfigurationSection>
+        return (
+          <div key={key} id={section.id} className="scroll-mt-4">
+            {section.title === undefined ? (
+              <PluginSettingsSectionPanel section={section} />
+            ) : (
+              <ResourceDetailConfigurationSection label={section.title}>
+                <PluginSettingsSectionPanel section={section} />
+              </ResourceDetailConfigurationSection>
+            )}
+          </div>
         );
       })}
     </div>

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

@@ -32,7 +32,13 @@ function registrationSet(
 }
 
 function LocationProbe() {
-  return <output aria-label="Current path">{useLocation().pathname}</output>;
+  const location = useLocation();
+  return (
+    <output aria-label="Current path">
+      {location.pathname}
+      {location.hash}
+    </output>
+  );
 }
 
 function renderWithProviders(ui: ReactNode, toolsHubEnabled = false) {
@@ -56,7 +62,7 @@ afterEach(() => {
 });
 
 describe("PluginSidebarFooterActions", () => {
-  it("prefers branding.icon over the logo and contribution icon", () => {
+  it("uses the action icon instead of the plugin branding icon", () => {
     setPluginLogoUrls(
       new Map([
         [
@@ -87,8 +93,8 @@ describe("PluginSidebarFooterActions", () => {
 
     renderWithProviders(<PluginSidebarFooterActions />);
 
-    expect(document.querySelector('[data-icon="FileText"]')).not.toBeNull();
-    expect(document.querySelector('[data-icon="Smartphone"]')).toBeNull();
+    expect(document.querySelector('[data-icon="Smartphone"]')).not.toBeNull();
+    expect(document.querySelector('[data-icon="FileText"]')).toBeNull();
     expect(document.querySelector("img")).toBeNull();
   });
 
@@ -143,4 +149,28 @@ describe("PluginSidebarFooterActions", () => {
       );
     },
   );
+
+  it("opens a specific plugin settings section", () => {
+    setPluginSlotRegistrations(
+      "cloud",
+      registrationSet({
+        sidebarFooterActions: [
+          {
+            id: "remote-access",
+            title: "Remote access",
+            icon: "Smartphone",
+            run: ({ openSettings }) =>
+              openSettings({ sectionId: "remote-access" }),
+          },
+        ],
+      }),
+    );
+
+    renderWithProviders(<PluginSidebarFooterActions />);
+    fireEvent.click(screen.getByRole("button", { name: "Remote access" }));
+
+    expect(screen.getByLabelText("Current path").textContent).toBe(
+      "/settings/plugins/cloud#remote-access",
+    );
+  });
 });

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

@@ -1,8 +1,9 @@
 import { useNavigate } from "react-router-dom";
 import { cn } from "@bb/shared-ui/lib/utils";
 import { COARSE_POINTER_CHILD_ICON_BUTTON_CLASS } from "@bb/shared-ui/coarse-pointer-sizing";
+import { Icon } from "@bb/shared-ui/icon";
 import { SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar.js";
-import { PluginIcon } from "@/components/plugin/PluginIcon";
+import { pluginIconName } from "@/components/plugin/PluginIcon";
 import {
   usePluginSlots,
   type PluginSidebarFooterActionSlot,
@@ -63,7 +64,11 @@ function PluginSidebarFooterActionList({
               });
             }}
           >
-            <PluginIcon pluginId={action.pluginId} icon={action.icon} />
+            <Icon
+              name={pluginIconName(action.icon)}
+              className="size-4 shrink-0"
+              aria-hidden="true"
+            />
             <span className="sr-only">{action.title}</span>
           </SidebarMenuButton>
         </SidebarMenuItem>
@@ -79,8 +84,12 @@ function runSidebarFooterAction({
   action: PluginSidebarFooterActionSlot;
   navigate: ReturnType<typeof useNavigate>;
 }): void {
-  const openSettings = () => {
-    void navigate(getSettingsPluginRoutePath(action.pluginId));
+  const openSettings: Parameters<typeof action.run>[0]["openSettings"] = (
+    options,
+  ) => {
+    void navigate(
+      getSettingsPluginRoutePath(action.pluginId, options?.sectionId),
+    );
   };
   const warn = (error: unknown) => {
     console.warn(

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

@@ -489,9 +489,9 @@ describe("PluginSettingsDetail settings gating", () => {
       expect(requests.some((request) => request.init?.method === "POST")).toBe(
         true,
       );
-      expect(
-        requests.some((request) => request.init?.method !== "POST"),
-      ).toBe(true);
+      expect(requests.some((request) => request.init?.method !== "POST")).toBe(
+        true,
+      );
     });
 
     const pendingSwitch = screen.getByRole("switch", {
@@ -623,6 +623,77 @@ describe("PluginSettingsDetail settings gating", () => {
     ).toBeDefined();
     expect(screen.queryByText("This plugin declares no settings.")).toBeNull();
   });
+
+  it("keeps Cloud identity above experiment-gated settings sections", async () => {
+    const scrollIntoView = vi.fn();
+    HTMLElement.prototype.scrollIntoView = scrollIntoView;
+    function RemoteAccessSettings() {
+      return <div>Custom remote access settings</div>;
+    }
+    function AiGatewaySettings() {
+      return <div>Custom AI Gateway settings</div>;
+    }
+    setPluginSlotRegistrations("connect", {
+      homepageSections: [],
+      settingsSections: [
+        {
+          id: "remote-access",
+          title: "Remote access",
+          component: RemoteAccessSettings,
+        },
+        {
+          id: "cloud-ai",
+          title: "AI Gateway",
+          component: AiGatewaySettings,
+        },
+      ],
+      navPanels: [],
+      threadPanelActions: [],
+      sidebarFooterActions: [],
+      fileOpeners: [],
+      messageDirectives: [],
+    });
+    const { queryClient, wrapper } = createQueryClientTestHarness();
+    queryClient.setQueryData(systemConfigQueryKey(), systemConfig());
+    render(
+      <MemoryRouter
+        initialEntries={["/settings/plugins/connect#remote-access"]}
+      >
+        <PluginSettingsDetail
+          plugin={{
+            ...rowPlugin("running"),
+            id: "connect",
+            name: "Cloud",
+            description: "Remote access and account-backed AI.",
+            icon: "Cloud",
+            hasSettings: false,
+          }}
+        />
+      </MemoryRouter>,
+      { wrapper },
+    );
+
+    expect(screen.getByRole("heading", { name: "Cloud" })).toBeDefined();
+    expect(
+      screen.getByText("Remote access and account-backed AI."),
+    ).toBeDefined();
+    expect(screen.getByRole("switch", { name: "Disable Cloud" })).toBeDefined();
+    expect(screen.getByText("Remote access")).toBeDefined();
+    expect(screen.getByText("Custom remote access settings")).toBeDefined();
+    expect(document.getElementById("remote-access")).not.toBeNull();
+    expect(screen.queryByText("AI Gateway")).toBeNull();
+    expect(screen.queryByText("Custom AI Gateway settings")).toBeNull();
+    await vi.waitFor(() =>
+      expect(scrollIntoView).toHaveBeenCalledWith({ block: "start" }),
+    );
+
+    queryClient.setQueryData(systemConfigQueryKey(), {
+      ...systemConfig(),
+      experiments: { ...defaultExperiments, cloudAi: true },
+    });
+    expect(await screen.findByText("AI Gateway")).toBeDefined();
+    expect(screen.getByText("Custom AI Gateway settings")).toBeDefined();
+  });
 });
 
 describe("InstalledPluginRow", () => {

apps/app/src/lib/route-paths.ts

@@ -103,8 +103,14 @@ export function getSettingsRoutePath(section?: string): string {
     : `/settings/${encodeURIComponent(section)}`;
 }
 
-export function getSettingsPluginRoutePath(pluginId: string): string {
-  return `/settings/plugins/${encodeURIComponent(pluginId)}`;
+export function getSettingsPluginRoutePath(
+  pluginId: string,
+  sectionId?: string,
+): string {
+  const path = `/settings/plugins/${encodeURIComponent(pluginId)}`;
+  return sectionId === undefined
+    ? path
+    : `${path}#${encodeURIComponent(sectionId)}`;
 }
 
 export function getSettingsProviderRoutePath(providerId: string): string {

apps/app/src/lib/system-config-atoms.ts

@@ -15,6 +15,7 @@ const unavailableSystemConfig: SystemConfigResponse = {
   keybindingOverrides: [],
   experiments: {
     claudeCodeMockCliTraffic: false,
+    cloudAi: false,
     newOnboarding: false,
     toolsHub: false,
   },

apps/app/src/views/SettingsView.experiments.test.tsx

@@ -6,15 +6,18 @@ import { ExperimentsSettingsSection } from "./SettingsView";
 afterEach(cleanup);
 
 function renderSection(overrides?: {
+  onCloudAiEnabledChange?: (enabled: boolean) => void;
   onNewOnboardingEnabledChange?: (enabled: boolean) => void;
   onToolsHubEnabledChange?: (enabled: boolean) => void;
 }) {
   return render(
     <ExperimentsSettingsSection
       claudeCodeMockCliTrafficEnabled={false}
+      cloudAiEnabled={false}
       disabled={false}
       newOnboardingEnabled={false}
       onClaudeCodeMockCliTrafficEnabledChange={vi.fn()}
+      onCloudAiEnabledChange={overrides?.onCloudAiEnabledChange ?? vi.fn()}
       onNewOnboardingEnabledChange={
         overrides?.onNewOnboardingEnabledChange ?? vi.fn()
       }
@@ -25,6 +28,13 @@ function renderSection(overrides?: {
 }
 
 describe("ExperimentsSettingsSection", () => {
+  it("reports Cloud AI changes", () => {
+    const onChange = vi.fn();
+    renderSection({ onCloudAiEnabledChange: onChange });
+    fireEvent.click(screen.getByLabelText("Cloud AI"));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
   it("reports new onboarding changes", () => {
     const onChange = vi.fn();
     renderSection({ onNewOnboardingEnabledChange: onChange });