feat(chat): add mobile top bar to /chat for sidebar navigation

web/CLAUDE.md

@@ -617,7 +617,10 @@ modal covers the screen anyway, but this can be improved in a future pass
 
 - The hamburger button is rendered inside `AppHeader`, which is only present
   within `ProjectShell`. The `/all` route has no hamburger. Low impact because
-  the All Projects dashboard itself lists all projects.
+  the All Projects dashboard itself lists all projects. The `/chat` route
+  renders its own `MobileChatHeader` (`web/src/pages/Chat/MobileChatHeader.tsx`)
+  with a hamburger that reuses `useMobileSidebar`, plus the focused chat title
+  and a "+ new chat" button.
 - The desktop collapsed sidebar (48 px strip, no `.sidebar` class) does not
   hide on mobile — pre-existing issue unrelated to this feature.
 - `MobileSidebarContext.tsx` exports both a component and a hook from the same

web/src/pages/Chat/ChatPage.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { NewChatDialog } from './NewChatDialog';
 import { ChatThread } from './ChatThread';
+import { MobileChatHeader } from './MobileChatHeader';
 import { ChatLayout, ChatLayoutProvider, type AvailableChat, type Slot } from '../../components/ChatLayout';
 import { useChatLayout, type ChatLayoutState, type LRUEvictionEvent } from '../../hooks/useChatLayout';
 import { useChatSessions, notifyChatSessionsChanged } from '../../hooks/useChatSessions';
@@ -171,28 +172,49 @@ export function ChatPage() {
     }
   }, [pendingDelete, layout]);
 
+  const focusedChatId = useMemo(
+    () => (layout.state.focused ? layout.state.panes[layout.state.focused]?.chatId ?? null : null),
+    [layout.state.focused, layout.state.panes],
+  );
+  const mobileTitle = useMemo(
+    () => (focusedChatId
+      ? availableChats.find((c) => c.id === focusedChatId)?.title ?? 'Chat'
+      : 'Chats'),
+    [focusedChatId, availableChats],
+  );
+
   return (
     <ChatLayoutProvider value={layout}>
-      <ChatLayout
-        panes={layout.state.panes}
-        focused={layout.state.focused}
-        sizes={layout.state.sizes}
-        availableChats={availableChats}
-        draggingChatId={layout.draggingChatId}
-        isMobile={isMobile}
-        onFocus={layout.focus}
-        onClose={layout.closePane}
-        onSplit={layout.splitFromPane}
-        onResize={handleResize}
-        onDropChatOnPane={handleDropChatOnPane}
-        onPickEmptyPane={layout.swapPaneChat}
-        onCancelEmpty={layout.cancelEmptyPane}
-        onNewChat={() => setDialogOpen(true)}
-        onEndSession={handleEndSession}
-        onReopenChat={handleReopenChat}
-        onDeleteChat={requestDeleteChat}
-        renderPaneBody={renderPaneBody}
-      />
+      <div className="flex flex-col h-full">
+        {isMobile && (
+          <MobileChatHeader
+            title={mobileTitle}
+            onNewChat={() => setDialogOpen(true)}
+          />
+        )}
+        <div className="flex-1 min-h-0">
+          <ChatLayout
+            panes={layout.state.panes}
+            focused={layout.state.focused}
+            sizes={layout.state.sizes}
+            availableChats={availableChats}
+            draggingChatId={layout.draggingChatId}
+            isMobile={isMobile}
+            onFocus={layout.focus}
+            onClose={layout.closePane}
+            onSplit={layout.splitFromPane}
+            onResize={handleResize}
+            onDropChatOnPane={handleDropChatOnPane}
+            onPickEmptyPane={layout.swapPaneChat}
+            onCancelEmpty={layout.cancelEmptyPane}
+            onNewChat={() => setDialogOpen(true)}
+            onEndSession={handleEndSession}
+            onReopenChat={handleReopenChat}
+            onDeleteChat={requestDeleteChat}
+            renderPaneBody={renderPaneBody}
+          />
+        </div>
+      </div>
       {evictToast && (
         <div className="chat-evict-toast" role="status" aria-live="polite">
           <span className="chat-evict-toast-text">

web/src/pages/Chat/MobileChatHeader.tsx

@@ -0,0 +1,49 @@
+import { useMobileSidebar } from '../../context/MobileSidebarContext';
+
+interface Props {
+  title: string;
+  onNewChat: () => void;
+}
+
+export function MobileChatHeader({ title, onNewChat }: Props) {
+  const { toggle } = useMobileSidebar();
+  return (
+    <header
+      className="flex items-center justify-between gap-2 px-3 py-2 border-b md:hidden"
+      style={{ backgroundColor: 'var(--bg0)', borderColor: 'var(--bg3)' }}
+    >
+      <button
+        type="button"
+        onClick={toggle}
+        className="p-1 rounded hover:opacity-80 transition-opacity shrink-0"
+        style={{ color: 'var(--fg)' }}
+        aria-label="Toggle sidebar"
+      >
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+          <rect x="2" y="4" width="16" height="2" rx="1" fill="currentColor" />
+          <rect x="2" y="9" width="16" height="2" rx="1" fill="currentColor" />
+          <rect x="2" y="14" width="16" height="2" rx="1" fill="currentColor" />
+        </svg>
+      </button>
+      <h1
+        className="flex-1 min-w-0 truncate text-sm text-center font-normal m-0"
+        style={{ color: 'var(--fg)' }}
+        title={title}
+      >
+        {title}
+      </h1>
+      <button
+        type="button"
+        onClick={onNewChat}
+        className="p-1 rounded hover:opacity-80 transition-opacity shrink-0"
+        style={{ color: 'var(--aqua)' }}
+        aria-label="New chat"
+        title="New chat"
+      >
+        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+        </svg>
+      </button>
+    </header>
+  );
+}