drawer: gate the ChatPanel mount on the transitioning session id

Replace the boolean `closing` flag with `transitioningSessionId: string | null`. closeDrawer(toSessionId) records which session a navigation-coupled close is animating toward; the detail screen gates its heavy ChatPanel mount only while it IS that id (so just the target session shows the cheap loading placeholder during the close), and onTransitionEnd clears it.

Add a same-session no-op guard: tapping the already-open row in the sidebar just closes the drawer instead of router.replace-ing to the same path-param route (which mints a fresh route key -> remount + Loading flash). Active id read via useGlobalSearchParams in the sidebar parent.

Drop the now-unused `open` field from the DrawerUI context (the layout keeps it as local state for the <Drawer open> prop).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: yyq1025

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

@@ -59,21 +59,21 @@ export default function SessionDetailScreen() {
   }>();
   const session = useSessionTranscript(cliSessionId, newFlag === "1");
 
-  // 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. 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,
+  // 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. A sidebar tap records THIS session's
+  // id as the drawer's `transitioningSessionId` (in closeDrawer) in the same
+  // batch as the route swap, so the session being navigated TO mounts gated and
+  // shows the cheap TranscriptLoading; ChatPanel mounts once the close lands
+  // (onTransitionEnd clears the id). 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;
+  // session — has `transitioningSessionId !== cliSessionId`. Carrying the id
+  // (vs a bare `closing` boolean) means only the target session gates, and it
+  // lets the sidebar no-op a tap on the already-open session (handleOpenSession).
+  // The gate is a derived boolean: no state, no effect, no per-session keying.
+  const { transitioningSessionId, openDrawer } = useDrawerUI();
+  const drawerSettled = transitioningSessionId !== cliSessionId;
 
   // 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

@@ -15,14 +15,14 @@ const CARD_RADIUS = Platform.OS === "ios" ? 53 : 0;
  * new-session create page).
  *
  * Bare `react-native-drawer-layout`, deliberately NOT a drawer navigator:
- * the drawer hosts no routes (its sole child was ever one screen group),
- * 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 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.
+ * the drawer hosts no routes (its sole child is one screen group), 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 a plain React `transitioningSessionId` (set in closeDrawer, cleared
+ * on the drawer's onTransitionEnd) the gate is exact, and `open` drives the
+ * commit-point haptics below. 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
@@ -50,81 +50,86 @@ const CARD_RADIUS = Platform.OS === "ios" ? 53 : 0;
 export default function DrawerLayout() {
   const scheme = useColorScheme() ?? "light";
   const [open, setOpen] = useState(false);
-  const [closing, setClosing] = useState(false);
+  const [transitioningSessionId, setTransitioningSessionId] = useState<
+    string | null
+  >(null);
 
-  // `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.
+  // `transitioningSessionId` gates the session screen's ChatPanel mount against
+  // the close animation. closeDrawer(toSessionId) records it EAGERLY (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 a programmatic,
+  // navigation-coupled close passes an id; gesture/overlay-tap dismissals and
+  // the new-session "+" leave it null (they keep the current session mounted /
+  // close toward `/`). openDrawer clears it: a close reversed back into an open
+  // before it lands is no longer transitioning.
   //
-  // The `open` guard matters: calling close while already closed must NOT
-  // set `closing` — no animation would run, so no onTransitionEnd would
-  // ever clear it.
+  // The `open` guard matters: calling close while already closed must NOT set
+  // the id — no animation would run, so no onTransitionEnd would 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 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.
+  // 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 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();
-    setClosing(false);
+    setTransitioningSessionId(null);
     setOpen(true);
   }, [open]);
 
-  const closeDrawer = useCallback(() => {
-    if (!open) return;
-    haptics.drawerToggle();
-    setClosing(true);
-    setOpen(false);
-  }, [open]);
+  const closeDrawer = useCallback(
+    (toSessionId?: string) => {
+      if (!open) return;
+      haptics.drawerToggle();
+      setTransitioningSessionId(toSessionId ?? null);
+      setOpen(false);
+    },
+    [open],
+  );
 
   const drawerUI = useMemo(
-    () => ({ open, closing, openDrawer, closeDrawer }),
-    [open, closing, openDrawer, closeDrawer],
+    () => ({ transitioningSessionId, openDrawer, closeDrawer }),
+    [transitioningSessionId, openDrawer, closeDrawer],
   );
 
   return (
     <DrawerUIContext.Provider value={drawerUI}>
       <Drawer
         open={open}
         onOpen={() => {
-          // 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). Clear `closing`
-          // too: a swipe that reverses an in-flight close means we're
-          // opening now.
+          // 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). Clear the transitioning id
+          // too: a swipe that reverses an in-flight close means we're opening now.
           if (!open) haptics.drawerToggle();
-          setClosing(false);
+          setTransitioningSessionId(null);
           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.
+          // Gesture / overlay-tap dismissals land here. They deliberately do
+          // NOT set a transitioning id — the current session stays mounted, so
+          // gating it would only flicker ChatPanel back to loading. A
+          // navigation-coupled close already recorded its id in closeDrawer.
           if (open) haptics.drawerToggle();
           setOpen(false);
         }}
-        onTransitionEnd={(closing) => {
+        onTransitionEnd={(isClosing) => {
           // 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);
+          // device 2026-06-12: a row tapped in the same frame the open landed
+          // let the "open ended" callback clear the gate, releasing ChatPanel
+          // mid-close and freezing the drawer half-open). Acting only on
+          // isClosing closes that race. (onTransitionEnd can't tell WHICH
+          // session finished — it just clears whatever id is pending; for a
+          // single drawer close that's always the latest target, so correct.)
+          if (isClosing) setTransitioningSessionId(null);
         }}
         drawerType="back"
         overlayStyle={{ backgroundColor: "transparent" }}

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

@@ -97,6 +97,14 @@ export function SessionListSidebar() {
   const insets = useSafeAreaInsets();
   const scheme = useColorScheme() ?? "light";
   const { closeDrawer } = useDrawerUI();
+  // Active session id (the focused detail route's path param) — lets
+  // handleOpenSession no-op a tap on the already-open session. useGlobalSearch-
+  // Params (not Local: the sidebar isn't a route screen) re-renders this on
+  // nav, but the parent already re-renders on every drawer toggle via
+  // useDrawerUI, so on the drawer-switch path it costs nothing extra.
+  const { cliSessionId: activeSessionId } = useGlobalSearchParams<{
+    cliSessionId?: string;
+  }>();
 
   // Full floating-header band = status-bar inset + content height. Shared with
   // the list's contentContainerStyle.paddingTop (see Body) so row 1 starts
@@ -130,15 +138,23 @@ export function SessionListSidebar() {
   // they don't expect to "go back" to.
   const setLastUsedCwd = useSetLastUsedCwd();
   const handleOpenSession = (session: SessionRowData) => {
+    // Tapping the already-open session: just close the drawer. router.replace
+    // to the same path-param route still mints a fresh route key → remounts
+    // ChatPanel + flashes Loading, for no actual navigation. Skip it.
+    if (session.cliSessionId === activeSessionId) {
+      closeDrawer();
+      return;
+    }
     // Record the current focus so the next "New session" defaults to
     // 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 `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();
+    // closeDrawer(targetId) records the gate target in the same batch as the
+    // route swap below, so the session navigated TO mounts the cheap
+    // TranscriptLoading first — the session screen's drawer-settle gate holds
+    // the heavy ChatPanel mount until the close animation finishes. No
+    // frame-deferral needed.
+    closeDrawer(session.cliSessionId);
     router.replace({
       pathname: "/session/[cliSessionId]",
       params: {

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

@@ -2,30 +2,40 @@ 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`/`closing` as plain React state is what lets the session
+ * deliberately NOT a drawer navigator: the drawer hosts no routes, and owning
+ * `open`/`transitioningSessionId` 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.
+ * timers, params, or navigation-event plumbing. Provided by the (drawer) group
+ * layout.
  *
- * `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.
+ * The context exposes the imperative controls (`openDrawer` from the session +
+ * new-session hamburger, `closeDrawer` from the sidebar) plus
+ * `transitioningSessionId`. `open` itself stays local to the layout (it drives
+ * the `<Drawer open>` prop); nothing outside reads it.
+ *
+ * `transitioningSessionId` names the session a navigation-coupled close is
+ * animating TOWARD: `closeDrawer(toSessionId)` fires from a sidebar tap, in the
+ * same batch as the `router.replace` to that session, and records the id here
+ * (so the session being navigated TO sees it on its first render). The detail
+ * screen gates its ChatPanel mount while this equals its own id, then
+ * onTransitionEnd clears it to null — or openDrawer/onOpen clears it if the
+ * close reverses into an open. It is deliberately NOT set for gesture /
+ * overlay-tap dismissals or for the new-session "+" (which closes toward `/`,
+ * not a session): those pass no id, so every mounted session has
+ * `transitioningSessionId !== its id` and isn't gated. Carrying the id (vs a
+ * bare `closing` boolean) also lets the sidebar skip the whole dance when you
+ * tap the already-open session — see handleOpenSession.
  */
 export interface DrawerUI {
-  open: boolean;
-  /** A navigation-coupled drawer-close animation is in flight. */
-  closing: boolean;
+  /** The session a navigation-coupled drawer-close is animating toward, or null
+   *  when none is in flight. The detail screen gates its ChatPanel mount while
+   *  this equals its own id. */
+  transitioningSessionId: string | null;
   openDrawer: () => void;
-  closeDrawer: () => void;
+  /** Close the drawer. `toSessionId` records which session is being navigated
+   *  to so its detail screen can gate its mount until the close lands; omit it
+   *  for gesture dismissals and the new-session "+" (closes toward `/`). */
+  closeDrawer: (toSessionId?: string) => void;
 }
 
 export const DrawerUIContext = createContext<DrawerUI | null>(null);