From 1cf681e76af0c36546dd13886b2025c976be3b3a Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Wed, 26 Aug 2026 16:36:27 -0400
Subject: [PATCH 1/4] fix(desktop): keep project sheets independent from
 threads

Render project workspace sheets as their own right-side overlay while preserving the underlying thread, escape behavior, and resize-layer boundaries.

Signed-off-by: Thomas Petersen <thomasp@squareup.com>
---
 .../channels/ui/ChannelPane.helpers.test.mjs  | 16 +++++
 .../channels/ui/ChannelPane.helpers.ts        |  6 +-
 .../src/features/channels/ui/ChannelPane.tsx  | 29 +++++---
 .../channels/ui/FocusThreadDrawer.tsx         |  7 +-
 .../channels/ui/RightAuxiliaryPane.tsx        |  2 +-
 .../tests/e2e/project-commit-detail.spec.ts   | 72 ++++++++++++++++++-
 6 files changed, 118 insertions(+), 14 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelPane.helpers.test.mjs b/desktop/src/features/channels/ui/ChannelPane.helpers.test.mjs
index 10a948e7053..9d2cd6a32dd 100644
--- a/desktop/src/features/channels/ui/ChannelPane.helpers.test.mjs
+++ b/desktop/src/features/channels/ui/ChannelPane.helpers.test.mjs
@@ -42,6 +42,22 @@ test("focus idle drawers yield to every higher-priority auxiliary surface", () =
   }
 });
 
+test("an explicit thread override keeps the idle panel in its own focus drawer", () => {
+  assert.equal(
+    shouldUseFocusIdleDrawer({
+      channelManagementOpen: false,
+      hasAgentSession: false,
+      hasIdleAuxiliaryPanel: true,
+      hasIdlePanelCloseHandler: true,
+      hasProfilePanel: false,
+      hasThreadSurface: true,
+      overrideThread: true,
+      useSplitAuxiliaryPane: false,
+    }),
+    true,
+  );
+});
+
 test("getChannelIntroKind names project homes ahead of regular streams", () => {
   assert.equal(getChannelIntroKind(channel(), true), "project channel");
   assert.equal(getChannelIntroKind(channel(), false), "regular channel");
diff --git a/desktop/src/features/channels/ui/ChannelPane.helpers.ts b/desktop/src/features/channels/ui/ChannelPane.helpers.ts
index 695fef166fe..f59568779d1 100644
--- a/desktop/src/features/channels/ui/ChannelPane.helpers.ts
+++ b/desktop/src/features/channels/ui/ChannelPane.helpers.ts
@@ -10,6 +10,7 @@ export function shouldUseFocusIdleDrawer({
   hasIdlePanelCloseHandler,
   hasProfilePanel,
   hasThreadSurface,
+  overrideThread = false,
   useSplitAuxiliaryPane,
 }: {
   channelManagementOpen: boolean;
@@ -18,14 +19,15 @@ export function shouldUseFocusIdleDrawer({
   hasIdlePanelCloseHandler: boolean;
   hasProfilePanel: boolean;
   hasThreadSurface: boolean;
+  overrideThread?: boolean;
   useSplitAuxiliaryPane: boolean;
 }): boolean {
   return (
-    useSplitAuxiliaryPane &&
+    (useSplitAuxiliaryPane || overrideThread) &&
     !channelManagementOpen &&
     !hasAgentSession &&
     !hasProfilePanel &&
-    !hasThreadSurface &&
+    (!hasThreadSurface || overrideThread) &&
     hasIdleAuxiliaryPanel &&
     hasIdlePanelCloseHandler
   );
diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 0d9a5eeb1ec..4a3180dc8e8 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -419,10 +419,10 @@ export const ChannelPane = React.memo(function ChannelPane({
   const isOverlay = useIsThreadPanelOverlay();
   const useSplitAuxiliaryPane = !isSinglePanelView && !isOverlay;
   const threadViewMode = useThreadViewMode();
+  const hasThreadSurface =
+    Boolean(threadHeadMessage) || shouldShowThreadSkeleton;
   const useFocusThreadDrawer =
-    threadViewMode === "focus" &&
-    useSplitAuxiliaryPane &&
-    (Boolean(threadHeadMessage) || shouldShowThreadSkeleton);
+    threadViewMode === "focus" && useSplitAuxiliaryPane && hasThreadSurface;
   const selectedAgent = React.useMemo(
     () =>
       agentSessionSelection.resolveSelectedAgentSession({
@@ -435,19 +435,26 @@ export const ChannelPane = React.memo(function ChannelPane({
   );
   const hasIdleAuxiliary =
     Boolean(idleAuxiliaryPanel) && Boolean(onCloseIdleAuxiliaryPanel);
+  const priorityIdleAuxiliary = shouldPrioritizeIdleAuxiliary(
+    idleAuxiliaryOverridesThread,
+    hasIdleAuxiliary,
+  );
+  const overlayIdleAuxiliaryOverThread =
+    priorityIdleAuxiliary && hasThreadSurface && !isOverlay;
+  const replaceThreadWithIdleAuxiliary =
+    priorityIdleAuxiliary && hasThreadSurface && isOverlay;
   const useFocusIdleDrawer = shouldUseFocusIdleDrawer({
     channelManagementOpen,
     hasAgentSession: Boolean(activeChannel && selectedAgent),
     hasIdleAuxiliaryPanel: Boolean(idleAuxiliaryPanel),
     hasIdlePanelCloseHandler: Boolean(onCloseIdleAuxiliaryPanel),
     hasProfilePanel: Boolean(profilePanelPubkey),
-    hasThreadSurface: Boolean(threadHeadMessage) || shouldShowThreadSkeleton,
+    hasThreadSurface,
+    overrideThread: overlayIdleAuxiliaryOverThread,
     useSplitAuxiliaryPane,
   });
-  const priorityIdleAuxiliary = shouldPrioritizeIdleAuxiliary(
-    idleAuxiliaryOverridesThread,
-    hasIdleAuxiliary,
-  );
+  const showIdleAuxiliaryOverThread =
+    overlayIdleAuxiliaryOverThread && useFocusIdleDrawer;
   const { channelIsCovered, markExitComplete } = useFocusDrawerPresence(
     useFocusThreadDrawer || useFocusIdleDrawer,
     priorityIdleAuxiliary
@@ -510,6 +517,7 @@ export const ChannelPane = React.memo(function ChannelPane({
     useFocusThreadDrawer ? (
       <FocusThreadDrawer
         channelName={activeChannel?.name ?? "channel"}
+        escapeEnabled={!showIdleAuxiliaryOverThread}
         hasActiveEdit={threadEditTarget !== null}
         key={THREAD_SURFACE_KEY}
         onClose={onCloseThread}
@@ -821,7 +829,7 @@ export const ChannelPane = React.memo(function ChannelPane({
             useSplitAuxiliaryPane={useSplitAuxiliaryPane}
             transparentChrome={hasSplitAuxiliaryPane}
           />
-        ) : priorityIdleAuxiliary && idleAuxiliarySurface ? (
+        ) : replaceThreadWithIdleAuxiliary && idleAuxiliarySurface ? (
           idleAuxiliarySurface
         ) : threadHeadMessage ? (
           (() => {
@@ -977,6 +985,9 @@ export const ChannelPane = React.memo(function ChannelPane({
           idleAuxiliarySurface
         )}
       </AnimatePresence>
+      <AnimatePresence onExitComplete={markExitComplete}>
+        {showIdleAuxiliaryOverThread ? idleAuxiliarySurface : null}
+      </AnimatePresence>
     </div>
   );
 });
diff --git a/desktop/src/features/channels/ui/FocusThreadDrawer.tsx b/desktop/src/features/channels/ui/FocusThreadDrawer.tsx
index 626dbbddc27..8217b25b81b 100644
--- a/desktop/src/features/channels/ui/FocusThreadDrawer.tsx
+++ b/desktop/src/features/channels/ui/FocusThreadDrawer.tsx
@@ -11,6 +11,8 @@ import { cn } from "@/shared/lib/cn";
 type FocusThreadDrawerProps = {
   channelName: string;
   children: React.ReactNode;
+  /** Prevent a covered drawer from handling Escape before its overlay. */
+  escapeEnabled?: boolean;
   /** Accessible name for the drawer. Channel threads leave the default. */
   label?: string;
   hasActiveEdit?: boolean;
@@ -142,6 +144,7 @@ const REDUCED_MOTION_TRANSITION = { duration: 0.12, ease: "linear" } as const;
 export function FocusThreadDrawer({
   channelName,
   children,
+  escapeEnabled = true,
   label = "Thread",
   hasActiveEdit = false,
   onClose,
@@ -152,6 +155,8 @@ export function FocusThreadDrawer({
   const previousFocusRef = React.useRef<HTMLElement | null>(null);
 
   React.useEffect(() => {
+    if (!escapeEnabled) return;
+
     function handleEscape(event: KeyboardEvent) {
       if (event.key !== "Escape") return;
       const target = event.target;
@@ -171,7 +176,7 @@ export function FocusThreadDrawer({
     return () => {
       window.removeEventListener("keydown", handleEscape, { capture: true });
     };
-  }, [hasActiveEdit, onClose]);
+  }, [escapeEnabled, hasActiveEdit, onClose]);
 
   React.useLayoutEffect(() => {
     previousFocusRef.current =
diff --git a/desktop/src/features/channels/ui/RightAuxiliaryPane.tsx b/desktop/src/features/channels/ui/RightAuxiliaryPane.tsx
index 68f68890bbf..49fd2b58fc1 100644
--- a/desktop/src/features/channels/ui/RightAuxiliaryPane.tsx
+++ b/desktop/src/features/channels/ui/RightAuxiliaryPane.tsx
@@ -31,7 +31,7 @@ export function RightAuxiliaryPane({
   return (
     <aside
       className={cn(
-        "group/right-pane relative flex h-full shrink-0 flex-col overflow-hidden bg-background",
+        "group/right-pane relative isolate flex h-full shrink-0 flex-col overflow-hidden bg-background",
         detached
           ? "bg-transparent"
           : "before:pointer-events-none before:absolute before:bottom-0 before:left-0 before:top-0 before:z-50 before:w-px before:bg-border/80 before:content-['']",
diff --git a/desktop/tests/e2e/project-commit-detail.spec.ts b/desktop/tests/e2e/project-commit-detail.spec.ts
index 6c84a170a93..5b7b50cd594 100644
--- a/desktop/tests/e2e/project-commit-detail.spec.ts
+++ b/desktop/tests/e2e/project-commit-detail.spec.ts
@@ -781,7 +781,7 @@ test("latest files commit opens its detail without a divider", async ({
   await expect(page.getByTestId("project-commit-detail")).toBeVisible();
 });
 
-test("project workspace sheet enters at its settled width", async ({
+test("project workspace sheet stays independent from an open thread", async ({
   page,
 }) => {
   await enableProjectsFeature(page);
@@ -792,6 +792,7 @@ test("project workspace sheet enters at its settled width", async ({
   await page.getByTestId("create-project-name").fill("sheet-motion-demo");
   await page.getByTestId("create-project-submit").click();
   await expect(page.getByTestId("project-channel-home")).toBeVisible();
+  await page.setViewportSize({ height: 720, width: 820 });
 
   const summaryColumn = page.getByTestId("project-home-summary-column");
   const resizeHandle = summaryColumn.getByTestId(
@@ -822,6 +823,75 @@ test("project workspace sheet enters at its settled width", async ({
   expect(
     Math.abs(settledDrawerWidth - enteringDrawerWidth),
   ).toBeLessThanOrEqual(1);
+
+  await focusDrawer.getByTestId("auxiliary-panel-close").click();
+  await expect(page.getByTestId("project-home-workspace-sheet")).toHaveCount(0);
+  await expect(page.getByTestId("project-home-summary-column")).toBeVisible();
+  await waitForMockLiveSubscription(page, "sheet-motion-demo");
+  const threadRootContent = "Workspace drawer thread root";
+  await page.evaluate((content) => {
+    window.__BUZZ_E2E_EMIT_MOCK_MESSAGE__?.({
+      channelName: "sheet-motion-demo",
+      content,
+    });
+  }, threadRootContent);
+  const threadRoot = page
+    .getByTestId("message-timeline")
+    .getByTestId("message-row")
+    .filter({ hasText: threadRootContent });
+  await expect(threadRoot).toBeVisible();
+  await threadRoot.hover();
+  await threadRoot.getByRole("button", { name: "Reply" }).click();
+  await expect(page.getByTestId("message-thread-panel")).toBeVisible();
+
+  await page.getByTestId("project-home-context-tasks").click();
+  await expect(page.getByTestId("project-home-workspace-sheet")).toBeVisible();
+  const workspaceDrawer = page.getByTestId("focus-thread-drawer");
+  await expect(workspaceDrawer).toHaveCount(1);
+  await expect(
+    workspaceDrawer.getByTestId("project-home-workspace-sheet"),
+  ).toBeVisible();
+  await expect(page.getByTestId("message-thread-panel")).toHaveCount(1);
+  await expect(workspaceDrawer.getByTestId("message-thread-panel")).toHaveCount(
+    0,
+  );
+
+  await workspaceDrawer.getByTestId("auxiliary-panel-close").click();
+  await expect(page.getByTestId("project-home-workspace-sheet")).toHaveCount(0);
+  await expect(page.getByTestId("message-thread-panel")).toBeVisible();
+
+  await page.setViewportSize({ height: 1080, width: 1920 });
+  const splitThreadPane = page
+    .locator(
+      '[data-testid="message-thread-panel"]:has([data-testid="right-auxiliary-pane-resize-handle"])',
+    )
+    .first();
+  await expect(splitThreadPane).toBeVisible();
+  const threadResizeHandle = splitThreadPane.getByTestId(
+    "right-auxiliary-pane-resize-handle",
+  );
+  const threadResizeHandleBox = await threadResizeHandle.boundingBox();
+  expect(threadResizeHandleBox).not.toBeNull();
+
+  await page.getByTestId("project-home-context-tasks").click();
+  await expect(page.getByTestId("project-home-workspace-sheet")).toBeVisible();
+  await waitForAnimations(page);
+  const workspaceCoversThreadDivider = await page.evaluate(
+    ({ x, y }) => {
+      return Boolean(
+        document
+          .elementFromPoint(x, y)
+          ?.closest('[data-testid="focus-thread-drawer"]'),
+      );
+    },
+    {
+      x:
+        (threadResizeHandleBox?.x ?? 0) +
+        (threadResizeHandleBox?.width ?? 0) / 2,
+      y: (threadResizeHandleBox?.y ?? 0) + 40,
+    },
+  );
+  expect(workspaceCoversThreadDivider).toBe(true);
 });
 
 test("commit detail opens from the commits feed with a diff", async ({

From df2decf63c8eaec53187d047d4cc99d12c8e5bd9 Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Wed, 26 Aug 2026 18:29:38 -0400
Subject: [PATCH 2/4] fix(desktop): isolate covered thread accessibility

Keep preserved threads out of keyboard and assistive-technology navigation while project sheets cover them, then restore focus when the sheet closes.

Signed-off-by: Thomas Petersen <thomasp@squareup.com>
---
 .../src/features/channels/ui/ChannelPane.tsx  | 33 ++++++-----
 .../channels/ui/FocusThreadDrawer.tsx         | 10 +++-
 .../channels/ui/ThreadPanelSurface.tsx        | 57 +++++++++++++++++++
 .../tests/e2e/project-commit-detail.spec.ts   | 31 +++++++++-
 4 files changed, 115 insertions(+), 16 deletions(-)
 create mode 100644 desktop/src/features/channels/ui/ThreadPanelSurface.tsx

diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 4a3180dc8e8..96870b93d5d 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -30,6 +30,10 @@ import { AgentSessionThreadPanel } from "@/features/channels/ui/AgentSessionThre
 import { ChannelManagementAuxiliaryPanel } from "@/features/channels/ui/ChannelManagementAuxiliaryPanel";
 import { IdleAuxiliaryPanel } from "@/features/channels/ui/IdleAuxiliaryPanel";
 import { RightAuxiliaryPane } from "@/features/channels/ui/RightAuxiliaryPane";
+import {
+  ThreadPanelSurface,
+  useThreadPanelSurface,
+} from "@/features/channels/ui/ThreadPanelSurface";
 import { ThreadViewModeToggle } from "@/features/channels/ui/ThreadViewModeToggle";
 import { FocusThreadDrawer } from "@/features/channels/ui/FocusThreadDrawer";
 import { THREAD_SURFACE_KEY } from "@/features/channels/lib/threadFocusLayout";
@@ -182,6 +186,7 @@ export const ChannelPane = React.memo(function ChannelPane({
   const timelineScrollRef = React.useRef<HTMLDivElement>(null);
   const messageTimelineRef = React.useRef<MessageTimelineHandle>(null);
   const composerWrapperRef = React.useRef<HTMLDivElement>(null);
+  const { ref: threadSurfaceRef, restoreFocusTarget } = useThreadPanelSurface();
   const { goChannel } = useAppNavigation();
   const prepareDmSendChannel = usePrepareDmSendChannel(
     activeChannel,
@@ -513,20 +518,19 @@ export const ChannelPane = React.memo(function ChannelPane({
     ) : (
       <React.Fragment key={options.key ?? testId}>{panel}</React.Fragment>
     );
-  const wrapThreadPanel = (panel: React.ReactNode) =>
-    useFocusThreadDrawer ? (
-      <FocusThreadDrawer
-        channelName={activeChannel?.name ?? "channel"}
-        escapeEnabled={!showIdleAuxiliaryOverThread}
-        hasActiveEdit={threadEditTarget !== null}
-        key={THREAD_SURFACE_KEY}
-        onClose={onCloseThread}
-      >
-        {panel}
-      </FocusThreadDrawer>
-    ) : (
-      wrapAux(panel, "message-thread-panel", { key: THREAD_SURFACE_KEY })
-    );
+  const wrapThreadPanel = (panel: React.ReactNode) => (
+    <ThreadPanelSurface
+      channelName={activeChannel?.name ?? "channel"}
+      covered={showIdleAuxiliaryOverThread}
+      hasActiveEdit={threadEditTarget !== null}
+      isFocusDrawer={useFocusThreadDrawer}
+      key={THREAD_SURFACE_KEY}
+      onClose={onCloseThread}
+      ref={threadSurfaceRef}
+    >
+      {useFocusThreadDrawer ? panel : wrapAux(panel, "message-thread-panel")}
+    </ThreadPanelSurface>
+  );
   const wrapIdlePanel = (panel: React.ReactNode) =>
     useFocusIdleDrawer && onCloseIdleAuxiliaryPanel ? (
       <FocusThreadDrawer
@@ -534,6 +538,7 @@ export const ChannelPane = React.memo(function ChannelPane({
         key="idle-auxiliary-surface"
         label={idleAuxiliaryTitle || "Panel"}
         onClose={onCloseIdleAuxiliaryPanel}
+        restoreFocusTarget={restoreFocusTarget}
       >
         {panel}
       </FocusThreadDrawer>
diff --git a/desktop/src/features/channels/ui/FocusThreadDrawer.tsx b/desktop/src/features/channels/ui/FocusThreadDrawer.tsx
index 8217b25b81b..b98f3e98c90 100644
--- a/desktop/src/features/channels/ui/FocusThreadDrawer.tsx
+++ b/desktop/src/features/channels/ui/FocusThreadDrawer.tsx
@@ -17,6 +17,8 @@ type FocusThreadDrawerProps = {
   label?: string;
   hasActiveEdit?: boolean;
   onClose: () => void;
+  /** Resolve an explicit focus target after this drawer has been dismissed. */
+  restoreFocusTarget?: () => HTMLElement | null;
 };
 
 /**
@@ -148,6 +150,7 @@ export function FocusThreadDrawer({
   label = "Thread",
   hasActiveEdit = false,
   onClose,
+  restoreFocusTarget,
 }: FocusThreadDrawerProps) {
   const prefersReducedMotion = useReducedMotion();
   const travelPx = prefersReducedMotion ? 0 : THREAD_FOCUS_DRAWER_TRAVEL_PX;
@@ -188,6 +191,11 @@ export function FocusThreadDrawer({
     return () => {
       const previousFocus = previousFocusRef.current;
       requestAnimationFrame(() => {
+        const explicitTarget = restoreFocusTarget?.();
+        if (explicitTarget) {
+          explicitTarget.focus({ preventScroll: true });
+          return;
+        }
         // A real dismissal keeps focus mode selected; a presentation switch
         // has already selected split mode and owns focus inside the new panel.
         if (getThreadViewMode() === "focus") {
@@ -195,7 +203,7 @@ export function FocusThreadDrawer({
         }
       });
     };
-  }, []);
+  }, [restoreFocusTarget]);
 
   return (
     <div
diff --git a/desktop/src/features/channels/ui/ThreadPanelSurface.tsx b/desktop/src/features/channels/ui/ThreadPanelSurface.tsx
new file mode 100644
index 00000000000..c6c27feac26
--- /dev/null
+++ b/desktop/src/features/channels/ui/ThreadPanelSurface.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+
+import { FocusThreadDrawer } from "@/features/channels/ui/FocusThreadDrawer";
+
+type ThreadPanelSurfaceProps = {
+  channelName: string;
+  children: React.ReactNode;
+  covered: boolean;
+  hasActiveEdit: boolean;
+  isFocusDrawer: boolean;
+  onClose: () => void;
+};
+
+/** Keeps a thread mounted while controlling its focus-drawer presentation. */
+export const ThreadPanelSurface = React.forwardRef<
+  HTMLDivElement,
+  ThreadPanelSurfaceProps
+>(function ThreadPanelSurface(
+  { channelName, children, covered, hasActiveEdit, isFocusDrawer, onClose },
+  ref,
+) {
+  return (
+    <div
+      aria-hidden={covered ? true : undefined}
+      className="contents"
+      data-testid="thread-surface"
+      inert={covered ? true : undefined}
+      ref={ref}
+    >
+      {isFocusDrawer ? (
+        <FocusThreadDrawer
+          channelName={channelName}
+          escapeEnabled={!covered}
+          hasActiveEdit={hasActiveEdit}
+          onClose={onClose}
+        >
+          {children}
+        </FocusThreadDrawer>
+      ) : (
+        children
+      )}
+    </div>
+  );
+});
+
+/** Supplies a stable covered-thread focus target for an overlay drawer. */
+export function useThreadPanelSurface() {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const restoreFocusTarget = React.useCallback(
+    () =>
+      ref.current?.querySelector<HTMLElement>(
+        '[data-testid="auxiliary-panel-close"]',
+      ) ?? null,
+    [],
+  );
+  return { ref, restoreFocusTarget };
+}
diff --git a/desktop/tests/e2e/project-commit-detail.spec.ts b/desktop/tests/e2e/project-commit-detail.spec.ts
index 5b7b50cd594..b1709588329 100644
--- a/desktop/tests/e2e/project-commit-detail.spec.ts
+++ b/desktop/tests/e2e/project-commit-detail.spec.ts
@@ -855,10 +855,35 @@ test("project workspace sheet stays independent from an open thread", async ({
   await expect(workspaceDrawer.getByTestId("message-thread-panel")).toHaveCount(
     0,
   );
+  const coveredThreadSurface = page.getByTestId("thread-surface");
+  await expect(coveredThreadSurface).toHaveAttribute("inert", "");
+  await expect(coveredThreadSurface).toHaveAttribute("aria-hidden", "true");
+  const coveredSnapshot = await page.locator("body").ariaSnapshot();
+  expect(coveredSnapshot).not.toContain(threadRootContent);
+  expect(coveredSnapshot).toContain("Tasks");
+  expect(coveredSnapshot).toContain("Close panel");
+
+  const workspaceClose = workspaceDrawer.getByTestId("auxiliary-panel-close");
+  await workspaceClose.focus();
+  await expect(workspaceClose).toBeFocused();
+  for (let index = 0; index < 8; index += 1) {
+    await page.keyboard.press("Tab");
+    expect(
+      await page.evaluate(
+        () =>
+          document.activeElement?.closest('[data-testid="thread-surface"]') !==
+          null,
+      ),
+    ).toBe(false);
+  }
 
-  await workspaceDrawer.getByTestId("auxiliary-panel-close").click();
+  await workspaceClose.click();
   await expect(page.getByTestId("project-home-workspace-sheet")).toHaveCount(0);
   await expect(page.getByTestId("message-thread-panel")).toBeVisible();
+  const threadClose = coveredThreadSurface.getByTestId("auxiliary-panel-close");
+  await expect(threadClose).toBeFocused();
+  await expect(coveredThreadSurface).not.toHaveAttribute("inert", "");
+  await expect(coveredThreadSurface).not.toHaveAttribute("aria-hidden", "true");
 
   await page.setViewportSize({ height: 1080, width: 1920 });
   const splitThreadPane = page
@@ -892,6 +917,10 @@ test("project workspace sheet stays independent from an open thread", async ({
     },
   );
   expect(workspaceCoversThreadDivider).toBe(true);
+  await page.keyboard.press("Escape");
+  await expect(page.getByTestId("project-home-workspace-sheet")).toHaveCount(0);
+  await expect(splitThreadPane).toBeVisible();
+  await expect(threadClose).toBeFocused();
 });
 
 test("commit detail opens from the commits feed with a diff", async ({

From d4f98c9bdcbd4322b3cff5c72cefd68cb48933de Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Wed, 26 Aug 2026 19:13:03 -0400
Subject: [PATCH 3/4] fix(desktop): retain thread isolation through drawer exit

Keep covered threads inert until the workspace sheet fully leaves the accessibility and interaction surface.

Signed-off-by: Thomas Petersen <thomasp@squareup.com>
---
 .../src/features/channels/ui/ChannelPane.tsx  | 19 ++++++++++---------
 .../channels/ui/ThreadPanelSurface.tsx        | 15 ++++++++++++---
 .../channels/ui/useFocusDrawerPresence.ts     | 18 ++++++++++++++----
 .../tests/e2e/project-commit-detail.spec.ts   | 18 ++++++++++++++++++
 4 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelPane.tsx b/desktop/src/features/channels/ui/ChannelPane.tsx
index 96870b93d5d..38ebd9234a4 100644
--- a/desktop/src/features/channels/ui/ChannelPane.tsx
+++ b/desktop/src/features/channels/ui/ChannelPane.tsx
@@ -186,7 +186,6 @@ export const ChannelPane = React.memo(function ChannelPane({
   const timelineScrollRef = React.useRef<HTMLDivElement>(null);
   const messageTimelineRef = React.useRef<MessageTimelineHandle>(null);
   const composerWrapperRef = React.useRef<HTMLDivElement>(null);
-  const { ref: threadSurfaceRef, restoreFocusTarget } = useThreadPanelSurface();
   const { goChannel } = useAppNavigation();
   const prepareDmSendChannel = usePrepareDmSendChannel(
     activeChannel,
@@ -468,6 +467,10 @@ export const ChannelPane = React.memo(function ChannelPane({
         ? onCloseThread
         : (onCloseIdleAuxiliaryPanel ?? onCloseThread),
   );
+  const threadSurface = useThreadPanelSurface(
+    showIdleAuxiliaryOverThread,
+    markExitComplete,
+  );
   const { changeThreadViewMode, layoutScrollTargetId, resolveScrollTarget } =
     useThreadViewModeSwitch({
       activeThreadHeadId: threadHeadMessage?.id ?? null,
@@ -521,12 +524,12 @@ export const ChannelPane = React.memo(function ChannelPane({
   const wrapThreadPanel = (panel: React.ReactNode) => (
     <ThreadPanelSurface
       channelName={activeChannel?.name ?? "channel"}
-      covered={showIdleAuxiliaryOverThread}
+      covered={threadSurface.covered}
       hasActiveEdit={threadEditTarget !== null}
       isFocusDrawer={useFocusThreadDrawer}
       key={THREAD_SURFACE_KEY}
       onClose={onCloseThread}
-      ref={threadSurfaceRef}
+      ref={threadSurface.ref}
     >
       {useFocusThreadDrawer ? panel : wrapAux(panel, "message-thread-panel")}
     </ThreadPanelSurface>
@@ -538,7 +541,7 @@ export const ChannelPane = React.memo(function ChannelPane({
         key="idle-auxiliary-surface"
         label={idleAuxiliaryTitle || "Panel"}
         onClose={onCloseIdleAuxiliaryPanel}
-        restoreFocusTarget={restoreFocusTarget}
+        restoreFocusTarget={threadSurface.restoreFocusTarget}
       >
         {panel}
       </FocusThreadDrawer>
@@ -792,10 +795,8 @@ export const ChannelPane = React.memo(function ChannelPane({
                     }
                     showTopBorder={false}
                   />
-                  {/* The activity accessory is anchored in the dock's reserved
-                    bottom rail, so fading it cannot change the observed
-                    overlay height or move the conversation. Its natural
-                    content height remains responsive. */}
+                  {/* The reserved bottom rail keeps accessory fades from moving
+                    the conversation while content remains responsive. */}
                   <ChannelComposerActivityAccessory
                     agents={activityAgents}
                     channel={activeChannel}
@@ -990,7 +991,7 @@ export const ChannelPane = React.memo(function ChannelPane({
           idleAuxiliarySurface
         )}
       </AnimatePresence>
-      <AnimatePresence onExitComplete={markExitComplete}>
+      <AnimatePresence onExitComplete={threadSurface.markExitComplete}>
         {showIdleAuxiliaryOverThread ? idleAuxiliarySurface : null}
       </AnimatePresence>
     </div>
diff --git a/desktop/src/features/channels/ui/ThreadPanelSurface.tsx b/desktop/src/features/channels/ui/ThreadPanelSurface.tsx
index c6c27feac26..74228c204a0 100644
--- a/desktop/src/features/channels/ui/ThreadPanelSurface.tsx
+++ b/desktop/src/features/channels/ui/ThreadPanelSurface.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import { FocusThreadDrawer } from "@/features/channels/ui/FocusThreadDrawer";
+import { usePresenceCoverage } from "@/features/channels/ui/useFocusDrawerPresence";
 
 type ThreadPanelSurfaceProps = {
   channelName: string;
@@ -43,9 +44,17 @@ export const ThreadPanelSurface = React.forwardRef<
   );
 });
 
-/** Supplies a stable covered-thread focus target for an overlay drawer. */
-export function useThreadPanelSurface() {
+/** Supplies covered-thread lifecycle and focus ownership for an overlay drawer. */
+export function useThreadPanelSurface(
+  open: boolean,
+  onExitComplete: () => void,
+) {
   const ref = React.useRef<HTMLDivElement>(null);
+  const coverage = usePresenceCoverage(open);
+  const markExitComplete = React.useCallback(() => {
+    coverage.markExitComplete();
+    onExitComplete();
+  }, [coverage.markExitComplete, onExitComplete]);
   const restoreFocusTarget = React.useCallback(
     () =>
       ref.current?.querySelector<HTMLElement>(
@@ -53,5 +62,5 @@ export function useThreadPanelSurface() {
       ) ?? null,
     [],
   );
-  return { ref, restoreFocusTarget };
+  return { ...coverage, markExitComplete, ref, restoreFocusTarget };
 }
diff --git a/desktop/src/features/channels/ui/useFocusDrawerPresence.ts b/desktop/src/features/channels/ui/useFocusDrawerPresence.ts
index 271c867ae39..660e8f741c4 100644
--- a/desktop/src/features/channels/ui/useFocusDrawerPresence.ts
+++ b/desktop/src/features/channels/ui/useFocusDrawerPresence.ts
@@ -2,22 +2,32 @@ import * as React from "react";
 
 import { subscribeToFocusedThreadCloseRequest } from "@/features/channels/focusedThreadCloseRequest";
 
-/** Keeps the covered channel inert and owns external dismissal while open. */
-export function useFocusDrawerPresence(open: boolean, onClose: () => void) {
+/** Retains coverage until the owning presence boundary completes its exit. */
+export function usePresenceCoverage(open: boolean) {
   const [present, setPresent] = React.useState(false);
 
   React.useEffect(() => {
     if (open) setPresent(true);
   }, [open]);
 
+  const markExitComplete = React.useCallback(() => setPresent(false), []);
+  return {
+    covered: open || present,
+    markExitComplete,
+  };
+}
+
+/** Keeps the covered channel inert and owns external dismissal while open. */
+export function useFocusDrawerPresence(open: boolean, onClose: () => void) {
+  const { covered, markExitComplete } = usePresenceCoverage(open);
+
   React.useEffect(() => {
     if (!open) return;
     return subscribeToFocusedThreadCloseRequest(onClose);
   }, [onClose, open]);
 
-  const markExitComplete = React.useCallback(() => setPresent(false), []);
   return {
-    channelIsCovered: open || present,
+    channelIsCovered: covered,
     markExitComplete,
   };
 }
diff --git a/desktop/tests/e2e/project-commit-detail.spec.ts b/desktop/tests/e2e/project-commit-detail.spec.ts
index b1709588329..29e0d93b347 100644
--- a/desktop/tests/e2e/project-commit-detail.spec.ts
+++ b/desktop/tests/e2e/project-commit-detail.spec.ts
@@ -878,6 +878,24 @@ test("project workspace sheet stays independent from an open thread", async ({
   }
 
   await workspaceClose.click();
+  const exitingWorkspaceState = await page.evaluate(() => {
+    const workspaceSheet = document.querySelector(
+      '[data-testid="project-home-workspace-sheet"]',
+    );
+    const threadSurface = document.querySelector(
+      '[data-testid="thread-surface"]',
+    );
+    return {
+      threadAriaHidden: threadSurface?.getAttribute("aria-hidden"),
+      threadInert: threadSurface?.hasAttribute("inert") ?? false,
+      workspaceSheetMounted: workspaceSheet !== null,
+    };
+  });
+  expect(exitingWorkspaceState).toEqual({
+    threadAriaHidden: "true",
+    threadInert: true,
+    workspaceSheetMounted: true,
+  });
   await expect(page.getByTestId("project-home-workspace-sheet")).toHaveCount(0);
   await expect(page.getByTestId("message-thread-panel")).toBeVisible();
   const threadClose = coveredThreadSurface.getByTestId("auxiliary-panel-close");

From fb5a92eccff9685a3602373eea9d809329852954 Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Wed, 26 Aug 2026 20:28:06 -0400
Subject: [PATCH 4/4] fix(desktop): keep focus drawer controls in view

Clamp focus drawers to the visible viewport so enlarged text cannot hide dismissal controls.

Signed-off-by: Thomas Petersen <thomasp@squareup.com>
---
 .../channels/ui/FocusThreadDrawer.tsx         | 44 +++++++++++++++++++
 .../tests/e2e/project-commit-detail.spec.ts   | 31 +++++++++++++
 2 files changed, 75 insertions(+)

diff --git a/desktop/src/features/channels/ui/FocusThreadDrawer.tsx b/desktop/src/features/channels/ui/FocusThreadDrawer.tsx
index b98f3e98c90..82ecfe64400 100644
--- a/desktop/src/features/channels/ui/FocusThreadDrawer.tsx
+++ b/desktop/src/features/channels/ui/FocusThreadDrawer.tsx
@@ -124,6 +124,46 @@ const EXIT_TRANSITION = {
  */
 const REDUCED_MOTION_TRANSITION = { duration: 0.12, ease: "linear" } as const;
 
+function useViewportRightInsetPx(
+  overlayRef: React.RefObject<HTMLDivElement | null>,
+) {
+  const [rightInsetPx, setRightInsetPx] = React.useState(0);
+
+  React.useLayoutEffect(() => {
+    const layoutRoot = overlayRef.current?.parentElement;
+    if (!layoutRoot) return;
+
+    const updateRightInset = () => {
+      const bounds = layoutRoot.getBoundingClientRect();
+      const overflowPx = Math.max(0, bounds.right - window.innerWidth);
+      const nextRightInsetPx = Math.min(bounds.width, Math.ceil(overflowPx));
+      setRightInsetPx((current) =>
+        current === nextRightInsetPx ? current : nextRightInsetPx,
+      );
+    };
+
+    updateRightInset();
+    window.addEventListener("resize", updateRightInset);
+
+    const observer =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(updateRightInset);
+    let ancestor: HTMLElement | null = layoutRoot;
+    while (ancestor) {
+      observer?.observe(ancestor);
+      ancestor = ancestor.parentElement;
+    }
+
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", updateRightInset);
+    };
+  }, [overlayRef]);
+
+  return rightInsetPx;
+}
+
 /**
  * Right-anchored thread drawer that overlays the channel content area.
  *
@@ -155,7 +195,9 @@ export function FocusThreadDrawer({
   const prefersReducedMotion = useReducedMotion();
   const travelPx = prefersReducedMotion ? 0 : THREAD_FOCUS_DRAWER_TRAVEL_PX;
   const drawerRef = React.useRef<HTMLDivElement>(null);
+  const overlayRef = React.useRef<HTMLDivElement>(null);
   const previousFocusRef = React.useRef<HTMLElement | null>(null);
+  const viewportRightInsetPx = useViewportRightInsetPx(overlayRef);
 
   React.useEffect(() => {
     if (!escapeEnabled) return;
@@ -209,6 +251,8 @@ export function FocusThreadDrawer({
     <div
       className="absolute inset-0 z-41"
       data-testid="focus-thread-drawer-overlay"
+      ref={overlayRef}
+      style={{ right: viewportRightInsetPx }}
     >
       <motion.button
         animate={{ opacity: 1 }}
diff --git a/desktop/tests/e2e/project-commit-detail.spec.ts b/desktop/tests/e2e/project-commit-detail.spec.ts
index 29e0d93b347..2ee454aefcc 100644
--- a/desktop/tests/e2e/project-commit-detail.spec.ts
+++ b/desktop/tests/e2e/project-commit-detail.spec.ts
@@ -903,6 +903,37 @@ test("project workspace sheet stays independent from an open thread", async ({
   await expect(coveredThreadSurface).not.toHaveAttribute("inert", "");
   await expect(coveredThreadSurface).not.toHaveAttribute("aria-hidden", "true");
 
+  await page.evaluate(() => {
+    document.documentElement.style.fontSize = "140%";
+  });
+  await page.getByTestId("project-home-context-tasks").click();
+  await expect(page.getByTestId("project-home-workspace-sheet")).toBeVisible();
+  const enlargedTextWorkspaceClose = page
+    .getByTestId("focus-thread-drawer")
+    .getByTestId("auxiliary-panel-close");
+  await expect
+    .poll(() =>
+      enlargedTextWorkspaceClose.evaluate((element) => {
+        const bounds = element.getBoundingClientRect();
+        return {
+          leftInsideViewport: bounds.left >= 0,
+          rightInsideViewport: bounds.right <= window.innerWidth,
+          viewportWidth: window.innerWidth,
+        };
+      }),
+    )
+    .toEqual({
+      leftInsideViewport: true,
+      rightInsideViewport: true,
+      viewportWidth: 820,
+    });
+  await enlargedTextWorkspaceClose.click();
+  await expect(page.getByTestId("project-home-workspace-sheet")).toHaveCount(0);
+  await expect(page.getByTestId("message-thread-panel")).toBeVisible();
+  await page.evaluate(() => {
+    document.documentElement.style.removeProperty("font-size");
+  });
+
   await page.setViewportSize({ height: 1080, width: 1920 });
   const splitThreadPane = page
     .locator(