Add mobile message navigation in header

Add a dropdown button next to the terminal icon that shows current
message position (e.g. "2/5") and allows jumping between messages.
Only visible on mobile when there are multiple messages.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: gergesh

packages/desktop/src/context/layout.tsx

@@ -77,10 +77,17 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         filesCount?: number
         onOpen?: () => void
       }
+      mobileMessageNav: {
+        visible?: boolean
+        messages?: { id: string; title?: string }[]
+        currentIndex?: number
+        onSelect?: (index: number) => void
+      }
     }>({
       connect: {},
       dialog: {},
       mobileReview: {},
+      mobileMessageNav: {},
     })
     const usedColors = new Set<AvatarColorKey>()
 
@@ -280,6 +287,21 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           setEphemeral("mobileReview", { visible: false, filesCount: 0, onOpen: undefined })
         },
       },
+      mobileMessageNav: {
+        visible: createMemo(() => ephemeral.mobileMessageNav?.visible ?? false),
+        messages: createMemo(() => ephemeral.mobileMessageNav?.messages ?? []),
+        currentIndex: createMemo(() => ephemeral.mobileMessageNav?.currentIndex ?? 0),
+        onSelect: createMemo(() => ephemeral.mobileMessageNav?.onSelect),
+        register(messages: { id: string; title?: string }[], currentIndex: number, onSelect: (index: number) => void) {
+          setEphemeral("mobileMessageNav", { visible: true, messages, currentIndex, onSelect })
+        },
+        update(currentIndex: number) {
+          setEphemeral("mobileMessageNav", "currentIndex", currentIndex)
+        },
+        unregister() {
+          setEphemeral("mobileMessageNav", { visible: false, messages: [], currentIndex: 0, onSelect: undefined })
+        },
+      },
       theme: {
         current: createMemo(() => store.theme),
         set(themeId: string) {

packages/desktop/src/pages/layout.tsx

@@ -857,7 +857,44 @@ export default function Layout(props: ParentProps) {
                 <FontPicker />
                 <ThemePicker />
               </div>
-              <div class="flex items-center gap-4">
+              <div class="flex items-center gap-2">
+                {/* Mobile message navigation */}
+                <Show when={layout.mobileMessageNav.visible()}>
+                  <div class="sm:hidden">
+                    <DropdownMenu>
+                      <DropdownMenu.Trigger
+                        as={Button}
+                        variant="ghost"
+                        size="small"
+                        class="gap-1 px-2"
+                      >
+                        <span class="text-12-medium">
+                          {layout.mobileMessageNav.currentIndex() + 1}/{layout.mobileMessageNav.messages().length}
+                        </span>
+                        <Icon name="chevron-down" size="small" />
+                      </DropdownMenu.Trigger>
+                      <DropdownMenu.Portal>
+                        <DropdownMenu.Content class="max-w-[calc(100vw-2rem)] max-h-80 overflow-y-auto">
+                          <For each={layout.mobileMessageNav.messages()}>
+                            {(msg, index) => (
+                              <DropdownMenu.Item onSelect={() => layout.mobileMessageNav.onSelect()?.(index())}>
+                                <DropdownMenu.ItemLabel class="flex items-center gap-3">
+                                  <span class="text-text-weak shrink-0">{index() + 1}</span>
+                                  <span class="truncate">{msg.title || "Message"}</span>
+                                </DropdownMenu.ItemLabel>
+                                <Show when={index() === layout.mobileMessageNav.currentIndex()}>
+                                  <DropdownMenu.ItemIndicator>
+                                    <Icon name="check-small" size="small" />
+                                  </DropdownMenu.ItemIndicator>
+                                </Show>
+                              </DropdownMenu.Item>
+                            )}
+                          </For>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Portal>
+                    </DropdownMenu>
+                  </div>
+                </Show>
                 <Tooltip
                   class="shrink-0"
                   value={

packages/desktop/src/pages/session.tsx

@@ -153,6 +153,25 @@ export default function Page() {
     layout.mobileReview.unregister()
   })
 
+  // Register mobile message navigation in header when there are multiple messages
+  createEffect(() => {
+    const messages = visibleUserMessages()
+    if (messages.length > 1) {
+      const currentIndex = messages.findIndex((m) => m.id === activeMessage()?.id)
+      layout.mobileMessageNav.register(
+        messages.map((m) => ({ id: m.id, title: m.summary?.title })),
+        currentIndex >= 0 ? currentIndex : 0,
+        (index) => setActiveMessage(messages[index])
+      )
+    } else {
+      layout.mobileMessageNav.unregister()
+    }
+  })
+
+  onCleanup(() => {
+    layout.mobileMessageNav.unregister()
+  })
+
   createEffect(() => {
     if (layout.terminal.opened()) {
       if (terminal.all().length === 0) {