feat(mobile): right-rail as drawer on mobile, header toggle button

Reverts v1.6.1's max-md:hidden wrapper around RightRail. On mobile,
RightRail now renders as a fixed right-side drawer (w-[85vw],
max-w-sm) toggled by a new FolderTree button in the Session header.

- New useRightRailDrawer hook mirrors useSidebarDrawer (Context +
  auto-close on route change).
- New MobileRightRailBackdrop component in App.tsx mirrors the
  existing MobileBackdrop for the left sidebar.
- RightRail computes an isOpen synthesis: on mobile, reads the
  drawer Context; on desktop, reads the persistent internal state.
  The existing tree-load effect and open_file_in_browser
  subscription share this plumbing via openRail / closeRail
  helpers.
- The desktop floating chevron handle is hidden on mobile (the
  Session header's FolderTree button replaces it).
- Session header gains a mobile-only FolderTree button after the
  ModelPicker, calling toggle() on the drawer Context.

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

apps/web/src/App.tsx

@@ -9,6 +9,7 @@ import { Session } from '@/pages/Session';
 import { Toaster } from '@/components/ui/sonner';
 import { useUserEvents } from '@/hooks/useUserEvents';
 import { SidebarDrawerProvider, useSidebarDrawer } from '@/hooks/useSidebarDrawer';
+import { RightRailDrawerProvider, useRightRailDrawer } from '@/hooks/useRightRailDrawer';
 import { useViewport } from '@/hooks/useViewport';
 
 function SessionRightRail() {
@@ -26,13 +27,11 @@ function RightRailForSession({ sessionId }: { sessionId: string }) {
       .catch((err) => console.warn('RightRail: failed to fetch session', err));
   }, [sessionId]);
   if (!projectId) return null;
-  // Hidden entirely below md breakpoint; mobile users get the file browser
-  // via the FileBrowserPane infrastructure if/when it lands in workspace panes.
-  return (
-    <div className="max-md:hidden contents">
-      <RightRail projectId={projectId} />
-    </div>
-  );
+  // v1.6.2: rendered on all viewports. On mobile, RightRail itself renders as
+  // a right-side drawer toggled by the header's FolderTree button (via
+  // useRightRailDrawer). On desktop, it renders inline as before with its
+  // own internal open/close state.
+  return <RightRail projectId={projectId} />;
 }
 
 function MobileBackdrop() {
@@ -48,6 +47,19 @@ function MobileBackdrop() {
   );
 }
 
+function MobileRightRailBackdrop() {
+  const { open, setOpen } = useRightRailDrawer();
+  const { isMobile } = useViewport();
+  if (!isMobile || !open) return null;
+  return (
+    <div
+      className="fixed inset-0 z-30 bg-black/40 md:hidden"
+      onClick={() => setOpen(false)}
+      aria-hidden="true"
+    />
+  );
+}
+
 function AppShell() {
   useUserEvents();
   return (
@@ -61,6 +73,7 @@ function AppShell() {
           <Route path="/session/:id" element={<Session />} />
         </Routes>
       </main>
+      <MobileRightRailBackdrop />
       <Routes>
         <Route path="/session/:id" element={<SessionRightRail />} />
       </Routes>
@@ -73,7 +86,9 @@ export default function App() {
   return (
     <BrowserRouter>
       <SidebarDrawerProvider>
-        <AppShell />
+        <RightRailDrawerProvider>
+          <AppShell />
+        </RightRailDrawerProvider>
       </SidebarDrawerProvider>
     </BrowserRouter>
   );