Add sidebar-navigation and Changes-view replacement slots

apps/app/src/components/layout/AppLayout.tsx

@@ -862,6 +862,7 @@ export function AppLayout({ children }: AppLayoutProps) {
             hostId={quickCreateProject.hostId}
             hostName={quickCreateProject.hostName}
             hosts={quickCreateProject.hosts}
+            nativeFolderPicker={quickCreateProject.nativeFolderPicker}
             onOpenChange={quickCreateProject.projectPathDialog.onOpenChange}
             onSubmit={quickCreateProject.submitProjectPath}
           />

apps/app/src/components/layout/app-chrome-selection.test.tsx

@@ -70,13 +70,8 @@ describe("app chrome opts out of text selection", () => {
     expect(getPanel().classList.contains("select-none")).toBe(true);
   });
 
-  it("marks the right panel's top chrome with and without the diff toolbar", () => {
-    expect(getSecondaryPanelChromeStackClassName(false)).toContain(
-      "select-none",
-    );
-    expect(getSecondaryPanelChromeStackClassName(true)).toContain(
-      "select-none",
-    );
+  it("marks the right panel's top chrome", () => {
+    expect(getSecondaryPanelChromeStackClassName()).toContain("select-none");
   });
 
   it("restores native selection on editable controls inside opted-out chrome", () => {

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

@@ -478,6 +478,7 @@ function PluginNavSidebarItem({
     content,
     enabled: splitEnabled,
     label: chrome.title,
+    onNavigate,
   });
   const splitIndicator = usePaneContentSplitIndicator(content, splitEnabled);
   const SidebarAccessory = panel?.experimental_sidebarAccessory;
@@ -507,11 +508,11 @@ function PluginNavSidebarItem({
       // sidebar, so it coexists with the dnd-kit reorder listeners.
       onPointerDown={onPointerDown}
       onSelect={(event) => {
-        onNavigate?.();
         if (event.metaKey || event.ctrlKey) {
           openInSplit();
           return;
         }
+        onNavigate?.();
         void navigate(path);
       }}
     />

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

@@ -33,12 +33,14 @@ export function PluginReplacementSlot<
   Registration extends PluginReplacementRegistration,
 >({
   children,
+  instanceId,
   onCrash,
   original,
   replacement,
   slotKind,
 }: {
   children: (registration: Registration, Original: ComponentType) => ReactNode;
+  instanceId?: string;
   onCrash?: (pluginId: string) => void;
   original: ReactNode;
   replacement: ResolvedReplacement<Registration>;
@@ -50,11 +52,12 @@ export function PluginReplacementSlot<
   return (
     <PluginOwnerRendererContext.Provider value={original}>
       <PluginSlotMount
-        key={`${registration.pluginId}/${registration.id}/${registration.generation}`}
+        key={`${registration.pluginId}/${registration.id}/${registration.generation}/${instanceId ?? "shared"}`}
         pluginId={registration.pluginId}
         slotKind={slotKind}
         slotId={registration.id}
         crashFallback={<PluginOwnerRenderer />}
+        {...(instanceId === undefined ? {} : { instanceId })}
         {...(onCrash === undefined ? {} : { onCrash })}
       >
         {children(registration, PluginOwnerRenderer)}

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

@@ -0,0 +1,28 @@
+import type { ExperimentalResponsiveDrawerProps } from "@get-bb/plugin-sdk/app";
+import { ResponsiveDrawerShell } from "@bb/shared-ui/responsive-overlay";
+import { cn } from "@bb/shared-ui/lib/utils";
+
+/** Host-owned persistent drawer for plugin surfaces with deferred realization. */
+export function PluginResponsiveDrawer({
+  open,
+  onOpenChange,
+  title,
+  children,
+  contentClassName,
+}: ExperimentalResponsiveDrawerProps) {
+  return (
+    <ResponsiveDrawerShell
+      open={open}
+      onOpenChange={onOpenChange}
+      srLabel={title}
+      contentClassName={cn(
+        "h-[92dvh] max-h-[92dvh] overflow-hidden",
+        contentClassName,
+      )}
+    >
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        {children}
+      </div>
+    </ResponsiveDrawerShell>
+  );
+}

apps/app/src/components/secondary-panel/ThreadSecondaryPanel.test.ts

@@ -1,15 +1,10 @@
 import { describe, expect, it } from "vitest";
 import {
-  getSecondaryPanelChromeStackClassName,
   getReservedInlinePanelToggleClassName,
   isSecondaryPanelLayoutTransition,
   resolveCollapsedPanelTrafficLightReserveClassName,
 } from "./ThreadSecondaryPanel";
-import {
-  CHROME_ROW_CLASS,
-  CHROME_ROW_HEIGHT_CLASS,
-  MACOS_COLLAPSED_TOP_LEFT_RESERVE_CLASS,
-} from "@/lib/bb-desktop";
+import { MACOS_COLLAPSED_TOP_LEFT_RESERVE_CLASS } from "@/lib/bb-desktop";
 import { SECONDARY_PANEL_TOP_CHROME_BACKGROUND_CLASS } from "./panelChromeClasses";
 
 describe("secondary panel surface tone", () => {
@@ -26,18 +21,6 @@ describe("secondary panel native browser bounds settling", () => {
   });
 });
 
-describe("getSecondaryPanelChromeStackClassName", () => {
-  it("reserves the combined navigation and active Diff toolbar height", () => {
-    const className = getSecondaryPanelChromeStackClassName(true);
-
-    expect(className).toContain("flex");
-    expect(className).toContain("flex-col");
-    expect(className).toContain("shrink-0");
-    expect(className).not.toContain(CHROME_ROW_HEIGHT_CLASS);
-    expect(CHROME_ROW_CLASS).toContain(CHROME_ROW_HEIGHT_CLASS);
-  });
-});
-
 // The reserved inline-toggle slot sits under root compose's pinned right-panel
 // toggle. On macOS desktop the top chrome is an [app-region:drag] window-drag
 // region; Electron resolves draggable regions in DOM order (later wins), so the