drawer: track closing instead of transitioning for the mount gate

The session-screen mount gate only ever cares about the close animation
(a heavy ChatPanel mount competes with it). `transitioning` tracked both
directions, which forced a sticky `settledFor` latch + per-session keying
just so an OPEN transition wouldn't revert an already-settled ChatPanel to
loading.

Scope the flag to navigation-coupled closes (`closing`, set eagerly in
closeDrawer only) and the gate collapses to a derived `!closing`: no
useState, no useEffect, no string keying. Opens no longer touch the flag,
so the latch is unnecessary, and the onTransitionEnd direction-match
(`closing !== !open`) reduces to "ignore open-end events" — the captured
2026-06-12 stale-end race is still closed. Gesture/overlay-tap dismissals
deliberately don't set `closing` (they keep the current session mounted),
and onTransitionStart is dropped (it was redundant for the gate and would
have gated tap-to-dismiss). openDrawer/onOpen clear `closing` to handle a
close reversed mid-flight back into an open.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: yyq1025

packages/app/src/app/(main)/(drawer)/(stack)/session/[cliSessionId].tsx

@@ -1,6 +1,6 @@
 import { eq, useLiveQuery } from "@tanstack/react-db";
 import { Stack, useLocalSearchParams } from "expo-router";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 import { Text, View } from "react-native";
 import { SessionBridgeToolbar } from "@/components/session-bridge-toolbar";
 import { ChatPanel } from "@/components/transcript/chat-panel";
@@ -62,22 +62,18 @@ export default function SessionDetailScreen() {
   // Drawer-settle gate. Mounting ChatPanel is heavy on the MAIN thread
   // (native view inflation + enriched's dispatch_sync measure), which the
   // drawer-close animation (Reanimated, UI thread) directly competes with —
-  // JS fps can look fine while the close visibly stutters. While the drawer
-  // is animating (sidebar tap → closeDrawer flips `transitioning` in the
-  // same batch as the route swap), render the cheap TranscriptLoading;
-  // mount ChatPanel once the animation ends. Keyed by cliSessionId so
-  // switching sessions through the drawer re-gates each time; entries with
-  // no drawer animation (new-session replace, deep links) settle on the
-  // first effect pass. Plain context state — no timers, no params, no
-  // navigation events (see drawer-ui.tsx).
-  const { transitioning, openDrawer } = useDrawerUI();
-  const [settledFor, setSettledFor] = useState<string | null>(
-    transitioning ? null : cliSessionId,
-  );
-  const drawerSettled = settledFor === cliSessionId;
-  useEffect(() => {
-    if (!transitioning) setSettledFor(cliSessionId);
-  }, [transitioning, cliSessionId]);
+  // JS fps can look fine while the close visibly stutters. A sidebar tap
+  // flips `closing` (in closeDrawer) in the same batch as the route swap, so
+  // the session being navigated TO mounts with `closing === true` and shows
+  // the cheap TranscriptLoading; ChatPanel mounts once the close lands
+  // (onTransitionEnd clears `closing`). Every other entry path — deep link,
+  // new-session replace, the drawer merely opening over an already-settled
+  // session — has `closing === false`. Because `closing` is scoped to
+  // navigation-coupled closes (see drawer-ui.tsx) it never flips true under a
+  // mounted session, so the gate is just a derived boolean: no state, no
+  // effect, no per-session keying.
+  const { closing, openDrawer } = useDrawerUI();
+  const drawerSettled = !closing;
 
   // Log turn-failure errors. UI is intentionally absent for V0 —
   // surfacing assistant errors well needs design work we haven't done

packages/app/src/app/(main)/(drawer)/_layout.tsx

@@ -19,9 +19,10 @@ const CARD_RADIUS = Platform.OS === "ios" ? 53 : 0;
  * and the navigator hid `open` inside navigation state — the close
  * animation could only be observed via parent-navigator event listeners
  * with no queryable "is animating" (which forced a safety timeout in the
- * session screen's mount gate). As plain React state + direct
- * onTransitionStart/End props, the gate is exact. Visuals are identical —
- * the navigator was a thin wrapper around this same component.
+ * session screen's mount gate). As a plain React `closing` flag (set in
+ * closeDrawer, cleared on the drawer's onTransitionEnd) the gate is exact.
+ * Visuals are identical — the navigator was a thin wrapper around this
+ * same component.
  *
  * Sole child is the `(stack)` group (see ./(stack)/_layout.tsx) — its
  * inner Stack contains both the new-session page (`index` → URL `/`) and
@@ -49,40 +50,46 @@ const CARD_RADIUS = Platform.OS === "ios" ? 53 : 0;
 export default function DrawerLayout() {
   const scheme = useColorScheme() ?? "light";
   const [open, setOpen] = useState(false);
-  const [transitioning, setTransitioning] = useState(false);
+  const [closing, setClosing] = useState(false);
 
+  // `closing` gates the session screen's ChatPanel mount against the close
+  // animation. It is set EAGERLY in closeDrawer (same batch as the `open`
+  // flip and the sidebar's router.replace) so the session being navigated
+  // TO observes it on its very first render — onTransitionStart would land
+  // a frame late, and doesn't fire at all for gesture-settled transitions
+  // (the source skips it when a velocity is passed). Only this programmatic,
+  // navigation-coupled close sets it; gesture/overlay-tap dismissals leave
+  // it false (they keep the current session mounted). openDrawer clears it:
+  // a close reversed back into an open before it lands is no longer closing.
+  //
   // The `open` guard matters: calling close while already closed must NOT
-  // set `transitioning` — no animation would run, so no onTransitionEnd
-  // would ever clear it. Setting `transitioning` EAGERLY (same batch as
-  // the open flip) is the gate's real mechanism: the component's own
-  // onTransitionStart lands a frame later AND doesn't fire at all for
-  // gesture-settled transitions (the source skips it when a velocity is
-  // passed), while the session screen must see the flag in the same batch
-  // as the route change that follows a sidebar tap.
+  // set `closing` — no animation would run, so no onTransitionEnd would
+  // ever clear it.
+  //
   // Haptics fire at the COMMIT point — the moment `open` actually flips
   // (tap here, gesture release in onOpen/onClose below) — not at the
   // drawer's transition events: onTransitionEnd waits for the spring's
-  // mathematical rest (an overdamped sub-pixel tail well past the
-  // perceived landing → buzz felt late), and both transition events also
-  // fire for the mount-time prop-sync toggle (→ spurious buzz on every
-  // reload). Gating on the `open` flip is immediate and skips all echoes.
+  // mathematical rest (an overdamped sub-pixel tail well past the perceived
+  // landing → buzz felt late), and it also fires for the mount-time
+  // prop-sync toggle (→ spurious buzz on every reload). Gating on the `open`
+  // flip is immediate and skips all echoes.
   const openDrawer = useCallback(() => {
     if (open) return;
     haptics.drawerToggle();
-    setTransitioning(true);
+    setClosing(false);
     setOpen(true);
   }, [open]);
 
   const closeDrawer = useCallback(() => {
     if (!open) return;
     haptics.drawerToggle();
-    setTransitioning(true);
+    setClosing(true);
     setOpen(false);
   }, [open]);
 
   const drawerUI = useMemo(
-    () => ({ open, transitioning, openDrawer, closeDrawer }),
-    [open, transitioning, openDrawer, closeDrawer],
+    () => ({ open, closing, openDrawer, closeDrawer }),
+    [open, closing, openDrawer, closeDrawer],
   );
 
   return (
@@ -93,29 +100,31 @@ export default function DrawerLayout() {
           // Gesture-driven open commits here, at release (programmatic
           // open came through openDrawer where `open` is already true —
           // and the mount/resync echoes arrive with `open` unchanged —
-          // so the state-change check dedupes all of them).
+          // so the state-change check dedupes all of them). Clear `closing`
+          // too: a swipe that reverses an in-flight close means we're
+          // opening now.
           if (!open) haptics.drawerToggle();
+          setClosing(false);
           setOpen(true);
         }}
         onClose={() => {
+          // Gesture / overlay-tap dismissals land here. They deliberately
+          // do NOT touch `closing` — the current session stays mounted, so
+          // gating it would only flicker ChatPanel back to loading. The
+          // navigation-coupled close already set `closing` in closeDrawer.
           if (open) haptics.drawerToggle();
           setOpen(false);
         }}
-        onTransitionStart={() => setTransitioning(true)}
         onTransitionEnd={(closing) => {
-          // Direction match — only the end event whose direction agrees
-          // with the current target state may clear `transitioning`. A
-          // spring that completes (finished=true) right as the OPPOSITE
-          // transition is requested delivers its end callback via runOnJS
-          // AFTER the new eager setTransitioning(true) — captured on
-          // device 2026-06-12: tapping a session row in the same frame the
-          // open animation landed let the stale "open ended" event clear
-          // the close transition's flag; the gate then released ChatPanel
-          // mid-close and the mount choke froze the drawer half-open. A
-          // stale end is always opposite-direction (that's what makes it
-          // stale), so the check closes the race exactly.
-          if (closing !== !open) return;
-          setTransitioning(false);
+          // Only a completed CLOSE clears the gate. Open-end events carry
+          // closing=false and are ignored — including a stale one delivered
+          // via runOnJS AFTER a new close was already requested (captured on
+          // device 2026-06-12: a row tapped in the same frame the open
+          // landed let the "open ended" callback clear the close's flag,
+          // releasing ChatPanel mid-close and freezing the drawer
+          // half-open). Acting only on closing=true closes that race with no
+          // direction-match against `open`.
+          if (closing) setClosing(false);
         }}
         drawerType="back"
         overlayStyle={{ backgroundColor: "transparent" }}

packages/app/src/components/session-list-sidebar.tsx

@@ -134,10 +134,10 @@ export function SessionListSidebar() {
     // the project the user just opened. Mutation is fire-and-forget;
     // the navigation below shouldn't wait on SecureStore I/O.
     setLastUsedCwd.mutate(session.cwd);
-    // closeDrawer flips `transitioning` in the same batch, so the route
-    // swap below mounts only the cheap TranscriptLoading — the session
-    // screen's drawer-settle gate holds the heavy ChatPanel mount until
-    // the close animation finishes. No frame-deferral needed.
+    // closeDrawer flips `closing` in the same batch, so the route swap
+    // below mounts only the cheap TranscriptLoading — the session screen's
+    // drawer-settle gate holds the heavy ChatPanel mount until the close
+    // animation finishes. No frame-deferral needed.
     closeDrawer();
     router.replace({
       pathname: "/session/[cliSessionId]",

packages/app/src/lib/drawer-ui.tsx

@@ -3,24 +3,27 @@ import { createContext, useContext } from "react";
 /**
  * UI state for the session-list drawer (bare react-native-drawer-layout —
  * deliberately NOT a drawer navigator: the drawer hosts no routes, and
- * owning `open`/`transitioning` as plain React state is what lets the
- * session screen gate its heavy ChatPanel mount on the close animation
- * with zero timers, params, or navigation-event plumbing. Provided by
- * the (drawer) group layout.
+ * owning `open`/`closing` as plain React state is what lets the session
+ * screen gate its heavy ChatPanel mount on the close animation with zero
+ * timers, params, or navigation-event plumbing. Provided by the (drawer)
+ * group layout.
  *
- * `transitioning` is true from the moment a programmatic open/close is
- * requested (set eagerly, same batch as the `open` flip — the component's
- * own onTransitionStart would arrive a frame late) until the drawer's
- * onTransitionEnd — direction-matched: an end event whose `closing` arg
- * disagrees with the current target state is a stale callback from the
- * superseded opposite transition and is ignored (see the layout's
- * onTransitionEnd comment for the captured race). Gesture-driven
- * transitions are covered by onTransitionStart/onTransitionEnd directly.
+ * `closing` is true only while a programmatic, navigation-coupled close is
+ * animating — i.e. the close `closeDrawer` fires from a sidebar tap, paired
+ * in the same batch with the `router.replace` to the new session. It is set
+ * eagerly in `closeDrawer` (so the screen being navigated TO sees it on its
+ * first render) and cleared on the matching onTransitionEnd, or earlier if
+ * the close reverses back into an open (openDrawer/onOpen). It is
+ * deliberately NOT set for gesture / overlay-tap dismissals or for open
+ * transitions: those keep the current session mounted, so a plain
+ * `!closing` is all the gate needs (see the session screen). Tracking only
+ * the close direction also dissolves the old stale-end race — an open-end
+ * callback carries closing=false and is simply ignored.
  */
 export interface DrawerUI {
   open: boolean;
-  /** A drawer open/close animation is in flight. */
-  transitioning: boolean;
+  /** A navigation-coupled drawer-close animation is in flight. */
+  closing: boolean;
   openDrawer: () => void;
   closeDrawer: () => void;
 }