Desktop secondary-panel + sidebar UX batch (sawyer-next)

apps/app/src/App.tsx

@@ -5,6 +5,7 @@ import { AuthCallbackView } from "./views/AuthCallbackView";
 import { RootComposeRoute } from "./views/RootComposeView";
 import { QuickCreateProjectProvider } from "./hooks/useQuickCreateProject";
 import { ProviderCliHealthToasts } from "./components/provider-cli/ProviderCliHealthToasts";
+import { useDesktopThemeSync } from "./hooks/useDesktopThemeSync";
 import {
   useDesktopUpdateAvailableToast,
   useUpdateAvailableToast,
@@ -96,6 +97,9 @@ export function App() {
   useUpdateAvailableToast();
   // Show a separate toast when the Electron shell reports a desktop update.
   useDesktopUpdateAvailableToast();
+  // Keep the Electron window chrome (traffic lights, inactive title bar)
+  // in sync with bb's resolved theme.
+  useDesktopThemeSync();
 
   return (
     <QuickCreateProjectProvider>

apps/app/src/app.css

@@ -117,9 +117,23 @@
    * toast in the stack.
    */
   :where(
-      [data-sonner-toast].bb-app-toast[data-expanded="false"][data-front="false"]
-    ) {
+    [data-sonner-toast].bb-app-toast[data-expanded="false"][data-front="false"]
+  ) {
     overflow: hidden;
     border-radius: var(--radius-md);
   }
+
+  /*
+   * Opt out of the global thin scrollbar for horizontally-scrolling strips
+   * (e.g. the secondary-panel tab strip) where the scrollbar would clutter a
+   * short row. The element still scrolls; only the scrollbar chrome is hidden.
+   */
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
 }

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

@@ -6,6 +6,7 @@ import {
   fireEvent,
   render,
   screen,
+  waitFor,
   within,
 } from "@testing-library/react";
 import { Suspense, type ReactNode } from "react";
@@ -16,6 +17,7 @@ import type {
   BbDesktopInfoChangeHandler,
   SystemConfigResponse,
 } from "@bb/server-contract";
+import { createNoopDesktopBrowserApi } from "@/test/bb-desktop-test-utils";
 import { afterEach, describe, expect, it } from "vitest";
 import { QuickCreateProjectProvider } from "@/hooks/useQuickCreateProject";
 import { createQueryClientTestHarness } from "@/test/queryClientTestHarness";
@@ -32,6 +34,7 @@ import {
 } from "@/lib/bb-desktop";
 
 interface RenderAppLayoutArgs {
+  children?: ReactNode;
   desktopInfo: BbDesktopApi | null;
   initialEntry: string;
 }
@@ -40,6 +43,11 @@ interface TestProvidersProps {
   children: ReactNode;
 }
 
+interface SidebarResizeEndScenario {
+  name: string;
+  finishDrag: () => void;
+}
+
 const testSystemConfig: SystemConfigResponse = {
   featureFlags: {
     askUserQuestion: false,
@@ -52,6 +60,7 @@ const testSystemConfig: SystemConfigResponse = {
 function createBbDesktopApi(info: BbDesktopInfo): BbDesktopApi {
   return {
     ...info,
+    browser: createNoopDesktopBrowserApi(),
     async checkForUpdates() {
       return info;
     },
@@ -64,6 +73,9 @@ function createBbDesktopApi(info: BbDesktopInfo): BbDesktopApi {
     onChange(_listener: BbDesktopInfoChangeHandler) {
       return () => undefined;
     },
+    setTheme() {
+      // no-op
+    },
   };
 }
 
@@ -113,7 +125,7 @@ async function renderAppLayout(args: RenderAppLayoutArgs): Promise<void> {
           path="*"
           element={
             <AppLayout>
-              <div>Layout content</div>
+              {args.children ?? <div>Layout content</div>}
             </AppLayout>
           }
         />
@@ -313,4 +325,68 @@ describe("AppLayout desktop chrome", () => {
       MACOS_SIDEBAR_TRIGGER_OFFSET_CLASS,
     );
   });
+
+  it.each<SidebarResizeEndScenario>([
+    {
+      name: "mouseup",
+      finishDrag: () => {
+        fireEvent.mouseUp(window, { clientX: 360 });
+      },
+    },
+    {
+      name: "window blur",
+      finishDrag: () => {
+        fireEvent.blur(window);
+      },
+    },
+    {
+      name: "Escape",
+      finishDrag: () => {
+        fireEvent.keyDown(window, { key: "Escape" });
+      },
+    },
+  ])(
+    "disables iframe pointer events while sidebar resize is active and restores them after $name",
+    async ({ finishDrag }) => {
+      const iframePointerEventsNoneClass = "[&_iframe]:pointer-events-none";
+
+      await renderAppLayout({
+        desktopInfo: null,
+        initialEntry: "/projects/proj_sidebar_resize",
+        children: <iframe title="Status app" />,
+      });
+
+      const appLayoutRoot = await screen.findByTestId("app-layout-root");
+      const resizeHandle = screen.getByTestId("app-sidebar-resize-handle");
+      const iframe = screen.getByTitle("Status app");
+
+      expect(appLayoutRoot.contains(iframe)).toBe(true);
+      expect(appLayoutRoot.className).not.toContain(
+        iframePointerEventsNoneClass,
+      );
+
+      fireEvent.mouseDown(resizeHandle, {
+        buttons: 1,
+        clientX: 320,
+        clientY: 0,
+      });
+
+      await waitFor(() => {
+        expect(appLayoutRoot.className).toContain(
+          iframePointerEventsNoneClass,
+        );
+      });
+      expect(document.body.style.cursor).toBe("col-resize");
+
+      finishDrag();
+
+      await waitFor(() => {
+        expect(appLayoutRoot.className).not.toContain(
+          iframePointerEventsNoneClass,
+        );
+      });
+      expect(document.body.style.cursor).toBe("");
+      expect(document.body.style.userSelect).toBe("");
+    },
+  );
 });

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

@@ -1,4 +1,10 @@
-import { Fragment, type CSSProperties, type Ref, type ReactNode } from "react";
+import {
+  Fragment,
+  type CSSProperties,
+  type MouseEvent as ReactMouseEvent,
+  type Ref,
+  type ReactNode,
+} from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
@@ -46,6 +52,7 @@ import {
 import { useQuickCreateProjectController } from "@/hooks/useQuickCreateProject";
 import { useStandardManagerTimelinePreference } from "@/lib/manager-timeline-view-preference";
 import { useSetRootComposeProjectId } from "@/lib/root-compose-selection";
+import { IFRAME_POINTER_EVENTS_NONE_CLASS } from "@/lib/iframe-drag-guard";
 
 const SIDEBAR_WIDTH_KEY = "bb.sidebar.width";
 const SIDEBAR_OPEN_KEY = "bb.sidebar.open";
@@ -98,16 +105,20 @@ const sidebarOpenAtom = atomWithStorage<boolean>(
 );
 
 interface SidebarStateBridgeProps {
+  className?: string;
   providerRef: Ref<HTMLDivElement>;
   style: CSSProperties;
   children: ReactNode;
 }
 
+type SidebarResizeMouseEvent = ReactMouseEvent<HTMLDivElement>;
+
 type SidebarProviderStyle = CSSProperties & {
   "--sidebar-width": string;
 };
 
 function SidebarStateBridge({
+  className,
   providerRef,
   style,
   children,
@@ -117,6 +128,8 @@ function SidebarStateBridge({
     <SidebarProvider
       ref={providerRef}
       style={style}
+      className={className}
+      data-testid="app-layout-root"
       open={open}
       onOpenChange={setOpen}
     >
@@ -135,6 +148,12 @@ function FloatingSidebarTrigger() {
   );
 }
 
+function resetSidebarResizeDocumentState(): void {
+  document.body.classList.remove("sidebar-resizing");
+  document.body.style.cursor = "";
+  document.body.style.userSelect = "";
+}
+
 /**
  * Desktop-only sidebar toggle, pinned to the window's top-left just right of
  * the macOS traffic lights. Rendered once at the layout root — outside the
@@ -443,7 +462,7 @@ export function AppLayout({ children }: AppLayoutProps) {
   })();
 
   const handleResizeMouseDown = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
+    (event: SidebarResizeMouseEvent) => {
       event.preventDefault();
       setIsSidebarResizing(true);
       startXRef.current = event.clientX;
@@ -455,6 +474,20 @@ export function AppLayout({ children }: AppLayoutProps) {
     [],
   );
 
+  const finishSidebarResize = useCallback(() => {
+    if (animationFrameRef.current !== null) {
+      window.cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    providerRef.current?.style.setProperty(
+      "--sidebar-width",
+      `${liveWidthRef.current}px`,
+    );
+    setSidebarWidth(liveWidthRef.current);
+    setIsSidebarResizing(false);
+    resetSidebarResizeDocumentState();
+  }, [setSidebarWidth]);
+
   useEffect(() => {
     if (!isSidebarResizing) return;
 
@@ -475,36 +508,28 @@ export function AppLayout({ children }: AppLayoutProps) {
       }
     };
 
-    const handleMouseUp = () => {
-      if (animationFrameRef.current !== null) {
-        window.cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = null;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        finishSidebarResize();
       }
-      providerRef.current?.style.setProperty(
-        "--sidebar-width",
-        `${liveWidthRef.current}px`,
-      );
-      setSidebarWidth(liveWidthRef.current);
-      setIsSidebarResizing(false);
-      document.body.classList.remove("sidebar-resizing");
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
     };
 
     window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("mouseup", finishSidebarResize);
+    window.addEventListener("blur", finishSidebarResize);
+    window.addEventListener("keydown", handleKeyDown);
     return () => {
       window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("mouseup", finishSidebarResize);
+      window.removeEventListener("blur", finishSidebarResize);
+      window.removeEventListener("keydown", handleKeyDown);
       if (animationFrameRef.current !== null) {
         window.cancelAnimationFrame(animationFrameRef.current);
         animationFrameRef.current = null;
       }
-      document.body.classList.remove("sidebar-resizing");
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
+      resetSidebarResizeDocumentState();
     };
-  }, [isSidebarResizing, setSidebarWidth]);
+  }, [finishSidebarResize, isSidebarResizing]);
 
   useEffect(() => {
     liveWidthRef.current = sidebarWidth;
@@ -519,6 +544,9 @@ export function AppLayout({ children }: AppLayoutProps) {
     <ProjectActionsProvider>
       <ThreadActionsProvider>
         <SidebarStateBridge
+          className={
+            isSidebarResizing ? IFRAME_POINTER_EVENTS_NONE_CLASS : undefined
+          }
           providerRef={providerRef}
           style={sidebarProviderStyle}
         >

apps/app/src/components/pickers/ModelReasoningPicker.tsx

@@ -51,7 +51,7 @@ interface ModelReasoningPickerProps {
   formatModelLabel?: (displayName: string) => string;
   // Reasoning state — supported efforts are per-model, so callers derive
   // these options from the SELECTED model and reconcile the level on model
-  // change via `reconcileReasoningLevel` in src/lib.
+  // change via `reconcileReasoningLevel` in @bb/domain.
   reasoningValue: ReasoningLevel;
   reasoningOptions: readonly PickerOption<ReasoningLevel>[];
   onReasoningChange: (value: ReasoningLevel) => void;