fix(web): thread shortcuts work with the narrow sidebar closed

apps/web/src/components/Sidebar.motion.ts

@@ -120,6 +120,12 @@ export function createSidebarListMotion(parent: HTMLUListElement) {
   return {
     update(animate: boolean) {
       if (disposed) return;
+      // A hidden list (the closed narrow sheet stays mounted) reports zero
+      // offsets, which would make the first pass after it opens animate every row.
+      if (parent.getClientRects().length === 0) {
+        suspend();
+        return;
+      }
       const next = new Map(
         Array.from(parent.children)
           .filter((node): node is HTMLElement => node instanceof HTMLElement && !exiting.has(node))

apps/web/src/components/sidebar/SidebarThreadRow.tsx

@@ -560,7 +560,7 @@ type SidebarThreadRowProps = {
   wokeAt: string | null;
   isActive: boolean;
   // Set on the active row only; scrolls it into view when a reveal is owed.
-  revealRef?: ((row: HTMLElement, threadKey: string) => void) | undefined;
+  revealRef?: ((row: HTMLElement, threadKey: string) => (() => void) | undefined) | undefined;
   // Unlike isActive, never true for the ancestor standing in for an open
   // subagent: drafts and PR clicks care about which composer is on screen.
   isRouteThread: boolean;
@@ -668,8 +668,13 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
   const { leaseLiveStatus, rowRef: leaseRowRef } = useSidebarRowSubscriptionLease(props.isActive);
   const { revealRef } = props;
   const rowRef = (row: HTMLElement | null) => {
-    if (row !== null) revealRef?.(row, threadKey);
-    return leaseRowRef(row);
+    const stopReveal = row === null ? undefined : revealRef?.(row, threadKey);
+    const releaseLease = leaseRowRef(row);
+    if (!stopReveal) return releaseLease;
+    return () => {
+      stopReveal();
+      releaseLease?.();
+    };
   };
   const isRegeneratingTitle = thread.titleRegeneration != null;
   const localLastVisitedAt = useUiStateStore((state) => state.threadLastVisitedAtById[threadKey]);

apps/web/src/components/sidebar/routeReveal.browser.test.tsx

@@ -1,7 +1,8 @@
 import { describe, expect, it, vi } from "vite-plus/test";
-import { userEvent } from "vite-plus/test/browser";
+import { page, userEvent } from "vite-plus/test/browser";
 
 import { render } from "../../../test/render";
+import { Sidebar, SidebarProvider, SidebarTrigger, useSidebar } from "../ui/sidebar";
 import { type SidebarRouteReveal, useActiveRowReveal } from "./routeReveal";
 
 const ROW_HEIGHT_PX = 24;
@@ -28,6 +29,12 @@ function RevealList(props: {
   );
 }
 
+// Reads the sidebar context like the real thread list, so opening the sheet re-renders it.
+function SheetRevealList(props: Parameters<typeof RevealList>[0]) {
+  useSidebar();
+  return <RevealList {...props} />;
+}
+
 const rowKeys = (count: number) => Array.from({ length: count }, (_, index) => `thread-${index}`);
 const newReveal = (): SidebarRouteReveal => ({ observedKey: null, pendingKey: null });
 
@@ -141,4 +148,46 @@ describe("useActiveRowReveal", () => {
     );
     await expect.element(screen.getByText("thread-40", { exact: true })).toBeInViewport();
   });
+
+  it("stops watching a hidden active row once it unmounts", async () => {
+    const reveal = newReveal();
+    using observe = vi.spyOn(ResizeObserver.prototype, "observe");
+    using unobserve = vi.spyOn(ResizeObserver.prototype, "unobserve");
+    using disconnect = vi.spyOn(ResizeObserver.prototype, "disconnect");
+    await using screen = await render(
+      <div hidden>
+        <RevealList reveal={reveal} rowKeys={rowKeys(50)} activeKey="thread-40" />
+      </div>,
+      // No router: the route arrives as the activeKey prop.
+      { router: false },
+    );
+    const row = screen.getByText("thread-40", { exact: true }).element();
+    expect(observe).toHaveBeenCalledWith(row);
+
+    // A widening viewport unmounts the closed sheet before it ever opens.
+    await screen.rerender(<div hidden />);
+
+    expect(
+      unobserve.mock.calls.some(([target]) => target === row) || disconnect.mock.calls.length > 0,
+    ).toBe(true);
+  });
+
+  it("reveals the open thread when the closed narrow sheet opens", async () => {
+    await page.viewport(390, 844);
+    const reveal = newReveal();
+    await using screen = await render(
+      <SidebarProvider>
+        <Sidebar>
+          <SheetRevealList reveal={reveal} rowKeys={rowKeys(50)} activeKey="thread-40" />
+        </Sidebar>
+        <SidebarTrigger />
+      </SidebarProvider>,
+      // No router: the route arrives as the activeKey prop.
+      { router: false },
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "Toggle Sidebar" }));
+
+    await expect.element(page.getByText("thread-40", { exact: true })).toBeInViewport();
+  });
 });

apps/web/src/components/sidebar/routeReveal.ts

@@ -1,5 +1,7 @@
 import { useRef } from "react";
 
+import { observeResize } from "~/lib/observeResize";
+
 import { filterSidebarV2VisibleThreads } from "../Sidebar.logic";
 
 // AppSidebarLayout owns this so drawer and Settings remounts preserve the chosen project scope.
@@ -33,16 +35,29 @@ export function completeSidebarRouteReveal(reveal: SidebarRouteReveal): void {
 export function useActiveRowReveal(reveal: SidebarRouteReveal, routeKey: string | null) {
   const mountRevealOwed = useRef(true);
   pendingSidebarRouteReveal(reveal, routeKey);
-  return (row: HTMLElement | null, rowKey: string) => {
-    if (row === null) return;
-    if (reveal.pendingKey !== rowKey && !mountRevealOwed.current) return;
+  // Returns a ref cleanup while it waits on a hidden row, so an unmount releases the wait.
+  const revealRow = (row: HTMLElement | null, rowKey: string): (() => void) | undefined => {
+    if (row === null) return undefined;
+    if (reveal.pendingKey !== rowKey && !mountRevealOwed.current) return undefined;
+    // The closed narrow sheet keeps rows mounted but hidden, and opening it does not
+    // re-render them, so wait for the row to get a box before spending the reveal.
+    if (row.getClientRects().length === 0) {
+      const stopWaiting = observeResize(row, () => {
+        if (row.getClientRects().length === 0) return;
+        stopWaiting();
+        revealRow(row, rowKey);
+      });
+      return stopWaiting;
+    }
     completeSidebarRouteReveal(reveal);
     mountRevealOwed.current = false;
     // A row under the pointer was just clicked, so it is in view; scrolling it would force a
     // layout mid-commit. Keyboard activation can come from a focused row scrolled out of view.
-    if (row.matches(":hover")) return;
+    if (row.matches(":hover")) return undefined;
     row.scrollIntoView({ block: "nearest" });
+    return undefined;
   };
+  return revealRow;
 }
 
 type RevealableThread = Parameters<typeof filterSidebarV2VisibleThreads>[0][number];

apps/web/src/components/ui/sidebar.browser.test.tsx

@@ -130,3 +130,33 @@ it("keeps the mobile sheet closed and leaves the saved desktop state alone", asy
     .toHaveAttribute("aria-pressed", "false");
   localStorage.removeItem(storageKey);
 });
+
+function MobileSheetMountedProbe() {
+  const { mobileSheetMounted } = useSidebar();
+  return <output aria-label="Sheet mounted">{String(mobileSheetMounted)}</output>;
+}
+
+it("keeps closed mobile sheet contents mounted and reports the sheet only while it shows", async () => {
+  await page.viewport(390, 844);
+  await using screen = await render(
+    <SidebarProvider>
+      <Sidebar>
+        <span>Sheet contents</span>
+      </Sidebar>
+      <SidebarTrigger />
+      <MobileSheetMountedProbe />
+    </SidebarProvider>,
+    { router: false /* no routes involved */ },
+  );
+  const sheetMounted = screen.getByLabelText("Sheet mounted");
+  // Window shortcuts registered by sidebar children only work while they stay mounted.
+  expect(document.querySelector('[data-mobile="true"]')?.textContent).toContain("Sheet contents");
+  await expect.element(sheetMounted).toHaveTextContent("false");
+
+  await userEvent.click(screen.getByRole("button", { name: "Toggle Sidebar" }));
+  await expect.element(sheetMounted).toHaveTextContent("true");
+
+  await userEvent.keyboard("{Escape}");
+  await expect.element(sheetMounted).toHaveTextContent("false");
+  expect(document.querySelector('[data-mobile="true"]')?.textContent).toContain("Sheet contents");
+});

apps/web/src/components/ui/sidebar.tsx

@@ -38,7 +38,7 @@ type SidebarContextProps = {
   setOpen: (open: boolean) => void;
   openMobile: boolean;
   mobileSheetMounted: boolean;
-  setMobileSheetElement: (element: HTMLDivElement | null) => void;
+  setMobileSheetMounted: (mounted: boolean) => void;
   setOpenMobile: (open: boolean) => void;
   isMobile: boolean;
   toggleSidebar: () => void;
@@ -204,9 +204,13 @@ function SidebarProvider({
     store.getSnapshot,
   );
   const [mobileSheetMounted, setMobileSheetMounted] = React.useState(false);
-  const setMobileSheetElement = (element: HTMLDivElement | null) => {
-    setMobileSheetMounted(element !== null);
-  };
+  if (openMobile && !mobileSheetMounted) {
+    setMobileSheetMounted(true);
+  }
+  // Widening mid-close unmounts the sheet before its close completes.
+  if (!isMobile && !openMobile && mobileSheetMounted) {
+    setMobileSheetMounted(false);
+  }
 
   const state = resolveSidebarState({ isMobile, open, openMobile });
 
@@ -215,7 +219,7 @@ function SidebarProvider({
     open,
     openMobile,
     mobileSheetMounted,
-    setMobileSheetElement,
+    setMobileSheetMounted,
     setOpen: store.setOpen,
     setOpenMobile: store.setOpenMobile,
     state,
@@ -287,7 +291,7 @@ function Sidebar({
   collapsible?: "offcanvas" | "icon" | "none";
   resizable?: boolean | SidebarResizableOptions;
 }) {
-  const { isMobile, state, openMobile, setOpenMobile, setMobileSheetElement } = useSidebar();
+  const { isMobile, state, openMobile, setOpenMobile, setMobileSheetMounted } = useSidebar();
   const offcanvasCollapsed = !isMobile && collapsible === "offcanvas" && state === "collapsed";
 
   const resolvedResizable = resolveSidebarResizable({ collapsible, isMobile, resizable });
@@ -313,9 +317,16 @@ function Sidebar({
   if (isMobile) {
     return (
       <SidebarInstanceContext value={instanceContextValue}>
-        <Sheet onOpenChange={setOpenMobile} open={openMobile}>
+        <Sheet
+          onOpenChange={setOpenMobile}
+          onOpenChangeComplete={(open) => {
+            if (!open) setMobileSheetMounted(false);
+          }}
+          open={openMobile}
+        >
+          {/* Children stay mounted while closed so their window shortcuts, like thread jumps, keep working. */}
           <SheetPopup
-            ref={setMobileSheetElement}
+            keepMounted
             className={cn(
               "w-(--sidebar-width) max-w-none bg-sidebar surface-grain p-0 text-sidebar-foreground",
               className,