feat(mobile): viewport hook + sidebar drawer + hamburger headers

- useViewport: matchMedia-based hook (no resize polling). Breakpoints
  mobile <768 / tablet 768-1023 / desktop >=1024. SSR-safe.
- useSidebarDrawer: Context provider with open/setOpen/toggle + auto-close
  on useLocation().pathname change.
- App.tsx: wraps SidebarDrawerProvider around AppShell, renders a
  MobileBackdrop (z-30) when the drawer is open on mobile.
- ProjectSidebar: aside is fixed/translate-x-full off-screen on mobile,
  slides in (z-40, 200ms transform) when drawerOpen. Inline column on
  desktop, unchanged.
- Session.tsx + Project.tsx: hamburger (Menu icon, >=44x44 min) on mobile
  opens the drawer. Headers gain paddingTop: max(0.75rem,
  env(safe-area-inset-top)) for notch devices. Home.tsx left alone
  (sidebar content duplicates the home page).

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

apps/web/src/pages/Project.tsx

@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
-import { Plus, MessageSquare, Trash2, ChevronDown, ChevronRight, RotateCcw } from 'lucide-react';
+import { Plus, MessageSquare, Trash2, ChevronDown, ChevronRight, RotateCcw, Menu } from 'lucide-react';
 import { toast } from 'sonner';
 import { api } from '@/api/client';
 import type { Project as ProjectType, Session } from '@/api/types';
 import { Button } from '@/components/ui/button';
 import { sessionEvents } from '@/hooks/sessionEvents';
 import { useSessions } from '@/hooks/useSessions';
+import { useSidebarDrawer } from '@/hooks/useSidebarDrawer';
+import { useViewport } from '@/hooks/useViewport';
 
 export function Project() {
   const { id } = useParams<{ id: string }>();
@@ -16,6 +18,8 @@ export function Project() {
   const [creating, setCreating] = useState(false);
   const [archivedSessions, setArchivedSessions] = useState<Session[] | null>(null);
   const [showArchived, setShowArchived] = useState(false);
+  const { setOpen: setDrawerOpen } = useSidebarDrawer();
+  const { isMobile } = useViewport();
 
   useEffect(() => {
     if (!id) return;
@@ -76,16 +80,31 @@ export function Project() {
 
   return (
     <div className="flex-1 flex flex-col">
-      <header className="border-b px-6 py-3 flex items-center justify-between">
-        <div>
-          <h1 className="text-lg font-semibold tracking-tight">
-            {project?.name ?? '…'}
-          </h1>
-          <div className="text-xs text-muted-foreground font-mono">
-            {project?.path}
+      <header
+        className="border-b px-6 py-3 flex items-center justify-between gap-2"
+        style={{ paddingTop: 'max(0.75rem, env(safe-area-inset-top))' }}
+      >
+        <div className="flex items-center gap-2 min-w-0">
+          {isMobile && (
+            <button
+              type="button"
+              onClick={() => setDrawerOpen(true)}
+              className="inline-flex items-center justify-center -ml-2 min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
+              aria-label="Open sidebar"
+            >
+              <Menu className="size-5" />
+            </button>
+          )}
+          <div className="min-w-0">
+            <h1 className="text-lg font-semibold tracking-tight truncate">
+              {project?.name ?? '…'}
+            </h1>
+            <div className="text-xs text-muted-foreground font-mono truncate">
+              {project?.path}
+            </div>
           </div>
         </div>
-        <Button onClick={handleNew} disabled={creating}>
+        <Button onClick={handleNew} disabled={creating} className="shrink-0">
           <Plus />
           New session
         </Button>