refactor(ProModeSelector): wrap build mode settings in accordion (#2555)

e2e-tests/helpers/page-objects/dialogs/ProModesDialog.ts

@@ -11,7 +11,17 @@ export class ProModesDialog {
     public close: () => Promise<void>,
   ) {}
 
+  async expandBuildModeSettings() {
+    const trigger = this.page.getByRole("button", {
+      name: "Build mode settings",
+    });
+    if ((await trigger.getAttribute("aria-expanded")) !== "true") {
+      await trigger.click();
+    }
+  }
+
   async setSmartContextMode(mode: "balanced" | "off" | "deep") {
+    await this.expandBuildModeSettings();
     await this.page
       .getByTestId("smart-context-selector")
       .getByRole("button", {
@@ -21,6 +31,7 @@ export class ProModesDialog {
   }
 
   async setTurboEditsMode(mode: "off" | "classic" | "search-replace") {
+    await this.expandBuildModeSettings();
     await this.page
       .getByTestId("turbo-edits-selector")
       .getByRole("button", {

rules/base-ui-components.md

@@ -14,3 +14,12 @@
 
 - Wrapping `ToggleGroupItem` in `TooltipTrigger` without `render` also breaks `:first-child`/`:last-child` CSS selectors for rounded corners on the group.
 - For drag handles and resize rails, prefer the native `title` attribute over `Tooltip` — tooltips appear immediately on hover and interfere with drag interactions, while `title` has a built-in delay.
+
+## Accordion (Base UI vs Radix/shadcn)
+
+The `Accordion` component in `src/components/ui/accordion.tsx` wraps `@base-ui/react/accordion`, **not** Radix or shadcn. The APIs differ:
+
+- **No `type` or `collapsible` props** — these are Radix/shadcn-only. Reviewers may suggest `type="single" collapsible` but these props don't exist on Base UI's Accordion.
+- Use `multiple` (boolean, default `false`) to allow multiple items open at once.
+- Use `defaultValue` (array of item values) to control which items start expanded.
+- Items are collapsible by default — no extra prop needed.

rules/e2e-testing.md

@@ -69,6 +69,10 @@ Snapshots must be **deterministic** and **platform-agnostic**. They must not con
 
 If the output under test contains non-deterministic or platform-specific content, add sanitization logic in the test helper (e.g. in `test_helper.ts`) to normalize it before snapshotting.
 
+## Accordion-wrapped settings in E2E tests
+
+The Pro mode build settings (Web Access, Turbo Edits, Smart Context) are inside a collapsed `<Accordion>` in `ProModeSelector`. E2E test helpers must expand the accordion before interacting with elements inside it. The `ProModesDialog` class in `e2e-tests/helpers/page-objects/dialogs/ProModesDialog.ts` has an `expandBuildModeSettings()` method that handles this — call it before clicking any build mode setting buttons.
+
 ## E2E test fixtures with .dyad directories
 
 When adding E2E test fixtures that need a `.dyad` directory for testing:

src/components/ProModeSelector.tsx

@@ -12,6 +12,12 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from "@/components/ui/tooltip";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@/components/ui/accordion";
 import { useSettings } from "@/hooks/useSettings";
 import { ipc } from "@/ipc/types";
 import { hasDyadProKey, type UserSettings } from "@/lib/schemas";
@@ -95,7 +101,7 @@ export function ProModeSelector() {
               </a>
             </div>
           )}
-          <div className="flex flex-col gap-5">
+          <div className="flex flex-col gap-3">
             <SelectorRow
               id="pro-enabled"
               label="Enable Dyad Pro"
@@ -104,25 +110,39 @@ export function ProModeSelector() {
               settingEnabled={Boolean(settings?.enableDyadPro)}
               toggle={toggleProEnabled}
             />
-            <SelectorRow
-              id="web-search"
-              label="Web Access"
-              tooltip="Allows Dyad to access the web (e.g. search for information)"
-              isTogglable={proModeTogglable}
-              settingEnabled={Boolean(settings?.enableProWebSearch)}
-              toggle={toggleWebSearch}
-            />
+            <Accordion>
+              <AccordionItem
+                value="build-mode-settings"
+                className="rounded-lg border border-border/60 bg-muted/30 px-3 border-b-0"
+              >
+                <AccordionTrigger className="cursor-pointer py-2 text-foreground/80 hover:text-foreground hover:no-underline">
+                  Build mode settings
+                </AccordionTrigger>
+                <AccordionContent className="pb-3">
+                  <div className="flex flex-col gap-5 pt-2">
+                    <SelectorRow
+                      id="web-search"
+                      label="Web Access"
+                      tooltip="Allows Dyad to access the web (e.g. search for information)"
+                      isTogglable={proModeTogglable}
+                      settingEnabled={Boolean(settings?.enableProWebSearch)}
+                      toggle={toggleWebSearch}
+                    />
 
-            <TurboEditsSelector
-              isTogglable={proModeTogglable}
-              settings={settings}
-              onValueChange={handleTurboEditsChange}
-            />
-            <SmartContextSelector
-              isTogglable={proModeTogglable}
-              settings={settings}
-              onValueChange={handleSmartContextChange}
-            />
+                    <TurboEditsSelector
+                      isTogglable={proModeTogglable}
+                      settings={settings}
+                      onValueChange={handleTurboEditsChange}
+                    />
+                    <SmartContextSelector
+                      isTogglable={proModeTogglable}
+                      settings={settings}
+                      onValueChange={handleSmartContextChange}
+                    />
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
           </div>
         </div>
       </PopoverContent>

src/components/ui/accordion.tsx

@@ -53,7 +53,7 @@ function AccordionContent({
   return (
     <AccordionPrimitive.Panel
       data-slot="accordion-content"
-      className="data-closed:animate-accordion-up data-open:animate-accordion-down overflow-hidden text-sm"
+      className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0"
       {...props}
     >
       <div className={cn("pt-0 pb-4", className)}>{children}</div>